Cleaned up code and added additional members field to create transaction page

src/Pages/AddTransactionPage/AddTransactionPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import styles from "../../styles";
 import { colors } from "../../styles";
 import TextField from "@mui/material/TextField";
@@ -28,11 +28,23 @@ import { useNavigate } from "react-router-dom";
 export default function AddTransactionPage() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
+  const [transaction, SetTransaction] = useState({
+    equipments: [] as number[],
+    teacher: 0,
+    subject: "",
+    remarks: " ",
+    transaction_status: "Pending Approval",
+    consumables: " ",
+    additional_members: " ",
+    borrower: 0,
+  });
+  /*
   const [selecteditems, SetSelectedItems] = useState<number[]>([]);
   const [selectedteacher, SetSelectedTeacher] = useState<number>(0);
   const [subject, SetSubject] = useState("");
   const [remarks, SetRemarks] = useState("");
   const [consumables, SetConsumables] = useState("");
+  */
   const [error, setError] = useState("");
 
   const equipments = useQuery({
@@ -49,6 +61,14 @@ export default function AddTransactionPage() {
     queryKey: ["user"],
     queryFn: UserAPI,
   });
+
+  useEffect(() => {
+    if (user.data) {
+      SetTransaction({ ...transaction, borrower: user.data.id });
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user.data]);
   const isLoading =
     equipments.isLoading || teachers.isLoading || user.isLoading;
 
@@ -109,9 +129,12 @@ export default function AddTransactionPage() {
           <FormLabel style={styles.text_dark}>Items Requested</FormLabel>
           <Select
             multiple
-            value={selecteditems}
+            value={transaction.equipments}
             onChange={(event) =>
-              SetSelectedItems(event.target.value as number[])
+              SetTransaction({
+                ...transaction,
+                equipments: event.target.value as number[],
+              })
             }
             input={<OutlinedInput label="Name" />}
           >
@@ -127,9 +150,12 @@ export default function AddTransactionPage() {
         <FormControl style={{ marginTop: "8px" }}>
           <FormLabel style={styles.text_dark}>Assigned Teacher</FormLabel>
           <Select
-            value={selectedteacher}
+            value={transaction.teacher}
             onChange={(event) =>
-              SetSelectedTeacher(event.target.value as number)
+              SetTransaction({
+                ...transaction,
+                teacher: event.target.value as number,
+              })
             }
             label={"Assigned Teacher"}
             input={<OutlinedInput label="Assigned Teacher" />}
@@ -146,11 +172,11 @@ export default function AddTransactionPage() {
           <TextField
             style={styles.input_form}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              SetSubject(e.target.value);
+              SetTransaction({ ...transaction, subject: e.target.value });
               setError("");
             }}
             label={"Subject"}
-            value={subject}
+            value={transaction.subject}
             placeholder={"The subject requiring the equipments"}
           />
         </FormControl>
@@ -160,11 +186,11 @@ export default function AddTransactionPage() {
             multiline
             style={styles.input_form}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              SetRemarks(e.target.value);
+              SetTransaction({ ...transaction, remarks: e.target.value });
               setError("");
             }}
             label={"Remarks"}
-            value={remarks}
+            value={transaction.remarks}
             placeholder={"Optionally add a brief description of the request"}
           />
         </FormControl>
@@ -174,14 +200,33 @@ export default function AddTransactionPage() {
             multiline
             style={styles.input_form}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              SetConsumables(e.target.value);
+              SetTransaction({ ...transaction, consumables: e.target.value });
               setError("");
             }}
             label={"Consumables"}
-            value={consumables}
+            value={transaction.consumables}
             placeholder={"Write down any consumables here"}
           />
         </FormControl>
+        <FormControl style={{ marginTop: "8px" }}>
+          <FormLabel style={styles.text_dark}>Additional Members</FormLabel>
+          <TextField
+            multiline
+            style={styles.input_form}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              SetTransaction({
+                ...transaction,
+                additional_members: e.target.value,
+              });
+              setError("");
+            }}
+            label={"Additional Members"}
+            value={transaction.additional_members}
+            placeholder={
+              "Write down any additional members borrowing on behalf of this transaction"
+            }
+          />
+        </FormControl>
       </div>
       <p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
       <div
@@ -197,16 +242,8 @@ export default function AddTransactionPage() {
         type={"dark"}
         label={"Create Transaction"}
         onClick={async () => {
-          console.log(selecteditems);
-          const data = await TransactionCreateAPI({
-            equipments: selecteditems,
-            teacher: selectedteacher,
-            subject: subject,
-            remarks: remarks || " ",
-            transaction_status: "Pending Approval",
-            consumables: consumables || "",
-            borrower: user.data?.id || 0,
-          });
+          console.log(JSON.stringify(transaction));
+          const data = await TransactionCreateAPI(transaction);
           if (data[0]) {
             setError("Created successfully");
             toast(