keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2024-11-17 06:19:27 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

add not applicable field

Browse source
This commit is contained in:
Keannu Bernasol 2024-01-24 22:50:40 +08:00
parent 81852d6fad
commit 30c521489c
1 changed files with 218 additions and 212 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

430
src/Pages/UserInfoPage/UserInfoPage.tsx
View file

@ -1,212 +1,218 @@
import Header from "../../Components/Header/Header"; import Header from "../../Components/Header/Header";
import styles from "../../styles"; import styles from "../../styles";
import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent"; import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { UserAPI, UserUpdateAPI } from "../../Components/API/API"; import { UserAPI, UserUpdateAPI } from "../../Components/API/API";
import CircularProgress from "@mui/material/CircularProgress/CircularProgress"; import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import { import {
FormControlLabel, FormControlLabel,
FormLabel, FormLabel,
Radio, Radio,
RadioGroup, RadioGroup,
TextField, TextField,
} from "@mui/material"; } from "@mui/material";
export default function UserInfoPage() { export default function UserInfoPage() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const User = useQuery({ queryKey: ["user"], queryFn: UserAPI }); const User = useQuery({ queryKey: ["user"], queryFn: UserAPI });
const [user, setUser] = useState({ const [user, setUser] = useState({
first_name: "", first_name: "",
last_name: "", last_name: "",
username: "", username: "",
email: "", email: "",
course: "", course: "",
section: "", section: "",
}); });
const [error, setError] = useState(""); const [error, setError] = useState("");
const mutation = useMutation({ const mutation = useMutation({
mutationFn: async () => { mutationFn: async () => {
const data = await UserUpdateAPI(user); const data = await UserUpdateAPI(user);
if (data[0] != true) { if (data[0] != true) {
setError(JSON.stringify(data[1])); setError(JSON.stringify(data[1]));
return Promise.reject(new Error(JSON.stringify(data[1]))); return Promise.reject(new Error(JSON.stringify(data[1])));
} }
return data; return data;
}, },
onSuccess: (data) => { onSuccess: (data) => {
queryClient.invalidateQueries({ queryClient.invalidateQueries({
queryKey: ["user"], queryKey: ["user"],
}); });
setError("Updated successfully"); setError("Updated successfully");
toast(`User info updated successfuly`, { toast(`User info updated successfuly`, {
position: "top-right", position: "top-right",
autoClose: 2000, autoClose: 2000,
hideProgressBar: false, hideProgressBar: false,
closeOnClick: true, closeOnClick: true,
pauseOnHover: true, pauseOnHover: true,
draggable: true, draggable: true,
progress: undefined, progress: undefined,
theme: "light", theme: "light",
}); });
if (data && User.data) { if (data && User.data) {
setUser({ setUser({
first_name: User.data.first_name, first_name: User.data.first_name,
last_name: User.data.last_name, last_name: User.data.last_name,
username: User.data.username, username: User.data.username,
email: User.data.email, email: User.data.email,
course: User.data.course, course: User.data.course,
section: User.data.section, section: User.data.section,
}); });
} }
}, },
}); });
useEffect(() => { useEffect(() => {
if (User.data) { if (User.data) {
setUser(User.data); setUser(User.data);
} }
}, [User.data]); }, [User.data]);
if (User.isLoading) { if (User.isLoading) {
return ( return (
<div style={styles.background}> <div style={styles.background}>
<Header label={"Transactions"} /> <Header label={"Transactions"} />
<div <div
style={{ style={{
...styles.flex_column, ...styles.flex_column,
...{ ...{
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
paddingTop: "64px", paddingTop: "64px",
}, },
}} }}
> >
<CircularProgress style={{ height: "128px", width: "128px" }} /> <CircularProgress style={{ height: "128px", width: "128px" }} />
<p <p
style={{ style={{
...styles.text_dark, ...styles.text_dark,
...styles.text_L, ...styles.text_L,
}} }}
> >
Loading Loading
</p> </p>
</div> </div>
</div> </div>
); );
} }
return ( return (
<div style={styles.background}> <div style={styles.background}>
<Header label={"Dashboard"} /> <Header label={"Dashboard"} />
<div style={{ position: "relative", zIndex: 999, marginTop: 80 }}> <div style={{ position: "relative", zIndex: 999, marginTop: 80 }}>
<TextField <TextField
id="outlined-helperText" id="outlined-helperText"
label="First Name" label="First Name"
style={styles.input_form} style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setUser({ ...user, first_name: e.target.value }); setUser({ ...user, first_name: e.target.value });
setError(""); setError("");
}} }}
value={user.first_name} value={user.first_name}
placeholder={"Enter your first name"} placeholder={"Enter your first name"}
/> />
<TextField <TextField
id="outlined-helperText" id="outlined-helperText"
label="Last Name" label="Last Name"
style={styles.input_form} style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setUser({ ...user, last_name: e.target.value }) setUser({ ...user, last_name: e.target.value })
} }
value={user.last_name} value={user.last_name}
placeholder={"Enter your last name"} placeholder={"Enter your last name"}
/> />
<p>{JSON.stringify(User.data)}</p> <p>{JSON.stringify(User.data)}</p>
</div> </div>
<RestrictedComponent allow_only={"Student"}> <RestrictedComponent allow_only={"Student"}>
<FormLabel style={styles.text_dark} id="status-selection"> <FormLabel style={styles.text_dark} id="status-selection">
Course Course
</FormLabel> </FormLabel>
<RadioGroup <RadioGroup
aria-labelledby="demo-radio-buttons-group-label" aria-labelledby="demo-radio-buttons-group-label"
value={user.course} value={user.course}
defaultValue="BS Chemistry" defaultValue="BS Chemistry"
name="radio-buttons-group" name="radio-buttons-group"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setUser({ ...user, course: e.target.value }); setUser({ ...user, course: e.target.value });
setError(""); setError("");
}} }}
> >
<div <div
style={{ style={{
...styles.flex_column, ...styles.flex_column,
...{ ...{
overflowY: "scroll", overflowY: "scroll",
maxHeight: "128px", maxHeight: "128px",
}, },
}} }}
> >
<FormControlLabel <FormControlLabel
value="BS Chemistry" value="BS Chemistry"
control={<Radio />} control={<Radio />}
label="BS Chemistry" label="BS Chemistry"
style={styles.text_dark} style={styles.text_dark}
/> />
<FormControlLabel <FormControlLabel
value="BS Food Technology" value="BS Food Technology"
control={<Radio />} control={<Radio />}
label="BS Food Technology" label="BS Food Technology"
style={styles.text_dark} style={styles.text_dark}
/> />
<FormControlLabel <FormControlLabel
value="BS Applied Physics" value="BS Applied Physics"
control={<Radio />} control={<Radio />}
label="BS Applied Physics" label="BS Applied Physics"
style={styles.text_dark} style={styles.text_dark}
/> />
<FormControlLabel <FormControlLabel
value="BS Environmental Science" value="BS Environmental Science"
control={<Radio />} control={<Radio />}
label="BS Environmental Science" label="BS Environmental Science"
style={styles.text_dark} style={styles.text_dark}
/> />
</div> <FormControlLabel
</RadioGroup> value="Not Applicable"
<TextField control={<Radio />}
id="outlined-helperText" label="Not Applicable"
label="Section" style={styles.text_dark}
style={styles.input_form} />
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { </div>
setUser({ ...user, section: e.target.value }); </RadioGroup>
setError(""); <TextField
}} id="outlined-helperText"
value={user.username} label="Section"
placeholder={"Enter current section"} style={styles.input_form}
/> onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
</RestrictedComponent> setUser({ ...user, section: e.target.value });
<p setError("");
style={{ }}
...styles.text_dark_red, value={user.username}
...styles.text_S, placeholder={"Enter current section"}
flex: 1, />
textAlign: "center", </RestrictedComponent>
marginLeft: 15, <p
}} style={{
> ...styles.text_dark_red,
{error} ...styles.text_S,
</p> flex: 1,
<button textAlign: "center",
onClick={() => mutation.mutate()} marginLeft: 15,
style={{ }}
borderRadius: 16, >
justifyContent: "center", {error}
alignItems: "center", </p>
background: "#FBB217", <button
height: "40px", onClick={() => mutation.mutate()}
width: "20vw", style={{
}} borderRadius: 16,
> justifyContent: "center",
Update alignItems: "center",
</button> background: "#FBB217",
</div> height: "40px",
); width: "20vw",
} }}
>
Update
</button>
</div>
);
}