refactor account store + much smoother collection listing updates

pages/collections/[id].tsx

@@ -12,7 +12,6 @@ import useLinks from "@/hooks/useLinks";
 import usePermissions from "@/hooks/usePermissions";
 import NoLinksFound from "@/components/NoLinksFound";
 import useLocalSettingsStore from "@/store/localSettings";
-import useAccountStore from "@/store/account";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import EditCollectionModal from "@/components/ModalContent/EditCollectionModal";
 import EditCollectionSharingModal from "@/components/ModalContent/EditCollectionSharingModal";
@@ -26,6 +25,7 @@ import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useTranslation } from "next-i18next";
 import LinkListOptions from "@/components/LinkListOptions";
 import { useCollections } from "@/hooks/store/collections";
+import { useUser } from "@/hooks/store/users";
 
 export default function Index() {
   const { t } = useTranslation();
@@ -34,8 +34,7 @@ export default function Index() {
   const router = useRouter();
 
   const { links } = useLinkStore();
-  const { data: { response: collections } = { response: [] } } =
-    useCollections();
+  const { data: collections = [] } = useCollections();
 
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
@@ -52,7 +51,7 @@ export default function Index() {
     );
   }, [router, collections]);
 
-  const { account } = useAccountStore();
+  const { data: user = [] } = useUser();
 
   const [collectionOwner, setCollectionOwner] = useState({
     id: null as unknown as number,
@@ -66,20 +65,20 @@ export default function Index() {
 
   useEffect(() => {
     const fetchOwner = async () => {
-      if (activeCollection && activeCollection.ownerId !== account.id) {
+      if (activeCollection && activeCollection.ownerId !== user.id) {
         const owner = await getPublicUserData(
           activeCollection.ownerId as number
         );
         setCollectionOwner(owner);
-      } else if (activeCollection && activeCollection.ownerId === account.id) {
+      } else if (activeCollection && activeCollection.ownerId === user.id) {
         setCollectionOwner({
-          id: account.id as number,
-          name: account.name,
-          username: account.username as string,
-          image: account.image as string,
-          archiveAsScreenshot: account.archiveAsScreenshot as boolean,
-          archiveAsMonolith: account.archiveAsScreenshot as boolean,
-          archiveAsPDF: account.archiveAsPDF as boolean,
+          id: user.id as number,
+          name: user.name,
+          username: user.username as string,
+          image: user.image as string,
+          archiveAsScreenshot: user.archiveAsScreenshot as boolean,
+          archiveAsMonolith: user.archiveAsScreenshot as boolean,
+          archiveAsPDF: user.archiveAsPDF as boolean,
         });
       }
     };

pages/collections/index.tsx

@@ -13,8 +13,7 @@ import { useCollections } from "@/hooks/store/collections";
 
 export default function Collections() {
   const { t } = useTranslation();
-  const { data: { response: collections } = { response: [] } } =
-    useCollections();
+  const { data: collections = [] } = useCollections();
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
   const [sortedCollections, setSortedCollections] = useState(collections);
 

pages/dashboard.tsx

@@ -22,8 +22,7 @@ import { useCollections } from "@/hooks/store/collections";
 
 export default function Dashboard() {
   const { t } = useTranslation();
-  const { data: { response: collections } = { response: [] } } =
-    useCollections();
+  const { data: collections = [] } = useCollections();
   const { links } = useLinkStore();
   const { tags } = useTagStore();
 

pages/public/collections/[id].tsx

@@ -32,8 +32,7 @@ export default function PublicCollections() {
 
   const { settings } = useLocalSettingsStore();
 
-  const { data: { response: collections } = { response: [] } } =
-    useCollections();
+  const { data: collections = [] } = useCollections();
 
   const router = useRouter();
 

pages/settings/account.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect } from "react";
-import useAccountStore from "@/store/account";
 import { AccountSettings } from "@/types/global";
 import { toast } from "react-hot-toast";
 import SettingsLayout from "@/layouts/SettingsLayout";
@@ -17,6 +16,7 @@ import Button from "@/components/ui/Button";
 import { i18n } from "next-i18next.config";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useUpdateUser, useUser } from "@/hooks/store/users";
 
 const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
@@ -24,7 +24,8 @@ export default function Account() {
   const [emailChangeVerificationModal, setEmailChangeVerificationModal] =
     useState(false);
   const [submitLoader, setSubmitLoader] = useState(false);
-  const { account, updateAccount } = useAccountStore();
+  const { data: account = [] } = useUser();
+  const updateUser = useUpdateUser();
   const [user, setUser] = useState<AccountSettings>(
     !objectIsEmpty(account)
       ? account
@@ -78,25 +79,22 @@ export default function Account() {
 
   const submit = async (password?: string) => {
     setSubmitLoader(true);
-    const load = toast.loading(t("applying_settings"));
 
-    const response = await updateAccount({
-      ...user,
-      // @ts-ignore
-      password: password ? password : undefined,
-    });
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      const emailChanged = account.email !== user.email;
-
-      toast.success(t("settings_applied"));
-      if (emailChanged) {
-        toast.success(t("email_change_request"));
-        setEmailChangeVerificationModal(false);
+    await updateUser.mutateAsync(
+      {
+        ...user,
+        password: password ? password : undefined,
+      },
+      {
+        onSuccess: (data) => {
+          if (data.response.email !== user.email) {
+            toast.success(t("email_change_request"));
+            setEmailChangeVerificationModal(false);
+          }
+        },
       }
-    } else toast.error(response.data as string);
+    );
+
     setSubmitLoader(false);
   };
 

pages/settings/password.tsx

@@ -1,11 +1,11 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
 import { useState } from "react";
-import useAccountStore from "@/store/account";
 import SubmitButton from "@/components/SubmitButton";
 import { toast } from "react-hot-toast";
 import TextInput from "@/components/TextInput";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useUpdateUser, useUser } from "@/hooks/store/users";
 
 export default function Password() {
   const { t } = useTranslation();
@@ -13,7 +13,8 @@ export default function Password() {
   const [oldPassword, setOldPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
   const [submitLoader, setSubmitLoader] = useState(false);
-  const { account, updateAccount } = useAccountStore();
+  const { data: account = [] } = useUser();
+  const updateUser = useUpdateUser();
 
   const submit = async () => {
     if (newPassword === "" || oldPassword === "") {
@@ -23,23 +24,19 @@ export default function Password() {
 
     setSubmitLoader(true);
 
-    const load = toast.loading(t("applying_changes"));
-
-    const response = await updateAccount({
-      ...account,
-      newPassword,
-      oldPassword,
-    });
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success(t("settings_applied"));
-      setNewPassword("");
-      setOldPassword("");
-    } else {
-      toast.error(response.data as string);
-    }
+    await updateUser.mutateAsync(
+      {
+        ...account,
+        newPassword,
+        oldPassword,
+      },
+      {
+        onSuccess: () => {
+          setNewPassword("");
+          setOldPassword("");
+        },
+      }
+    );
 
     setSubmitLoader(false);
   };

pages/settings/preference.tsx

@@ -1,6 +1,5 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
 import { useState, useEffect } from "react";
-import useAccountStore from "@/store/account";
 import SubmitButton from "@/components/SubmitButton";
 import { toast } from "react-hot-toast";
 import Checkbox from "@/components/Checkbox";
@@ -8,12 +7,14 @@ import useLocalSettingsStore from "@/store/localSettings";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps"; // Import getServerSideProps for server-side data fetching
 import { LinksRouteTo } from "@prisma/client";
+import { useUpdateUser, useUser } from "@/hooks/store/users";
 
 export default function Appearance() {
   const { t } = useTranslation();
   const { updateSettings } = useLocalSettingsStore();
   const [submitLoader, setSubmitLoader] = useState(false);
-  const { account, updateAccount } = useAccountStore();
+  const { data: account = [] } = useUser();
+  const updateUser = useUpdateUser();
   const [user, setUser] = useState(account);
 
   const [preventDuplicateLinks, setPreventDuplicateLinks] = useState<boolean>(
@@ -73,17 +74,8 @@ export default function Appearance() {
   const submit = async () => {
     setSubmitLoader(true);
 
-    const load = toast.loading(t("applying_changes"));
+    await updateUser.mutateAsync({ ...user });
 
-    const response = await updateAccount({ ...user });
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success(t("settings_applied"));
-    } else {
-      toast.error(response.data as string);
-    }
     setSubmitLoader(false);
   };
 

pages/subscribe.tsx

@@ -7,7 +7,7 @@ import { Plan } from "@/types/global";
 import Button from "@/components/ui/Button";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { Trans, useTranslation } from "next-i18next";
-import useAccountStore from "@/store/account";
+import { useUser } from "@/hooks/store/users";
 
 const stripeEnabled = process.env.NEXT_PUBLIC_STRIPE === "true";
 
@@ -20,11 +20,11 @@ export default function Subscribe() {
 
   const router = useRouter();
 
-  const { account } = useAccountStore();
+  const { data: user = [] } = useUser();
 
   useEffect(() => {
     const hasInactiveSubscription =
-      account.id && !account.subscription?.active && stripeEnabled;
+      user.id && !user.subscription?.active && stripeEnabled;
 
     if (session.status === "authenticated" && !hasInactiveSubscription) {
       router.push("/dashboard");