Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitbadf60f

Browse files
committed
create 3 contexts
1 parent7c82e60 commitbadf60f

File tree

3 files changed

+324
-155
lines changed

3 files changed

+324
-155
lines changed
Lines changed: 90 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,91 @@
1-
importReact,{
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-
interfaceEnvironmentContextState{
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-
constEnvironmentContext=createContext<EnvironmentContextState|undefined>(undefined);
36-
37-
exportconstuseEnvironmentContext=()=>{
38-
constcontext=useContext(EnvironmentContext);
39-
if(!context){
40-
thrownewError(
41-
"useEnvironmentContext must be used within an EnvironmentProvider"
42-
);
43-
}
44-
returncontext;
45-
};
46-
47-
interfaceProviderProps{
48-
children:ReactNode;
49-
}
50-
51-
exportconstEnvironmentProvider: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-
constfetchEnvironment=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-
constdata=awaitgetEnvironmentById(environmentId);
78-
console.log("Environment data:",data);
79-
setEnvironment(data);
80-
}catch(err){
81-
consterrorMessage=errinstanceofError ?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-
constfetchEnvironments=useCallback(async()=>{
90-
setIsLoadingEnvironments(true);
91-
setError(null);
92-
93-
try{
94-
constdata=awaitgetEnvironments();
95-
console.log("Environments data:",data);
96-
setEnvironments(data);
97-
}catch(err){
98-
consterrorMessage=errinstanceofError ?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-
constupdateEnvironmentData=useCallback(async(
108-
environmentId:string,
109-
data:Partial<Environment>
110-
):Promise<Environment>=>{
111-
try{
112-
constupdatedEnv=awaitupdateEnvironment(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-
returnupdatedEnv;
127-
}catch(err){
128-
consterrorMessage=errinstanceofError ?err.message :"Failed to update environment";
129-
message.error(errorMessage);
130-
throwerr;
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-
constvalue: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.Providervalue={value}>
153-
{children}
154-
</EnvironmentContext.Provider>
155-
);
1+
// client/packages/lowcoder/src/pages/setting/environments/context/EnvironmentContext.tsx
2+
importReact,{
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+
interfaceEnvironmentContextState{
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+
constEnvironmentContext=createContext<EnvironmentContextState|undefined>(undefined);
29+
30+
exportconstuseEnvironmentContext=()=>{
31+
constcontext=useContext(EnvironmentContext);
32+
if(!context){
33+
thrownewError(
34+
"useEnvironmentContext must be used within an EnvironmentProvider"
35+
);
36+
}
37+
returncontext;
38+
};
39+
40+
interfaceProviderProps{
41+
children:ReactNode;
42+
}
43+
44+
exportconstEnvironmentProvider: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+
constfetchEnvironments=useCallback(async()=>{
58+
setIsLoading(true);
59+
setError(null);
60+
61+
try{
62+
constdata=awaitgetEnvironments();
63+
setEnvironments(data);
64+
}catch(err){
65+
consterrorMessage=errinstanceofError ?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+
constvalue:EnvironmentContextState={
80+
environments,
81+
isLoading,
82+
error,
83+
refreshEnvironments:fetchEnvironments,
84+
};
85+
86+
return(
87+
<EnvironmentContext.Providervalue={value}>
88+
{children}
89+
</EnvironmentContext.Provider>
90+
);
15691
};
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+
importReact,{
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+
interfaceSingleEnvironmentContextState{
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+
constSingleEnvironmentContext=createContext<SingleEnvironmentContextState|undefined>(undefined);
31+
32+
exportconstuseSingleEnvironmentContext=()=>{
33+
constcontext=useContext(SingleEnvironmentContext);
34+
if(!context){
35+
thrownewError(
36+
"useSingleEnvironmentContext must be used within a SingleEnvironmentProvider"
37+
);
38+
}
39+
returncontext;
40+
};
41+
42+
interfaceProviderProps{
43+
children:ReactNode;
44+
environmentId?:string;// Optional prop-based ID
45+
}
46+
47+
exportconstSingleEnvironmentProvider: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+
constenvironmentId=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+
constfetchEnvironment=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+
constdata=awaitgetEnvironmentById(environmentId);
78+
setEnvironment(data);
79+
}catch(err){
80+
consterrorMessage=errinstanceofError ?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+
constupdateEnvironmentData=useCallback(async(
89+
data:Partial<Environment>
90+
):Promise<Environment>=>{
91+
if(!environmentId||!environment){
92+
thrownewError("No environment selected");
93+
}
94+
95+
try{
96+
constupdatedEnv=awaitupdateEnvironment(environmentId,data);
97+
98+
// Show success message
99+
message.success("Environment updated successfully");
100+
101+
// Update local state
102+
setEnvironment(updatedEnv);
103+
104+
returnupdatedEnv;
105+
}catch(err){
106+
consterrorMessage=errinstanceofError ?err.message :"Failed to update environment";
107+
message.error(errorMessage);
108+
throwerr;
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+
constvalue:SingleEnvironmentContextState={
119+
environment,
120+
isLoading,
121+
error,
122+
refreshEnvironment:fetchEnvironment,
123+
updateEnvironmentData,
124+
};
125+
126+
return(
127+
<SingleEnvironmentContext.Providervalue={value}>
128+
{children}
129+
</SingleEnvironmentContext.Provider>
130+
);
131+
};

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp