feat: add language-filtered Discover pages (#1111)

src/components/Discover/DiscoverMovieLanguage/index.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import type { MovieResult } from '../../../../server/models/Search';
+import ListView from '../../Common/ListView';
+import { defineMessages, useIntl } from 'react-intl';
+import Header from '../../Common/Header';
+import PageTitle from '../../Common/PageTitle';
+import { useRouter } from 'next/router';
+import globalMessages from '../../../i18n/globalMessages';
+import useDiscover from '../../../hooks/useDiscover';
+import Error from '../../../pages/_error';
+
+const messages = defineMessages({
+  languageMovies: '{language} Movies',
+});
+
+const DiscoverMovieLanguage: React.FC = () => {
+  const router = useRouter();
+  const intl = useIntl();
+
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+  } = useDiscover<
+    MovieResult,
+    {
+      originalLanguage: {
+        iso_639_1: string;
+        english_name: string;
+        name: string;
+      };
+    }
+  >(`/api/v1/discover/movies/language/${router.query.language}`);
+
+  if (error) {
+    return <Error statusCode={500} />;
+  }
+
+  const title = isLoadingInitialData
+    ? intl.formatMessage(globalMessages.loading)
+    : intl.formatMessage(messages.languageMovies, {
+        language: intl.formatDisplayName(router.query.language as string, {
+          type: 'language',
+          fallback: 'none',
+        }),
+      });
+
+  return (
+    <>
+      <PageTitle title={title} />
+      <div className="mt-1 mb-5">
+        <Header>{title}</Header>
+      </div>
+      <ListView
+        items={titles}
+        isEmpty={isEmpty}
+        isLoading={
+          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+        }
+        isReachingEnd={isReachingEnd}
+        onScrollBottom={fetchMore}
+      />
+    </>
+  );
+};
+
+export default DiscoverMovieLanguage;

src/components/Discover/DiscoverTvLanguage/index.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import type { TvResult } from '../../../../server/models/Search';
+import ListView from '../../Common/ListView';
+import { defineMessages, useIntl } from 'react-intl';
+import Header from '../../Common/Header';
+import PageTitle from '../../Common/PageTitle';
+import { useRouter } from 'next/router';
+import globalMessages from '../../../i18n/globalMessages';
+import useDiscover from '../../../hooks/useDiscover';
+import Error from '../../../pages/_error';
+
+const messages = defineMessages({
+  languageSeries: '{language} Series',
+});
+
+const DiscoverTvLanguage: React.FC = () => {
+  const router = useRouter();
+  const intl = useIntl();
+
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+  } = useDiscover<
+    TvResult,
+    {
+      originalLanguage: {
+        iso_639_1: string;
+        english_name: string;
+        name: string;
+      };
+    }
+  >(`/api/v1/discover/tv/language/${router.query.language}`);
+
+  if (error) {
+    return <Error statusCode={500} />;
+  }
+
+  const title = isLoadingInitialData
+    ? intl.formatMessage(globalMessages.loading)
+    : intl.formatMessage(messages.languageSeries, {
+        language: intl.formatDisplayName(router.query.language as string, {
+          type: 'language',
+          fallback: 'none',
+        }),
+      });
+
+  return (
+    <>
+      <PageTitle title={title} />
+      <div className="mt-1 mb-5">
+        <Header>{title}</Header>
+      </div>
+      <ListView
+        items={titles}
+        isEmpty={isEmpty}
+        isLoading={
+          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+        }
+        isReachingEnd={isReachingEnd}
+        onScrollBottom={fetchMore}
+      />
+    </>
+  );
+};
+
+export default DiscoverTvLanguage;

src/components/MovieDetails/index.tsx

@@ -651,19 +651,23 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 </span>
               </div>
             )}
-            {data.spokenLanguages.some(
-              (lng) => lng.iso_639_1 === data.originalLanguage
-            ) && (
+            {data.originalLanguage && (
               <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
                 <span className="text-sm">
                   {intl.formatMessage(messages.originallanguage)}
                 </span>
                 <span className="flex-1 text-sm text-right text-gray-400">
-                  {
-                    data.spokenLanguages.find(
-                      (lng) => lng.iso_639_1 === data.originalLanguage
-                    )?.name
-                  }
+                  <Link href={`/discover/tv/language/${data.originalLanguage}`}>
+                    <a className="hover:underline">
+                      {intl.formatDisplayName(data.originalLanguage, {
+                        type: 'language',
+                        fallback: 'none',
+                      }) ??
+                        data.spokenLanguages.find(
+                          (lng) => lng.iso_639_1 === data.originalLanguage
+                        )?.name}
+                    </a>
+                  </Link>
                 </span>
               </div>
             )}

src/components/TvDetails/index.tsx

@@ -675,19 +675,23 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                 {data.status}
               </span>
             </div>
-            {data.spokenLanguages.some(
-              (lng) => lng.iso_639_1 === data.originalLanguage
-            ) && (
+            {data.originalLanguage && (
               <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
                 <span className="text-sm">
                   {intl.formatMessage(messages.originallanguage)}
                 </span>
                 <span className="flex-1 text-sm text-right text-gray-400">
-                  {
-                    data.spokenLanguages.find(
-                      (lng) => lng.iso_639_1 === data.originalLanguage
-                    )?.name
-                  }
+                  <Link href={`/discover/tv/language/${data.originalLanguage}`}>
+                    <a className="hover:underline">
+                      {intl.formatDisplayName(data.originalLanguage, {
+                        type: 'language',
+                        fallback: 'none',
+                      }) ??
+                        data.spokenLanguages.find(
+                          (lng) => lng.iso_639_1 === data.originalLanguage
+                        )?.name}
+                    </a>
+                  </Link>
                 </span>
               </div>
             )}