fix: don't use nested load callback

tulsawebdevs · Jul 4, 2024 · 9616d75 · 9616d75
1 parent 81486cf
commit 9616d75
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 61 deletions.
diff --git a/src/features/voting/DraftProposalList.tsx b/src/features/voting/DraftProposalList.tsx
@@ -41,22 +41,23 @@ export default function DraftProposalList() {
     order: 'asc' | 'desc';
   });
 
-  const loadDrafts = useCallback(
-    (pagination: Paginated) => {
-      void session?.getToken().then((token) => {
-        setLoading(true);
-        sdk
-          .listDrafts({
-            queries: { pagination },
-            headers: { Authorization: `Bearer ${token}` },
-          })
-          .then((result) => {
-            setCursor(result.cursor);
-            setDrafts((previous) => [...previous, ...result.drafts]);
-          })
-          .catch(toast.error)
-          .finally(() => setLoading(false));
-      });
+  const load = useCallback(
+    async (pagination: Paginated) => {
+      setLoading(true);
+      try {
+        const token = await session?.getToken();
+        const result = await sdk.listDrafts({
+          queries: { pagination },
+          headers: { Authorization: `Bearer ${token}` },
+        });
+        setCursor(result.cursor);
+        setDrafts((previous) => [...previous, ...result.drafts]);
+      } catch (e) {
+        if (e instanceof Error) console.dir(e.message);
+        throw e;
+      } finally {
+        setLoading(false);
+      }
     },
     [session],
   );
@@ -120,39 +121,50 @@ export default function DraftProposalList() {
     const isNearBottom = document.body.scrollHeight - threshold <= scrolledTo;
 
     if (loading || !cursor || !isNearBottom) return;
-    loadDrafts({ cursor, limit });
-  }, [cursor, loadDrafts, loading]);
-
-  const handleDelete = (id: number) => {
-    // eslint-disable-next-line no-alert
+    toast.promise(load({ cursor, limit }), {
+      loading: 'Loading more submissions...',
+      success: 'Loaded more submissions',
+      error: 'Failed to load more submissions',
+    });
+  }, [cursor, load, loading]);
 
-    void session?.getToken().then((token) => {
+  const destroy = useCallback(
+    async (id: number) => {
+      const token = await session?.getToken();
       setLoading(true);
-      sdk
-        .deleteDraft(undefined, {
+      try {
+        await sdk.deleteDraft(undefined, {
           headers: { Authorization: `Bearer ${token}` },
           queries: { recordId: id },
-        })
-        .then(() => {
-          setDrafts((previous) => previous.filter((d) => d.id !== id));
-        })
-        .catch(toast.error)
-        .finally(() => setLoading(false));
-    });
-  };
+        });
+        setDrafts((previous) => previous.filter((d) => d.id !== id));
+      } catch (e) {
+        if (e instanceof Error) console.dir(e.message);
+        throw e;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [session],
+  );
 
   const handleBulkDelete = () => {
     // eslint-disable-next-line no-alert
     if (window.confirm('Are you sure you want to delete these drafts?')) {
-      selectedSubmissions.forEach(handleDelete);
-      loadDrafts({ limit: selectedSubmissions.length });
+      selectedSubmissions.forEach((item) =>
+        toast.promise(destroy(item), {
+          loading: 'Deleting draft...',
+          success: 'Draft deleted',
+          error: 'Failed to delete draft',
+        }),
+      );
       setShowBulkActions(false);
     }
   };
 
   useEffect(() => {
-    void loadDrafts({ limit });
-  }, [loadDrafts]);
+    void load({ limit });
+  }, [load]);
 
   useEffect(() => {
     setShowBulkActions(selectedSubmissions.length > 0);

diff --git a/src/features/voting/ProposalList.tsx b/src/features/voting/ProposalList.tsx
@@ -17,42 +17,49 @@ export function ProposalList() {
   const [cursor, setCursor] = useState<Paginated['cursor']>();
   const [proposals, setProposals] = useState<ProposalCardProps[]>([]);
 
-  const loadProposals = useCallback(
-    (pagination: Paginated) => {
+  const load = useCallback(
+    async (pagination: Paginated, token?: string | null) => {
       setLoading(true);
 
-      async function load() {
-        const token = await session?.getToken();
-
-        sdk
-          .listProposals({
-            queries: { pagination },
-            headers: token ? { Authorization: `Bearer ${token}` } : {},
-          })
-          .then((result) => {
-            setCursor(result.cursor);
-            setProposals((previous) => [...previous, ...result.proposals]);
-          })
-          .catch(toast.error)
-          .finally(() => setLoading(false));
+      try {
+        const result = await sdk.listProposals({
+          queries: { pagination },
+          headers: token ? { Authorization: `Bearer ${token}` } : {},
+        });
+        setCursor(result.cursor);
+        setProposals(result.proposals);
+      } catch (e) {
+        if (e instanceof Error) return console.dir(e.message);
+        else throw e;
+      } finally {
+        setLoading(false);
       }
-
-      void load();
     },
     [session],
   );
 
   useEffect(() => {
-    // Load initial proposals
-    void loadProposals({ limit });
-  }, [loadProposals]);
+    session?.getToken().then((token) =>
+      // Load initial proposals
+      toast.promise(load({ limit }, token), {
+        loading: 'Loading proposals...',
+        success: 'Proposals loaded',
+        error: 'Failed to load proposals',
+      }),
+    );
+  }, [load, session]);
 
-  const onClick = useCallback(() => {
+  const onClick = useCallback(async () => {
     if (loading) return;
     if (!cursor) return;
-
-    void loadProposals({ cursor, limit });
-  }, [loading, loadProposals, cursor]);
+    session?.getToken().then((token) =>
+      toast.promise(load({ cursor, limit }, token), {
+        loading: 'Loading more proposals...',
+        success: 'More proposals loaded',
+        error: 'Failed to load more proposals',
+      }),
+    );
+  }, [loading, load, cursor]);
 
   return (
     <div>