Skip to content

Commit e48d415

Browse files
author
GVE Devnet Admin
committed
Baselined from internal Repository
last_commit:3f274042cdd9b269a9fb248656b7ca2847e44cd3
1 parent c590651 commit e48d415

File tree

1 file changed

+194
-137
lines changed
  • frontend/src/components/body/pages/app

1 file changed

+194
-137
lines changed

‎frontend/src/components/body/pages/app/app.jsx

Lines changed: 194 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -10,155 +10,212 @@ writing, software distributed under the License is distributed on an "AS
1010
IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
1111
or implied.
1212
*/
13-
import { useState, useEffect } from 'react';
14-
import { Card, CardContent, Typography, Grid, Button, TextField, CircularProgress, Autocomplete } from '@mui/material';
15-
// import Autocomplete from '@mui/lab/Autocomplete';
16-
import axios from 'axios';
13+
import { useState, useEffect } from "react";
14+
import {
15+
Card,
16+
CardContent,
17+
Typography,
18+
Grid,
19+
Button,
20+
TextField,
21+
CircularProgress,
22+
} from "@mui/material";
23+
import Autocomplete from "@mui/lab/Autocomplete";
24+
import axios from "axios";
1725

1826
const AppPage = () => {
19-
const [selectedUser, setSelectedUser] = useState(null);
20-
const [output, setOutput] = useState('');
21-
const [isRequestSent, setIsRequestSent] = useState(false);
22-
const [isLoading, setIsLoading] = useState(false);
23-
const [callerViewText, setCallerViewText] = useState('No push notification sent yet.');
24-
const [users, setUsers] = useState([]); // State to store the fetched users
27+
const [selectedUser, setSelectedUser] = useState(null);
28+
const [output, setOutput] = useState("");
29+
const [isRequestSent, setIsRequestSent] = useState(false);
30+
const [isLoading, setIsLoading] = useState(false);
31+
const [callerViewText, setCallerViewText] = useState(
32+
"No push notification sent yet."
33+
);
34+
const [users, setUsers] = useState([]); // State to store the fetched users
2535

26-
// Fetch users from the backend
27-
useEffect(() => {
28-
const fetchUsers = async () => {
29-
try {
30-
const response = await axios.get('http://localhost:8000/users/');
31-
console.log(response);
32-
setUsers(response.data.output); // Assuming the response has an 'output' field with user data
33-
} catch (error) {
34-
console.error('Error fetching users:', error);
35-
}
36-
};
37-
38-
fetchUsers();
39-
}, []);
36+
// Fetch users from the backend
37+
useEffect(() => {
38+
const fetchUsers = async () => {
39+
try {
40+
const response = await axios.get("http://localhost:8000/users/");
41+
console.log(response);
42+
setUsers(response.data.output); // Assuming the response has an 'output' field with user data
43+
} catch (error) {
44+
console.error("Error fetching users:", error);
45+
}
46+
};
4047

41-
const handleSendPush = async () => {
42-
if (!selectedUser) {
43-
alert("Please select a user");
44-
return;
45-
}
48+
fetchUsers();
49+
}, []);
4650

47-
setIsLoading(true);
48-
setCallerViewText(`Sending push notification to ${selectedUser.username}...`);
51+
const handleSendPush = async () => {
52+
if (!selectedUser) {
53+
alert("Please select a user");
54+
return;
55+
}
4956

50-
// Prepare the user data for the backend, ensuring it matches the UserRequest model
51-
const userRequest = {
52-
username: selectedUser.username,
53-
fullname: selectedUser.fullname, // Ensure this field exists in selectedUser
54-
email: selectedUser.email,
55-
status: selectedUser.status, // Ensure this field exists in selectedUser
56-
devices: selectedUser.devices // Ensure this field exists in selectedUser and is an array
57-
};
57+
setIsLoading(true);
58+
setCallerViewText(
59+
`Sending push notification to ${selectedUser.username}...`
60+
);
5861

59-
try {
60-
const response = await axios.post('http://localhost:8000/authenticate/', userRequest);
61-
if (response.data.output) {
62-
setOutput(response.data.output);
63-
setCallerViewText(`Push notification sent to ${selectedUser.username}. Awaiting response...`);
64-
} else {
65-
setOutput('No response received');
66-
setCallerViewText(`Push notification sent to ${selectedUser.username}. Awaiting response...`);
67-
}
68-
setIsRequestSent(true);
69-
} catch (error) {
70-
console.error('Error:', error);
71-
setOutput('An error occurred');
72-
setCallerViewText(`Push notification to ${selectedUser.username} failed!`);
73-
} finally {
74-
setIsLoading(false);
75-
}
62+
// Prepare the user data for the backend, ensuring it matches the UserRequest model
63+
const userRequest = {
64+
username: selectedUser.username,
65+
fullname: selectedUser.fullname, // Ensure this field exists in selectedUser
66+
email: selectedUser.email,
67+
status: selectedUser.status, // Ensure this field exists in selectedUser
68+
devices: selectedUser.devices, // Ensure this field exists in selectedUser and is an array
7669
};
7770

78-
const handleClearOutput = () => {
79-
setOutput('');
80-
setIsRequestSent(false);
81-
setCallerViewText('No push notification sent yet.');
82-
};
71+
try {
72+
const response = await axios.post(
73+
"http://localhost:8000/authenticate/",
74+
userRequest
75+
);
76+
if (response.data.output) {
77+
setOutput(response.data.output);
78+
setCallerViewText(
79+
`Push notification sent to ${selectedUser.username}. Awaiting response...`
80+
);
81+
} else {
82+
setOutput("No response received");
83+
setCallerViewText(
84+
`Push notification sent to ${selectedUser.username}. Awaiting response...`
85+
);
86+
}
87+
setIsRequestSent(true);
88+
} catch (error) {
89+
console.error("Error:", error);
90+
setOutput("An error occurred");
91+
setCallerViewText(
92+
`Push notification to ${selectedUser.username} failed!`
93+
);
94+
} finally {
95+
setIsLoading(false);
96+
}
97+
};
8398

84-
useEffect(() => {
85-
if (isRequestSent && !isLoading) {
86-
const timer = setTimeout(() => {
87-
setCallerViewText(`Push notification to ${selectedUser.username} completed!`);
88-
}, 2000); // Show success message after 2 seconds (adjust as needed)
89-
return () => clearTimeout(timer);
90-
}
91-
}, [isRequestSent, isLoading, selectedUser]);
99+
const handleClearOutput = () => {
100+
setOutput("");
101+
setIsRequestSent(false);
102+
setCallerViewText("No push notification sent yet.");
103+
};
92104

93-
return (
94-
<Grid container spacing={3} style={{ padding: 20 }}>
95-
{/* Call Center View */}
96-
<Grid item xs={12} md={6}>
97-
<Card style={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>
98-
<CardContent>
99-
<Typography variant="h5" gutterBottom>Call Center View</Typography>
100-
<Autocomplete
101-
value={selectedUser}
102-
onChange={(event, newValue) => {
103-
setSelectedUser(newValue);
104-
}}
105-
options={users}
106-
getOptionLabel={(option) => option.username || ""}
107-
renderInput={(params) => (
108-
<TextField {...params} label="User" variant="outlined" fullWidth />
109-
)}
110-
isOptionEqualToValue={(option, value) => option.username === value.username}
111-
disabled={isRequestSent || isLoading}
112-
/>
113-
<Button
114-
variant="contained"
115-
color="primary"
116-
onClick={handleSendPush}
117-
disabled={isRequestSent || !selectedUser || isLoading}
118-
style={{ marginTop: 20 }}
119-
>
120-
{isLoading ? <CircularProgress size={24} /> : 'Send Duo Push'}
121-
</Button>
122-
<Button
123-
variant="outlined"
124-
color="primary"
125-
onClick={handleClearOutput}
126-
style={{ marginTop: 20, marginLeft: 10 }}
127-
disabled={!output}
128-
>
129-
Clear Output
130-
</Button>
131-
{output && (
132-
<Typography paragraph style={{ marginTop: 20 }}>
133-
Response: {output}
134-
</Typography>
135-
)}
136-
</CardContent>
137-
</Card>
138-
</Grid>
105+
useEffect(() => {
106+
if (isRequestSent && !isLoading) {
107+
const timer = setTimeout(() => {
108+
setCallerViewText(
109+
`Push notification to ${selectedUser.username} completed!`
110+
);
111+
}, 2000); // Show success message after 2 seconds (adjust as needed)
112+
return () => clearTimeout(timer);
113+
}
114+
}, [isRequestSent, isLoading, selectedUser]);
139115

140-
{/* Caller View */}
141-
<Grid item xs={12} md={6}>
142-
<Card style={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
143-
<CardContent>
144-
<Typography variant="h5" gutterBottom>Caller View</Typography>
145-
{isLoading ? (
146-
<div style={{ display: 'flex', alignItems: 'center' }}>
147-
<CircularProgress style={{ marginRight: '10px' }} />
148-
<Typography paragraph>
149-
{callerViewText}
150-
</Typography>
151-
</div>
152-
) : (
153-
<Typography paragraph>
154-
{callerViewText}
155-
</Typography>
156-
)}
157-
</CardContent>
158-
</Card>
159-
</Grid>
160-
</Grid>
161-
);
116+
return (
117+
<Grid container spacing={3} style={{ padding: 20 }}>
118+
{/* Call Center View */}
119+
<Grid item xs={12} md={6}>
120+
<Card
121+
style={{
122+
height: "100%",
123+
display: "flex",
124+
flexDirection: "column",
125+
alignItems: "stretch",
126+
}}
127+
>
128+
<CardContent>
129+
<Typography variant="h5" gutterBottom>
130+
Call Center View
131+
</Typography>
132+
<Autocomplete
133+
value={selectedUser}
134+
onChange={(event, newValue) => {
135+
setSelectedUser(newValue);
136+
}}
137+
options={users}
138+
getOptionLabel={(option) => option.username || ""}
139+
renderInput={(params) => (
140+
<TextField
141+
{...params}
142+
label="User"
143+
variant="outlined"
144+
fullWidth
145+
/>
146+
)}
147+
isOptionEqualToValue={(option, value) =>
148+
option.username === value.username
149+
}
150+
disabled={isRequestSent || isLoading}
151+
/>
152+
<Button
153+
variant="contained"
154+
color="primary"
155+
onClick={handleSendPush}
156+
disabled={isRequestSent || !selectedUser || isLoading}
157+
style={{ marginTop: 20 }}
158+
>
159+
{isLoading ? <CircularProgress size={24} /> : "Send Duo Push"}
160+
</Button>
161+
<Button
162+
variant="outlined"
163+
color="primary"
164+
onClick={handleClearOutput}
165+
style={{ marginTop: 20, marginLeft: 10 }}
166+
disabled={!output}
167+
>
168+
Clear Output
169+
</Button>
170+
{output && (
171+
<Typography
172+
paragraph
173+
style={{
174+
marginTop: 20,
175+
fontSize: "50px",
176+
color:
177+
output === "allow"
178+
? "green"
179+
: output === "deny"
180+
? "red"
181+
: "inherit",
182+
}}
183+
>
184+
Response: {output}
185+
</Typography>
186+
)}
187+
</CardContent>
188+
</Card>
189+
</Grid>
190+
191+
{/* Caller View */}
192+
<Grid item xs={12} md={6}>
193+
<Card
194+
style={{
195+
height: "100%",
196+
display: "flex",
197+
flexDirection: "column",
198+
alignItems: "center",
199+
}}
200+
>
201+
<CardContent>
202+
<Typography variant="h5" gutterBottom>
203+
Caller View
204+
</Typography>
205+
{isLoading ? (
206+
<div style={{ display: "flex", alignItems: "center" }}>
207+
<CircularProgress style={{ marginRight: "10px" }} />
208+
<Typography paragraph>{callerViewText}</Typography>
209+
</div>
210+
) : (
211+
<Typography paragraph>{callerViewText}</Typography>
212+
)}
213+
</CardContent>
214+
</Card>
215+
</Grid>
216+
</Grid>
217+
);
162218
};
163219

164220
export default AppPage;
221+

0 commit comments

Comments
 (0)