Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Made useSmartLanguage not default export and created useLightBox

This commit is contained in:
DrMint 2022-05-14 14:21:00 +02:00
parent 067f66b146
commit fc0512fc91
10 changed files with 64 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Library/ScanSet.tsx
View File

@ -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 { Dispatch, SetStateAction } from "react";
import { useSmartLanguage } from "hooks/useSmartLanguage";
interface Props {
setLightboxOpen: Dispatch<SetStateAction<boolean>>;
setLightboxImages: Dispatch<SetStateAction<string[]>>;
setLightboxIndex: Dispatch<SetStateAction<number>>;
openLightBox: (images: string[], index?: number) => void;
scanSet: Exclude<
Exclude<
Exclude<
@ -52,17 +49,8 @@ interface Props {
}
export default function ScanSet(props: Immutable<Props>): JSX.Element {
const {
setLightboxOpen,
setLightboxImages,
setLightboxIndex,
scanSet,
slug,
title,
languages,
langui,
content,
} = props;
const { openLightBox, 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);
setLightboxImages(images);
setLightboxIndex(index);
openLightBox(images, index);
}}
>
{page.attributes && (

20
src/components/Library/ScanSetCover.tsx
View File

@ -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 { Dispatch, SetStateAction } from "react";
import { useSmartLanguage } from "hooks/useSmartLanguage";
interface Props {
setLightboxOpen: Dispatch<SetStateAction<boolean>>;
setLightboxImages: Dispatch<SetStateAction<string[]>>;
setLightboxIndex: Dispatch<SetStateAction<number>>;
openLightBox: (images: string[], index?: number) => void;
images: Exclude<
Exclude<
Exclude<
@ -32,14 +29,7 @@ interface Props {
}
export default function ScanSetCover(props: Immutable<Props>): JSX.Element {
const {
setLightboxOpen,
setLightboxImages,
setLightboxIndex,
images,
languages,
langui,
} = props;
const { openLightBox, 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);
setLightboxImages(imgs);
setLightboxIndex(index);
openLightBox(imgs, index);
}}
>
<Img image={image} quality={ImageQuality.Small} />

20
src/components/Markdown/Markdawn.tsx
View File

@ -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 [lightboxImages, setLightboxImages] = useState([""]);
const [lightboxIndex, setLightboxIndex] = useState(0);
const [openLightBox, LightBox] = useLightBox();
if (text) {
return (
<>
<LightBox
state={lightboxOpen}
setState={setLightboxOpen}
images={lightboxImages}
index={lightboxIndex}
setIndex={setLightboxIndex}
/>
<LightBox />
<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);
setLightboxImages([
openLightBox([
compProps.src.startsWith("/uploads/")
? getAssetURL(compProps.src, ImageQuality.Large)
: compProps.src,
]);
setLightboxIndex(0);
}}
>
<Img

2
src/components/PostPage.tsx
View File

@ -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";

11
src/components/ThumbnailHeader.tsx
View File

@ -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>

28
src/hooks/useLightBox.tsx Normal file
View File

@ -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}
/>
),
];
}

2
src/hooks/useSmartLanguage.tsx
View File

@ -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 {

2
src/pages/contents/[slug]/index.tsx
View File

@ -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,

23
src/pages/library/[slug]/index.tsx
View File

@ -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 [lightboxImages, setLightboxImages] = useState([""]);
const [lightboxIndex, setLightboxIndex] = useState(0);
const [openLightBox, LightBox] = useLightBox();
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
state={lightboxOpen}
setState={setLightboxOpen}
images={lightboxImages}
index={lightboxIndex}
setIndex={setLightboxIndex}
/>
<LightBox />
<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);
setLightboxImages([
openLightBox([
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);
setLightboxImages(images);
setLightboxIndex(index);
openLightBox(images, index);
}
}}
>

23
src/pages/library/[slug]/scans.tsx
View File

@ -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 [lightboxImages, setLightboxImages] = useState([""]);
const [lightboxIndex, setLightboxIndex] = useState(0);
const [openLightBox, LightBox] = useLightBox();
const subPanel = (
<SubPanel>
@ -77,13 +74,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
const contentPanel = (
<ContentPanel width={ContentPanelWidthSizes.large}>
<LightBox
state={lightboxOpen}
setState={setLightboxOpen}
images={lightboxImages}
index={lightboxIndex}
setIndex={setLightboxIndex}
/>
<LightBox />
<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}
setLightboxIndex={setLightboxIndex}
setLightboxOpen={setLightboxOpen}
openLightBox={openLightBox}
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}
setLightboxIndex={setLightboxIndex}
setLightboxOpen={setLightboxOpen}
openLightBox={openLightBox}
slug={content.attributes.slug}
title={prettySlug(content.attributes.slug, item.slug)}
languages={languages}