refactor(Collectionner): ♻️ Merging the bookmarks and width changes o…

…n the dialogs
NytuoIndustries · Aug 31, 2023 · 7cd169a · 7cd169a
1 parent 0f8109d
commit 7cd169a
Show file tree

Hide file tree

Showing 15 changed files with 115 additions and 81 deletions.
diff --git a/src/components/Dialogs/APISelectorDialog.tsx b/src/components/Dialogs/APISelectorDialog.tsx
@@ -27,7 +27,8 @@ export default function APISelectorDialog({ onClose, openModal }: {
 
 	return (
 		<div>
-			<Dialog open={open} onClose={handleClose}>
+			<Dialog open={open} onClose={handleClose} fullWidth={true}
+				maxWidth="md">
 				<DialogTitle>{t("EDIT")}</DialogTitle>
 				<DialogContent>
 					<DialogContentText>

diff --git a/src/components/Dialogs/AboutDialog.tsx b/src/components/Dialogs/AboutDialog.tsx
@@ -46,10 +46,15 @@ export default function AboutDialog({ onClose, openModal }: {
 
 	return (
 		<div>
-			<Dialog open={open} onClose={handleClose}>
+			<Dialog open={open} onClose={handleClose} fullWidth={true}
+				maxWidth="md">
 				<DialogTitle>{t("about")}</DialogTitle>
 				<DialogContent>
-					<DialogContentText>
+					<DialogContentText sx={
+						{
+							textAlign: "center",
+						}
+					}>
 						<h1 style={{ textAlign: "center" }}>Cosmic Comics</h1>
 						<img src="Images/Logo.png" alt="" width="auto" height="80px"
 							className="navbar-brand rotate linear infinite" /><img src="Images/LogoTxt.png" alt=""

diff --git a/src/components/Dialogs/AddingLibraryDialog.tsx b/src/components/Dialogs/AddingLibraryDialog.tsx
@@ -27,7 +27,8 @@ export default function AddingLibraryDialog({ onClose, openModal }: {
 
 	return (
 		<div>
-			<Dialog open={open} onClose={handleClose}>
+			<Dialog open={open} onClose={handleClose} fullWidth={true}
+				maxWidth="md">
 				<DialogTitle>{t("EDIT")}</DialogTitle>
 				<DialogContent>
 					<DialogContentText>

diff --git a/src/components/Dialogs/BookmarksDialog.tsx b/src/components/Dialogs/BookmarksDialog.tsx
@@ -8,6 +8,11 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import { useEffect } from "react";
 import { useTranslation } from 'react-i18next';
+import { PDP, currentProfile } from '@/utils/Common.ts';
+import { IconButton } from '@mui/material';
+import { getFromDB } from '@/utils/Fetchers.ts';
+import { openBOOKM } from '@/utils/utils.ts';
+import { Block } from '@mui/icons-material';
 
 export default function BookmarksDialog({ onClose, openModal }: {
 	onClose: any,
@@ -24,30 +29,74 @@ export default function BookmarksDialog({ onClose, openModal }: {
 		setOpen(false);
 		onClose();
 	};
+	const [bookmarks, setBookmarks] = React.useState<any[]>([]);
+	const listBM = async () => {
+		const option = {
+			method: 'GET', headers: {
+				'Content-Type': 'application/json', "token": currentProfile.getToken,
+			}
+		};
+		fetch(PDP + "/BM/getBM", option).then((response) => {
+			return response.json();
+		}).then(function (info) {
+			info.forEach((file: any) => {
+				getFromDB("Books", "URLCover FROM Books WHERE ID_BOOK = '" + file["BOOK_ID"] + "'").then(async (resa: any) => {
+					console.log(resa);
+					setBookmarks(bookmarks => [...bookmarks, {
+						URLCover: resa[0].URLCover,
+						page: file["page"],
+						path: file["PATH"]
+					}]
+					);
+				});
+			});
+		}).catch(function (error) {
+			console.log(error);
+		});
+	};
+
+	React.useLayoutEffect(() => {
+		listBM();
+	}, []);
 
 	return (
 		<div>
-			<Dialog open={open} onClose={handleClose}>
-				<DialogTitle>{t("EDIT")}</DialogTitle>
+			<Dialog open={open} onClose={handleClose}
+				fullWidth={true}
+				maxWidth="md"
+			>
+				<DialogTitle>{t("Bookmark")}</DialogTitle>
 				<DialogContent>
 					<DialogContentText>
-						<div id="bookmarkContainer" style="text-align: center"></div>
+						<div id="bookmarkContainer" style={{ textAlign: "center" }}>
+							{
+								bookmarks.length > 0 ?
+									bookmarks.map((bookmark: any, index: number) => {
+										console.log(bookmark);
+										return (
+											<div key={index}>
+												<Button
+													onClick={() => {
+														openBOOKM(bookmark.path, bookmark.page);
+													}
+													}
+												>
+													{
+														t("Seethepage") + bookmark.page
+													}
+												</Button>
+												<img src={bookmark.URLCover} />
+											</div>
+										);
+									}) : <div><Block /></div>
+							}
+						</div>
 					</DialogContentText>
-					<TextField
-						autoFocus
-						margin="dense"
-						id="passwordLogin"
-						label={t("ThePassToWorLabel")}
-						type="password"
-						fullWidth
-						variant="standard"
-					/>
 				</DialogContent>
 				<DialogActions>
-					<Button onClick={handleClose}>{t("send")}</Button>
-					<Button onClick={ }>{t("cancel")}</Button>
+					<Button onClick={handleClose}>{t("cancel")}</Button>
 				</DialogActions>
 			</Dialog>
 		</div>
 	);
-};
+}
diff --git a/src/components/Dialogs/CreateAccountDialog.tsx b/src/components/Dialogs/CreateAccountDialog.tsx
@@ -25,7 +25,8 @@ export default function CreateAccountDialog({ openModal, title, text, okBtn, cre
 	}, [openModal]);
 	return (
 		<div>
-			<Dialog open={open}>
+			<Dialog open={open} fullWidth={true}
+				maxWidth="md">
 				<DialogTitle>{title}</DialogTitle>
 				<DialogContent>
 					<DialogContentText>

diff --git a/src/components/Dialogs/DatabaseEditorDialog.tsx b/src/components/Dialogs/DatabaseEditorDialog.tsx
@@ -85,7 +85,8 @@ export default function DatabaseEditorDialog({ onClose, openModal, TheBook, type
 
 	return (
 		<div>
-			<Dialog open={open} onClose={handleClose}>
+			<Dialog open={open} onClose={handleClose} fullWidth={true}
+				maxWidth="md">
 				<DialogTitle>{t("EDIT")}</DialogTitle>
 				<DialogContent>
 					<DialogContentText>

diff --git a/src/components/Dialogs/DownloadDialog.tsx b/src/components/Dialogs/DownloadDialog.tsx
@@ -27,7 +27,8 @@ export default function DownloadDialog({ onClose, openModal }: {
 
 	return (
 		<div>
-			<Dialog open={open} onClose={handleClose}>
+			<Dialog open={open} onClose={handleClose} fullWidth={true}
+				maxWidth="md">
 				<DialogTitle>{t("EDIT")}</DialogTitle>
 				<DialogContent>
 					<DialogContentText>

diff --git a/src/components/Dialogs/LoginDialog.tsx b/src/components/Dialogs/LoginDialog.tsx
@@ -54,7 +54,8 @@ export default function LoginDialog({ onClose, openModal, title, text, okBtn, ca
 
 	return (
 		<div>
-			<Dialog open={open} onClose={handleClose}>
+			<Dialog open={open} onClose={handleClose} fullWidth={true}
+				maxWidth="md">
 				<DialogTitle>{title}</DialogTitle>
 				<DialogContent>
 					<DialogContentText>

diff --git a/src/components/Dialogs/MoreInfoDialog.tsx b/src/components/Dialogs/MoreInfoDialog.tsx
@@ -37,7 +37,8 @@ export default function MoreInfoDialog({ onClose, openModal, desc, name, hrefURL
 
 	return (
 		<div>
-			<Dialog open={open} onClose={handleClose}>
+			<Dialog open={open} onClose={handleClose} fullWidth={true}
+				maxWidth="md">
 				<DialogTitle>{t("seeMore")}</DialogTitle>
 				<DialogContent>
 					<DialogContentText>

diff --git a/src/components/Dialogs/NavigationDialog.tsx b/src/components/Dialogs/NavigationDialog.tsx
@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next';
 import { Icon, IconButton, Tooltip } from '@mui/material';
 import { Bookmark, Download, Info, PhotoLibrary, Settings, TipsAndUpdates } from '@mui/icons-material';
 import AboutDialog from './AboutDialog';
+import BookmarksDialog from './BookmarksDialog';
 
 export default function NavigationDialog({ onClose, openModal }: {
 	onClose: any,
@@ -36,15 +37,32 @@ export default function NavigationDialog({ onClose, openModal }: {
 		setOpenAbout(false);
 	};
 
+	const [openBookmarks, setOpenBookmarks] = React.useState(false);
+	const handleOpenBookmarks = (event: React.MouseEvent<HTMLElement>) => {
+		setOpenBookmarks(true);
+	};
+
+	const handleCloseBookmarks = () => {
+		setOpenBookmarks(false);
+	};
 	return (
 		<div>
-			<Dialog open={open} onClose={handleClose}>
+			<Dialog open={open} onClose={handleClose} fullWidth={true}
+				maxWidth="md">
 				<DialogTitle>{t("navigation")}</DialogTitle>
 				<DialogContent>
 					<DialogContentText>
-						<div id="controller">
+						<div id="controller"
+							style={
+								{
+									display: "flex",
+									justifyContent: "space-around",
+									alignItems: "center",
+								}
+							}
+						>
 							<Tooltip title={t('Bookmark')}>
-								<IconButton>
+								<IconButton onClick={handleOpenBookmarks}>
 									<Bookmark />
 								</IconButton>
 							</Tooltip>
@@ -88,6 +106,7 @@ export default function NavigationDialog({ onClose, openModal }: {
 				</DialogActions>
 			</Dialog>
 			<AboutDialog openModal={openAbout} onClose={handleCloseAbout} />
+			<BookmarksDialog openModal={openBookmarks} onClose={handleCloseBookmarks} />
 		</div>
 	);
-};
+}
diff --git a/src/components/Dialogs/RematchDialog.tsx b/src/components/Dialogs/RematchDialog.tsx
@@ -40,7 +40,8 @@ export default function RematchDialog({ onClose, openModal, provider, type }: {
 
 	return (
 		<div>
-			<Dialog open={open} onClose={handleClose}>
+			<Dialog open={open} onClose={handleClose} fullWidth={true}
+				maxWidth="md">
 				<DialogTitle>{t("EDIT")}</DialogTitle>
 				<DialogContent>
 					<DialogContentText>

diff --git a/src/components/Dialogs/SettingsDialog.tsx b/src/components/Dialogs/SettingsDialog.tsx
@@ -27,7 +27,8 @@ export default function SettingsDialog({ onClose, openModal }: {
 
 	return (
 		<div>
-			<Dialog open={open} onClose={handleClose}>
+			<Dialog open={open} onClose={handleClose} fullWidth={true}
+				maxWidth="md">
 				<DialogTitle>{t("EDIT")}</DialogTitle>
 				<DialogContent>
 					<DialogContentText>

diff --git a/src/components/Dialogs/UploadDialog.tsx b/src/components/Dialogs/UploadDialog.tsx
@@ -55,7 +55,8 @@ export default function UploadDialog({ onClose, openModal, cosmicComicsTemp }: {
 
 	return (
 		<div>
-			<Dialog open={open} onClose={handleClose}>
+			<Dialog open={open} onClose={handleClose} fullWidth={true}
+				maxWidth="md">
 				<DialogTitle>{t("upload")}</DialogTitle>
 				<DialogContent>
 					<DialogContentText>

diff --git a/src/components/Dialogs/UserAccountDialog.tsx b/src/components/Dialogs/UserAccountDialog.tsx
@@ -40,7 +40,7 @@ export default function UserAccountDialog({ forWhat, onClose, openModal }: {
 		<div>
 			<Dialog open={open} onClose={handleClose}
 				maxWidth="md"
-				fullWidth
+				fullWidth={true}
 			>
 				<DialogTitle>{forWhat == 'edit' ? t("EDIT") : t("Createanewuser")}</DialogTitle>
 				<DialogContent>

diff --git a/src/static/collectionner.js b/src/static/collectionner.js
@@ -35,55 +35,6 @@ function resetLibModal() {
     };
 }
 
-//List of Bookmarked folder
-function listBM() {
-    const option = {
-        method: 'GET', headers: {
-            'Content-Type': 'application/json', "token": currentProfile.getToken,
-        }
-    };
-    fetch(PDP + "/BM/getBM", option).then((response) => {
-        return response.json();
-    }).then(function (info) {
-        console.log(info);
-        if (info.length === 0) {
-            let iblock = document.createElement("i");
-            iblock.innerText = "block";
-            iblock.className = "material-icons";
-            if (currenttheme > 1) iblock.style.color = theme_FG;
-            document.getElementById("bookmarkContainer").appendChild(iblock);
-            return;
-        }
-        info.forEach((file) => {
-            getFromDB("Books", "URLCover FROM Books WHERE ID_BOOK = '" + file["BOOK_ID"] + "'").then(async (resa) => {
-                resa = JSON.parse(resa)
-                let res = resa[0].URLCover;
-                const btn = document.createElement("button");
-                console.log("openBOOKM('" + file["PATH"] + "&page=" + file["page"] + "');");
-                btn.addEventListener("click", function () {
-                    openBOOKM(file["PATH"], file["page"]);
-                });
-                btn.className = "btn pure-material-button-contained";
-                btn.style = "margin:5px";
-                btn.innerText = language["Seethepage"] + file["page"];
-                let image = document.createElement("img");
-                image.src = res;
-                image.style = "width:100%;height:100%;";
-                let div = document.createElement("div");
-                div.appendChild(image);
-                div.style.width = "30%";
-                div.appendChild(btn);
-                document.getElementById("bookmarkContainer").appendChild(div);
-            });
-        });
-    }).catch(function (error) {
-        console.log(error);
-    });
-}
-
-//the Bookmarked loading
-listBM();
-
 //Handle the drag and drop to open files in the app
 document.addEventListener("drop", (event) => {
     event.preventDefault();