Add Environment Context

iamfaran · iamfaran · commit d9f7dd5017dd · 2025-04-12T02:58:23.000+05:00
diff --git a/client/packages/lowcoder/src/pages/setting/environments/Environments.tsx b/client/packages/lowcoder/src/pages/setting/environments/Environments.tsx
@@ -1,28 +1,24 @@
-// environments/Environments.tsx
 import React from "react";
-import { Switch, Route, useRouteMatch } from "react-router-dom";
-import EnvironmentsList from "./EnvironmentsList"; // Rename your current component
-import EnvironmentDetail from "./EnvironmentDetail";
-import WorkspaceDetail from "./WorkspaceDetail";
-import { ENVIRONMENT_WORKSPACE_DETAIL } from "@lowcoder-ee/constants/routesURL";
+import { Switch, Route } from "react-router-dom";
+import EnvironmentsList from "./EnvironmentsList";
+import EnvironmentScopedRoutes from "./components/EnvironmentScopedRoutes";
 
 import {
   ENVIRONMENT_SETTING,
-  ENVIRONMENT_DETAIL,
+  ENVIRONMENT_DETAIL
 } from "@lowcoder-ee/constants/routesURL";
 
 const Environments: React.FC = () => {
   return (
     <Switch>
-      <Route path={ENVIRONMENT_WORKSPACE_DETAIL}>
-        <WorkspaceDetail />
+      {/* Route that shows the list of environments */}
+      <Route exact path={ENVIRONMENT_SETTING}>
+        <EnvironmentsList />
       </Route>
 
+      {/* All other routes under /environments/:envId */}
       <Route path={ENVIRONMENT_DETAIL}>
-        <EnvironmentDetail />
-      </Route>
-      <Route exact path={ENVIRONMENT_SETTING}>
-        <EnvironmentsList />
+        <EnvironmentScopedRoutes />
       </Route>
     </Switch>
   );
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentScopedRoutes.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentScopedRoutes.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { Switch, Route, useParams } from "react-router-dom";
+import { EnvironmentProvider } from "../context/EnvironmentContext";
+
+import EnvironmentDetail from "../EnvironmentDetail";
+import WorkspaceDetail from "../WorkspaceDetail";
+
+import {
+  ENVIRONMENT_DETAIL,
+  ENVIRONMENT_WORKSPACE_DETAIL,
+} from "@lowcoder-ee/constants/routesURL";
+
+const EnvironmentScopedRoutes: React.FC = () => {
+    const { environmentId } = useParams<{ environmentId: string }>();
+
+  return (
+    <EnvironmentProvider envId={environmentId}>
+      <Switch>
+        <Route exact path={ENVIRONMENT_DETAIL}>
+          <EnvironmentDetail />
+        </Route>
+
+        <Route exact path={ENVIRONMENT_WORKSPACE_DETAIL}>
+          <WorkspaceDetail />
+        </Route>
+      </Switch>
+    </EnvironmentProvider>
+  );
+};
+
+export default EnvironmentScopedRoutes;
diff --git a/client/packages/lowcoder/src/pages/setting/environments/context/EnvironmentContext.tsx b/client/packages/lowcoder/src/pages/setting/environments/context/EnvironmentContext.tsx
@@ -0,0 +1,74 @@
+// src/contexts/EnvironmentContext.tsx
+import React, {
+    createContext,
+    useContext,
+    useEffect,
+    useState,
+    useCallback,
+    ReactNode,
+  } from "react";
+  import { useHistory } from "react-router-dom";
+  import { getEnvironmentById } from "../services/environments.service"; 
+  import { Environment } from "../types/environment.types"; 
+  
+  interface EnvironmentContextType {
+    environment: Environment | null;
+    loading: boolean;
+    error: string | null;
+    refresh: () => void;
+  }
+  
+  const EnvironmentContext = createContext<EnvironmentContextType | undefined>(undefined);
+  
+  export const useEnvironmentContext = () => {
+    const context = useContext(EnvironmentContext);
+    if (!context) {
+      throw new Error("useEnvironmentContext must be used within an EnvironmentProvider");
+    }
+    return context;
+  };
+  
+  interface ProviderProps {
+    envId: string;
+    children: ReactNode;
+  }
+  
+  export const EnvironmentProvider: React.FC<ProviderProps> = ({ envId, children }) => {
+    const [environment, setEnvironment] = useState<Environment | null>(null);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+    const history = useHistory();
+  
+    const fetchEnvironment = useCallback(async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const data = await getEnvironmentById(envId);
+        console.log("Environment data:", data);
+        setEnvironment(data);
+      } catch (err) {
+        setError("Environment not found or failed to load");
+        history.push("/404"); // or a centralized error route
+      } finally {
+        setLoading(false);
+      }
+    }, [envId, history]);
+  
+    useEffect(() => {
+      fetchEnvironment();
+    }, [fetchEnvironment]);
+  
+    const value: EnvironmentContextType = {
+      environment,
+      loading,
+      error,
+      refresh: fetchEnvironment,
+    };
+  
+    return (
+      <EnvironmentContext.Provider value={value}>
+        {children}
+      </EnvironmentContext.Provider>
+    );
+  };
+  
