Merge pull request #14 from Accords-Library/develop

Fixed bug with thumbnail

src/components/Content/ThumbnailHeader.tsx

@@ -14,7 +14,7 @@ export type ThumbnailHeaderProps = {
   description?: string;
   type?: GetContentQuery["contents"]["data"][number]["attributes"]["type"];
   categories?: GetContentQuery["contents"]["data"][number]["attributes"]["categories"];
-  thumbnail?: GetContentQuery["contents"]["data"][number]["attributes"]["thumbnail"];
+  thumbnail?: GetContentQuery["contents"]["data"][number]["attributes"]["thumbnail"]["data"]["attributes"];
   langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
 };
 
@@ -36,10 +36,10 @@ export default function ThumbnailHeader(
     <>
       <div className="grid place-items-center gap-12 mb-12">
         <div className="drop-shadow-shade-lg">
-          {thumbnail && thumbnail.data ? (
+          {thumbnail ? (
             <Img
               className=" rounded-xl"
-              image={thumbnail.data.attributes}
+              image={thumbnail}
               quality={ImageQuality.Medium}
               priority
             />

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

@@ -41,7 +41,7 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
       />
       <div className="grid place-items-center">
         <ThumbnailHeader
-          thumbnail={content.thumbnail}
+          thumbnail={content.thumbnail.data?.attributes}
           pre_title={
             content.titles.length > 0 ? content.titles[0].pre_title : undefined
           }

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

@@ -162,7 +162,7 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
       />
       <div className="grid place-items-center">
         <ThumbnailHeader
-          thumbnail={content.thumbnail}
+          thumbnail={content.thumbnail.data?.attributes}
           pre_title={
             content.titles.length > 0 ? content.titles[0].pre_title : undefined
           }

src/pages/news/[slug].tsx

@@ -12,7 +12,7 @@ import SubPanel from "components/Panels/SubPanel";
 import RecorderChip from "components/RecorderChip";
 import ToolTip from "components/ToolTip";
 import { getPost, getPostsSlugs } from "graphql/operations";
-import { GetPostQuery } from "graphql/operations-types";
+import { GetPostQuery, StrapiImage } from "graphql/operations-types";
 import { GetStaticPaths, GetStaticProps } from "next";
 import { useRouter } from "next/router";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
@@ -27,6 +27,13 @@ export default function LibrarySlug(props: PostProps): JSX.Element {
   const { post, postId, langui } = props;
   const router = useRouter();
 
+  const thumbnail: StrapiImage | undefined =
+    post.translations.length > 0 && post.translations[0].thumbnail.data
+      ? post.translations[0].thumbnail.data.attributes
+      : post.thumbnail.data
+      ? post.thumbnail.data.attributes
+      : undefined;
+
   const subPanel = (
     <SubPanel>
       <ReturnButton
@@ -83,11 +90,7 @@ export default function LibrarySlug(props: PostProps): JSX.Element {
       />
 
       <ThumbnailHeader
-        thumbnail={
+        thumbnail={thumbnail}
-          post.translations.length > 0 && post.translations[0].thumbnail.data
-            ? post.translations[0].thumbnail
-            : post.thumbnail
-        }
         title={
           post.translations.length > 0
             ? post.translations[0].title
@@ -120,7 +123,7 @@ export default function LibrarySlug(props: PostProps): JSX.Element {
       }
       contentPanel={contentPanel}
       subPanel={subPanel}
-      thumbnail={post.translations[0].thumbnail.data?.attributes}
+      thumbnail={thumbnail}
       {...props}
     />
   );