refactored link state management + a lot of other changes...

components/ModalContent/BulkDeleteLinksModal.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import useLinkStore from "@/store/links";
-import toast from "react-hot-toast";
 import Modal from "../Modal";
 import Button from "../ui/Button";
 import { useTranslation } from "next-i18next";
+import { useBulkDeleteLinks } from "@/hooks/store/links";
 
 type Props = {
   onClose: Function;
@@ -11,22 +11,20 @@ type Props = {
 
 export default function BulkDeleteLinksModal({ onClose }: Props) {
   const { t } = useTranslation();
-  const { selectedLinks, setSelectedLinks, deleteLinksById } = useLinkStore();
+  const { selectedLinks, setSelectedLinks } = useLinkStore();
+
+  const deleteLinksById = useBulkDeleteLinks();
 
   const deleteLink = async () => {
-    const load = toast.loading(t("deleting"));
-
-    const response = await deleteLinksById(
-      selectedLinks.map((link) => link.id as number)
+    await deleteLinksById.mutateAsync(
+      selectedLinks.map((link) => link.id as number),
+      {
+        onSuccess: () => {
+          setSelectedLinks([]);
+          onClose();
+        },
+      }
     );
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success(t("deleted"));
-      setSelectedLinks([]);
-      onClose();
-    } else toast.error(response.data as string);
   };
 
   return (

components/ModalContent/DeleteLinkModal.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from "react";
-import useLinkStore from "@/store/links";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import toast from "react-hot-toast";
 import Modal from "../Modal";
 import { useRouter } from "next/router";
 import Button from "../ui/Button";
 import { useTranslation } from "next-i18next";
+import { useDeleteLink } from "@/hooks/store/links";
 
 type Props = {
   onClose: Function;
@@ -16,31 +15,24 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
   const { t } = useTranslation();
   const [link, setLink] =
     useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
-  const { removeLink } = useLinkStore();
+
+  const deleteLink = useDeleteLink();
   const router = useRouter();
 
   useEffect(() => {
     setLink(activeLink);
   }, []);
 
-  const deleteLink = async () => {
-    const load = toast.loading(t("deleting"));
+  const submit = async () => {
+    await deleteLink.mutateAsync(link.id as number, {
+      onSuccess: () => {
+        if (router.pathname.startsWith("/links/[id]")) {
+          router.push("/dashboard");
+        }
 
-    const response = await removeLink(link.id as number);
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success(t("deleted"));
-    } else {
-      toast.error(response.data as string);
-    }
-
-    if (router.pathname.startsWith("/links/[id]")) {
-      router.push("/dashboard");
-    }
-
-    onClose();
+        onClose();
+      },
+    });
   };
 
   return (
@@ -61,7 +53,7 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
 
         <p>{t("shift_key_tip")}</p>
 
-        <Button className="ml-auto" intent="destructive" onClick={deleteLink}>
+        <Button className="ml-auto" intent="destructive" onClick={submit}>
           <i className="bi-trash text-xl" />
           {t("delete")}
         </Button>

components/ModalContent/EditCollectionSharingModal.tsx

@@ -46,7 +46,7 @@ export default function EditCollectionSharingModal({
     }
   };
 
-  const { data: user } = useUser();
+  const { data: user = {} } = useUser();
   const permissions = usePermissions(collection.id as number);
 
   const currentURL = new URL(document.URL);

components/ModalContent/EditLinkModal.tsx

@@ -3,12 +3,11 @@ import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
 import TextInput from "@/components/TextInput";
 import unescapeString from "@/lib/client/unescapeString";
-import useLinkStore from "@/store/links";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import toast from "react-hot-toast";
 import Link from "next/link";
 import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
+import { useUpdateLink } from "@/hooks/store/links";
 
 type Props = {
   onClose: Function;
@@ -27,9 +26,10 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
     console.log(error);
   }
 
-  const { updateLink } = useLinkStore();
   const [submitLoader, setSubmitLoader] = useState(false);
 
+  const updateLink = useUpdateLink();
+
   const setCollection = (e: any) => {
     if (e?.__isNew__) e.value = null;
     setLink({
@@ -50,19 +50,14 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
   const submit = async () => {
     if (!submitLoader) {
       setSubmitLoader(true);
-      const load = toast.loading(t("updating"));
-      let response = await updateLink(link);
-      toast.dismiss(load);
 
-      if (response.ok) {
-        toast.success(t("updated"));
-        onClose();
-      } else {
-        toast.error(response.data as string);
-      }
+      await updateLink.mutateAsync(link, {
+        onSuccess: () => {
+          onClose();
+        },
+      });
 
       setSubmitLoader(false);
-      return response;
     }
   };
 

components/ModalContent/NewLinkModal.tsx

@@ -3,14 +3,13 @@ import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
 import TextInput from "@/components/TextInput";
 import unescapeString from "@/lib/client/unescapeString";
-import useLinkStore from "@/store/links";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
-import toast from "react-hot-toast";
 import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
 import { useCollections } from "@/hooks/store/collections";
+import { useAddLink } from "@/hooks/store/links";
 
 type Props = {
   onClose: Function;
@@ -39,11 +38,13 @@ export default function NewLinkModal({ onClose }: Props) {
 
   const [link, setLink] =
     useState<LinkIncludingShortenedCollectionAndTags>(initial);
-  const { addLink } = useLinkStore();
+
+  const addLink = useAddLink();
+
   const [submitLoader, setSubmitLoader] = useState(false);
   const [optionsExpanded, setOptionsExpanded] = useState(false);
   const router = useRouter();
-  const { data: collections } = useCollections();
+  const { data: collections = [] } = useCollections();
 
   const setCollection = (e: any) => {
     if (e?.__isNew__) e.value = null;
@@ -86,15 +87,13 @@ export default function NewLinkModal({ onClose }: Props) {
   const submit = async () => {
     if (!submitLoader) {
       setSubmitLoader(true);
-      const load = toast.loading(t("creating_link"));
-      const response = await addLink(link);
-      toast.dismiss(load);
-      if (response.ok) {
-        toast.success(t("link_created"));
-        onClose();
-      } else {
-        toast.error(response.data as string);
-      }
+
+      await addLink.mutateAsync(link, {
+        onSuccess: () => {
+          onClose();
+        },
+      });
+
       setSubmitLoader(false);
     }
   };

components/ModalContent/PreservedFormatsModal.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import useLinkStore from "@/store/links";
 import {
   LinkIncludingShortenedCollectionAndTags,
   ArchivedFormat,
@@ -20,6 +19,7 @@ import getPublicUserData from "@/lib/client/getPublicUserData";
 import { useTranslation } from "next-i18next";
 import { BeatLoader } from "react-spinners";
 import { useUser } from "@/hooks/store/user";
+import { useGetLink } from "@/hooks/store/links";
 
 type Props = {
   onClose: Function;
@@ -29,8 +29,8 @@ type Props = {
 export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
   const { t } = useTranslation();
   const session = useSession();
-  const { getLink } = useLinkStore();
-  const { data: user } = useUser();
+  const getLink = useGetLink();
+  const { data: user = {} } = useUser();
   const [link, setLink] =
     useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
   const router = useRouter();
@@ -98,7 +98,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
 
   useEffect(() => {
     (async () => {
-      const data = await getLink(link.id as number, isPublic);
+      const data = await getLink.mutateAsync(link.id as number);
       setLink(
         (data as any).response as LinkIncludingShortenedCollectionAndTags
       );
@@ -108,7 +108,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
 
     if (!isReady()) {
       interval = setInterval(async () => {
-        const data = await getLink(link.id as number, isPublic);
+        const data = await getLink.mutateAsync(link.id as number);
         setLink(
           (data as any).response as LinkIncludingShortenedCollectionAndTags
         );
@@ -137,7 +137,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
     toast.dismiss(load);
 
     if (response.ok) {
-      const newLink = await getLink(link?.id as number);
+      const newLink = await getLink.mutateAsync(link?.id as number);
       setLink(
         (newLink as any).response as LinkIncludingShortenedCollectionAndTags
       );

components/ModalContent/UploadFileModal.tsx

@@ -3,7 +3,6 @@ import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
 import TextInput from "@/components/TextInput";
 import unescapeString from "@/lib/client/unescapeString";
-import useLinkStore from "@/store/links";
 import {
   LinkIncludingShortenedCollectionAndTags,
   ArchivedFormat,
@@ -14,6 +13,7 @@ import toast from "react-hot-toast";
 import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
 import { useCollections } from "@/hooks/store/collections";
+import { useUploadFile } from "@/hooks/store/links";
 
 type Props = {
   onClose: Function;
@@ -45,11 +45,11 @@ export default function UploadFileModal({ onClose }: Props) {
     useState<LinkIncludingShortenedCollectionAndTags>(initial);
   const [file, setFile] = useState<File>();
 
-  const { uploadFile } = useLinkStore();
+  const uploadFile = useUploadFile();
   const [submitLoader, setSubmitLoader] = useState(false);
   const [optionsExpanded, setOptionsExpanded] = useState(false);
   const router = useRouter();
-  const { data: collections } = useCollections();
+  const { data: collections = [] } = useCollections();
 
   const setCollection = (e: any) => {
     if (e?.__isNew__) e.value = null;
@@ -115,20 +115,17 @@ export default function UploadFileModal({ onClose }: Props) {
       // }
 
       setSubmitLoader(true);
-      const load = toast.loading(t("creating"));
 
-      const response = await uploadFile(link, file);
-
-      toast.dismiss(load);
-      if (response.ok) {
-        toast.success(t("created_success"));
-        onClose();
-      } else {
-        toast.error(response.data as string);
-      }
+      await uploadFile.mutateAsync(
+        { link, file },
+        {
+          onSuccess: () => {
+            onClose();
+          },
+        }
+      );
 
       setSubmitLoader(false);
-      return response;
     }
   };