fix(graph): remove redux and useState hook

graph/client/src/app/app.tsx

@@ -1,6 +1,4 @@
 import { themeInit } from '@nx/graph/ui-theme';
-import { rootStore } from '@nx/graph/state';
-import { Provider as StoreProvider } from 'react-redux';
 import { rankDirInit } from './rankdir-resolver';
 import { RouterProvider } from 'react-router-dom';
 import { getRouter } from './get-router';
@@ -9,9 +7,5 @@ themeInit();
 rankDirInit();
 
 export function App() {
-  return (
-    <StoreProvider store={rootStore}>
-      <RouterProvider router={getRouter()} />
-    </StoreProvider>
-  );
+  return <RouterProvider router={getRouter()} />;
 }

graph/project-details/src/lib/project-details-page.tsx

@@ -6,7 +6,7 @@ import {
   useParams,
   useRouteLoaderData,
 } from 'react-router-dom';
-import ProjectDetailsWrapper from './project-details-wrapper';
+import { ProjectDetailsWrapper } from './project-details-wrapper';
 import {
   fetchProjectGraph,
   getProjectGraphDataService,

graph/project-details/src/lib/project-details-wrapper.tsx

@@ -2,7 +2,6 @@
 // nx-ignore-next-line
 import type { ProjectGraphProjectNode } from '@nx/devkit';
 import { useNavigate, useNavigation, useSearchParams } from 'react-router-dom';
-import { connect } from 'react-redux';
 import {
   getExternalApiService,
   useEnvironmentConfig,
@@ -12,32 +11,22 @@ import { Spinner } from '@nx/graph/ui-components';
 
 import { ProjectDetails } from '@nx/graph/ui-project-details';
 import { useCallback, useEffect } from 'react';
-import {
-  mapStateToProps,
-  mapDispatchToProps,
-  mapStateToPropsType,
-  mapDispatchToPropsType,
-} from './project-details-wrapper.state';
 
-type ProjectDetailsProps = mapStateToPropsType &
-  mapDispatchToPropsType & {
-    project: ProjectGraphProjectNode;
-    sourceMap: Record<string, string[]>;
-  };
+interface ProjectDetailsProps {
+  project: ProjectGraphProjectNode;
+  sourceMap: Record<string, string[]>;
+}
 
-export function ProjectDetailsWrapperComponent({
+export function ProjectDetailsWrapper({
   project,
   sourceMap,
-  setExpandTargets,
-  expandTargets,
-  collapseAllTargets,
 }: ProjectDetailsProps) {
   const environment = useEnvironmentConfig()?.environment;
   const externalApiService = getExternalApiService();
   const navigate = useNavigate();
   const { state: navigationState, location } = useNavigation();
   const routeConstructor = useRouteConstructor();
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [_, setSearchParams] = useSearchParams();
 
   const handleViewInProjectGraph = useCallback(
     (data: { projectName: string }) => {
@@ -95,56 +84,18 @@ export function ProjectDetailsWrapperComponent({
     [externalApiService]
   );
 
-  const updateSearchParams = (
-    params: URLSearchParams,
-    targetNames: string[]
-  ) => {
-    if (targetNames.length === 0) {
-      params.delete('expanded');
-    } else {
-      params.set('expanded', targetNames.join(','));
-    }
-  };
-
+  // clear expanded targets when navigating away
   useEffect(() => {
-    if (!project.data.targets) return;
-
-    const expandedTargetsParams = searchParams.get('expanded')?.split(',');
-    if (expandedTargetsParams && expandedTargetsParams.length > 0) {
-      setExpandTargets(expandedTargetsParams);
-    }
-
     return () => {
-      collapseAllTargets();
-      searchParams.delete('expanded');
-      setSearchParams(searchParams, { replace: true });
+      setSearchParams(
+        (currentSearchParams) => {
+          currentSearchParams.delete('expanded');
+          return currentSearchParams;
+        },
+        { replace: true, preventScrollReset: true }
+      );
     };
-  }, []); // only run on mount
-
-  useEffect(() => {
-    if (!project.data.targets) return;
-
-    const expandedTargetsParams =
-      searchParams.get('expanded')?.split(',') || [];
-
-    if (expandedTargetsParams.join(',') === expandTargets.join(',')) {
-      return;
-    }
-
-    setSearchParams(
-      (currentSearchParams) => {
-        updateSearchParams(currentSearchParams, expandTargets);
-        return currentSearchParams;
-      },
-      { replace: true, preventScrollReset: true }
-    );
-  }, [
-    expandTargets,
-    project.data.targets,
-    setExpandTargets,
-    searchParams,
-    setSearchParams,
-  ]);
+  }, []);
 
   if (
     navigationState === 'loading' &&
@@ -167,9 +118,3 @@ export function ProjectDetailsWrapperComponent({
     />
   );
 }
-
-export const ProjectDetailsWrapper = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ProjectDetailsWrapperComponent);
-export default ProjectDetailsWrapper;

graph/shared/src/index.ts

@@ -6,3 +6,4 @@ export * from './lib/use-route-constructor';
 export * from './lib/use-interval-when';
 export * from './lib/project-graph-data-service/get-project-graph-data-service';
 export * from './lib/fetch-project-graph';
+export * from './lib/use-expanded-targets';

graph/shared/src/lib/use-expanded-targets.ts

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+export function useExpandedTargets() {
+  const [expandedTargets, setExpandedTargets] = useState<string[]>([]);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const updateSearchParams = (
+    params: URLSearchParams,
+    targetNames: string[]
+  ) => {
+    if (targetNames.length === 0) {
+      params.delete('expanded');
+    } else {
+      params.set('expanded', targetNames.join(','));
+    }
+  };
+
+  const toggleTarget = (targetName: string) => {
+    setExpandedTargets((prevExpandedTargets) => {
+      if (prevExpandedTargets.includes(targetName)) {
+        return prevExpandedTargets.filter((name) => name !== targetName);
+      }
+      return [...prevExpandedTargets, targetName];
+    });
+  };
+
+  const collapseAllTargets = () => {
+    setExpandedTargets([]);
+  };
+
+  useEffect(() => {
+    const expandedTargetsParams = searchParams.get('expanded')?.split(',');
+    if (expandedTargetsParams && expandedTargetsParams.length > 0) {
+      setExpandedTargets(expandedTargetsParams);
+    }
+
+    return () => {
+      collapseAllTargets();
+    };
+  }, []); // only run on mount
+
+  useEffect(() => {
+    const expandedTargetsParams =
+      searchParams.get('expanded')?.split(',') || [];
+
+    if (expandedTargetsParams.join(',') === expandedTargets.join(',')) {
+      return;
+    }
+
+    setSearchParams(
+      (currentSearchParams) => {
+        updateSearchParams(currentSearchParams, expandedTargets);
+        return currentSearchParams;
+      },
+      { replace: true, preventScrollReset: true }
+    );
+  }, [expandedTargets]);
+
+  return {
+    expandedTargets,
+    setExpandedTargets,
+    toggleTarget,
+    collapseAllTargets,
+  };
+}