added toasts popups + improved login/signup page + many more changes and improvements

components/Modal/Collection/CollectionInfo.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import {
   faFolder,
   faPenToSquare,
@@ -10,6 +10,7 @@ import RequiredBadge from "../../RequiredBadge";
 import SubmitButton from "@/components/SubmitButton";
 import { HexColorPicker } from "react-colorful";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { toast } from "react-hot-toast";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -26,18 +27,33 @@ export default function CollectionInfo({
   collection,
   method,
 }: Props) {
+  const [submitLoader, setSubmitLoader] = useState(false);
   const { updateCollection, addCollection } = useCollectionStore();
 
   const submit = async () => {
     if (!collection) return null;
 
-    let response = null;
+    setSubmitLoader(true);
+
+    const load = toast.loading(
+      method === "UPDATE" ? "Applying..." : "Creating..."
+    );
+
+    let response;
 
     if (method === "CREATE") response = await addCollection(collection);
-    else if (method === "UPDATE") response = await updateCollection(collection);
-    else console.log("Unknown method.");
+    else response = await updateCollection(collection);
 
-    if (response) toggleCollectionModal();
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success(
+        `Collection ${method === "UPDATE" ? "Saved!" : "Created!"}`
+      );
+      toggleCollectionModal();
+    } else toast.error(response.data as string);
+
+    setSubmitLoader(false);
   };
 
   return (
@@ -102,6 +118,7 @@ export default function CollectionInfo({
 
       <SubmitButton
         onClick={submit}
+        loading={submitLoader}
         label={method === "CREATE" ? "Add" : "Save"}
         icon={method === "CREATE" ? faPlus : faPenToSquare}
         className="mx-auto mt-2"

components/Modal/Collection/DeleteCollection.tsx

@@ -8,6 +8,7 @@ import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
 import usePermissions from "@/hooks/usePermissions";
+import { toast } from "react-hot-toast";
 
 type Props = {
   toggleDeleteCollectionModal: Function;
@@ -27,8 +28,14 @@ export default function DeleteCollection({
   const submit = async () => {
     if (permissions === true) if (collection.name !== inputField) return null;
 
+    const load = toast.loading("Deleting...");
+
     const response = await removeCollection(collection.id as number);
-    if (response) {
+
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success("Collection Deleted.");
       toggleDeleteCollectionModal();
       router.push("/collections");
     }

components/Modal/Collection/TeamManagement.tsx

@@ -14,6 +14,7 @@ import Checkbox from "../../Checkbox";
 import SubmitButton from "@/components/SubmitButton";
 import ProfilePhoto from "@/components/ProfilePhoto";
 import usePermissions from "@/hooks/usePermissions";
+import { toast } from "react-hot-toast";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -69,16 +70,30 @@ export default function TeamManagement({
     });
   };
 
+  const [submitLoader, setSubmitLoader] = useState(false);
+
   const submit = async () => {
     if (!collection) return null;
 
-    let response = null;
+    setSubmitLoader(true);
+
+    const load = toast.loading(
+      method === "UPDATE" ? "Applying..." : "Creating..."
+    );
+
+    let response;
 
     if (method === "CREATE") response = await addCollection(collection);
-    else if (method === "UPDATE") response = await updateCollection(collection);
-    else console.log("Unknown method.");
+    else response = await updateCollection(collection);
 
-    if (response) toggleCollectionModal();
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success("Collection Saved!");
+      toggleCollectionModal();
+    } else toast.error(response.data as string);
+
+    setSubmitLoader(false);
   };
 
   return (
@@ -111,7 +126,7 @@ export default function TeamManagement({
               try {
                 navigator.clipboard
                   .writeText(publicCollectionURL)
-                  .then(() => console.log("Copied!"));
+                  .then(() => toast.success("Copied!"));
               } catch (err) {
                 console.log(err);
               }
@@ -379,6 +394,7 @@ export default function TeamManagement({
       {permissions === true && (
         <SubmitButton
           onClick={submit}
+          loading={submitLoader}
           label={method === "CREATE" ? "Add" : "Save"}
           icon={method === "CREATE" ? faPlus : faPenToSquare}
           className="mx-auto mt-2"