Merge pull request 'Refactor filter menu to be usable by all user types and added initial content for teacher dashboard' (#2) from feature/teacher_pages into master

Reviewed-on: https://git.keannu1.duckdns.org/keannu125/Borrowing-TrackerFrontend/pulls/2

src/Components/DashboardPage/Student/StudentTransactionListView.tsx

@@ -4,7 +4,7 @@ import styles from "../../../styles";
 import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
 import React, { useState } from "react";
 import TransactionEntry from "../../TransactionEntry/TransactionEntry";
-import StudentTransactionFilterMenu from "./StudentTransactionFilterMenu";
+import TransactionFilterMenu from "../TransactionFilterMenu";
 
 export default function StudentTransactionListView() {
   const transactions = useQuery({
@@ -39,7 +39,7 @@ export default function StudentTransactionListView() {
   return (
     <div>
       <div style={styles.flex_column}>
-        <StudentTransactionFilterMenu filter={filter} setFilter={setFilter} />
+        <TransactionFilterMenu filter={filter} setFilter={setFilter} />
         <div style={{ marginTop: "16px" }} />
         <div
           style={{

src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx

@@ -0,0 +1,67 @@
+import { useQuery } from "@tanstack/react-query";
+import { TransactionsByTeacherAPI } from "../../API/API";
+import styles from "../../../styles";
+import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
+import React, { useState } from "react";
+import TransactionEntry from "../../TransactionEntry/TransactionEntry";
+import TransactionFilterMenu from "../TransactionFilterMenu";
+
+export default function TeacherTransactionListView() {
+  const transactions = useQuery({
+    queryKey: ["transactions_teacher"],
+    queryFn: TransactionsByTeacherAPI,
+  });
+  const [filter, setFilter] = useState("");
+  if (transactions.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>
+      <div style={styles.flex_column}>
+        <TransactionFilterMenu filter={filter} setFilter={setFilter} />
+        <div style={{ marginTop: "16px" }} />
+        <div
+          style={{
+            ...styles.flex_column,
+            ...{ height: "50vh", overflowY: "scroll" },
+          }}
+        >
+          {transactions.data ? (
+            transactions.data
+              .filter((transaction) =>
+                filter !== "" ? transaction.transaction_status == filter : true
+              )
+              .map((transaction) => (
+                <React.Fragment key={transaction.id}>
+                  <TransactionEntry transaction={transaction} />
+                </React.Fragment>
+              ))
+          ) : (
+            <></>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/Components/DashboardPage/TransactionFilterMenu.tsx

@@ -1,4 +1,4 @@
-import styles from "../../../styles";
+import styles from "../../styles";
 import {
   Button,
   FormControl,
@@ -22,7 +22,7 @@ type props = {
   setFilter: React.Dispatch<React.SetStateAction<string>>;
 };
 
-export default function StudentTransactionFilterMenu(props: props) {
+export default function TransactionFilterMenu(props: props) {
   return (
     <>
       <p
@@ -31,7 +31,7 @@ export default function StudentTransactionFilterMenu(props: props) {
           ...styles.text_L,
         }}
       >
-        Personal Transactions
+        Transactions
       </p>
 
       <div

src/Components/Drawer/Drawer.tsx

@@ -2,7 +2,7 @@ import styles, { colors } from "../../styles";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import HomeIcon from "@mui/icons-material/Home";
 import LogoutIcon from "@mui/icons-material/Logout";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   ClearanceAPI,
   UserAPI,
@@ -15,6 +15,7 @@ import { auth_toggle } from "../Plugins/Redux/Slices/AuthSlice/AuthSlice";
 import { toast } from "react-toastify";
 import { useNavigate } from "react-router-dom";
 export default function Drawer() {
+  const queryclient = useQueryClient();
   const user = useQuery({ queryKey: ["user"], queryFn: UserAPI });
   const clearance = useQuery({
     enabled:
@@ -173,6 +174,7 @@ export default function Drawer() {
           await dispatch(auth_toggle());
           await setAccessToken("");
           await setRefreshToken("");
+          queryclient.clear();
           toast("Logged out", {
             position: "top-right",
             autoClose: 2000,

src/Pages/DashboardPage/DashboardPage.tsx

@@ -6,6 +6,7 @@ import TechnicianEquipmentButtons from "../../Components/DashboardPage/Technicia
 import TechnicianLogButtons from "../../Components/DashboardPage/Technician/TechnicianLogButtons";
 import StudentTransactionListView from "../../Components/DashboardPage/Student/StudentTransactionListView";
 import StudentDashboard from "../../Components/DashboardPage/Student/StudentDashboard";
+import TeacherTransactionListView from "../../Components/DashboardPage/Teacher/TeacherTransactionListView";
 export default function Dashboard() {
   return (
     <div style={styles.background}>
@@ -32,7 +33,7 @@ export default function Dashboard() {
         </div>
       </RestrictedComponent>
       <RestrictedComponent allow_only={"Teacher"}>
-        <p style={styles.text_dark}>Welcome teacher!</p>
+        <TeacherTransactionListView />
       </RestrictedComponent>
     </div>
   );