Beta v1.1

* Optimized performance on synchronizations
Z-ls · Dec 9, 2022 · d4421df · d4421df
1 parent b4344f8
commit d4421df
Show file tree

Hide file tree

Showing 9 changed files with 151 additions and 141 deletions.
diff --git a/public/fetchRelevantPicUrls.js b/public/fetchRelevantPicUrls.js
@@ -1,6 +1,6 @@
 /* global chrome*/
 {
-	chrome.storage.local.set({ pageUrl: window.location.href, parentPicUrl: [], childrenPageUrls: [] });
+	chrome.storage.local.set({ pageUrl: [window.location.href], parentPicUrl: [], childrenPageUrls: [] });
 	const divPostView = document.getElementById("post-view");
 	const divStatusNotice = Array.from(divPostView.getElementsByClassName("status-notice"));
 	for (let div of divStatusNotice) {

diff --git a/public/getChildPicObjs.js b/public/getChildPicObjs.js
diff --git a/public/getMainPicObj.js b/public/getMainPicObj.js
diff --git a/public/getParentPicObj.js b/public/getParentPicObj.js
diff --git a/src/App.js b/src/App.js
@@ -1,26 +1,36 @@
 /*global chrome*/
 import "./App.css";
 import { useState, useEffect } from "react";
-import { fetchChildrenPics, fetchMainPic, fetchParentPic } from "./js/fetchRelevant";
-import { Stack, Container, Row, Col, Button, CardGroup } from "react-bootstrap";
+import { fetchRelevantPics } from "./js/fetchRelevant";
+import { Stack, Container, Row, Col, Button } from "react-bootstrap";
 import { RelevantPicCardGroup } from "./components/RelevantPicCardGroup";
 import { MainImageCard } from "./components/MainImageCard";
 import { ModalComparison } from "./components/ModalComparison";
 
 function App() {
 	const [mainPic, setMainPic] = useState();
-	const [highQual, setHighQual] = useState("");
-	const [parentPic, setParentPic] = useState([]);
+	const [parentPic, setParentPic] = useState();
 	const [childrenPics, setChildrenPics] = useState([]);
 	const [selected, setSelected] = useState([]);
 	const [showRelevant, setShowRelevant] = useState(false);
 	const [showComparison, setShowComparison] = useState(false);
 
 	useEffect(() => {
 		chrome.storage.local.get(["pageUrl", "parentPicUrl", "childrenPageUrls"], data => {
-			fetchMainPic(data.pageUrl, setMainPic, setHighQual);
-			setParentPic(fetchParentPic(data.parentPicUrl));
-			setChildrenPics(fetchChildrenPics(data.childrenPageUrls));
+			fetchRelevantPics("main", data.pageUrl);
+			fetchRelevantPics("parent", data.parentPicUrl);
+			fetchRelevantPics("child", data.childrenPageUrls);
+		});
+		chrome.runtime.onMessage.addListener(message => {
+			if (message.mainPic) {
+				setMainPic(message.mainPic);
+			}
+			if (message.parentPic) {
+				setParentPic(message.parentPic);
+			}
+			if (message.childPic) {
+				setChildrenPics(oldList => [...oldList, message.childPic]);
+			}
 		});
 	}, []);
 
@@ -53,12 +63,7 @@ function App() {
 				<Col className="mt-2 d-block justify-content-center">
 					<Row>
 						<Col className="d-grid justify-content-end">
-							<MainImageCard
-								selected={selected}
-								setSelected={setSelected}
-								png={!!highQual}
-								pic={highQual ?? mainPic}
-							/>
+							{mainPic && <MainImageCard selected={selected} setSelected={setSelected} pic={mainPic} />}
 						</Col>
 						<Col className="d-grid justify-content-start">
 							<Stack direction="vertical" gap={2}>

diff --git a/src/components/ImageCard.js b/src/components/ImageCard.js
@@ -1,10 +1,9 @@
-/*global chrome*/
-
 import { useState } from "react";
-import { Row, Col, Card, Button, Badge } from "react-bootstrap";
+import { Stack, Row, Col, Card, Button, Badge } from "react-bootstrap";
 import { ModalPreview } from "./ModalPreview";
 import { DownloadButton } from "./DownloadButton";
 import { toggleSelected } from "../js/commonFunctions";
+import { fetchByPageUrl } from "../js/fetchRelevant";
 
 export function ImageCard(props) {
 	const [showButtons, setShowButtons] = useState(false);
@@ -32,20 +31,34 @@ export function ImageCard(props) {
 				{showButtons && (
 					<Row className="d-flex justify-content-evenly">
 						{props.isParent && (
-								<Row className="mb-1">
+							<Row className="mb-1">
 								<Col className="d-flex justify-content-center">
 									<Button
 										variant="info"
 										onClick={ev => {
 											ev.preventDefault();
-											chrome.tabs.create({ url: props.pic.pageUrl, active: false });
+											fetchByPageUrl(props.pic.pageUrl);
 										}}>
-										VISIT
+										FETCH
 									</Button>
 								</Col>
 							</Row>
 						)}
+						{!props.isParent && props.pic.hasDeeperRelatives && (
 							<Row className="mb-1">
+								<Col className="d-flex justify-content-center">
+									<Button
+										variant="info"
+										onClick={ev => {
+											ev.preventDefault();
+											fetchByPageUrl(props.pic.pageUrl);
+										}}>
+										FETCH
+									</Button>
+								</Col>
+							</Row>
+						)}
+						<Row className="mb-1">
 							<Col className="d-flex justify-content-center">
 								<Button
 									variant="success"
@@ -65,11 +78,19 @@ export function ImageCard(props) {
 					</Row>
 				)}
 			</Card.ImgOverlay>
-			<Card.Footer className="d-flex justify-content-between">
-				<Badge bg="primary" text="light">
-					{props.pic.large_width + " X " + props.pic.large_height}
-				</Badge>
-				{props.pic.src.split(".").at(-1) === "png" && <Badge bg="success">PNG</Badge>}
+			<Card.Footer className="d-flex justify-content-center">
+				<Stack gap={2}>
+					<Badge
+						bg={
+							props.pic.extension === "png"
+								? "success"
+								: props.pic.hasDeeperRelatives
+								? "warning"
+								: "secondary"
+						}>
+						{props.pic.large_width + " X " + props.pic.large_height}
+					</Badge>
+				</Stack>
 			</Card.Footer>
 		</Card>
 	);

diff --git a/src/components/MainImageCard.js b/src/components/MainImageCard.js
@@ -3,28 +3,29 @@ import { DownloadButton } from "./DownloadButton";
 import { toggleSelected } from "../js/commonFunctions";
 
 export function MainImageCard(props) {
-	const src = props.png ? props.pic : props.pic.src;
-
 	return (
 		<Card
-			className={props.selected.includes(src) && "shadow"}
+			className={props.selected.includes(props.pic.src) && "shadow"}
 			onClick={ev => {
 				ev.preventDefault();
-				toggleSelected(props.selected, props.setSelected, src);
+				toggleSelected(props.selected, props.setSelected, props.pic.src);
 			}}>
 			<Card.Header className="text-muted">
 				<Stack direction="horizontal" gap={2}>
-					<DownloadButton srcUrl={src} />
-					{props.png ? (
-						<Badge pill bg="success">
-							PNG
-						</Badge>
-					) : (
-						props.pic.large_width + " X " + props.pic.large_height
-					)}
+					<DownloadButton srcUrl={props.pic.src} />
+					{props.pic.extension === "png" && <Badge bg="success">PNG</Badge>}
+					<Badge bg="primary" text="light">
+						{props.pic.large_width + " X " + props.pic.large_height}
+					</Badge>
 				</Stack>
 			</Card.Header>
-			<Card.Img rounded thumbnail variant="Bottom" style={{ maxHeight: "43rem", maxWidth: "54rem" }} src={src} />
+			<Card.Img
+				rounded
+				thumbnail
+				variant="Bottom"
+				style={{ maxHeight: "45rem", maxWidth: "54rem" }}
+				src={props.pic.src}
+			/>
 		</Card>
 	);
 }
diff --git a/src/components/RelevantPicCardGroup.js b/src/components/RelevantPicCardGroup.js
@@ -2,16 +2,30 @@ import { CardGroup } from "react-bootstrap";
 import { ImageCard } from "./ImageCard";
 
 export function RelevantPicCardGroup(props) {
-	return props.pics.length ? (
+	return (
 		<CardGroup>
-			{props.pics.map(pic => {
-				return <ImageCard {...props} pic={pic} />;
-			})}
+			{props.isParent ? (
+				props.pic ? (
+					<ImageCard {...props} pic={props.pic} />
+				) : (
+					<NotFoundMessage isParent={props.isParent} />
+				)
+			) : props.pics.length ? (
+				props.pics
+					.filter(pic => !!pic)
+					.map(pic => {
+						return <ImageCard {...props} pic={pic} />;
+					})
+			) : (
+				<NotFoundMessage isParent={props.isParent} />
+			)}
 		</CardGroup>
-	) : (
-		<p className="text-muted text-center">
-			No {props.isParent ? "parent" : "children"} pictures fetched. If you are sure about them, please refresh,
-			and wait for all tabs to close.
-		</p>
 	);
 }
+
+const NotFoundMessage = props => {
+	<p className="text-muted text-center">
+		No {props.isParent ? "parent" : "children"} pictures fetched. If you are sure about them, please refresh, and
+		wait for all tabs to close.
+	</p>;
+};