From 7fb48b25448f52e58974687c88b1a5745ebc2047 Mon Sep 17 00:00:00 2001
From: DrMint <thomas.barillot@etu.u-bordeaux.fr>
Date: Mon, 31 Jan 2022 13:16:30 +0100
Subject: [PATCH] Fixed bug: Button couldn't be clicked

---
 src/components/Button.tsx                     | 14 +++-
 .../PanelComponents/ReturnButton.tsx          |  9 +--
 src/pages/chronology/overview.tsx             |  2 +-
 src/pages/library/[slug].tsx                  | 72 ++++++++++++++-----
 4 files changed, 70 insertions(+), 27 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 31ae773..a2d217e 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,10 +1,13 @@
+import Link from "next/link";
+
 type ButtonProps = {
   className?: string;
+  href?: string;
   children: React.ReactChild | React.ReactChild[];
 };
 
 export default function Button(props: ButtonProps): JSX.Element {
-  return (
+  const button = (
     <div
       className={
         "grid place-content-center place-items-center border-[1px] border-dark text-dark rounded-full cursor-pointer px-4 py-2 transition-colors hover:text-light hover:bg-dark" +
@@ -15,4 +18,13 @@ export default function Button(props: ButtonProps): JSX.Element {
       {props.children}
     </div>
   );
+
+  const result = props.href ? (
+    <Link href={props.href} passHref>
+      {button}
+    </Link>
+  ) : (
+    button
+  );
+  return result;
 }
diff --git a/src/components/PanelComponents/ReturnButton.tsx b/src/components/PanelComponents/ReturnButton.tsx
index c23a3ae..18921ae 100644
--- a/src/components/PanelComponents/ReturnButton.tsx
+++ b/src/components/PanelComponents/ReturnButton.tsx
@@ -1,15 +1,10 @@
 import Button from "components/Button";
-import Link from "next/link";
 
 type ReturnButtonProps = {
-  url: string;
+  href: string;
   title: string;
 };
 
 export default function ReturnButton(props: ReturnButtonProps): JSX.Element {
-  return (
-    <Link href={props.url} passHref>
-      <Button>❮&emsp;Return to {props.title}</Button>
-    </Link>
-  );
+  return <Button href={props.href}>❮&emsp;Return to {props.title}</Button>;
 }
diff --git a/src/pages/chronology/overview.tsx b/src/pages/chronology/overview.tsx
index 058464e..0e1e331 100644
--- a/src/pages/chronology/overview.tsx
+++ b/src/pages/chronology/overview.tsx
@@ -41,7 +41,7 @@ export default function ChronologyOverview(props: Props): JSX.Element {
   return (
     <>
       <SubPanel>
-        <ReturnButton url="/chronology" title="Chronology" />
+        <ReturnButton href="/chronology" title="Chronology" />
         <HorizontalLine />
 
         {props.chronologyEras.chronologyEras.data.map((era) => (
diff --git a/src/pages/library/[slug].tsx b/src/pages/library/[slug].tsx
index 1111f16..afc68d7 100644
--- a/src/pages/library/[slug].tsx
+++ b/src/pages/library/[slug].tsx
@@ -49,7 +49,7 @@ export default function Library(props: Props): JSX.Element {
   return (
     <>
       <SubPanel>
-        <ReturnButton title="Library" url="/library" />
+        <ReturnButton title="Library" href="/library" />
         <HorizontalLine />
 
         <NavOption title="Summary" url="#summary" border={true} />
@@ -103,21 +103,15 @@ export default function Library(props: Props): JSX.Element {
               {libraryItem.attributes.subitem_of.data.length > 0 ? (
                 <div className="grid place-items-center">
                   <p>Subitem of</p>
-                  <Link
+                  <Button
                     href={`/library/${libraryItem.attributes.subitem_of.data[0].attributes.slug}`}
-                    passHref
                   >
-                    <Button>
-                      {
-                        libraryItem.attributes.subitem_of.data[0].attributes
-                          .title
-                      }
-                      {libraryItem.attributes.subitem_of.data[0].attributes
-                        .subtitle
-                        ? ` - ${libraryItem.attributes.subitem_of.data[0].attributes.subtitle}`
-                        : ""}
-                    </Button>
-                  </Link>
+                    {libraryItem.attributes.subitem_of.data[0].attributes.title}
+                    {libraryItem.attributes.subitem_of.data[0].attributes
+                      .subtitle
+                      ? ` - ${libraryItem.attributes.subitem_of.data[0].attributes.subtitle}`
+                      : ""}
+                  </Button>
                 </div>
               ) : (
                 ""
@@ -271,10 +265,52 @@ export default function Library(props: Props): JSX.Element {
                         subdirectory_arrow_right
                       </span>
 
-                      <Button>View scan</Button>
-                      <Button>Read content</Button>
-                      <Button>Listen content</Button>
-                      <Button>View content</Button>
+                      {content.attributes.scan_set.data ? (
+                        <Button
+                          href={`/scans/${content.attributes.scan_set.data.attributes.slug}`}
+                        >
+                          View scan
+                        </Button>
+                      ) : (
+                        ""
+                      )}
+
+                      {content.attributes.text_set.data ? (
+                        <Button
+                          href={`/read/${content.attributes.text_set.data.attributes.slug}`}
+                        >
+                          Read content
+                        </Button>
+                      ) : (
+                        ""
+                      )}
+
+                      {content.attributes.audio_set.data ? (
+                        <Button
+                          href={`/listen/${content.attributes.audio_set.data.attributes.slug}`}
+                        >
+                          Listen content
+                        </Button>
+                      ) : (
+                        ""
+                      )}
+
+                      {content.attributes.video_set.data ? (
+                        <Button
+                          href={`/watch/${content.attributes.video_set.data.attributes.slug}`}
+                        >
+                          View content
+                        </Button>
+                      ) : (
+                        ""
+                      )}
+
+                      {!content.attributes.scan_set.data &&
+                      !content.attributes.text_set.data &&
+                      !content.attributes.audio_set.data &&
+                      !content.attributes.video_set.data
+                        ? "The content is not available"
+                        : ""}
                     </div>
                   </div>
                 ))}