mmm

src/pages/Graph/index.tsx

@@ -271,11 +271,8 @@ const Graph = () => {
   type getLayoutedElementsOpts = {
     direction: rankdirType;
   };
-  const getLayoutedElements = (
-    nodes: Node[],
-    edges: Edge[],
-    options: getLayoutedElementsOpts
-  ) => {
+  const getLayoutedElements = useCallback(
+    (nodes: Node[], edges: Edge[], options: getLayoutedElementsOpts) => {
       const g = new Dagre.graphlib.Graph();
       g.setDefaultEdgeLabel(() => ({}));
       g.setGraph({
@@ -344,9 +341,15 @@ const Graph = () => {
 
       console.debug("layout generated");
       return finalLayout;
-  };
+    },
+    []
+  );
 
-  const arrangeLayout = (direction: rankdirType) => {
+  const arrangeLayout = useCallback(
+    (direction: rankdirType) => {
+      // TODO: race condition
+      // states not updated in time inside other functions that call this before they call this
+      // fix that
       const layouted = getLayoutedElements(playlistNodes, linkEdges, {
         direction,
       });
@@ -356,7 +359,9 @@ const Graph = () => {
 
       setTimeout(flowInstance.fitView);
       console.debug("layout applied");
-  };
+    },
+    [playlistNodes, linkEdges, flowInstance, getLayoutedElements]
+  );
 
   const fetchGraph = useCallback(async () => {
     const resp = await APIWrapper({ apiFn: apiFetchGraph, refreshAuth });
@@ -364,7 +369,7 @@ const Graph = () => {
       `graph fetched with ${resp?.data.playlists?.length} nodes and ${resp?.data.links?.length} edges`
     );
     // place playlist nodes
-    setPlaylistNodes(
+    const newNodes =
       resp?.data.playlists?.map((pl, idx) => {
         return {
           id: `${pl.playlistID}`,
@@ -383,18 +388,18 @@ const Graph = () => {
             },
           },
         };
-      }) ?? []
-    );
+      }) ?? [];
+    setPlaylistNodes(newNodes);
     // connect links
-    setLinkEdges(
+    const newEdges =
       resp?.data.links?.map((link, idx) => {
         return {
           id: `${link.from}->${link.to}`,
           source: link.from,
           target: link.to,
         };
-      }) ?? []
-    );
+      }) ?? [];
+    setLinkEdges(newEdges);
     showInfoToastNotification("Graph updated.");
   }, [refreshAuth]);
 
@@ -403,7 +408,7 @@ const Graph = () => {
       apiFn: apiUpdateUserData,
       refreshAuth,
     });
-    showInfoToastNotification("Spotify synced.");
+    showInfoToastNotification(resp?.data.message);
     if (resp?.data.removedLinks)
       showWarnToastNotification(
         "Some links with deleted playlists were removed."
@@ -413,7 +418,6 @@ const Graph = () => {
 
   const refreshGraph = async () => {
     await fetchGraph();
-    arrangeLayout("TB");
   };
 
   useEffect(() => {