Added update transaction modal and simplified error handling for update APIs

src/Components/API/API.tsx

@@ -17,6 +17,8 @@ import {
   EquipmentInstanceLogListType,
   UserType,
   TransactionListType,
+  TransactionUpdateType,
+  TransactionType,
 } from "../Types/Types";
 
 const debug = true;
@@ -356,3 +358,31 @@ export async function TransactionsAPI() {
       console.log("Error retrieving transactions");
     });
 }
+
+export async function TransactionAPI(id: number) {
+  const config = await GetConfig();
+  return instance
+    .get(`api/v1/transactions/${id}/`, config)
+    .then((response) => {
+      return response.data as TransactionType;
+    })
+    .catch(() => {
+      console.log("Error retrieving transaction");
+    });
+}
+
+export async function TransactionUpdateAPI(
+  transaction: TransactionUpdateType,
+  id: number
+) {
+  const config = await GetConfig();
+  return instance
+    .patch(`api/v1/transactions/${id}/`, transaction, config)
+    .then((response) => {
+      return [true, response.data as TransactionType];
+    })
+    .catch((error) => {
+      console.log("Error updating transaction");
+      return [false, ParseError(error)];
+    });
+}

src/Components/EditItemInstanceModal/EditItemInstanceModal.tsx

@@ -51,6 +51,7 @@ export default function EditItemInstanceModal(props: {
     mutationFn: async () => {
       const data = await EquipmentInstanceUpdateAPI(item, props.id);
       if (data[0] != true) {
+        setError(JSON.stringify(data[1]));
         return Promise.reject(new Error(JSON.stringify(data[1])));
       }
       return data;
@@ -84,9 +85,6 @@ export default function EditItemInstanceModal(props: {
         });
       }
     },
-    onError: (error) => {
-      setError(JSON.stringify(error));
-    },
   });
 
   const delete_mutation = useMutation({

src/Components/EditSKUModal/EditSKUModal.tsx

@@ -53,6 +53,7 @@ export default function EditSKUModal(props: {
     mutationFn: async () => {
       const data = await EquipmentUpdateAPI(item, props.id);
       if (data[0] != true) {
+        setError(JSON.stringify(data[1]));
         return Promise.reject(new Error(JSON.stringify(data[1])));
       }
       return data;
@@ -87,9 +88,6 @@ export default function EditSKUModal(props: {
         });
       }
     },
-    onError: (error) => {
-      setError(JSON.stringify(error));
-    },
   });
 
   const delete_mutation = useMutation({

src/Components/EditTransactionModal/EditTransactionModal.tsx

@@ -0,0 +1,216 @@
+import { useEffect, useState } from "react";
+import styles from "../../styles";
+import { colors } from "../../styles";
+import EditIcon from "@mui/icons-material/Edit";
+import Button from "../Button/Button";
+import { toast } from "react-toastify";
+import { TransactionAPI, TransactionUpdateAPI } from "../API/API";
+import RadioGroup from "@mui/material/RadioGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
+import Radio from "@mui/material/Radio";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { CircularProgress } from "@mui/material";
+import React from "react";
+
+export default function EditTransactionModal(props: {
+  id: number;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const queryClient = useQueryClient();
+  const [status, setStatus] = useState("");
+  const [error, setError] = useState("");
+  const transaction = useQuery({
+    queryKey: ["transaction", props.id],
+    queryFn: () => TransactionAPI(Number(props.id)),
+  });
+  const update_mutation = useMutation({
+    mutationFn: async () => {
+      const data = await TransactionUpdateAPI(
+        { transaction_status: status },
+        props.id
+      );
+      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: ["transactions"],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["transactions", props.id],
+      });
+      setError("Updated successfully");
+      toast(
+        `Transaction updated successfuly,  ${
+          typeof data[1] == "object" ? "ID:" + data[1].id : ""
+        }`,
+        {
+          position: "top-right",
+          autoClose: 2000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+          theme: "light",
+        }
+      );
+      if (typeof data[1] == "object") {
+        setStatus(data[1].transaction_status);
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (transaction.data) {
+      setStatus(transaction.data.transaction_status);
+    }
+  }, [transaction.data]);
+  if (transaction.isLoading) {
+    return (
+      <div
+        style={{
+          ...styles.flex_column,
+          ...{
+            alignItems: "center",
+            justifyContent: "center",
+            paddingTop: "64px",
+          },
+        }}
+      >
+        <CircularProgress style={{ height: "128px", width: "128px" }} />
+        <p
+          style={{
+            ...styles.text_dark,
+            ...styles.text_L,
+          }}
+        >
+          Loading
+        </p>
+      </div>
+    );
+  }
+  return (
+    <>
+      <div
+        style={{
+          ...styles.flex_row,
+          ...{
+            alignItems: "center",
+            justifyContent: "center",
+            overflowY: "scroll",
+          },
+        }}
+      >
+        <EditIcon
+          style={{
+            height: 64,
+            width: 64,
+            fill: colors.font_dark,
+            marginLeft: "1rem",
+            marginRight: "1rem",
+          }}
+        />
+        <p style={{ ...styles.text_dark, ...styles.text_L }}>
+          Update Transaction
+        </p>
+      </div>
+
+      <div style={styles.flex_column}>
+        <FormControl style={{ marginTop: "8px" }}>
+          <FormLabel style={styles.text_dark} id="status-selection">
+            Item Status
+          </FormLabel>
+          <RadioGroup
+            aria-labelledby="demo-radio-buttons-group-label"
+            value={status}
+            defaultValue="Pending"
+            name="radio-buttons-group"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setStatus(e.target.value);
+              setError("");
+            }}
+          >
+            <div
+              style={{
+                ...styles.flex_column,
+                ...{ overflowY: "scroll", maxHeight: "8rem" },
+              }}
+            >
+              <FormControlLabel
+                value="Pending Approval"
+                control={<Radio />}
+                label="Pending Approval"
+                style={styles.text_dark}
+              />
+              <FormControlLabel
+                value="Approved"
+                control={<Radio />}
+                label="Approved"
+                style={styles.text_dark}
+              />
+              <FormControlLabel
+                value="Rejected"
+                control={<Radio />}
+                label="Rejected"
+                style={styles.text_dark}
+              />
+              <FormControlLabel
+                value="Cancelled"
+                control={<Radio />}
+                label="Cancelled"
+                style={styles.text_dark}
+              />
+              <FormControlLabel
+                value="Borrowed"
+                control={<Radio />}
+                label="Borrowed"
+                style={styles.text_dark}
+              />
+              <FormControlLabel
+                value="Returned: Pending Checking"
+                control={<Radio />}
+                label="Returned: Pending Checking"
+                style={styles.text_dark}
+              />
+              <FormControlLabel
+                value="With Breakages: Pending Resolution"
+                control={<Radio />}
+                label="With Breakages: Pending Resolution"
+                style={styles.text_dark}
+              />
+              <FormControlLabel
+                value="Finalized"
+                control={<Radio />}
+                label="Finalized"
+                style={styles.text_dark}
+              />
+            </div>
+          </RadioGroup>
+        </FormControl>
+      </div>
+      <p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
+      <div
+        style={{
+          backgroundColor: colors.button_border,
+          marginTop: "16px",
+          width: "100%",
+          height: "2px",
+          marginBottom: 8,
+        }}
+      />
+      <Button
+        type={"dark"}
+        label={"Update Transaction"}
+        onClick={async () => {
+          await update_mutation.mutate();
+        }}
+      />
+    </>
+  );
+}

src/Components/Types/Types.tsx

@@ -125,3 +125,7 @@ export type TransactionType = {
 };
 
 export type TransactionListType = Array<TransactionType>;
+
+export type TransactionUpdateType = {
+  transaction_status: string;
+};

src/Pages/TransactionsListPage/TransactionsListPage.tsx

@@ -13,6 +13,7 @@ import Paper from "@mui/material/Paper";
 import { colors } from "../../styles";
 import Popup from "reactjs-popup";
 import { useState } from "react";
+import EditTransactionModal from "../../Components/EditTransactionModal/EditTransactionModal";
 
 export default function TransactionsListPage() {
   const [EditTransactionOpen, SetEditTransactionOpen] = useState(false);
@@ -162,7 +163,7 @@ export default function TransactionsListPage() {
                             <TableBody>
                               {transaction.equipments.map((equipment) => (
                                 <TableRow
-                                  key={transaction.id}
+                                  key={equipment.id}
                                   sx={{
                                     "&:last-child td, &:last-child th": {
                                       border: 0,
@@ -210,7 +211,10 @@ export default function TransactionsListPage() {
         position={"top center"}
         contentStyle={styles.popup_center}
       >
-        <p style={styles.text_dark}>Transaction Modal</p>
+        <EditTransactionModal
+          id={SelectedTransaction}
+          setOpen={SetEditTransactionOpen}
+        />
       </Popup>
       <Popup
         open={EditEquipmentsOpen}