more toasts and error handling

src/components/ContextMenu/index.tsx

@@ -1,6 +1,5 @@
 import classNames from "classnames";
-import React, { memo, useEffect, useRef } from "react";
-import Swal from "sweetalert2";
+import React, { memo } from "react";
 import {
   deleteFileAPI,
   renameFileAPI,

src/components/FileInfoPopup/index.tsx

@@ -93,14 +93,14 @@ const FileInfoPopup = memo(() => {
         <div className="flex mr-4">
           <div onClick={onContextMenu} id="action-context-wrapper">
             <ActionsIcon
-              className="pointer text-white w-[20px] h-[25px] mr-4"
+              className="pointer text-white w-[20px] h-[25px] mr-4 cursor-pointer"
               id="action-context-icon"
             />
           </div>
 
           <div onClick={closePhotoViewer} id="action-close-wrapper">
             <CloseIcon
-              className="pointer text-white w-[25px] h-[25px]"
+              className="pointer text-white w-[25px] h-[25px] cursor-pointer"
               id="action-close-icon"
             />
           </div>

src/components/LoginPage/LoginPage.tsx

@@ -8,7 +8,7 @@ import { capitalize } from "lodash";
 import AlertIcon from "../../icons/AlertIcon";
 import SpinnerPage from "../SpinnerPage";
 import classNames from "classnames";
-import { emailVerificationSentPopup } from "../../popups/user";
+import { toast, ToastContainer } from "react-toastify";
 
 const LoginPage = () => {
   const [email, setEmail] = useState("");
@@ -34,7 +34,6 @@ const LoginPage = () => {
       setAttemptingLogin(false);
       window.localStorage.setItem("hasPreviouslyLoggedIn", "true");
     } catch (e) {
-      console.log("Login Error", e);
       setAttemptingLogin(false);
       if (window.localStorage.getItem("hasPreviouslyLoggedIn")) {
         setError("Login Expired");
@@ -65,7 +64,7 @@ const LoginPage = () => {
       window.localStorage.setItem("hasPreviouslyLoggedIn", "true");
 
       if (createAccountResponse.emailSent) {
-        emailVerificationSentPopup();
+        toast.success("Email Verification Sent");
       }
 
       dispatch(setUser(createAccountResponse.user));
@@ -251,6 +250,7 @@ const LoginPage = () => {
           </form>
         </div>
       </div>
+      <ToastContainer position="bottom-right" />
     </div>
   );
 };

src/components/MultiSelectBar/index.tsx

@@ -17,6 +17,7 @@ import {
 } from "../../popups/file";
 import RestoreIcon from "../../icons/RestoreIcon";
 import { useUtils } from "../../hooks/utils";
+import { toast } from "react-toastify";
 
 const MultiSelectBar: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -66,41 +67,59 @@ const MultiSelectBar: React.FC = () => {
   }, []);
 
   const trashItems = async () => {
-    const result = await trashItemsPopup();
+    try {
+      const result = await trashItemsPopup();
+      if (!result) return;
 
-    if (result) {
       const itemsToTrash = Object.values(multiSelectMap);
-      await trashMultiAPI(itemsToTrash);
+      await toast.promise(trashMultiAPI(itemsToTrash), {
+        pending: "Trashing...",
+        success: "Trashed",
+        error: "Error Trashing",
+      });
       invalidateFilesCache();
       invalidateFoldersCache();
       invalidateQuickFilesCache();
       closeMultiSelect();
+    } catch (e) {
+      console.log("Error Trashing Items", e);
     }
   };
 
   const deleteItems = async () => {
-    const result = await deleteItemsPopup();
-    if (result) {
-      const itemsToTrash = Object.values(multiSelectMap);
-      await deleteMultiAPI(itemsToTrash);
+    try {
+      const result = await deleteItemsPopup();
+      if (!result) return;
+
+      const itesmsToDelete = Object.values(multiSelectMap);
+      await toast.promise(deleteMultiAPI(itesmsToDelete), {
+        pending: "Deleting...",
+        success: "Deleted",
+        error: "Error Deleting",
+      });
       invalidateFilesCache();
       invalidateFoldersCache();
       invalidateQuickFilesCache();
       closeMultiSelect();
+    } catch (e) {
+      console.log("Error Deleting Items", e);
     }
   };
 
   const restoreItems = async () => {
     const result = await restoreItemsPopup();
+    if (!result) return;
 
-    if (result) {
-      const itemsToTrash = Object.values(multiSelectMap);
-      await restoreMultiAPI(itemsToTrash);
-      invalidateFilesCache();
-      invalidateFoldersCache();
-      invalidateQuickFilesCache();
-      closeMultiSelect();
-    }
+    const itemsToRestore = Object.values(multiSelectMap);
+    await toast.promise(restoreMultiAPI(itemsToRestore), {
+      pending: "Restoring...",
+      success: "Restored",
+      error: "Error Restoring",
+    });
+    invalidateFilesCache();
+    invalidateFoldersCache();
+    invalidateQuickFilesCache();
+    closeMultiSelect();
   };
 
   if (!multiSelectMode) return <div></div>;

src/components/PhotoViewerPopup/index.tsx

@@ -270,14 +270,14 @@ const PhotoViewerPopup = memo(() => {
         <div className="flex mr-4">
           <div onClick={onContextMenu} id="action-context-wrapper">
             <ActionsIcon
-              className="pointer text-white w-[20px] h-[25px] mr-4"
+              className="pointer text-white w-[20px] h-[25px] mr-4 cursor-pointer"
               id="action-context-icon"
             />
           </div>
 
           <div onClick={closePhotoViewer} id="action-close-wrapper">
             <CloseIcon
-              className="pointer text-white w-[25px] h-[25px]"
+              className="pointer text-white w-[25px] h-[25px] cursor-pointer"
               id="action-close-icon"
             />
           </div>
@@ -286,11 +286,11 @@ const PhotoViewerPopup = memo(() => {
       <div className="flex absolute pb-[70px] desktopMode:pb-0 top-[50px] bottom-0 w-full h-full justify-between items-end desktopMode:items-center p-4">
         <CircleLeftIcon
           onClick={goToPreviousItem}
-          className="pointer text-white w-[30px] h-[30px] select-none"
+          className="pointer text-white w-[45px] h-[45px] desktopMode:w-[30px] desktopMode:h-[30px] select-none cursor-pointer"
         />
         <CircleRightIcon
           onClick={goToNextItem}
-          className="pointer text-white w-[30px] h-[30px] select-none"
+          className="pointer text-white w-[45px] h-[45px] desktopMode:w-[30px] desktopMode:h-[30px] select-none cursor-pointer"
         />
       </div>
       <div

src/components/SharePopup/index.tsx

@@ -4,7 +4,11 @@ import { useAppDispatch, useAppSelector } from "../../hooks/store";
 import { getFileColor, getFileExtension } from "../../utils/files";
 import bytes from "bytes";
 import moment from "moment";
-import { makePublicPopup, removeLinkPopup } from "../../popups/file";
+import {
+  makeOneTimePublicPopup,
+  makePublicPopup,
+  removeLinkPopup,
+} from "../../popups/file";
 import {
   makeOneTimePublicAPI,
   makePublicAPI,
@@ -75,7 +79,7 @@ const SharePopup = memo(() => {
 
   const makeOneTimePublic = async () => {
     try {
-      const result = await makePublicPopup();
+      const result = await makeOneTimePublicPopup();
       if (!result) return;
       setUpdating(true);
       const { file: updatedFile } = await toast.promise(
@@ -179,7 +183,7 @@ const SharePopup = memo(() => {
         </div>
         <div className="flex mr-4">
           <div id="action-close-wrapper" onClick={closeShareModal}>
-            <CloseIcon className="pointer text-white w-[25px] h-[25px]" />
+            <CloseIcon className="text-white w-[25px] h-[25px] cursor-pointer" />
           </div>
         </div>
       </div>

src/popups/file.ts

@@ -81,7 +81,7 @@ export const trashItemsPopup = async () => {
 export const makePublicPopup = async () => {
   const result = await Swal.fire({
     title: "Make file public?",
-    text: "This iwill make the file public, anyone with the link will be able to access the file.",
+    text: "Anyone with the link will be able to download the file.",
     icon: "warning",
     showCancelButton: true,
     confirmButtonColor: "#3085d6",
@@ -93,8 +93,8 @@ export const makePublicPopup = async () => {
 
 export const makeOneTimePublicPopup = async () => {
   const result = await Swal.fire({
-    title: "Make file public?",
-    text: "This iwill make the file public, anyone with the link will be able to access the file for a single time.",
+    title: "Make file temporarly public?",
+    text: "Anyone with the link will be able to downoad the file once.",
     icon: "warning",
     showCancelButton: true,
     confirmButtonColor: "#3085d6",

src/styles/styles.scss

@@ -56,3 +56,19 @@
 .animate-very-long {
   transition: 6s ease all;
 }
+
+.Toastify__progress-bar--success {
+  background-color: #3c85ee !important;
+}
+
+.--toastify-color-transparent .Toastify__toast-icon {
+  background-color: #3c85ee !important;
+}
+
+.Toastify__toast--success .Toastify__icon svg path {
+  fill: #3c85ee !important;
+}
+
+:root {
+  --toastify-icon-color-success: #3c85ee !important;
+}