fix(graph): remove redux and useState and useContext hook (#23085)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

Author: xiongemi

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

@@ -10,8 +10,9 @@ import {
   useParams,
   useRouteLoaderData,
 } from 'react-router-dom';
-import ProjectDetailsWrapper from './project-details-wrapper';
+import { ProjectDetailsWrapper } from './project-details-wrapper';
 import {
+  ExpandedTargetsProvider,
   fetchProjectGraph,
   getProjectGraphDataService,
   useEnvironmentConfig,
@@ -50,20 +51,22 @@ export function ProjectDetailsPage() {
   );
 
   return (
-    <div className="flex w-full flex-col justify-center text-slate-700 dark:text-slate-400">
-      <ScrollRestoration />
-      {environment !== 'nx-console' ? (
-        <ProjectDetailsHeader />
-      ) : (
-        <div className="py-2"></div>
-      )}
-      <div className="mx-auto mb-8 w-full max-w-6xl flex-grow px-8">
-        <ProjectDetailsWrapper
-          project={project}
-          sourceMap={sourceMap}
-          errors={errors}
-        ></ProjectDetailsWrapper>
+    <ExpandedTargetsProvider>
+      <div className="flex w-full flex-col justify-center text-slate-700 dark:text-slate-400">
+        <ScrollRestoration />
+        {environment !== 'nx-console' ? (
+          <ProjectDetailsHeader />
+        ) : (
+          <div className="py-2"></div>
+        )}
+        <div className="mx-auto mb-8 w-full max-w-6xl flex-grow px-8">
+          <ProjectDetailsWrapper
+            project={project}
+            sourceMap={sourceMap}
+            errors={errors}
+          ></ProjectDetailsWrapper>
+        </div>
       </div>
-    </div>
+    </ExpandedTargetsProvider>
   );
 }

graph/project-details/src/lib/project-details-wrapper.state.ts

@@ -5,37 +5,27 @@ import type { ProjectGraphProjectNode } from '@nx/devkit';
 import { GraphError } from 'nx/src/command-line/graph/graph';
 /* eslint-enable @nx/enforce-module-boundaries */
 import { useNavigate, useNavigation, useSearchParams } from 'react-router-dom';
-import { connect } from 'react-redux';
 import {
   ErrorToast,
+  ExpandedTargetsContext,
   getExternalApiService,
   useEnvironmentConfig,
   useRouteConstructor,
 } from '@nx/graph/shared';
 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';
+import { useCallback, useContext, useEffect } from 'react';
 
-type ProjectDetailsProps = mapStateToPropsType &
-  mapDispatchToPropsType & {
-    project: ProjectGraphProjectNode;
-    sourceMap: Record<string, string[]>;
-    errors?: GraphError[];
-  };
+interface ProjectDetailsProps {
+  project: ProjectGraphProjectNode;
+  sourceMap: Record<string, string[]>;
+  errors?: GraphError[];
+}
 
-export function ProjectDetailsWrapperComponent({
+export function ProjectDetailsWrapper({
   project,
   sourceMap,
-  setExpandTargets,
-  expandTargets,
-  collapseAllTargets,
   errors,
 }: ProjectDetailsProps) {
   const environment = useEnvironmentConfig()?.environment;
@@ -44,6 +34,8 @@ export function ProjectDetailsWrapperComponent({
   const { state: navigationState, location } = useNavigation();
   const routeConstructor = useRouteConstructor();
   const [searchParams, setSearchParams] = useSearchParams();
+  const { expandedTargets, setExpandedTargets, collapseAllTargets } =
+    useContext(ExpandedTargetsContext);
 
   const handleViewInProjectGraph = useCallback(
     (data: { projectName: string }) => {
@@ -113,44 +105,39 @@ export function ProjectDetailsWrapperComponent({
   };
 
   useEffect(() => {
-    if (!project.data.targets) return;
-
     const expandedTargetsParams = searchParams.get('expanded')?.split(',');
     if (expandedTargetsParams && expandedTargetsParams.length > 0) {
-      setExpandTargets(expandedTargetsParams);
+      setExpandedTargets(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(',')) {
+    if (expandedTargetsParams.join(',') === expandedTargets.join(',')) {
       return;
     }
 
     setSearchParams(
       (currentSearchParams) => {
-        updateSearchParams(currentSearchParams, expandTargets);
+        updateSearchParams(currentSearchParams, expandedTargets);
         return currentSearchParams;
       },
       { replace: true, preventScrollReset: true }
     );
-  }, [
-    expandTargets,
-    project.data.targets,
-    setExpandTargets,
-    searchParams,
-    setSearchParams,
-  ]);
+  }, [expandedTargets, searchParams, setSearchParams]);
 
   if (
     navigationState === 'loading' &&
@@ -179,9 +166,3 @@ export function ProjectDetailsWrapperComponent({
     </>
   );
 }
-
-export const ProjectDetailsWrapper = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ProjectDetailsWrapperComponent);
-export default ProjectDetailsWrapper;

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

@@ -7,3 +7,4 @@ 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/error-toast';
+export * from './lib/expanded-targets-provider';

graph/shared/src/index.ts

@@ -0,0 +1,38 @@
+import { createContext, useState } from 'react';
+
+export const ExpandedTargetsContext = createContext<{
+  expandedTargets?: string[];
+  setExpandedTargets?: (expandedTargets: string[]) => void;
+  toggleTarget?: (targetName: string) => void;
+  collapseAllTargets?: () => void;
+}>({});
+
+export const ExpandedTargetsProvider = ({ children }) => {
+  const [expandedTargets, setExpandedTargets] = useState<string[]>([]);
+
+  const toggleTarget = (targetName: string) => {
+    setExpandedTargets((prevExpandedTargets) => {
+      if (prevExpandedTargets.includes(targetName)) {
+        return prevExpandedTargets.filter((name) => name !== targetName);
+      }
+      return [...prevExpandedTargets, targetName];
+    });
+  };
+
+  const collapseAllTargets = () => {
+    setExpandedTargets([]);
+  };
+
+  return (
+    <ExpandedTargetsContext.Provider
+      value={{
+        expandedTargets,
+        setExpandedTargets,
+        toggleTarget,
+        collapseAllTargets,
+      }}
+    >
+      {children}
+    </ExpandedTargetsContext.Provider>
+  );
+};