Added a little message box whenever content is not available in the current language

src/components/AppLayout.tsx

@@ -1,7 +1,4 @@
-import {
+import { StrapiImage } from "graphql/operations-types";
-  GetWebsiteInterfaceQuery,
-  StrapiImage,
-} from "graphql/operations-types";
 import MainPanel from "./Panels/MainPanel";
 import Head from "next/head";
 import { useSwipeable } from "react-swipeable";

src/components/LanguageSwitcher.tsx

@@ -0,0 +1,43 @@
+import {
+  GetLanguagesQuery,
+  GetWebsiteInterfaceQuery,
+} from "graphql/operations-types";
+import { NextRouter } from "next/router";
+import { prettyLanguage } from "queries/helpers";
+import Button from "./Button";
+
+type HorizontalLineProps = {
+  className?: string;
+  locales: string[];
+  router: NextRouter;
+  languages: GetLanguagesQuery["languages"]["data"];
+  langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
+};
+
+export default function HorizontalLine(
+  props: HorizontalLineProps
+): JSX.Element {
+  const { locales, router } = props;
+  return (
+    <div className="w-full grid place-content-center">
+      <div className="flex flex-col place-items-center text-center gap-4 my-12 border-2 border-mid rounded-xl p-8 max-w-lg">
+        <p>
+          This content is not available in the currently selected language. You
+          can select one the following languages instead:
+        </p>
+        <div className="flex flex-wrap flex-row gap-2">
+          {locales.map((locale, index) => (
+            <Button
+              key={index}
+              active={locale === router.locale}
+              href={router.asPath}
+              locale={locale}
+            >
+              {prettyLanguage(locale, props.languages)}
+            </Button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/graphql/operation.graphql

@@ -1301,3 +1301,57 @@ query getPostsPreview($language_code: String) {
     }
   }
 }
+
+query getPostLanguages($slug: String) {
+  posts(filters: { slug: { eq: $slug } }) {
+    data {
+      attributes {
+        translations {
+          language {
+            data {
+              attributes {
+                code
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+query getContentLanguages($slug: String) {
+  contents(filters: { slug: { eq: $slug } }) {
+    data {
+      attributes {
+        text_set {
+          language {
+            data {
+              attributes {
+                code
+              }
+            }
+          }
+        }
+        video_set {
+          language {
+            data {
+              attributes {
+                code
+              }
+            }
+          }
+        }
+        audio_set {
+          language {
+            data {
+              attributes {
+                code
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/graphql/operations-types.ts

@@ -1737,3 +1737,77 @@ export type GetPostsPreviewQuery = {
     }>;
   };
 };
+
+export type GetPostLanguagesQueryVariables = Exact<{
+  slug: InputMaybe<Scalars["String"]>;
+}>;
+
+export type GetPostLanguagesQuery = {
+  __typename: "Query";
+  posts: {
+    __typename: "PostEntityResponseCollection";
+    data: Array<{
+      __typename: "PostEntity";
+      attributes: {
+        __typename: "Post";
+        translations: Array<{
+          __typename: "ComponentTranslationsPosts";
+          language: {
+            __typename: "LanguageEntityResponse";
+            data: {
+              __typename: "LanguageEntity";
+              attributes: { __typename: "Language"; code: string };
+            };
+          };
+        }>;
+      };
+    }>;
+  };
+};
+
+export type GetContentLanguagesQueryVariables = Exact<{
+  slug: InputMaybe<Scalars["String"]>;
+}>;
+
+export type GetContentLanguagesQuery = {
+  __typename: "Query";
+  contents: {
+    __typename: "ContentEntityResponseCollection";
+    data: Array<{
+      __typename: "ContentEntity";
+      attributes: {
+        __typename: "Content";
+        text_set: Array<{
+          __typename: "ComponentSetsTextSet";
+          language: {
+            __typename: "LanguageEntityResponse";
+            data: {
+              __typename: "LanguageEntity";
+              attributes: { __typename: "Language"; code: string };
+            };
+          };
+        }>;
+        video_set: Array<{
+          __typename: "ComponentSetsVideoSet";
+          language: {
+            __typename: "LanguageEntityResponse";
+            data: {
+              __typename: "LanguageEntity";
+              attributes: { __typename: "Language"; code: string };
+            };
+          };
+        }>;
+        audio_set: Array<{
+          __typename: "ComponentSetsAudioSet";
+          language: {
+            __typename: "LanguageEntityResponse";
+            data: {
+              __typename: "LanguageEntity";
+              attributes: { __typename: "Language"; code: string };
+            };
+          };
+        }>;
+      };
+    }>;
+  };
+};

src/graphql/operations.ts

@@ -3,6 +3,8 @@ import { readFileSync } from "fs";
 import {
   GetChronologyItemsQuery,
   GetChronologyItemsQueryVariables,
+  GetContentLanguagesQuery,
+  GetContentLanguagesQueryVariables,
   GetContentQuery,
   GetContentQueryVariables,
   GetContentsQuery,
@@ -23,6 +25,8 @@ import {
   GetLibraryItemsPreviewQueryVariables,
   GetLibraryItemsSlugsQuery,
   GetLibraryItemsSlugsQueryVariables,
+  GetPostLanguagesQuery,
+  GetPostLanguagesQueryVariables,
   GetPostQuery,
   GetPostQueryVariables,
   GetPostsPreviewQuery,
@@ -168,3 +172,19 @@ export async function getPostsPreview(
   const query = getQueryFromOperations("getPostsPreview");
   return await graphQL(query, JSON.stringify(variables));
 }
+
+export async function getPostLanguages(
+  variables: GetPostLanguagesQueryVariables
+): Promise<GetPostLanguagesQuery> {
+  const query = getQueryFromOperations("getPostLanguages");
+  console.log(query);
+  return await graphQL(query, JSON.stringify(variables));
+}
+
+export async function getContentLanguages(
+  variables: GetContentLanguagesQueryVariables
+): Promise<GetContentLanguagesQuery> {
+  const query = getQueryFromOperations("getContentLanguages");
+  console.log(query);
+  return await graphQL(query, JSON.stringify(variables));
+}

src/pages/contents/[slug]/read.tsx

@@ -1,5 +1,9 @@
 import { GetStaticPaths, GetStaticProps } from "next";
-import { getContentsSlugs, getContentText } from "graphql/operations";
+import {
+  getContentLanguages,
+  getContentsSlugs,
+  getContentText,
+} from "graphql/operations";
 import { GetContentTextQuery } from "graphql/operations-types";
 import ContentPanel from "components/Panels/ContentPanel";
 import HorizontalLine from "components/HorizontalLine";
@@ -25,15 +29,17 @@ import RecorderChip from "components/RecorderChip";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 import TOC from "components/Markdown/TOC";
 import ToolTip from "components/ToolTip";
+import LanguageSwitcher from "components/LanguageSwitcher";
 
 interface ContentReadProps extends AppStaticProps {
   content: GetContentTextQuery["contents"]["data"][number]["attributes"];
   contentId: GetContentTextQuery["contents"]["data"][number]["id"];
+  locales: string[];
 }
 
 export default function ContentRead(props: ContentReadProps): JSX.Element {
   useTesting(props);
-  const { langui, content, languages } = props;
+  const { langui, content, languages, locales } = props;
   const router = useRouter();
 
   const subPanel = (
@@ -186,8 +192,15 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
 
         <HorizontalLine />
 
-        {content.text_set.length > 0 && content.text_set[0].text && (
+        {locales.includes(router.locale || "en") ? (
           <Markdawn router={router} text={content.text_set[0].text} />
+        ) : (
+          <LanguageSwitcher
+            locales={locales}
+            router={router}
+            languages={props.languages}
+            langui={props.langui}
+          />
         )}
       </div>
     </ContentPanel>
@@ -235,9 +248,10 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
+  const slug = context.params?.slug?.toString() || "";
   const content = (
     await getContentText({
-      slug: context.params?.slug?.toString() || "",
+      slug: slug,
       language_code: context.locale || "en",
     })
   ).contents.data[0];
@@ -245,6 +259,11 @@ export const getStaticProps: GetStaticProps = async (context) => {
     ...(await getAppStaticProps(context)),
     content: content.attributes,
     contentId: content.id,
+    locales: (
+      await getContentLanguages({ slug: slug })
+    ).contents.data[0].attributes.text_set.map((translation) => {
+      return translation.language.data.attributes.code;
+    }),
   };
   return {
     props: props,

src/pages/index.tsx

@@ -1,7 +1,8 @@
 import AppLayout from "components/AppLayout";
+import LanguageSwitcher from "components/LanguageSwitcher";
 import Markdawn from "components/Markdown/Markdawn";
 import ContentPanel from "components/Panels/ContentPanel";
-import { getPost } from "graphql/operations";
+import { getPost, getPostLanguages } from "graphql/operations";
 import { GetPostQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
 import { useRouter } from "next/router";
@@ -10,10 +11,11 @@ import { prettySlug } from "queries/helpers";
 
 interface HomeProps extends AppStaticProps {
   post: GetPostQuery["posts"]["data"][number]["attributes"];
+  locales: string[];
 }
 
 export default function Home(props: HomeProps): JSX.Element {
-  const { post } = props;
+  const { post, locales } = props;
   const router = useRouter();
 
   const contentPanel = (
@@ -25,8 +27,15 @@ export default function Home(props: HomeProps): JSX.Element {
           Discover • Analyse • Translate • Archive
         </h2>
       </div>
-      {post.translations.length > 0 && (
+      {locales.includes(router.locale || "en") ? (
         <Markdawn router={router} text={post.translations[0].body} />
+      ) : (
+        <LanguageSwitcher
+          locales={locales}
+          router={router}
+          languages={props.languages}
+          langui={props.langui}
+        />
       )}
     </ContentPanel>
   );
@@ -45,14 +54,20 @@ export default function Home(props: HomeProps): JSX.Element {
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
+  const slug = "home";
   const props: HomeProps = {
     ...(await getAppStaticProps(context)),
     post: (
       await getPost({
-        slug: "home",
+        slug: slug,
         language_code: context.locale || "en",
       })
     ).posts.data[0].attributes,
+    locales: (
+      await getPostLanguages({ slug: slug })
+    ).posts.data[0].attributes.translations.map((translation) => {
+      return translation.language.data.attributes.code;
+    }),
   };
   return {
     props: props,

src/pages/news/[slug].tsx

@@ -2,6 +2,7 @@ import AppLayout from "components/AppLayout";
 import Chip from "components/Chip";
 import ThumbnailHeader from "components/Content/ThumbnailHeader";
 import HorizontalLine from "components/HorizontalLine";
+import LanguageSwitcher from "components/LanguageSwitcher";
 import Markdawn from "components/Markdown/Markdawn";
 import TOC from "components/Markdown/TOC";
 import ReturnButton, {
@@ -11,7 +12,7 @@ import ContentPanel from "components/Panels/ContentPanel";
 import SubPanel from "components/Panels/SubPanel";
 import RecorderChip from "components/RecorderChip";
 import ToolTip from "components/ToolTip";
-import { getPost, getPostsSlugs } from "graphql/operations";
+import { getPost, getPostLanguages, getPostsSlugs } from "graphql/operations";
 import { GetPostQuery, StrapiImage } from "graphql/operations-types";
 import { GetStaticPaths, GetStaticProps } from "next";
 import { useRouter } from "next/router";
@@ -21,10 +22,11 @@ import { prettySlug, getStatusDescription } from "queries/helpers";
 interface PostProps extends AppStaticProps {
   post: GetPostQuery["posts"]["data"][number]["attributes"];
   postId: GetPostQuery["posts"]["data"][number]["id"];
+  locales: string[];
 }
 
 export default function LibrarySlug(props: PostProps): JSX.Element {
-  const { post, postId, langui } = props;
+  const { post, locales, langui } = props;
   const router = useRouter();
 
   const thumbnail: StrapiImage | undefined =
@@ -107,8 +109,15 @@ export default function LibrarySlug(props: PostProps): JSX.Element {
 
       <HorizontalLine />
 
-      {post.translations.length > 0 && post.translations[0].body && (
+      {locales.includes(router.locale || "en") ? (
         <Markdawn router={router} text={post.translations[0].body} />
+      ) : (
+        <LanguageSwitcher
+          locales={locales}
+          router={router}
+          languages={props.languages}
+          langui={props.langui}
+        />
       )}
     </ContentPanel>
   );
@@ -130,9 +139,10 @@ export default function LibrarySlug(props: PostProps): JSX.Element {
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
+  const slug = context.params?.slug?.toString() || "";
   const post = (
     await getPost({
-      slug: context.params?.slug?.toString() || "",
+      slug: slug,
       language_code: context.locale || "en",
     })
   ).posts.data[0];
@@ -140,6 +150,11 @@ export const getStaticProps: GetStaticProps = async (context) => {
     ...(await getAppStaticProps(context)),
     post: post.attributes,
     postId: post.id,
+    locales: (
+      await getPostLanguages({ slug: slug })
+    ).posts.data[0].attributes.translations.map((translation) => {
+      return translation.language.data.attributes.code;
+    }),
   };
   return {
     props: props,