Made useSmartLanguage not default export and created useLightBox

src/components/Library/ScanSet.tsx

@@ -9,13 +9,10 @@ import { getAssetFilename, getAssetURL, ImageQuality } from "helpers/img";
 import { isInteger } from "helpers/numbers";
 import { getStatusDescription } from "helpers/others";
 import { Immutable } from "helpers/types";
-import useSmartLanguage from "hooks/useSmartLanguage";
+import { useSmartLanguage } from "hooks/useSmartLanguage";
-import { Dispatch, SetStateAction } from "react";
 
 interface Props {
-  setLightboxOpen: Dispatch<SetStateAction<boolean>>;
+  openLightBox: (images: string[], index?: number) => void;
-  setLightboxImages: Dispatch<SetStateAction<string[]>>;
-  setLightboxIndex: Dispatch<SetStateAction<number>>;
   scanSet: Exclude<
     Exclude<
       Exclude<
@@ -52,17 +49,8 @@ interface Props {
 }
 
 export default function ScanSet(props: Immutable<Props>): JSX.Element {
-  const {
+  const { openLightBox, scanSet, slug, title, languages, langui, content } =
-    setLightboxOpen,
+    props;
-    setLightboxImages,
-    setLightboxIndex,
-    scanSet,
-    slug,
-    title,
-    languages,
-    langui,
-    content,
-  } = props;
 
   const [selectedScan, LanguageSwitcher] = useSmartLanguage({
     items: scanSet,
@@ -219,9 +207,7 @@ export default function ScanSet(props: Immutable<Props>): JSX.Element {
                         getAssetURL(image.attributes.url, ImageQuality.Large)
                       );
                   });
-                  setLightboxOpen(true);
+                  openLightBox(images, index);
-                  setLightboxImages(images);
-                  setLightboxIndex(index);
                 }}
               >
                 {page.attributes && (

src/components/Library/ScanSetCover.tsx

@@ -10,13 +10,10 @@ import { AppStaticProps } from "graphql/getAppStaticProps";
 import { getAssetURL, ImageQuality } from "helpers/img";
 import { getStatusDescription } from "helpers/others";
 import { Immutable } from "helpers/types";
-import useSmartLanguage from "hooks/useSmartLanguage";
+import { useSmartLanguage } from "hooks/useSmartLanguage";
-import { Dispatch, SetStateAction } from "react";
 
 interface Props {
-  setLightboxOpen: Dispatch<SetStateAction<boolean>>;
+  openLightBox: (images: string[], index?: number) => void;
-  setLightboxImages: Dispatch<SetStateAction<string[]>>;
-  setLightboxIndex: Dispatch<SetStateAction<number>>;
   images: Exclude<
     Exclude<
       Exclude<
@@ -32,14 +29,7 @@ interface Props {
 }
 
 export default function ScanSetCover(props: Immutable<Props>): JSX.Element {
-  const {
+  const { openLightBox, images, languages, langui } = props;
-    setLightboxOpen,
-    setLightboxImages,
-    setLightboxIndex,
-    images,
-    languages,
-    langui,
-  } = props;
 
   const [selectedScan, LanguageSwitcher] = useSmartLanguage({
     items: images,
@@ -170,9 +160,7 @@ export default function ScanSetCover(props: Immutable<Props>): JSX.Element {
                       if (img.url)
                         imgs.push(getAssetURL(img.url, ImageQuality.Large));
                     });
-                    setLightboxOpen(true);
+                    openLightBox(imgs, index);
-                    setLightboxImages(imgs);
-                    setLightboxIndex(index);
                   }}
                 >
                   <Img image={image} quality={ImageQuality.Small} />

src/components/Markdown/Markdawn.tsx

@@ -1,15 +1,15 @@
 import HorizontalLine from "components/HorizontalLine";
 import Img from "components/Img";
 import InsetBox from "components/InsetBox";
-import LightBox from "components/LightBox";
 import ToolTip from "components/ToolTip";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { slugify } from "helpers/formatters";
 import { getAssetURL, ImageQuality } from "helpers/img";
 import { Immutable } from "helpers/types";
+import { useLightBox } from "hooks/useLightBox";
 import Markdown from "markdown-to-jsx";
 import { useRouter } from "next/router";
-import React, { useState } from "react";
+import React from "react";
 import ReactDOMServer from "react-dom/server";
 
 interface Props {
@@ -23,20 +23,12 @@ export default function Markdawn(props: Immutable<Props>): JSX.Element {
 
   const router = useRouter();
 
-  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [openLightBox, LightBox] = useLightBox();
-  const [lightboxImages, setLightboxImages] = useState([""]);
-  const [lightboxIndex, setLightboxIndex] = useState(0);
 
   if (text) {
     return (
       <>
-        <LightBox
+        <LightBox />
-          state={lightboxOpen}
-          setState={setLightboxOpen}
-          images={lightboxImages}
-          index={lightboxIndex}
-          setIndex={setLightboxIndex}
-        />
         <Markdown
           className={`formatted ${props.className}`}
           options={{
@@ -255,13 +247,11 @@ export default function Markdawn(props: Immutable<Props>): JSX.Element {
                   <div
                     className="my-8 cursor-pointer place-content-center grid"
                     onClick={() => {
-                      setLightboxOpen(true);
+                      openLightBox([
-                      setLightboxImages([
                         compProps.src.startsWith("/uploads/")
                           ? getAssetURL(compProps.src, ImageQuality.Large)
                           : compProps.src,
                       ]);
-                      setLightboxIndex(0);
                     }}
                   >
                     <Img

src/components/PostPage.tsx

@@ -2,7 +2,7 @@ import { AppStaticProps } from "graphql/getAppStaticProps";
 import { prettySlug } from "helpers/formatters";
 import { getStatusDescription } from "helpers/others";
 import { Immutable, PostWithTranslations } from "helpers/types";
-import useSmartLanguage from "hooks/useSmartLanguage";
+import { useSmartLanguage } from "hooks/useSmartLanguage";
 import AppLayout from "./AppLayout";
 import Chip from "./Chip";
 import HorizontalLine from "./HorizontalLine";

src/components/ThumbnailHeader.tsx

@@ -5,8 +5,9 @@ import Markdawn from "components/Markdown/Markdawn";
 import { GetContentQuery, UploadImageFragment } from "graphql/generated";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { prettyinlineTitle, prettySlug, slugify } from "helpers/formatters";
-import { ImageQuality } from "helpers/img";
+import { getAssetURL, ImageQuality } from "helpers/img";
 import { Immutable } from "helpers/types";
+import { useLightBox } from "hooks/useLightBox";
 
 interface Props {
   pre_title?: string | null | undefined;
@@ -45,15 +46,21 @@ export default function ThumbnailHeader(props: Immutable<Props>): JSX.Element {
     languageSwitcher,
   } = props;
 
+  const [openLightBox, LightBox] = useLightBox();
+
   return (
     <>
+      <LightBox />
       <div className="grid place-items-center gap-12 mb-12">
         <div className="drop-shadow-shade-lg">
           {thumbnail ? (
             <Img
-              className=" rounded-xl"
+              className="rounded-xl cursor-pointer"
               image={thumbnail}
               quality={ImageQuality.Medium}
+              onClick={() => {
+                openLightBox([getAssetURL(thumbnail.url, ImageQuality.Large)]);
+              }}
             />
           ) : (
             <div className="w-96 aspect-[4/3] bg-light rounded-xl"></div>

src/hooks/useLightBox.tsx

@@ -0,0 +1,28 @@
+import LightBox from "components/LightBox";
+import { useState } from "react";
+
+export function useLightBox(): [
+  (images: string[], index?: number) => void,
+  () => JSX.Element
+] {
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxImages, setLightboxImages] = useState([""]);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+
+  return [
+    (images: string[], index = 0) => {
+      setLightboxOpen(true);
+      setLightboxImages(images);
+      setLightboxIndex(index);
+    },
+    () => (
+      <LightBox
+        state={lightboxOpen}
+        setState={setLightboxOpen}
+        images={lightboxImages}
+        index={lightboxIndex}
+        setIndex={setLightboxIndex}
+      />
+    ),
+  ];
+}

src/hooks/useSmartLanguage.tsx

@@ -24,7 +24,7 @@ function getPreferredLanguage(
   return undefined;
 }
 
-export default function useSmartLanguage<T>(
+export function useSmartLanguage<T>(
   props: Props<T>
 ): [Immutable<T | undefined>, () => JSX.Element] {
   const {

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

@@ -23,7 +23,7 @@ import {
 import { getStatusDescription } from "helpers/others";
 import { Immutable } from "helpers/types";
 import { useMediaMobile } from "hooks/useMediaQuery";
-import useSmartLanguage from "hooks/useSmartLanguage";
+import { useSmartLanguage } from "hooks/useSmartLanguage";
 import {
   GetStaticPathsContext,
   GetStaticPathsResult,

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

@@ -5,7 +5,6 @@ import Button from "components/Inputs/Button";
 import Switch from "components/Inputs/Switch";
 import InsetBox from "components/InsetBox";
 import ContentLine from "components/Library/ContentLine";
-import LightBox from "components/LightBox";
 import NavOption from "components/PanelComponents/NavOption";
 import ReturnButton, {
   ReturnButtonType,
@@ -35,6 +34,7 @@ import { getAssetURL, ImageQuality } from "helpers/img";
 import { convertMmToInch } from "helpers/numbers";
 import { sortContent } from "helpers/others";
 import { Immutable } from "helpers/types";
+import { useLightBox } from "hooks/useLightBox";
 import {
   GetStaticPathsContext,
   GetStaticPathsResult,
@@ -63,10 +63,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
 
   sortContent(item?.contents);
 
-  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [openLightBox, LightBox] = useLightBox();
-  const [lightboxImages, setLightboxImages] = useState([""]);
-  const [lightboxIndex, setLightboxIndex] = useState(0);
-
   const [keepInfoVisible, setKeepInfoVisible] = useState(false);
 
   let displayOpenScans = false;
@@ -136,13 +133,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
 
   const contentPanel = (
     <ContentPanel width={ContentPanelWidthSizes.large}>
-      <LightBox
+      <LightBox />
-        state={lightboxOpen}
-        setState={setLightboxOpen}
-        images={lightboxImages}
-        index={lightboxIndex}
-        setIndex={setLightboxIndex}
-      />
 
       <ReturnButton
         href="/library/"
@@ -157,14 +148,12 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
           mobile:h-[60vh] desktop:mb-16 relative cursor-pointer"
           onClick={() => {
             if (item?.thumbnail?.data?.attributes) {
-              setLightboxOpen(true);
+              openLightBox([
-              setLightboxImages([
                 getAssetURL(
                   item.thumbnail.data.attributes.url,
                   ImageQuality.Large
                 ),
               ]);
-              setLightboxIndex(0);
             }
           }}
         >
@@ -262,9 +251,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
                                 )
                               );
                           });
-                          setLightboxOpen(true);
+                          openLightBox(images, index);
-                          setLightboxImages(images);
-                          setLightboxIndex(index);
                         }
                       }}
                     >

src/pages/library/[slug]/scans.tsx

@@ -1,7 +1,6 @@
 import AppLayout from "components/AppLayout";
 import ScanSet from "components/Library/ScanSet";
 import ScanSetCover from "components/Library/ScanSetCover";
-import LightBox from "components/LightBox";
 import NavOption from "components/PanelComponents/NavOption";
 import ReturnButton, {
   ReturnButtonType,
@@ -17,12 +16,12 @@ import { getReadySdk } from "graphql/sdk";
 import { prettyinlineTitle, prettySlug } from "helpers/formatters";
 import { sortContent } from "helpers/others";
 import { Immutable } from "helpers/types";
+import { useLightBox } from "hooks/useLightBox";
 import {
   GetStaticPathsContext,
   GetStaticPathsResult,
   GetStaticPropsContext,
 } from "next";
-import { useState } from "react";
 
 interface Props extends AppStaticProps {
   item: Exclude<
@@ -41,9 +40,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
 
   sortContent(item?.contents);
 
-  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [openLightBox, LightBox] = useLightBox();
-  const [lightboxImages, setLightboxImages] = useState([""]);
-  const [lightboxIndex, setLightboxIndex] = useState(0);
 
   const subPanel = (
     <SubPanel>
@@ -77,13 +74,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
 
   const contentPanel = (
     <ContentPanel width={ContentPanelWidthSizes.large}>
-      <LightBox
+      <LightBox />
-        state={lightboxOpen}
-        setState={setLightboxOpen}
-        images={lightboxImages}
-        index={lightboxIndex}
-        setIndex={setLightboxIndex}
-      />
 
       <ReturnButton
         href={`/library/${item?.slug}`}
@@ -96,9 +87,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
       {item?.images && (
         <ScanSetCover
           images={item.images}
-          setLightboxImages={setLightboxImages}
+          openLightBox={openLightBox}
-          setLightboxIndex={setLightboxIndex}
-          setLightboxOpen={setLightboxOpen}
           languages={languages}
           langui={langui}
         />
@@ -110,9 +99,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
             <ScanSet
               key={content.id}
               scanSet={content.attributes.scan_set}
-              setLightboxImages={setLightboxImages}
+              openLightBox={openLightBox}
-              setLightboxIndex={setLightboxIndex}
-              setLightboxOpen={setLightboxOpen}
               slug={content.attributes.slug}
               title={prettySlug(content.attributes.slug, item.slug)}
               languages={languages}