feat: allow user to delete photo before upload (#33)

Author: baptadn

package.json

@@ -8,7 +8,7 @@
     "start": "next start",
     "lint": "next lint",
     "postinstall": "prisma generate",
-    "prisma:migrate:dev": "prisma migrate dev",
+    "prisma:migrate:dev": "dotenv -e .env.local prisma migrate dev",
     "vercel-build": "prisma generate && prisma migrate deploy && next build"
   },
   "dependencies": {
@@ -59,6 +59,7 @@
   },
   "devDependencies": {
     "@types/sharp": "^0.31.0",
+    "dotenv-cli": "^6.0.0",
     "prisma": "^4.7.1"
   }
 }

src/components/dashboard/Uploader.tsx

@@ -23,6 +23,7 @@ import { useS3Upload } from "next-s3-upload";
 import { useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { MdCheckCircle, MdCloud } from "react-icons/md";
+import { IoIosClose } from "react-icons/io";
 import { useMutation } from "react-query";
 import AvatarsPlaceholder from "../home/AvatarsPlaceholder";
 import { CheckedListItem } from "../home/Pricing";
@@ -84,6 +85,17 @@ const Uploader = ({ handleOnAdd }: { handleOnAdd: () => void }) => {
   });
 
   const handleUpload = async () => {
+    if (files.length < 5) {
+      toast({
+        title: "You need to upload at least 5 photos",
+        duration: 3000,
+        isClosable: true,
+        position: "top-right",
+        status: "error",
+      });
+      return;
+    }
+
     const filesToUpload = Array.from(files);
     setUploadState("uploading");
 
@@ -197,14 +209,28 @@ const Uploader = ({ handleOnAdd }: { handleOnAdd: () => void }) => {
             key={file.name}
           >
             <Center top={-2} right={-2} position="absolute">
-              {uploadState == "uploading" && !urls[index] && (
+              {uploadState === "uploading" && !urls[index] && (
                 <Spinner
                   size="lg"
                   thickness="8px"
                   speed="1s"
                   color="brand.500"
                 />
               )}
+
+              {uploadState !== "uploading" && !urls[index] && (
+                <Icon
+                  cursor="pointer"
+                  onClick={() => {
+                    setFiles(files.filter((_, i) => i !== index));
+                  }}
+                  borderRadius="full"
+                  backgroundColor="brand.500"
+                  as={IoIosClose}
+                  fontSize="2rem"
+                />
+              )}
+
               {urls[index] && (
                 <Icon
                   borderRadius="full"
@@ -241,7 +267,9 @@ const Uploader = ({ handleOnAdd }: { handleOnAdd: () => void }) => {
             onClick={handleUpload}
             variant="brand"
           >
-            Upload {files.length} image{files.length > 1 && "s"}
+            {files.length < 5
+              ? "Upload (min 5 photos)"
+              : `Upload ${files.length} photo${files.length > 1 && "s"}`}
           </Button>
         </Box>
       )}

yarn.lock

@@ -2843,6 +2843,26 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dotenv-cli@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv-cli/-/dotenv-cli-6.0.0.tgz#8a30cbc59d0a8aaa166b2fee0a9a55e23a1223ab"
+  integrity sha512-qXlCOi3UMDhCWFKe0yq5sg3X+pJAz+RQDiFN38AMSbUrnY3uZshSfDJUAge951OS7J9gwLZGfsBlWRSOYz/TRg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    dotenv "^16.0.0"
+    dotenv-expand "^8.0.1"
+    minimist "^1.2.5"
+
+dotenv-expand@^8.0.1:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-8.0.3.tgz#29016757455bcc748469c83a19b36aaf2b83dd6e"
+  integrity sha512-SErOMvge0ZUyWd5B0NXMQlDkN+8r+HhVUsxgOO7IoPDOdDRD2JjExpN6y3KnFR66jsJMwSn1pqIivhU5rcJiNg==
+
+dotenv@^16.0.0:
+  version "16.0.3"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07"
+  integrity sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==
+
 emoji-regex@^9.2.2:
   version "9.2.2"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
@@ -3905,7 +3925,7 @@ minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.6:
+minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5, minimist@^1.2.6:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
   integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==