Contents only have one folder now

src/components/Translated.tsx

@@ -5,6 +5,7 @@ import { NavOption } from "./PanelComponents/NavOption";
 import { ChroniclePreview } from "./Chronicles/ChroniclePreview";
 import { ChroniclesList } from "./Chronicles/ChroniclesList";
 import { Button } from "./Inputs/Button";
+import { ReturnButton } from "./PanelComponents/ReturnButton";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { PreviewFolder } from "pages/contents/folder/[slug]";
 
@@ -200,3 +201,26 @@ export const TranslatedPreviewFolder = ({
     />
   );
 };
+
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const TranslatedReturnButton = ({
+  translations,
+  fallback,
+  ...otherProps
+}: TranslatedProps<
+  Parameters<typeof ReturnButton>[0],
+  "title"
+>): JSX.Element => {
+  const [selectedTranslation] = useSmartLanguage({
+    items: translations,
+    languageExtractor,
+  });
+
+  return (
+    <ReturnButton
+      title={selectedTranslation?.title ?? fallback.title}
+      {...otherProps}
+    />
+  );
+};

src/graphql/operations/getContentText.graphql

@@ -214,9 +214,8 @@ query getContentText($slug: String, $language_code: String) {
             }
           }
         }
-        folders(pagination: { limit: -1 }) {
+        folder {
           data {
-            id
             attributes {
               slug
               titles(pagination: { limit: -1 }) {

src/pages/api/revalidate.ts

@@ -35,6 +35,9 @@ type HookContent = {
   model: "content";
   entry: {
     slug: string;
+    folder?: {
+      slug: string;
+    };
     ranged_contents: {
       slug: string;
     }[];
@@ -160,9 +163,15 @@ const Revalidate = (
     case "content": {
       paths.push(`/contents`);
       paths.push(`/contents/${body.entry.slug}`);
+      if (body.entry.folder?.slug) {
+        paths.push(`/contents/folder/${body.entry.folder.slug}`);
+      }
       serverRuntimeConfig.locales?.forEach((locale: string) => {
         paths.push(`/${locale}/contents`);
         paths.push(`/${locale}/contents/${body.entry.slug}`);
+        if (body.entry.folder?.slug) {
+          paths.push(`/${locale}/contents/folder/${body.entry.folder.slug}`);
+        }
       });
       if (body.entry.ranged_contents.length > 0) {
         body.entry.ranged_contents.forEach((ranged_content) => {

src/pages/contents/[slug].tsx

@@ -5,10 +5,7 @@ import { Chip } from "components/Chip";
 import { HorizontalLine } from "components/HorizontalLine";
 import { PreviewCardCTAs } from "components/Library/PreviewCardCTAs";
 import { Markdawn, TableOfContents } from "components/Markdown/Markdawn";
-import {
+import { ReturnButtonType } from "components/PanelComponents/ReturnButton";
-  ReturnButton,
-  ReturnButtonType,
-} from "components/PanelComponents/ReturnButton";
 import { ContentPanel } from "components/Panels/ContentPanel";
 import { SubPanel } from "components/Panels/SubPanel";
 import { PreviewCard } from "components/PreviewCard";
@@ -34,8 +31,8 @@ import { useMediaMobile } from "hooks/useMediaQuery";
 import { AnchorIds, useScrollTopOnChange } from "hooks/useScrollTopOnChange";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import {
-  TranslatedPreviewFolder,
   TranslatedPreviewLine,
+  TranslatedReturnButton,
 } from "components/Translated";
 import { getOpenGraph } from "helpers/openGraph";
 import {
@@ -78,50 +75,56 @@ const Content = ({
   const { previousContent, nextContent } = useMemo(
     () => ({
       previousContent:
-        content.folders?.data[0]?.attributes?.contents &&
+        content.folder?.data?.attributes?.contents &&
-        content.folders.data[0].attributes.sequence
+        content.folder.data.attributes.sequence
           ? getPreviousContent(
-              content.folders.data[0].attributes.contents.data,
+              content.folder.data.attributes.contents.data,
               content.slug
             )
           : undefined,
       nextContent:
-        content.folders?.data[0]?.attributes?.contents &&
+        content.folder?.data?.attributes?.contents &&
-        content.folders.data[0].attributes.sequence
+        content.folder.data.attributes.sequence
           ? getNextContent(
-              content.folders.data[0].attributes.contents.data,
+              content.folder.data.attributes.contents.data,
               content.slug
             )
           : undefined,
     }),
-    [content.folders, content.slug]
+    [content.folder, content.slug]
+  );
+
+  const returnButtonProps = useMemo(
+    () => ({
+      href: content.folder?.data?.attributes
+        ? `/contents/folder/${content.folder.data.attributes.slug}`
+        : "/contents",
+
+      translations: filterHasAttributes(
+        content.folder?.data?.attributes?.titles,
+        ["language.data.attributes.code"] as const
+      ).map((title) => ({
+        language: title.language.data.attributes.code,
+        title: title.title,
+      })),
+      fallback: {
+        title: content.folder?.data?.attributes
+          ? prettySlug(content.folder.data.attributes.slug)
+          : langui.contents,
+      },
+      langui,
+    }),
+    [content.folder?.data?.attributes, langui]
   );
 
   const subPanel = useMemo(
     () => (
       <SubPanel>
-        {content.folders?.data && content.folders.data.length > 0 && (
+        <TranslatedReturnButton
-          <>
+          {...returnButtonProps}
-            <h2 className="mb-2 text-xl">{langui.folders}</h2>
+          displayOn={ReturnButtonType.Desktop}
-            {filterHasAttributes(content.folders.data, [
+          horizontalLine
-              "attributes",
+        />
-              "id",
-            ] as const).map((folder) => (
-              <TranslatedPreviewFolder
-                key={folder.id}
-                href={`/contents/folder/${folder.attributes.slug}`}
-                translations={filterHasAttributes(folder.attributes.titles, [
-                  "language.data.attributes.code",
-                ] as const).map((title) => ({
-                  language: title.language.data.attributes.code,
-                  title: title.title,
-                }))}
-                fallback={{ title: prettySlug(folder.attributes.slug) }}
-              />
-            ))}
-            <HorizontalLine />
-          </>
-        )}
 
         {selectedTranslation?.text_set?.source_language?.data?.attributes
           ?.code !== undefined && (
@@ -330,11 +333,11 @@ const Content = ({
       </SubPanel>
     ),
     [
-      content.folders?.data,
       content.ranged_contents?.data,
       currencies,
       languages,
       langui,
+      returnButtonProps,
       selectedTranslation,
     ]
   );
@@ -342,10 +345,8 @@ const Content = ({
   const contentPanel = useMemo(
     () => (
       <ContentPanel>
-        <ReturnButton
+        <TranslatedReturnButton
-          href={`/contents/folder`}
+          {...returnButtonProps}
-          title={langui.contents}
-          langui={langui}
           displayOn={ReturnButtonType.Mobile}
           className="mb-10"
         />
@@ -481,6 +482,7 @@ const Content = ({
       langui,
       nextContent?.attributes,
       previousContent?.attributes,
+      returnButtonProps,
       selectedTranslation?.description,
       selectedTranslation?.pre_title,
       selectedTranslation?.subtitle,
@@ -605,7 +607,7 @@ export const getStaticPaths: GetStaticPaths = async (context) => {
 type FolderContents = NonNullable<
   NonNullable<
     NonNullable<
-      NonNullable<ContentWithTranslations["folders"]>["data"][number]
+      NonNullable<ContentWithTranslations["folder"]>["data"]
     >["attributes"]
   >["contents"]
 >["data"];