Skip to content

Commit badf60f

Browse files
iamfaraniamfaran
committed
create 3 contexts
1 parent 7c82e60 commit badf60f

3 files changed

Lines changed: 324 additions & 155 deletions

File tree

‎client/packages/lowcoder/src/pages/setting/environments/context/EnvironmentContext.tsx‎

Lines changed: 90 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,91 @@
1-
import React, {
2-
createContext,
3-
useContext,
4-
useEffect,
5-
useState,
6-
useCallback,
7-
ReactNode,
8-
} from "react";
9-
import { message } from "antd";
10-
import {
11-
getEnvironmentById,
12-
getEnvironments,
13-
updateEnvironment,
14-
} from "../services/environments.service";
15-
import { Environment } from "../types/environment.types";
16-
17-
interface EnvironmentContextState {
18-
// Environment data
19-
environment: Environment | null;
20-
environments: Environment[];
21-
22-
// Loading states
23-
isLoadingEnvironment: boolean;
24-
isLoadingEnvironments: boolean;
25-
26-
// Error state
27-
error: string | null;
28-
29-
// Functions
30-
refreshEnvironment: (envId?: string) => Promise<void>;
31-
refreshEnvironments: () => Promise<void>;
32-
updateEnvironmentData: (envId: string, data: Partial<Environment>) => Promise<Environment>;
33-
}
34-
35-
const EnvironmentContext = createContext<EnvironmentContextState | undefined>(undefined);
36-
37-
export const useEnvironmentContext = () => {
38-
const context = useContext(EnvironmentContext);
39-
if (!context) {
40-
throw new Error(
41-
"useEnvironmentContext must be used within an EnvironmentProvider"
42-
);
43-
}
44-
return context;
45-
};
46-
47-
interface ProviderProps {
48-
children: ReactNode;
49-
}
50-
51-
export const EnvironmentProvider: React.FC<ProviderProps> = ({
52-
children,
53-
}) => {
54-
// State for environment data
55-
const [environment, setEnvironment] = useState<Environment | null>(null);
56-
const [environments, setEnvironments] = useState<Environment[]>([]);
57-
58-
// Loading states
59-
const [isLoadingEnvironment, setIsLoadingEnvironment] = useState<boolean>(false);
60-
const [isLoadingEnvironments, setIsLoadingEnvironments] = useState<boolean>(true);
61-
62-
// Error state
63-
const [error, setError] = useState<string | null>(null);
64-
65-
// Function to fetch a specific environment by ID
66-
const fetchEnvironment = useCallback(async (environmentId?: string) => {
67-
// Only fetch if we have an environment ID
68-
if (!environmentId) {
69-
setEnvironment(null);
70-
return;
71-
}
72-
73-
setIsLoadingEnvironment(true);
74-
setError(null);
75-
76-
try {
77-
const data = await getEnvironmentById(environmentId);
78-
console.log("Environment data:", data);
79-
setEnvironment(data);
80-
} catch (err) {
81-
const errorMessage = err instanceof Error ? err.message : "Environment not found or failed to load";
82-
setError(errorMessage);
83-
} finally {
84-
setIsLoadingEnvironment(false);
85-
}
86-
}, []);
87-
88-
// Function to fetch all environments
89-
const fetchEnvironments = useCallback(async () => {
90-
setIsLoadingEnvironments(true);
91-
setError(null);
92-
93-
try {
94-
const data = await getEnvironments();
95-
console.log("Environments data:", data);
96-
setEnvironments(data);
97-
} catch (err) {
98-
const errorMessage = err instanceof Error ? err.message : "Failed to load environments list";
99-
setError(errorMessage);
100-
} finally {
101-
setIsLoadingEnvironments(false);
102-
}
103-
}, []);
104-
105-
// Function to update an environment
106-
// Function to update an environment
107-
const updateEnvironmentData = useCallback(async (
108-
environmentId: string,
109-
data: Partial<Environment>
110-
): Promise<Environment> => {
111-
try {
112-
const updatedEnv = await updateEnvironment(environmentId, data);
113-
114-
// Show success message
115-
message.success("Environment updated successfully");
116-
117-
// Refresh the environments list
118-
fetchEnvironments();
119-
120-
// If we're viewing a single environment and it's the one we updated,
121-
// refresh that environment data as well
122-
if (environment && environment.environmentId === environmentId) {
123-
fetchEnvironment(environmentId);
124-
}
125-
126-
return updatedEnv;
127-
} catch (err) {
128-
const errorMessage = err instanceof Error ? err.message : "Failed to update environment";
129-
message.error(errorMessage);
130-
throw err;
131-
}
132-
}, [environment, fetchEnvironment, fetchEnvironments]);
133-
134-
// Initial data loading - just fetch environments list
135-
useEffect(() => {
136-
fetchEnvironments();
137-
}, [fetchEnvironments]);
138-
139-
// Create the context value
140-
const value: EnvironmentContextState = {
141-
environment,
142-
environments,
143-
isLoadingEnvironment,
144-
isLoadingEnvironments,
145-
error,
146-
refreshEnvironment: fetchEnvironment,
147-
refreshEnvironments: fetchEnvironments,
148-
updateEnvironmentData,
149-
};
150-
151-
return (
152-
<EnvironmentContext.Provider value={value}>
153-
{children}
154-
</EnvironmentContext.Provider>
155-
);
1+
// client/packages/lowcoder/src/pages/setting/environments/context/EnvironmentContext.tsx
2+
import React, {
3+
createContext,
4+
useContext,
5+
useEffect,
6+
useState,
7+
useCallback,
8+
ReactNode,
9+
} from "react";
10+
import { message } from "antd";
11+
import { getEnvironments } from "../services/environments.service";
12+
import { Environment } from "../types/environment.types";
13+
14+
interface EnvironmentContextState {
15+
// Environments list data
16+
environments: Environment[];
17+
18+
// Loading state
19+
isLoading: boolean;
20+
21+
// Error state
22+
error: string | null;
23+
24+
// Functions
25+
refreshEnvironments: () => Promise<void>;
26+
}
27+
28+
const EnvironmentContext = createContext<EnvironmentContextState | undefined>(undefined);
29+
30+
export const useEnvironmentContext = () => {
31+
const context = useContext(EnvironmentContext);
32+
if (!context) {
33+
throw new Error(
34+
"useEnvironmentContext must be used within an EnvironmentProvider"
35+
);
36+
}
37+
return context;
38+
};
39+
40+
interface ProviderProps {
41+
children: ReactNode;
42+
}
43+
44+
export const EnvironmentProvider: React.FC<ProviderProps> = ({
45+
children,
46+
}) => {
47+
// State for environments list
48+
const [environments, setEnvironments] = useState<Environment[]>([]);
49+
50+
// Loading state
51+
const [isLoading, setIsLoading] = useState<boolean>(true);
52+
53+
// Error state
54+
const [error, setError] = useState<string | null>(null);
55+
56+
// Function to fetch all environments
57+
const fetchEnvironments = useCallback(async () => {
58+
setIsLoading(true);
59+
setError(null);
60+
61+
try {
62+
const data = await getEnvironments();
63+
setEnvironments(data);
64+
} catch (err) {
65+
const errorMessage = err instanceof Error ? err.message : "Failed to load environments list";
66+
setError(errorMessage);
67+
message.error(errorMessage);
68+
} finally {
69+
setIsLoading(false);
70+
}
71+
}, []);
72+
73+
// Initial data loading
74+
useEffect(() => {
75+
fetchEnvironments();
76+
}, [fetchEnvironments]);
77+
78+
// Create the context value
79+
const value: EnvironmentContextState = {
80+
environments,
81+
isLoading,
82+
error,
83+
refreshEnvironments: fetchEnvironments,
84+
};
85+
86+
return (
87+
<EnvironmentContext.Provider value={value}>
88+
{children}
89+
</EnvironmentContext.Provider>
90+
);
15691
};

‎client/packages/lowcoder/src/pages/setting/environments/context/SingleEnvironmentContext.tsx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
// client/packages/lowcoder/src/pages/setting/environments/context/SingleEnvironmentContext.tsx
2+
import React, {
3+
createContext,
4+
useContext,
5+
useEffect,
6+
useState,
7+
useCallback,
8+
ReactNode,
9+
} from "react";
10+
import { message } from "antd";
11+
import { useParams } from "react-router-dom";
12+
import { getEnvironmentById, updateEnvironment } from "../services/environments.service";
13+
import { Environment } from "../types/environment.types";
14+
15+
interface SingleEnvironmentContextState {
16+
// Environment data
17+
environment: Environment | null;
18+
19+
// Loading states
20+
isLoading: boolean;
21+
22+
// Error state
23+
error: string | null;
24+
25+
// Functions
26+
refreshEnvironment: () => Promise<void>;
27+
updateEnvironmentData: (data: Partial<Environment>) => Promise<Environment>;
28+
}
29+
30+
const SingleEnvironmentContext = createContext<SingleEnvironmentContextState | undefined>(undefined);
31+
32+
export const useSingleEnvironmentContext = () => {
33+
const context = useContext(SingleEnvironmentContext);
34+
if (!context) {
35+
throw new Error(
36+
"useSingleEnvironmentContext must be used within a SingleEnvironmentProvider"
37+
);
38+
}
39+
return context;
40+
};
41+
42+
interface ProviderProps {
43+
children: ReactNode;
44+
environmentId?: string; // Optional prop-based ID
45+
}
46+
47+
export const SingleEnvironmentProvider: React.FC<ProviderProps> = ({
48+
children,
49+
environmentId: propEnvironmentId,
50+
}) => {
51+
// Get environmentId from URL params if not provided as prop
52+
const { envId } = useParams<{ envId: string }>();
53+
const environmentId = propEnvironmentId || envId;
54+
55+
// State for environment data
56+
const [environment, setEnvironment] = useState<Environment | null>(null);
57+
58+
// Loading states
59+
const [isLoading, setIsLoading] = useState<boolean>(true);
60+
61+
// Error state
62+
const [error, setError] = useState<string | null>(null);
63+
64+
// Function to fetch environment by ID
65+
const fetchEnvironment = useCallback(async () => {
66+
// Only fetch if we have an environment ID
67+
if (!environmentId) {
68+
setEnvironment(null);
69+
setIsLoading(false);
70+
return;
71+
}
72+
73+
setIsLoading(true);
74+
setError(null);
75+
76+
try {
77+
const data = await getEnvironmentById(environmentId);
78+
setEnvironment(data);
79+
} catch (err) {
80+
const errorMessage = err instanceof Error ? err.message : "Environment not found or failed to load";
81+
setError(errorMessage);
82+
} finally {
83+
setIsLoading(false);
84+
}
85+
}, [environmentId]);
86+
87+
// Function to update the environment
88+
const updateEnvironmentData = useCallback(async (
89+
data: Partial<Environment>
90+
): Promise<Environment> => {
91+
if (!environmentId || !environment) {
92+
throw new Error("No environment selected");
93+
}
94+
95+
try {
96+
const updatedEnv = await updateEnvironment(environmentId, data);
97+
98+
// Show success message
99+
message.success("Environment updated successfully");
100+
101+
// Update local state
102+
setEnvironment(updatedEnv);
103+
104+
return updatedEnv;
105+
} catch (err) {
106+
const errorMessage = err instanceof Error ? err.message : "Failed to update environment";
107+
message.error(errorMessage);
108+
throw err;
109+
}
110+
}, [environment, environmentId]);
111+
112+
// Load environment data when the component mounts or environmentId changes
113+
useEffect(() => {
114+
fetchEnvironment();
115+
}, [fetchEnvironment]);
116+
117+
// Create the context value
118+
const value: SingleEnvironmentContextState = {
119+
environment,
120+
isLoading,
121+
error,
122+
refreshEnvironment: fetchEnvironment,
123+
updateEnvironmentData,
124+
};
125+
126+
return (
127+
<SingleEnvironmentContext.Provider value={value}>
128+
{children}
129+
</SingleEnvironmentContext.Provider>
130+
);
131+
};

0 commit comments

Comments
 (0)