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

Refactor onClick function on transaction entry

Browse source
This commit is contained in:
Keannu Bernasol 2024-01-03 16:09:09 +08:00
parent f9b4729ee7
commit e8864bc28c
3 changed files with 24 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/Components/DashboardPage/Student/StudentTransactionListView.tsx
View file

@ -5,8 +5,10 @@ import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
import React, { useState } from "react"; import React, { useState } from "react";
import TransactionEntry from "../../TransactionEntry/TransactionEntry"; import TransactionEntry from "../../TransactionEntry/TransactionEntry";
import TransactionFilterMenu from "../TransactionFilterMenu"; import TransactionFilterMenu from "../TransactionFilterMenu";
import { useNavigate } from "react-router-dom";
export default function StudentTransactionListView() { export default function StudentTransactionListView() {
const navigate = useNavigate();
const transactions = useQuery({ const transactions = useQuery({
queryKey: ["transactions_student"], queryKey: ["transactions_student"],
queryFn: TransactionsByStudentAPI, queryFn: TransactionsByStudentAPI,
@ -54,7 +56,15 @@ export default function StudentTransactionListView() {
) )
.map((transaction) => ( .map((transaction) => (
<React.Fragment key={transaction.id}> <React.Fragment key={transaction.id}>
<TransactionEntry transaction={transaction} /> <TransactionEntry
onClick={() =>
navigate(`/view/transaction/${transaction.id}`, {
replace: true,
state: { id: transaction.id },
})
}
transaction={transaction}
/>
</React.Fragment> </React.Fragment>
)) ))
) : ( ) : (

12
src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
View file

@ -5,8 +5,10 @@ import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
import React, { useState } from "react"; import React, { useState } from "react";
import TransactionEntry from "../../TransactionEntry/TransactionEntry"; import TransactionEntry from "../../TransactionEntry/TransactionEntry";
import TransactionFilterMenu from "../TransactionFilterMenu"; import TransactionFilterMenu from "../TransactionFilterMenu";
import { useNavigate } from "react-router-dom";
export default function TeacherTransactionListView() { export default function TeacherTransactionListView() {
const navigate = useNavigate();
const transactions = useQuery({ const transactions = useQuery({
queryKey: ["transactions_teacher"], queryKey: ["transactions_teacher"],
queryFn: TransactionsByTeacherAPI, queryFn: TransactionsByTeacherAPI,
@ -54,7 +56,15 @@ export default function TeacherTransactionListView() {
) )
.map((transaction) => ( .map((transaction) => (
<React.Fragment key={transaction.id}> <React.Fragment key={transaction.id}>
<TransactionEntry transaction={transaction} /> <TransactionEntry
onClick={() =>
navigate(`/view/transaction/${transaction.id}`, {
replace: true,
state: { id: transaction.id },
})
}
transaction={transaction}
/>
</React.Fragment> </React.Fragment>
)) ))
) : ( ) : (

10
src/Components/TransactionEntry/TransactionEntry.tsx
View file

@ -1,14 +1,13 @@
import styles from "../../styles"; import styles from "../../styles";
import { colors } from "../../styles"; import { colors } from "../../styles";
import { TransactionType } from "../Types/Types"; import { TransactionType } from "../Types/Types";
import { useNavigate } from "react-router-dom";
import StatusTextColor from "../StatusTextColor/StatusTextColor"; import StatusTextColor from "../StatusTextColor/StatusTextColor";
export interface props { export interface props {
transaction: TransactionType; transaction: TransactionType;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
} }
export default function TransactionEntry(props: props) { export default function TransactionEntry(props: props) {
const navigate = useNavigate();
return ( return (
<div <div
style={{ style={{
@ -20,12 +19,7 @@ export default function TransactionEntry(props: props) {
margin: "8px", margin: "8px",
padding: "8px", padding: "8px",
}} }}
onClick={() => onClick={() => props.onClick}
navigate(`/view/transaction/${props.transaction.id}`, {
replace: true,
state: { id: props.transaction.id },
})
}
> >
<div style={styles.flex_row}> <div style={styles.flex_row}>
<p <p