From 5b380dcd14fe49bf7aedc7c2713f2dd6ef8b3811 Mon Sep 17 00:00:00 2001
From: junglesub <junglesubmarine@gmail.com>
Date: Tue, 29 Oct 2024 14:50:09 +0900
Subject: [PATCH 1/3] feat(client): impl gallary for images

---
 src/main/front/package-lock.json              | 22 ++++++++
 src/main/front/package.json                   |  1 +
 .../front/src/components/FeedCardGallery.jsx  | 52 +++++++++++-------
 .../src/components/FeedCardImageItem.jsx      | 54 +++++++++++++++++++
 4 files changed, 109 insertions(+), 20 deletions(-)
 create mode 100644 src/main/front/src/components/FeedCardImageItem.jsx

diff --git a/src/main/front/package-lock.json b/src/main/front/package-lock.json
index 1822343..9f70161 100644
--- a/src/main/front/package-lock.json
+++ b/src/main/front/package-lock.json
@@ -16,6 +16,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-infinite-scroller": "^1.2.6",
+        "react-photoswipe-gallery": "^3.0.2",
         "react-router-dom": "^6.26.2",
         "react-show-more-text": "github:junglesub/react-show-more-text",
         "recoil": "^0.7.7"
@@ -4133,6 +4134,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/photoswipe": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.4.tgz",
+      "integrity": "sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.12.0"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
@@ -4252,6 +4263,17 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-photoswipe-gallery": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/react-photoswipe-gallery/-/react-photoswipe-gallery-3.0.2.tgz",
+      "integrity": "sha512-TLkpzp2BSUUL/4GPRU5SQWXfJ8xuUBKgS8qUaHyhsT1co6CStr1mVCl4oQrSSFbWxAKhB5fHbr12l1R+TkqFcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "photoswipe": ">= 5.2.2",
+        "prop-types": ">= 15.7.0",
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
diff --git a/src/main/front/package.json b/src/main/front/package.json
index 8b9d8c8..dbe4a31 100644
--- a/src/main/front/package.json
+++ b/src/main/front/package.json
@@ -18,6 +18,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-infinite-scroller": "^1.2.6",
+    "react-photoswipe-gallery": "^3.0.2",
     "react-router-dom": "^6.26.2",
     "react-show-more-text": "github:junglesub/react-show-more-text",
     "recoil": "^0.7.7"
diff --git a/src/main/front/src/components/FeedCardGallery.jsx b/src/main/front/src/components/FeedCardGallery.jsx
index 2fc58e7..e38cc59 100644
--- a/src/main/front/src/components/FeedCardGallery.jsx
+++ b/src/main/front/src/components/FeedCardGallery.jsx
@@ -1,31 +1,43 @@
 import "./FeedCardGallery.css";
+import { Gallery, Item } from "react-photoswipe-gallery";
 import { getExtensionFromUrl, isImage, isVideo } from "../tools/tools";
 
+import "photoswipe/dist/photoswipe.css";
+import FeedCardImageItem from "./FeedCardImageItem";
+
 const FeedCardGallery = ({ images = [] }) => {
   const filteredImages = images.filter((url) => isImage(url) || isVideo(url));
   if (filteredImages.length === 0) return <></>;
   return (
     <div className="FeedCardGallery">
-      <div className={`post-images images-${filteredImages.length}`}>
-        {filteredImages.slice(0, 3).map((url, index) =>
-          isImage(url) ? (
-            <img key={index} src={url} alt={`${index + 1}`} loading="lazy" />
-          ) : isVideo(url) ? (
-            <video key={index} controls>
-              <source src={url} type={`video/${getExtensionFromUrl(url)}`} />
-              Your browser does not support the video tag.
-            </video>
-          ) : (
-            <>Unknown Data</>
-          )
-        )}
-        {filteredImages.length >= 4 && (
-          <div className="more-images-overlay">
-            {filteredImages.length > 5 && <span>+{images.length - 4}</span>}
-            <img key={1} src={images[3]} alt={`4`} loading="lazy" />
-          </div>
-        )}
-      </div>
+      <Gallery withDownloadButton>
+        <div className={`post-images images-${filteredImages.length}`}>
+          {filteredImages.slice(0, 3).map((url, index) =>
+            isImage(url) ? (
+              <FeedCardImageItem url={url} index={index} />
+            ) : // <img key={index} src={url} alt={`${index + 1}`} loading="lazy" />
+            isVideo(url) ? (
+              <video key={index} controls>
+                <source src={url} type={`video/${getExtensionFromUrl(url)}`} />
+                Your browser does not support the video tag.
+              </video>
+            ) : (
+              <>Unknown Data</>
+            )
+          )}
+          {filteredImages.length >= 4 && (
+            <div className="more-images-overlay">
+              {filteredImages.length > 5 && <span>+{images.length - 4}</span>}
+              <FeedCardImageItem url={images[3]} index={3} />
+              {filteredImages.slice(4).map((url, index) => (
+                <FeedCardImageItem url={url} index={index + 4} hidden={true} />
+              ))}
+
+              {/* <img key={1} src={images[3]} alt={`4`} loading="lazy" /> */}
+            </div>
+          )}
+        </div>
+      </Gallery>
     </div>
   );
 };
diff --git a/src/main/front/src/components/FeedCardImageItem.jsx b/src/main/front/src/components/FeedCardImageItem.jsx
new file mode 100644
index 0000000..6b264d5
--- /dev/null
+++ b/src/main/front/src/components/FeedCardImageItem.jsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from "react";
+import { Item } from "react-photoswipe-gallery";
+
+function FeedCardImageItem({ url, index, hidden }) {
+  const [dimensions, setDimensions] = useState({ width: 300, height: 300 });
+
+  useEffect(() => {
+    const loadDimensions = async () => {
+      try {
+        const { width, height } = await preloadImage(url);
+        setDimensions({ width, height });
+      } catch (error) {
+        console.error("Failed to load image dimensions", error);
+      }
+    };
+
+    loadDimensions();
+  }, [url]);
+
+  return (
+    <Item
+      original={url}
+      thumbnail={url}
+      width={dimensions.width}
+      height={dimensions.height}
+    >
+      {({ ref, open }) => (
+        <img
+          ref={ref}
+          onClick={open}
+          src={url}
+          alt={`image-${index}`}
+          className="thumbnail"
+          loading="lazy"
+          style={
+            { display: hidden ? "none" : "block" }
+            // { display: "block" }
+          }
+        />
+      )}
+    </Item>
+  );
+}
+
+export default FeedCardImageItem;
+
+const preloadImage = (src) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = src;
+    img.onload = () => resolve({ width: img.width, height: img.height });
+    img.onerror = reject;
+  });
+};

From 3925f411be418642958279f0f41af4deffeb267c Mon Sep 17 00:00:00 2001
From: junglesub <junglesubmarine@gmail.com>
Date: Tue, 29 Oct 2024 15:03:07 +0900
Subject: [PATCH 2/3] feat(client): more info link

---
 .../front/src/components/FeedCardGallery.jsx  | 73 ++++++++++++-------
 1 file changed, 46 insertions(+), 27 deletions(-)

diff --git a/src/main/front/src/components/FeedCardGallery.jsx b/src/main/front/src/components/FeedCardGallery.jsx
index e38cc59..16c5c79 100644
--- a/src/main/front/src/components/FeedCardGallery.jsx
+++ b/src/main/front/src/components/FeedCardGallery.jsx
@@ -1,5 +1,5 @@
 import "./FeedCardGallery.css";
-import { Gallery, Item } from "react-photoswipe-gallery";
+import { Gallery, Item, useGallery } from "react-photoswipe-gallery";
 import { getExtensionFromUrl, isImage, isVideo } from "../tools/tools";
 
 import "photoswipe/dist/photoswipe.css";
@@ -11,35 +11,54 @@ const FeedCardGallery = ({ images = [] }) => {
   return (
     <div className="FeedCardGallery">
       <Gallery withDownloadButton>
-        <div className={`post-images images-${filteredImages.length}`}>
-          {filteredImages.slice(0, 3).map((url, index) =>
-            isImage(url) ? (
-              <FeedCardImageItem url={url} index={index} />
-            ) : // <img key={index} src={url} alt={`${index + 1}`} loading="lazy" />
-            isVideo(url) ? (
-              <video key={index} controls>
-                <source src={url} type={`video/${getExtensionFromUrl(url)}`} />
-                Your browser does not support the video tag.
-              </video>
-            ) : (
-              <>Unknown Data</>
-            )
-          )}
-          {filteredImages.length >= 4 && (
-            <div className="more-images-overlay">
-              {filteredImages.length > 5 && <span>+{images.length - 4}</span>}
-              <FeedCardImageItem url={images[3]} index={3} />
-              {filteredImages.slice(4).map((url, index) => (
-                <FeedCardImageItem url={url} index={index + 4} hidden={true} />
-              ))}
-
-              {/* <img key={1} src={images[3]} alt={`4`} loading="lazy" /> */}
-            </div>
-          )}
-        </div>
+        <FeedCardGalleryContent
+          images={images}
+          filteredImages={filteredImages}
+        />
       </Gallery>
     </div>
   );
 };
 
 export default FeedCardGallery;
+
+const FeedCardGalleryContent = ({ filteredImages, images }) => {
+  const { open } = useGallery();
+
+  return (
+    <div className={`post-images images-${filteredImages.length}`}>
+      {filteredImages.slice(0, 3).map((url, index) =>
+        isImage(url) ? (
+          <FeedCardImageItem url={url} index={index} />
+        ) : // <img key={index} src={url} alt={`${index + 1}`} loading="lazy" />
+        isVideo(url) ? (
+          <video key={index} controls>
+            <source src={url} type={`video/${getExtensionFromUrl(url)}`} />
+            Your browser does not support the video tag.
+          </video>
+        ) : (
+          <>Unknown Data</>
+        )
+      )}
+      {filteredImages.length >= 4 && (
+        <div className="more-images-overlay">
+          {filteredImages.length > 5 && (
+            <span
+              onClick={() => {
+                open(3);
+              }}
+            >
+              +{images.length - 4}
+            </span>
+          )}
+          <FeedCardImageItem url={images[3]} index={3} />
+          {filteredImages.slice(4).map((url, index) => (
+            <FeedCardImageItem url={url} index={index + 4} hidden={true} />
+          ))}
+
+          {/* <img key={1} src={images[3]} alt={`4`} loading="lazy" /> */}
+        </div>
+      )}
+    </div>
+  );
+};

From 78636adc8282ca2d0c095e4a060561678db03322 Mon Sep 17 00:00:00 2001
From: junglesub <junglesubmarine@gmail.com>
Date: Tue, 29 Oct 2024 15:05:21 +0900
Subject: [PATCH 3/3] chore(client): fix lint errors

---
 src/main/front/src/components/FeedCardGallery.jsx     | 11 ++++++++---
 src/main/front/src/components/FeedCardImageItem.jsx   |  2 +-
 .../front/src/components/modals/PWAInstallModal.jsx   |  2 +-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/main/front/src/components/FeedCardGallery.jsx b/src/main/front/src/components/FeedCardGallery.jsx
index 16c5c79..300092c 100644
--- a/src/main/front/src/components/FeedCardGallery.jsx
+++ b/src/main/front/src/components/FeedCardGallery.jsx
@@ -1,5 +1,5 @@
 import "./FeedCardGallery.css";
-import { Gallery, Item, useGallery } from "react-photoswipe-gallery";
+import { Gallery, useGallery } from "react-photoswipe-gallery";
 import { getExtensionFromUrl, isImage, isVideo } from "../tools/tools";
 
 import "photoswipe/dist/photoswipe.css";
@@ -29,7 +29,7 @@ const FeedCardGalleryContent = ({ filteredImages, images }) => {
     <div className={`post-images images-${filteredImages.length}`}>
       {filteredImages.slice(0, 3).map((url, index) =>
         isImage(url) ? (
-          <FeedCardImageItem url={url} index={index} />
+          <FeedCardImageItem key={index} url={url} index={index} />
         ) : // <img key={index} src={url} alt={`${index + 1}`} loading="lazy" />
         isVideo(url) ? (
           <video key={index} controls>
@@ -53,7 +53,12 @@ const FeedCardGalleryContent = ({ filteredImages, images }) => {
           )}
           <FeedCardImageItem url={images[3]} index={3} />
           {filteredImages.slice(4).map((url, index) => (
-            <FeedCardImageItem url={url} index={index + 4} hidden={true} />
+            <FeedCardImageItem
+              key={index + 4}
+              url={url}
+              index={index + 4}
+              hidden={true}
+            />
           ))}
 
           {/* <img key={1} src={images[3]} alt={`4`} loading="lazy" /> */}
diff --git a/src/main/front/src/components/FeedCardImageItem.jsx b/src/main/front/src/components/FeedCardImageItem.jsx
index 6b264d5..b63e9d3 100644
--- a/src/main/front/src/components/FeedCardImageItem.jsx
+++ b/src/main/front/src/components/FeedCardImageItem.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Item } from "react-photoswipe-gallery";
 
 function FeedCardImageItem({ url, index, hidden }) {
diff --git a/src/main/front/src/components/modals/PWAInstallModal.jsx b/src/main/front/src/components/modals/PWAInstallModal.jsx
index 0e77cab..e3bd9dc 100644
--- a/src/main/front/src/components/modals/PWAInstallModal.jsx
+++ b/src/main/front/src/components/modals/PWAInstallModal.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Modal, Box, Typography, Button } from "@mui/material";
 import useDownloadPWA from "../../hooks/useDownloadPWA";
 import { getDateString } from "../../tools/tools";