Merge pull request #29 from Dan6erbond:develop

feat: Implement Individual Upload Tracking

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "conventionalCommits.scopes": [
+    "server",
+    "tagger",
+    "search",
+    "frontend"
+  ]
+}

package.json

@@ -37,6 +37,10 @@
     "react-dom": "18.2.0",
     "react-icons": "^4.8.0",
     "react-query": "^3.39.3",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/uuid": "^9.0.1"
   }
 }

server/go.mod

@@ -38,7 +38,7 @@ require (
 	github.com/gabriel-vasile/mimetype v1.4.2 // indirect
 	github.com/ganigeorgiev/fexpr v0.3.0 // indirect
 	github.com/go-ozzo/ozzo-validation/v4 v4.3.0 // indirect
-	github.com/golang-jwt/jwt/v4 v4.5.0 // indirect
+	github.com/golang-jwt/jwt/v4 v4.5.0
 	github.com/golang/groupcache v0.0.0-20210331224755-41bb18bfe9da // indirect
 	github.com/golang/protobuf v1.5.3 // indirect
 	github.com/google/uuid v1.3.0 // indirect
@@ -50,15 +50,15 @@ require (
 	github.com/josharian/intern v1.0.0 // indirect
 	github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 // indirect
 	github.com/klauspost/compress v1.16.5 // indirect
-	github.com/labstack/echo/v5 v5.0.0-20220201181537-ed2888cfa198 // indirect
+	github.com/labstack/echo/v5 v5.0.0-20220201181537-ed2888cfa198
 	github.com/mailru/easyjson v0.7.7 // indirect
 	github.com/mattn/go-colorable v0.1.13 // indirect
 	github.com/mattn/go-isatty v0.0.18 // indirect
 	github.com/mattn/go-sqlite3 v1.14.16 // indirect
 	github.com/meilisearch/meilisearch-go v0.24.0
 	github.com/mgutz/ansi v0.0.0-20200706080929-d51e80ef957d // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
-	github.com/spf13/cast v1.5.0 // indirect
+	github.com/spf13/cast v1.5.0
 	github.com/spf13/cobra v1.7.0
 	github.com/spf13/pflag v1.0.5 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect

src/hooks/useUploadFiles.tsx

@@ -1,9 +1,10 @@
+import { usePocketBase } from "@/pocketbase";
 import { File as ShareMeFile } from "@/pocketbase/models";
 import { uploadFile } from "@/pocketbase/uploadFile";
 import { notifications } from "@mantine/notifications";
 import { IconAlertCircle } from "@tabler/icons-react";
-import { useState } from "react";
-import { usePocketBase } from "@/pocketbase";
+import { useCallback, useState } from "react";
+import { v4 as uuidv4 } from "uuid";
 
 export interface NewFile {
   file: File;
@@ -12,66 +13,70 @@ export interface NewFile {
   description: string;
 }
 
+interface Upload {
+  file: NewFile;
+  uuid: string;
+}
+
 interface UseUploadFilesOptions {
   acceptTypes: string[];
 }
 
 export const useUploadFiles = ({ acceptTypes }: UseUploadFilesOptions) => {
   const pb = usePocketBase();
-  const [uploading, setUploading] = useState(false);
+  const [uploads, setUploads] = useState([] as Upload[]);
 
-  const uploadFiles = async (files: NewFile[]) => {
-    setUploading(true);
+  const uploadFiles = useCallback(
+    async (files: NewFile[]) => {
+      const promises = files.map(async (file) => {
+        if (!acceptTypes.includes(file.file.type)) return;
 
-    const promises = files.map(async (file) => {
-      if (!acceptTypes.includes(file.file.type)) return;
+        const uuid = uuidv4();
 
-      try {
-        const createdRecord = await uploadFile(pb, {
-          file: file.file,
-          name: file.name,
-          author: file.author,
-          description: file.description,
-        });
-        return createdRecord;
-      } catch (ex: any) {
-        console.error(ex);
+        try {
+          setUploads((uploads) => [...uploads, { file, uuid }]);
+          const createdRecord = await uploadFile(pb, file);
+          return createdRecord;
+        } catch (ex: any) {
+          console.error(ex);
 
-        if (ex.response) {
-          const { data, message } = ex.response;
-          if (message === "Failed to create record.") {
-            if (data.file) {
-              const { code, message } = data.file;
-              if (code === "validation_file_size_limit") {
-                notifications.show({
-                  color: "orange",
-                  title: "File too large",
-                  message: message,
-                  icon: <IconAlertCircle />,
-                });
-                return;
+          if (ex.response) {
+            const { data, message } = ex.response;
+            if (message === "Failed to create record.") {
+              if (data.file) {
+                const { code, message } = data.file;
+                if (code === "validation_file_size_limit") {
+                  notifications.show({
+                    color: "orange",
+                    title: "File too large",
+                    message: message,
+                    icon: <IconAlertCircle />,
+                  });
+                  return;
+                }
               }
             }
           }
-        }
-
-        notifications.show({
-          color: "red",
-          title: "An error occured",
-          message: "Please contact the developers",
-          icon: <IconAlertCircle />,
-        });
-      }
-    });
 
-    const records = (await Promise.all(promises)).filter(
-      (r) => r !== undefined
-    ) as ShareMeFile[];
+          notifications.show({
+            color: "red",
+            title: "An error occured",
+            message: "Please contact the developers",
+            icon: <IconAlertCircle />,
+          });
+        } finally {
+          setUploads((uploads) => uploads.filter(({ uuid: u }) => u !== uuid));
+        }
+      });
 
-    setUploading(false);
+      const records = (await Promise.all(promises)).filter(
+        (r) => r !== undefined
+      ) as ShareMeFile[];
 
-    return records;
-  };
+      return records;
+    },
+    [setUploads, acceptTypes, pb]
+  );
 
-  return { uploading, uploadFiles };
+  return { uploads, uploadFiles, uploading: uploads.length !== 0 };
 };

src/pages/posts/[id].tsx

@@ -4,6 +4,7 @@ import Head from "@/components/head";
 import Layout from "@/components/layout";
 import UserAvatar from "@/components/userAvatar";
 import { useCreatePost } from "@/hooks/useCreatePost";
+import { useRefCallback } from "@/hooks/useRefCallback";
 import { useUploadFiles } from "@/hooks/useUploadFiles";
 import { initPocketBaseServer, usePocketBase } from "@/pocketbase";
 import { useAuth } from "@/pocketbase/auth";
@@ -43,7 +44,6 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { Record, RecordSubscription } from "pocketbase";
 import { useCallback, useEffect, useState } from "react";
-import { useRefCallback } from "../../hooks/useRefCallback";
 
 interface PostProps extends ShareMeEnv {
   title: string;
@@ -78,7 +78,7 @@ export default function Post(props: PostProps) {
 
   const [debouncedTitle] = useDebouncedValue(title, 200, { leading: true });
 
-  const { uploading, uploadFiles: _uploadFiles } = useUploadFiles({
+  const { uploads, uploadFiles: _uploadFiles } = useUploadFiles({
     acceptTypes: MEDIA_MIME_TYPE,
   });
 
@@ -481,9 +481,9 @@ export default function Post(props: PostProps) {
                 </Stack>
               </Paper>
             ))}
-            {uploading && (
-              <Loader variant="bars" sx={{ alignSelf: "center" }} />
-            )}
+            {uploads.map(({ uuid }) => (
+              <Loader variant="bars" sx={{ alignSelf: "center" }} key={uuid} />
+            ))}
             {userIsAuthor && <Dropzone onDrop={uploadFiles} />}
           </Stack>
           <Paper

yarn.lock

@@ -586,6 +586,11 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
   integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
 
+"@types/uuid@^9.0.1":
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.1.tgz#98586dc36aee8dacc98cc396dbca8d0429647aa6"
+  integrity sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==
+
 "@typescript-eslint/parser@^5.42.0":
   version "5.59.5"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.59.5.tgz#63064f5eafbdbfb5f9dfbf5c4503cdf949852981"
@@ -3221,6 +3226,11 @@ util-deprecate@~1.0.1:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+uuid@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
+  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"