diff --git a/src/App.tsx b/src/App.tsx index ddc36da..c0ea775 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -23,6 +23,7 @@ import TransactionPage from "./Pages/TransactionPage/TransactionPage"; import EquipmentInstanceTallyPage from "./Pages/EquipmentTallyPage/EquipmentTallyPage"; import TransactionReportPage from "./Pages/TransactionReportPage/TransactionReportPage"; import ManageEquipmentPage from "./Pages/ManageEquipmentPage/ManageEquipmentPage"; +import UserInfoPage from "./Pages/UserInfoPage/UserInfoPage"; const queryClient = new QueryClient(); const router = createHashRouter([ @@ -184,6 +185,16 @@ const router = createHashRouter([ ), errorElement: , }, + { + path: "/view/user/", + element: ( + <> + + + + ), + errorElement: , + }, ]); export default function App() { diff --git a/src/Components/API/API.tsx b/src/Components/API/API.tsx index 4c43e72..b41eceb 100644 --- a/src/Components/API/API.tsx +++ b/src/Components/API/API.tsx @@ -21,6 +21,7 @@ import { TransactionType, ClearanceType, TransactionCreateType, + PatchUserType, } from "../Types/Types"; const debug = false; @@ -148,6 +149,19 @@ export async function UserAPI() { }); } +export async function UserUpdateAPI(user: PatchUserType) { + const config = await GetConfig(); + return instance + .patch("api/v1/accounts/users/me/", user, config) + .then((response) => { + return [true, response.data as UserType]; + }) + .catch((error) => { + console.log("Error updating user info"); + return [false, ParseError(error)]; + }); +} + export function ActivationAPI(activation: ActivationType) { return instance .post("api/v1/accounts/users/activation/", activation) diff --git a/src/Components/Drawer/Drawer.tsx b/src/Components/Drawer/Drawer.tsx index fde882f..2db3212 100644 --- a/src/Components/Drawer/Drawer.tsx +++ b/src/Components/Drawer/Drawer.tsx @@ -39,7 +39,7 @@ export default function Drawer() { backgroundColor: colors.header_color, }} > -
+
navigate("/view/user")}> + ) => { + setUser({ ...user, section: e.target.value }); + setError(""); + }} + value={user.username} + placeholder={"Enter current section"} + /> {props.transaction.equipments.map((equipment) => ( - {` - ${equipment.name} (ID:${equipment.id})`} + {` - ${equipment.name} (ID:${equipment.id}) (${equipment.status})`} ))} {/* total Equipment */} diff --git a/src/Components/Types/Types.tsx b/src/Components/Types/Types.tsx index 1ad8d3b..b563a58 100644 --- a/src/Components/Types/Types.tsx +++ b/src/Components/Types/Types.tsx @@ -107,6 +107,15 @@ export type UserType = { last_name: string; is_teacher: boolean; is_technician: boolean; + course: string; + section: string; +}; + +export type PatchUserType = { + first_name?: string; + last_name?: string; + course?: string; + section?: string; }; export type TransactionType = { diff --git a/src/Pages/DashboardPage/DashboardPage.tsx b/src/Pages/DashboardPage/DashboardPage.tsx index bc923ef..d8cd8c6 100644 --- a/src/Pages/DashboardPage/DashboardPage.tsx +++ b/src/Pages/DashboardPage/DashboardPage.tsx @@ -29,7 +29,6 @@ export default function Dashboard() { > -
diff --git a/src/Pages/UserInfoPage/UserInfoPage.tsx b/src/Pages/UserInfoPage/UserInfoPage.tsx new file mode 100644 index 0000000..7f4e49c --- /dev/null +++ b/src/Pages/UserInfoPage/UserInfoPage.tsx @@ -0,0 +1,212 @@ +import Header from "../../Components/Header/Header"; +import styles from "../../styles"; +import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent"; +import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; +import { UserAPI, UserUpdateAPI } from "../../Components/API/API"; +import CircularProgress from "@mui/material/CircularProgress/CircularProgress"; +import { useEffect, useState } from "react"; +import { toast } from "react-toastify"; +import { + FormControlLabel, + FormLabel, + Radio, + RadioGroup, + TextField, +} from "@mui/material"; +export default function UserInfoPage() { + const queryClient = useQueryClient(); + const User = useQuery({ queryKey: ["user"], queryFn: UserAPI }); + const [user, setUser] = useState({ + first_name: "", + last_name: "", + username: "", + email: "", + course: "", + section: "", + }); + const [error, setError] = useState(""); + const mutation = useMutation({ + mutationFn: async () => { + const data = await UserUpdateAPI(user); + if (data[0] != true) { + setError(JSON.stringify(data[1])); + return Promise.reject(new Error(JSON.stringify(data[1]))); + } + return data; + }, + onSuccess: (data) => { + queryClient.invalidateQueries({ + queryKey: ["user"], + }); + setError("Updated successfully"); + toast(`User info updated successfuly`, { + position: "top-right", + autoClose: 2000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + theme: "light", + }); + if (data && User.data) { + setUser({ + first_name: User.data.first_name, + last_name: User.data.last_name, + username: User.data.username, + email: User.data.email, + course: User.data.course, + section: User.data.section, + }); + } + }, + }); + useEffect(() => { + if (User.data) { + setUser(User.data); + } + }, [User.data]); + + if (User.isLoading) { + return ( +
+
+
+ +

+ Loading +

+
+
+ ); + } + return ( +
+
+
+ ) => { + setUser({ ...user, first_name: e.target.value }); + setError(""); + }} + value={user.first_name} + placeholder={"Enter your first name"} + /> + ) => + setUser({ ...user, last_name: e.target.value }) + } + value={user.last_name} + placeholder={"Enter your last name"} + /> +

{JSON.stringify(User.data)}

+
+ + + + Course + + ) => { + setUser({ ...user, course: e.target.value }); + setError(""); + }} + > +
+ } + label="BS Chemistry" + style={styles.text_dark} + /> + } + label="BS Food Technology" + style={styles.text_dark} + /> + } + label="BS Applied Physics" + style={styles.text_dark} + /> + } + label="BS Environmental Science" + style={styles.text_dark} + /> +
+ + ) => { + setUser({ ...user, section: e.target.value }); + setError(""); + }} + value={user.username} + placeholder={"Enter current section"} + /> + +

+ {error} +

+ +
+ ); +}