cleaner auth refresh, node selection

src/App.tsx

@@ -36,23 +36,6 @@ function App(): React.ReactNode {
   const [auth, setAuth] = useState(false);
 
   const refreshAuth = async () => {
-    const resp = await apiAuthCheck();
-    if (resp === undefined) {
-      showErrorToastNotification("Please try again after sometime");
-      setAuth(false);
-      return false;
-    }
-    if (resp.status === 200) {
-      // Success
-      setAuth(true);
-      return true;
-    }
-    if (resp.status >= 500) {
-      setAuth(false);
-      showErrorToastNotification(resp.data.message);
-      return false;
-    }
-    if (resp.status === 401) {
     // reauth
     const refreshResp = await apiAuthRefresh();
     if (refreshResp === undefined) {
@@ -79,16 +62,32 @@ function App(): React.ReactNode {
     setAuth(false);
     showWarnToastNotification(refreshResp.data.message);
     return false;
+  };
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      const resp = await apiAuthCheck();
+      if (resp === undefined) {
+        showErrorToastNotification("Please try again after sometime");
+        setAuth(false);
+        return false;
       }
+      if (resp.status === 200) {
+        // Success
+        setAuth(true);
+        return true;
+      }
+      if (resp.status >= 500) {
+        setAuth(false);
+        showErrorToastNotification(resp.data.message);
+        return false;
+      }
+      if (resp.status === 401) await refreshAuth();
       setAuth(false);
       showWarnToastNotification(resp.data.message);
       return false;
     };
-
+    checkAuth();
-  useEffect(() => {
-    (async () => {
-      await refreshAuth();
-    })();
   }, []);
 
   const updateWindowDimensions = () => {

src/pages/Graph/index.tsx

@@ -96,6 +96,19 @@ const initialInteractive: Interactive = {
   elsSel: true,
 };
 
+const nodeOptions: Partial<Node> = {
+  style: {
+    backgroundColor: "white",
+  },
+};
+
+const selectedNodeOptions: Partial<Node> = {
+  style: {
+    backgroundColor: "white",
+    boxShadow: "0px 0px 60px 20px red",
+  },
+};
+
 const edgeOptions: DefaultEdgeOptions = {
   animated: false,
   style: {
@@ -133,6 +146,7 @@ const Graph = (): React.ReactNode => {
   const flowInstance = useReactFlow();
   const [playlistNodes, setPlaylistNodes] = useState<Node[]>(initialNodes);
   const [linkEdges, setLinkEdges] = useState<Edge[]>(initialEdges);
+  const [selectedNodeID, setSelectedNodeID] = useState<Node["id"]>("");
   const [selectedEdgeID, setSelectedEdgeID] = useState<Edge["id"]>("");
   const [interactive, setInteractive] =
     useState<Interactive>(initialInteractive);
@@ -140,6 +154,7 @@ const Graph = (): React.ReactNode => {
 
   const onFlowInit: OnInit = (_instance) => {
     console.debug("flow loaded");
+    console.log(selectedNodeID);
   };
 
   // base event handling
@@ -153,18 +168,30 @@ const Graph = (): React.ReactNode => {
   );
 
   const onFlowSelectionChange: OnSelectionChangeFunc = useCallback(
-    ({ edges }) => {
+    ({ nodes, edges }) => {
-      const selectedID = edges[0]?.id ?? "";
+      console.log(nodes);
-      setSelectedEdgeID(selectedID);
+      console.log(edges);
+
+      const nodeSelection = nodes[0]?.id ?? "";
+      setSelectedNodeID(nodeSelection);
+      setPlaylistNodes((nds) =>
+        nds.map((nd) =>
+          nd.id === nodeSelection
+            ? { ...nd, ...selectedNodeOptions }
+            : { ...nd, ...nodeOptions }
+        )
+      );
+      const edgeSelection = edges[0]?.id ?? "";
+      setSelectedEdgeID(edgeSelection);
       setLinkEdges((eds) =>
         eds.map((ed) =>
-          ed.id === selectedID
+          ed.id === edgeSelection
             ? { ...ed, ...selectedEdgeOptions }
             : { ...ed, ...edgeOptions }
         )
       );
     },
-    [setLinkEdges]
+    []
   );
   useOnSelectionChange({
     onChange: onFlowSelectionChange,
@@ -330,14 +357,21 @@ const Graph = (): React.ReactNode => {
         })
       );
 
+      const connectedPositions = finalLayout.nodes.map((nd) => nd.position);
+      const largestX = connectedPositions.sort((a, b) => b.x - a.x)[0]?.x;
+      const largestY = connectedPositions.sort((a, b) => b.y - a.y)[0]?.y;
+
       finalLayout.nodes.push(
         ...unconnectedNodes.map((node, idx) => {
           const position = {
             x:
-              nodeOffsets.unconnected.origin.x +
+              // nodeOffsets.unconnected.origin.x +
+              (largestX ?? nodeOffsets.unconnected.origin.x) / 2 +
               Math.floor(idx / 5) * nodeOffsets.unconnected.scaling.x,
             y:
-              nodeOffsets.unconnected.origin.y +
+              // nodeOffsets.unconnected.origin.y +
+              (largestY ?? nodeOffsets.unconnected.origin.y) +
+              100 +
               Math.floor(idx % 5) * nodeOffsets.unconnected.scaling.y,
           };
           const x = position.x - (node.measured?.width ?? 0) / 2;
@@ -385,11 +419,11 @@ const Graph = (): React.ReactNode => {
           id: `${pl.playlistID}`,
           position: {
             x:
-              nodeOffsets.unconnected.origin.x +
+              nodeOffsets.connected.origin.x +
-              Math.floor(idx / 15) * nodeOffsets.unconnected.scaling.x,
+              Math.floor(idx / 15) * nodeOffsets.connected.scaling.x,
             y:
-              nodeOffsets.unconnected.origin.y +
+              nodeOffsets.connected.origin.y +
-              Math.floor(idx % 15) * nodeOffsets.unconnected.scaling.y,
+              Math.floor(idx % 15) * nodeOffsets.connected.scaling.y,
           },
           data: {
             label: pl.playlistName,
@@ -478,7 +512,8 @@ const Graph = (): React.ReactNode => {
         onBeforeDelete={onFlowBeforeDelete}
         nodesDraggable={interactive.ndDrag}
         nodesConnectable={interactive.ndConn}
-        nodesFocusable={false}
+        nodesFocusable
+        edgesFocusable
         elementsSelectable={interactive.elsSel}
         deleteKeyCode={["Delete"]}
         multiSelectionKeyCode={null}
@@ -499,10 +534,19 @@ const Graph = (): React.ReactNode => {
           <PiSupersetOf size={36} />
           Backfill Link
         </Button>
+        <Button>
+          <PiSupersetOf size={36} />
+          Backfill Chain
+        </Button>
+        <hr className={styles.divider} />
         <Button onClickMethod={pruneLink}>
           <PiSubsetOf size={36} />
           Prune Link
         </Button>
+        <Button>
+          <PiSubsetOf size={36} />
+          Prune Link
+        </Button>
         <hr className={styles.divider} />
         <Button onClickMethod={() => arrangeLayout("TB")}>
           <IoIosGitNetwork size={36} />