forked from expertiza/reimplementation-front-end
/
Participant.tsx
125 lines (110 loc) · 3.89 KB
/
Participant.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import { Row as TRow } from "@tanstack/react-table";
import Table from "components/Table/Table";
import useAPI from "hooks/useAPI";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Button, Col, Container, Row } from "react-bootstrap";
import { BsPersonFillAdd } from "react-icons/bs";
import { useDispatch, useSelector } from "react-redux";
import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
import { alertActions } from "store/slices/alertSlice";
import { RootState } from "../../store/store";
import { IParticipantResponse, ROLE } from "../../utils/interfaces";
import DeleteParticipant from "./ParticipantDelete";
import { participantColumns as PARPTICIPANT_COLUMNS } from "./participantColumns";
import { OverlayTrigger, Tooltip } from "react-bootstrap";
/**
* @author Atharva Thorve on October, 2023
*/
interface IModel {
type: "student_tasks" | "courses" | "assignments";
}
const Participants: React.FC<IModel> = ({ type }) => {
const tooltip = <Tooltip id="tooltip">Add Participant</Tooltip>;
const { error, isLoading, data: participantResponse, sendRequest: fetchParticipants } = useAPI();
const auth = useSelector(
(state: RootState) => state.authentication,
(prev, next) => prev.isAuthenticated === next.isAuthenticated
);
const navigate = useNavigate();
const location = useLocation();
const dispatch = useDispatch();
const { typeId } = useParams();
const [showDeleteConfirmation, setShowDeleteConfirmation] = useState<{
visible: boolean;
data?: IParticipantResponse;
}>({ visible: false });
useEffect(() => {
if (!showDeleteConfirmation.visible)
fetchParticipants({ url: `/${type}/${typeId}/participants` });
}, [fetchParticipants, location, showDeleteConfirmation.visible, auth.user.id, type, typeId]);
// Error alert
useEffect(() => {
if (error) {
dispatch(alertActions.showAlert({ variant: "danger", message: error }));
}
}, [error, dispatch]);
const onDeleteParticipantHandler = useCallback(
() => setShowDeleteConfirmation({ visible: false }),
[]
);
const onEditHandle = useCallback(
(row: TRow<IParticipantResponse>) =>
navigate(`/${type}/${typeId}/participants/edit/${row.original.id}`),
[navigate, type, typeId]
);
const onDeleteHandle = useCallback(
(row: TRow<IParticipantResponse>) =>
setShowDeleteConfirmation({ visible: true, data: row.original }),
[]
);
const tableColumns = useMemo(
() => PARPTICIPANT_COLUMNS(onEditHandle, onDeleteHandle),
[onDeleteHandle, onEditHandle]
);
let tableData = useMemo(
() => (isLoading || !participantResponse?.data ? [] : participantResponse.data),
[participantResponse?.data, isLoading]
);
console.log(participantResponse);
return (
<>
<main>
<Container fluid className="px-md-4">
<Row className="mt-md-2 mb-md-2">
<Col className="text-center">
<h1>Manage Participants</h1>
</Col>
<hr />
</Row>
<Row>
<h2> Assignment Participants: AssignmentName</h2>
<Row className="align-items-center justify-content-between">
<Col>
<Outlet />
</Col>
</Row>
<hr />
{showDeleteConfirmation.visible && (
<DeleteParticipant
participantData={showDeleteConfirmation.data!}
onClose={onDeleteParticipantHandler}
/>
)}
</Row>
<Row>
<Table
data={tableData}
columns={tableColumns}
showGlobalFilter={false}
columnVisibility={{
id: false,
institution: auth.user.role === ROLE.SUPER_ADMIN.valueOf(),
}}
/>
</Row>
</Container>
</main>
</>
);
};
export default Participants;