From 957fd12ff5211099619eb9ddec5a7a4bc8ae48a0 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 20 Mar 2024 21:22:21 +0000
Subject: ui(web): Show an overlay when dragging is active

---
 apps/web/components/dashboard/UploadDropzone.tsx | 42 +++++++++++++++++-------
 1 file changed, 31 insertions(+), 11 deletions(-)

(limited to 'apps/web/components/dashboard/UploadDropzone.tsx')

diff --git a/apps/web/components/dashboard/UploadDropzone.tsx b/apps/web/components/dashboard/UploadDropzone.tsx
index 61db8dc5..d1a423ce 100644
--- a/apps/web/components/dashboard/UploadDropzone.tsx
+++ b/apps/web/components/dashboard/UploadDropzone.tsx
@@ -2,6 +2,7 @@
 
 import React, { useState } from "react";
 import { api } from "@/lib/trpc";
+import { cn } from "@/lib/utils";
 import { useMutation } from "@tanstack/react-query";
 import DropZone from "react-dropzone";
 
@@ -10,6 +11,7 @@ import {
   zUploadResponseSchema,
 } from "@hoarder/trpc/types/uploads";
 
+import LoadingSpinner from "../ui/spinner";
 import { toast } from "../ui/use-toast";
 
 export default function UploadDropzone({
@@ -20,17 +22,18 @@ export default function UploadDropzone({
   const invalidateAllBookmarks =
     api.useUtils().bookmarks.getBookmarks.invalidate;
 
-  const { mutate: createBookmark } = api.bookmarks.createBookmark.useMutation({
-    onSuccess: () => {
-      toast({ description: "Bookmark uploaded" });
-      invalidateAllBookmarks();
-    },
-    onError: () => {
-      toast({ description: "Something went wrong", variant: "destructive" });
-    },
-  });
+  const { mutate: createBookmark, isPending: isCreating } =
+    api.bookmarks.createBookmark.useMutation({
+      onSuccess: () => {
+        toast({ description: "Bookmark uploaded" });
+        invalidateAllBookmarks();
+      },
+      onError: () => {
+        toast({ description: "Something went wrong", variant: "destructive" });
+      },
+    });
 
-  const { mutate: uploadAsset } = useMutation({
+  const { mutate: uploadAsset, isPending: isUploading } = useMutation({
     mutationFn: async (file: File) => {
       const formData = new FormData();
       formData.append("image", file);
@@ -53,7 +56,7 @@ export default function UploadDropzone({
     },
   });
 
-  const [_isDragging, setDragging] = useState(false);
+  const [isDragging, setDragging] = useState(false);
   const onDrop = (acceptedFiles: File[]) => {
     const file = acceptedFiles[0];
     setDragging(false);
@@ -71,6 +74,23 @@ export default function UploadDropzone({
       {({ getRootProps, getInputProps }) => (
         <div {...getRootProps()}>
           <input {...getInputProps()} hidden />
+          <div
+            className={cn(
+              "fixed inset-0 flex h-full w-full items-center justify-center bg-gray-200 opacity-90",
+              isDragging || isUploading || isCreating ? undefined : "hidden",
+            )}
+          >
+            {isUploading || isCreating ? (
+              <div className="flex items-center justify-center gap-2">
+                <p className="text-2xl font-bold text-gray-700">Uploading</p>
+                <LoadingSpinner />
+              </div>
+            ) : (
+              <p className="text-2xl font-bold text-gray-700">
+                Drop Your Image
+              </p>
+            )}
+          </div>
           {children}
         </div>
       )}
-- 
cgit v1.2.3-70-g09d2