From f23ae3e5764cc3fba8359390d3ca5d06ff6755c6 Mon Sep 17 00:00:00 2001 From: Nytuo Date: Sun, 3 Sep 2023 23:19:36 +0200 Subject: [PATCH] refactor(Collectionner): :recycle: Themes and sections enhancement --- src/components/ContentViewer.tsx | 203 +++++++++++++++-------------- src/components/Drawer.tsx | 2 +- src/components/RematchSkeleton.tsx | 10 +- src/pages/Loading.tsx | 7 +- src/pages/Login.tsx | 18 ++- 5 files changed, 131 insertions(+), 109 deletions(-) diff --git a/src/components/ContentViewer.tsx b/src/components/ContentViewer.tsx index 6901aa1..b3d5bb6 100644 --- a/src/components/ContentViewer.tsx +++ b/src/components/ContentViewer.tsx @@ -31,7 +31,7 @@ function ContentViewer({ provider, TheBook, type, handleAddBreadcrumbs, handleCh handleAddBreadcrumbs: any; handleChangeToDetails?: (open: boolean, book: IBook, provider: any) => void; }) { - const [rating, setRating] = useState(type === "volume" ? (TheBook.note === null ? null : parseInt(TheBook.note)) : null); + const [rating, setRating] = useState((TheBook.note === null ? null : parseInt(TheBook.note))); const [characters, setCharacters] = useState([]); const [staff, setStaff] = useState([]); const [relations, setRelations] = useState([]); @@ -804,115 +804,126 @@ function ContentViewer({ provider, TheBook, type, handleAddBreadcrumbs, handleCh } } > -
-

{t("volumes")}

- -
-
-

{t("characters")}

- {t("Numberofcharacters")} - { - type === "volume" ? - ((provider === providerEnum.Marvel) ? (tryToParse(TheBook.characters)["available"]) : ((TheBook.characters !== "null") ? (tryToParse(TheBook.characters).length) : (0))) : ((provider === providerEnum.Marvel) ? (tryToParse(TheBook.characters)["available"]) : (tryToParse(TheBook.characters).length)) - } - + { + type === "series" && openExplorer.explorer.length > 0 + &&
+

{t("volumes")}

+ +
+ } + { + ((provider === providerEnum.Marvel) ? (tryToParse(TheBook["creators"])["available"]) : ((TheBook["creators"] !== "null") ? (tryToParse(TheBook["creators"]).length) : ("0"))) > 0 &&
+

{t("characters")}

+ {t("Numberofcharacters")} { - characters.map((el: any, index: number) => { - return
{ - if (provider === providerEnum.Marvel) { - handleOpenMoreInfo(el.name, el.description, tryToParse(el.image).path + "/detail." + tryToParse(el.image).extension, tryToParse(el.url)[0].url); - } else if (provider === providerEnum.Anilist || provider === providerEnum.MANUAL || provider === providerEnum.OL || provider === providerEnum.GBooks) { - handleOpenMoreInfo(el.name, el.description, el.image.replaceAll('"', ""), el.url); + type === "volume" ? + ((provider === providerEnum.Marvel) ? (tryToParse(TheBook.characters)["available"]) : ((TheBook.characters !== "null") ? (tryToParse(TheBook.characters).length) : (0))) : ((provider === providerEnum.Marvel) ? (tryToParse(TheBook.characters)["available"]) : (tryToParse(TheBook.characters).length)) + } + + { + characters.map((el: any, index: number) => { + return
{ + if (provider === providerEnum.Marvel) { + handleOpenMoreInfo(el.name, el.description, tryToParse(el.image).path + "/detail." + tryToParse(el.image).extension, tryToParse(el.url)[0].url); + } else if (provider === providerEnum.Anilist || provider === providerEnum.MANUAL || provider === providerEnum.OL || provider === providerEnum.GBooks) { + handleOpenMoreInfo(el.name, el.description, el.image.replaceAll('"', ""), el.url); + } } } - } - > - { - (provider === providerEnum.Marvel) ? - - {el.name} : - (provider === providerEnum.Anilist || provider === providerEnum.MANUAL || provider === providerEnum.OL || provider === providerEnum.GBooks) ? + > + { + (provider === providerEnum.Marvel) ? {el.name} : "" - } -
; - }) - } - -
-
-

{t('Staff')}

- {t("Numberofpeople")} - { - ((provider === providerEnum.Marvel) ? (tryToParse(TheBook["creators"])["available"]) : ((TheBook["creators"] !== "null") ? (tryToParse(TheBook["creators"]).length) : ("0"))) - } - + alt='a character' src={tryToParse(el.image).path + "/detail." + tryToParse(el.image).extension} /> + {el.name} : + (provider === providerEnum.Anilist || provider === providerEnum.MANUAL || provider === providerEnum.OL || provider === providerEnum.GBooks) ? + {el.name} : "" + } +
; + }) + } + +
+ } + { + ((provider === providerEnum.Marvel) ? (tryToParse(TheBook["creators"])["available"]) : ((TheBook["creators"] !== "null") ? (tryToParse(TheBook["creators"]).length) : ("0"))) > 0 &&
+

{t('Staff')}

+ {t("Numberofpeople")} { - staff.map((el: any, index: number) => { - return
{ - if (provider === providerEnum.Marvel) { - handleOpenMoreInfo(el.name, el.description, tryToParse(el.image).path + "/detail." + tryToParse(el.image).extension, tryToParse(el.url)[0].url); - } else if (provider === providerEnum.Anilist || provider === providerEnum.MANUAL || provider === providerEnum.OL || provider === providerEnum.GBooks) { - handleOpenMoreInfo(el.name, el.description, el.image.replaceAll('"', ""), el.url); + ((provider === providerEnum.Marvel) ? (tryToParse(TheBook["creators"])["available"]) : ((TheBook["creators"] !== "null") ? (tryToParse(TheBook["creators"]).length) : ("0"))) + + } + + { + staff.map((el: any, index: number) => { + return
{ + if (provider === providerEnum.Marvel) { + handleOpenMoreInfo(el.name, el.description, tryToParse(el.image).path + "/detail." + tryToParse(el.image).extension, tryToParse(el.url)[0].url); + } else if (provider === providerEnum.Anilist || provider === providerEnum.MANUAL || provider === providerEnum.OL || provider === providerEnum.GBooks) { + handleOpenMoreInfo(el.name, el.description, el.image.replaceAll('"', ""), el.url); + } } } - } - > - { - (provider === providerEnum.Marvel) ? - (el.name === tryToParse(TheBook.creators)["items"][index].name) ? - <>{el.name}
{tryToParse(TheBook.creators)["items"][index]["role"]} : "" - : (provider === providerEnum.Anilist || provider === providerEnum.MANUAL || provider === providerEnum.OL || provider === providerEnum.GBooks) ? - (tryToParse(TheBook.creators)[index] !== undefined && el.name === tryToParse(TheBook.creators)[index].name) ? - <>
{el.name} - : <>
{el.name} : "" - } -
; - })} - -
+ > + { + (provider === providerEnum.Marvel) ? + (el.name === tryToParse(TheBook.creators)["items"][index].name) ? + <>{el.name}
{tryToParse(TheBook.creators)["items"][index]["role"]} : "" + : (provider === providerEnum.Anilist || provider === providerEnum.MANUAL || provider === providerEnum.OL || provider === providerEnum.GBooks) ? + (tryToParse(TheBook.creators)[index] !== undefined && el.name === tryToParse(TheBook.creators)[index].name) ? + <>
{el.name} + : <>
{el.name} : "" + } +
; + })} +
+ } +
-
-

{ - ((provider === providerEnum.Marvel) ? (t("AFewComics")) : (t("Relations"))) - }

+ { + relations.length > 0 &&
+

{ + ((provider === providerEnum.Marvel) ? (t("AFewComics")) : (t("Relations"))) + }

-
+
- { - relations.map((el: any, index: number) => { - return { - if (provider === providerEnum.Marvel) { - handleOpenMoreInfo(el.name, el.description, tryToParse(el.image).path + "/detail." + tryToParse(el.image).extension, tryToParse(el.url)[0].url, "cover"); - } else if (provider === providerEnum.Anilist || provider === providerEnum.MANUAL || provider === providerEnum.OL || provider === providerEnum.GBooks) { - handleOpenMoreInfo(el.name, el.description, el.image.replaceAll('"', ""), el.url, "cover"); + { + relations.map((el: any, index: number) => { + return { + if (provider === providerEnum.Marvel) { + handleOpenMoreInfo(el.name, el.description, tryToParse(el.image).path + "/detail." + tryToParse(el.image).extension, tryToParse(el.url)[0].url, "cover"); + } else if (provider === providerEnum.Anilist || provider === providerEnum.MANUAL || provider === providerEnum.OL || provider === providerEnum.GBooks) { + handleOpenMoreInfo(el.name, el.description, el.image.replaceAll('"', ""), el.url, "cover"); + } } } - } - book={new Book(el.ID_book, el.name, ((provider === providerEnum.Marvel) ? (tryToParse(el.image).path + "/detail." + tryToParse(el.image).extension) : (el.image)), "null", null, null, null, 0, 0, 0, 0, 0, 0, null, "null", "null", null, 0, null, null, null, null, null, null, 0, provider)} - provider={provider} - />; - })} + book={new Book(el.ID_book, el.name, ((provider === providerEnum.Marvel) ? (tryToParse(el.image).path + "/detail." + tryToParse(el.image).extension) : (el.image)), "null", null, null, null, 0, 0, 0, 0, 0, 0, null, "null", "null", null, 0, null, null, null, null, null, null, 0, provider)} + provider={provider} + />; + })} +
+
+ } -
{ (TheBook.variants !== "null" && TheBook.variants !== "" && TheBook.variants != null) ? (provider === providerEnum.Marvel) ? t("variantsList") + ' : ' + tryToParse(TheBook.variants).map((variant: { name: string; }, index: number) => { @@ -920,7 +931,7 @@ function ContentViewer({ provider, TheBook, type, handleAddBreadcrumbs, handleCh }) : "" : "" }
-

{((provider === providerEnum.Marvel) ? (t("providedBy") + " Marvel. © 2014 Marvel") : ((provider === providerEnum.Anilist) ? (t("providedBy") + " Anilist.") : ((provider === providerEnum.MANUAL) ? (t("notFromAPI")) : ((provider === providerEnum.OL) ? (t("providedBy") + " OpenLibrary.") : ((provider === providerEnum.GBooks) ? (t("providedBy") + " Google Books.") : "")))))}

+

{((provider === providerEnum.Marvel) ? (t("providedBy") + " Marvel. © 2014 Marvel") : ((provider === providerEnum.Anilist) ? (t("providedBy") + " Anilist.") : ((provider === providerEnum.MANUAL) ? (t("notFromAPI")) : ((provider === providerEnum.OL) ? (t("providedBy") + " OpenLibrary.") : ((provider === providerEnum.GBooks) ? (t("providedBy") + " Google Books.") : t("notFromAPI"))))))}

diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx index 04106fa..4a22758 100644 --- a/src/components/Drawer.tsx +++ b/src/components/Drawer.tsx @@ -1185,7 +1185,7 @@ export default function MiniDrawer({ - {isLoading ?
+ {isLoading ?

diff --git a/src/components/RematchSkeleton.tsx b/src/components/RematchSkeleton.tsx index 7dbcca7..777e2b1 100644 --- a/src/components/RematchSkeleton.tsx +++ b/src/components/RematchSkeleton.tsx @@ -9,7 +9,7 @@ import { API } from '@/API/API.ts'; import Card from '@/components/Card.tsx'; import Book from '@/utils/Book.ts'; import { Anilist } from '@/API/Anilist.ts'; -import { Button } from '@mui/material'; +import { Button, Stack, TextField } from '@mui/material'; /** * A component that allows the user to search for a book or a serie in different APIs and rematch it with a different provider. @@ -25,9 +25,9 @@ export default function RematchSkeleton({ provider, type }: { const [rematchResult, setRematchResult] = React.useState([]); return ( -
- - + + +
-
+ ); } \ No newline at end of file diff --git a/src/pages/Loading.tsx b/src/pages/Loading.tsx index e12fddc..1d0acb5 100644 --- a/src/pages/Loading.tsx +++ b/src/pages/Loading.tsx @@ -1,8 +1,9 @@ import StarBackground from "@/components/StarBackground.tsx"; -import { CircularProgress, Grid } from "@mui/material"; +import { CircularProgress, Grid, useTheme } from "@mui/material"; import { useEffect, useLayoutEffect } from "react"; export function Loading() { + const theme = useTheme(); useEffect(() => { document.title = "Loading..."; setTimeout(() => { @@ -13,7 +14,7 @@ export function Loading() { document.querySelector("#navbar")?.classList.add("hidden"); }, []); return ( - <> +
- +
); } \ No newline at end of file diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index ad463f5..513ddd1 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect, useLayoutEffect, useState } from "react"; import LoginDialog from "@/components/Dialogs/LoginDialog.tsx"; import CreateAccountDialog from "@/components/Dialogs/CreateAccountDialog.tsx"; import IProfile from "@/interfaces/IProfile"; @@ -7,12 +7,14 @@ import { LoginCard } from "@/components/LoginCard.tsx"; import StarBackground from "@/components/StarBackground.tsx"; import { Toaster } from "@/components/Toaster.tsx"; import { useTranslation } from "react-i18next"; +import { Container, useTheme } from "@mui/material"; export default function Login() { const [openLogin, setOpenLogin] = useState(false); const [openCreateAccount, setOpenCreateAccount] = useState(false); const [selectedProfile, setSelectedProfile] = useState(); const [profiles, setProfiles] = useState([]); const { t } = useTranslation(); + const theme = useTheme(); const onLoginModalClose = () => { setOpenLogin(false); }; @@ -27,6 +29,14 @@ export default function Login() { Toaster(t("errors.account_creation"), "error"); }); }; + + useLayoutEffect(() => { + document.getElementsByTagName("html")[0].style.overflowY = "hidden"; + return () => { + document.getElementsByTagName("html")[0].style.overflowY = "auto"; + }; + }, []); + useEffect(() => { discover(); }, []); @@ -46,9 +56,9 @@ export default function Login() { }); }; return ( - <> +
-
+

{t("whosreading")}

@@ -64,6 +74,6 @@ export default function Login() { - +
); } \ No newline at end of file