♻️ refactor: add very specific tiny image adder

andrehadianto · Sep 27, 2024 · 033d73b · 033d73b
1 parent 8cdcfc8
commit 033d73b
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 6 deletions.
diff --git a/pages/sticker-map/index.tsx b/pages/sticker-map/index.tsx
@@ -15,6 +15,7 @@ import "filepond/dist/filepond.min.css";
 export const StickerMap = () => {
   const router = useRouter();
   const [files, setFiles] = useState<Blob[]>([]);
+  const [tinyFiles, setTinyFiles] = useState<Blob[]>([]);
 
   const [imageSize, setImageSize] = useState(51);
   const [blackBorderSize, setBlackBorderSize] = useState(1);
@@ -24,6 +25,10 @@ export const StickerMap = () => {
     setFiles(items.map((item) => item.file));
   };
 
+  const handleTinyFilePondChange = (items: FilePondFile[]) => {
+    setTinyFiles(items.map((item) => item.file));
+  };
+
   const handleNavigateToPrint = () => {
     router.push({
       pathname: "/sticker-map/print",
@@ -32,6 +37,9 @@ export const StickerMap = () => {
         blackBorderSize,
         whiteBorderSize,
         files: JSON.stringify(files.map((file) => URL.createObjectURL(file))),
+        tinyFiles: JSON.stringify(
+          tinyFiles.map((file) => URL.createObjectURL(file)),
+        ),
       },
     });
   };
@@ -44,8 +52,19 @@ export const StickerMap = () => {
           allowMultiple={true}
           className="w-[400px]"
           files={files}
+          labelIdle="Drag & Drop your main image files"
+          name="main-image"
           onupdatefiles={handleFilePondChange}
         />
+        <FilePond
+          acceptedFileTypes={["img/png", "img/jpg", "img/jpeg"]}
+          allowMultiple={true}
+          className="w-[400px]"
+          files={tinyFiles}
+          labelIdle="Drag & Drop your tiny image files"
+          name="tiny-image"
+          onupdatefiles={handleTinyFilePondChange}
+        />
         <div className="flex h-fit flex-col gap-2 rounded-md border border-border-base p-4">
           <Input
             contentProps={{

diff --git a/pages/sticker-map/print.tsx b/pages/sticker-map/print.tsx
@@ -7,16 +7,20 @@ import { cn } from "@/common/functions";
 
 export const PrintPage = () => {
   const [extraImage, setExtraImage] = useState<string[]>([]);
+  const [tinyImage, setTinyImage] = useState<string[]>([]);
 
   const { query } = useRouter();
-  const { imageSize, blackBorderSize, whiteBorderSize, files } = query as {
-    imageSize: string;
-    blackBorderSize: string;
-    whiteBorderSize: string;
-    files: string;
-  };
+  const { imageSize, blackBorderSize, whiteBorderSize, files, tinyFiles } =
+    query as {
+      imageSize: string;
+      blackBorderSize: string;
+      whiteBorderSize: string;
+      files: string;
+      tinyFiles: string;
+    };
 
   const parsedFiles: string[] = JSON.parse(files ?? "[]");
+  const parsedTinyFiles: string[] = JSON.parse(tinyFiles ?? "[]");
 
   if (!files || !imageSize || !blackBorderSize || !whiteBorderSize) {
     return (
@@ -58,6 +62,27 @@ export const PrintPage = () => {
     </div>
   );
 
+  const renderTinyImage = (file: string) => (
+    <div className="h-fit w-fit border border-black">
+      <div
+        className="border-white"
+        style={{
+          boxSizing: "border-box",
+          height: `35mm`,
+          width: `35mm`,
+          borderWidth: `2mm`,
+        }}
+      >
+        <img
+          alt="sticker"
+          className={cn("box-border border-black object-cover")}
+          src={file}
+          style={{ borderWidth: `1mm` }}
+        />
+      </div>
+    </div>
+  );
+
   return (
     <main className="flex flex-col gap-4">
       <section className="h-[297mm] w-[210mm] bg-white">
@@ -75,6 +100,8 @@ export const PrintPage = () => {
               ),
             )}
           {extraImage.length > 0 && extraImage.map((file) => renderImage(file))}
+          {tinyImage.length > 0 &&
+            tinyImage.map((file) => renderTinyImage(file))}
         </div>
       </section>
       <div className="flex w-[210mm] flex-col gap-2">
@@ -92,6 +119,20 @@ export const PrintPage = () => {
             Delete Last Extra Image
           </Button>
         </div>
+        <div className="flex gap-2">
+          <Button
+            fullWidth
+            onClick={() => setTinyImage([...tinyImage, parsedTinyFiles[0]])}
+          >
+            Add Tiny Image
+          </Button>
+          <Button
+            fullWidth
+            onClick={() => setTinyImage(tinyImage.slice(0, -1))}
+          >
+            Delete Last Tiny Image
+          </Button>
+        </div>
         <span className="font-mono text-sm text-text-em-high">
           The white space above is the A4 paper.
         </span>