Skip to content

Commit f39255a

Browse files
Aksh-Bansal-devAksh-Bansal-dev
committed
feat(frontend): pagination
1 parent bd59af4 commit f39255a

14 files changed

Lines changed: 161 additions & 37 deletions

File tree

‎frontend/src/components/Meeting/MeetingTabs.tsx‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import CreateButton from "./CreateButton";
1313
import useUser from "src/customHooks/useUser";
1414
import useMeetingData from "src/customHooks/useMeetingData";
1515
import usePollData from "src/customHooks/usePollData";
16+
import PaginationBtn from "./PaginationBtn";
1617

1718
interface TabPanelProps {
1819
children?: React.ReactNode;
@@ -58,7 +59,6 @@ const useStyles = makeStyles(() => ({
5859
display: "flex",
5960
flexDirection: "column",
6061
alignItems: "center",
61-
overflow: "hidden",
6262
},
6363
}));
6464

@@ -157,24 +157,30 @@ const MeetingTabs: React.FC = () => {
157157
onChangeIndex={handleChangeIndex}
158158
>
159159
<TabPanel value={value} index={0} dir={theme.direction}>
160-
{meetings!.map((e, key) => (
161-
<MeetingCard
162-
userId={userId}
163-
key={key}
164-
meetingData={e}
165-
isAdmin={adminOfClubs.includes(e.club)}
166-
/>
167-
))}
160+
<div className={classes.cardContainer}>
161+
{meetings!.map((e, key) => (
162+
<MeetingCard
163+
userId={userId}
164+
key={key}
165+
meetingData={e}
166+
isAdmin={adminOfClubs.includes(e.club)}
167+
/>
168+
))}
169+
<PaginationBtn />
170+
</div>
168171
</TabPanel>
169172
<TabPanel value={value} index={1} dir={theme.direction}>
170-
{polls!.map((e, key) => (
171-
<PollCard
172-
userId={userId}
173-
key={key}
174-
pollData={e}
175-
isAdmin={adminOfClubs.includes(e.club)}
176-
/>
177-
))}
173+
<div className={classes.cardContainer}>
174+
{polls!.map((e, key) => (
175+
<PollCard
176+
userId={userId}
177+
key={key}
178+
pollData={e}
179+
isAdmin={adminOfClubs.includes(e.club)}
180+
/>
181+
))}
182+
<PaginationBtn />
183+
</div>
178184
</TabPanel>
179185
</SwipeableViews>
180186
{adminOfClubs.length > 0 ? <CreateButton formType={value} /> : null}

‎frontend/src/components/Meeting/MenuOptions.tsx‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1+
/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
12
import React from "react";
23
import Menu from "@material-ui/core/Menu";
34
import MenuItem from "@material-ui/core/MenuItem";
45
import MeetingForm from "./meetingStuff/MeetingForm";
56
import PollForm from "./pollStuff/PollForm";
67
import { meetingType, pollType } from "./MeetingTabs";
8+
import { deletePoll } from "src/utils/pollCalls";
9+
import useTokenStore from "src/store/tokenStore";
10+
import { mutate } from "swr";
11+
import { server } from "src/store/global";
12+
import useYearStore from "src/store/yearStore";
713

814
interface MenuOptionsProps {
915
meetingData?: meetingType;
@@ -25,6 +31,8 @@ const MenuOptions: React.FC<MenuOptionsProps> = ({
2531
close();
2632
};
2733
const [formOpen, setFormOpen] = React.useState(false);
34+
const accessToken = useTokenStore((state) => state.token);
35+
const year = useYearStore((state) => state.year);
2836

2937
const forms = [
3038
<MeetingForm
@@ -39,6 +47,17 @@ const MenuOptions: React.FC<MenuOptionsProps> = ({
3947
/>,
4048
];
4149

50+
const handleDelete = async () => {
51+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
52+
const res = await deletePoll(pollData?._id!, pollData?.club!, accessToken);
53+
if (res.done) {
54+
mutate([`${server}/api/poll/get_all?year=${year}`, accessToken]);
55+
close();
56+
} else {
57+
console.log(res.err);
58+
}
59+
};
60+
4261
return (
4362
<div>
4463
<Menu
@@ -49,10 +68,12 @@ const MenuOptions: React.FC<MenuOptionsProps> = ({
4968
onClose={close}
5069
>
5170
<MenuItem onClick={() => setFormOpen(true)}>Edit</MenuItem>
52-
<MenuItem onClick={handleClick}>Delete</MenuItem>
71+
5372
{type === 0 ? (
5473
<MenuItem onClick={handleClick}>Registers</MenuItem>
55-
) : null}
74+
) : (
75+
<MenuItem onClick={handleDelete}>Delete</MenuItem>
76+
)}
5677
</Menu>
5778
{forms[type]}
5879
</div>

‎frontend/src/components/Meeting/PaginationBtn.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from "react";
2+
import Button from "@material-ui/core/Button";
3+
import ButtonGroup from "@material-ui/core/ButtonGroup";
4+
import { makeStyles, createStyles } from "@material-ui/core/styles";
5+
import useYearStore from "src/store/yearStore";
6+
7+
const useStyles = makeStyles(() =>
8+
createStyles({
9+
root: {
10+
color: "white",
11+
borderColor: "#FFD166",
12+
},
13+
})
14+
);
15+
16+
const PaginationBtn: React.FC = () => {
17+
const classes = useStyles();
18+
const year = useYearStore((state) => state.year);
19+
const nextYear = useYearStore((state) => state.nextYear);
20+
const prevYear = useYearStore((state) => state.prevYear);
21+
return (
22+
<ButtonGroup aria-label="button group">
23+
<Button
24+
disabled={year === 2021}
25+
className={classes.root}
26+
onClick={prevYear}
27+
>
28+
Prev
29+
</Button>
30+
<Button
31+
disabled={year === new Date().getFullYear()}
32+
className={classes.root}
33+
onClick={nextYear}
34+
>
35+
Next
36+
</Button>
37+
</ButtonGroup>
38+
);
39+
};
40+
export default PaginationBtn;

‎frontend/src/components/Meeting/meetingStuff/MeetingForm.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { createMeeting, updateMeeting } from "src/utils/meetingCalls";
1717
import { mutate } from "swr";
1818
import { server } from "src/store/global";
1919
import { Alert } from "@material-ui/lab";
20+
import useYearStore from "src/store/yearStore";
2021

2122
export const useStyles = makeStyles((theme: Theme) =>
2223
createStyles({
@@ -71,6 +72,7 @@ const MeetingForm: React.FC<MeetingFormProps> = ({
7172
}) => {
7273
const classes = useStyles();
7374
const accessToken = useTokenStore((state) => state.token);
75+
const year = useYearStore((state) => state.year);
7476
const [openError, setOpenError] = React.useState(false);
7577

7678
const handleClose = (event?: React.SyntheticEvent, reason?: string) => {
@@ -102,7 +104,10 @@ const MeetingForm: React.FC<MeetingFormProps> = ({
102104
accessToken
103105
);
104106
if (res.done) {
105-
mutate([`${server}/api/meeting/get_all`, accessToken]);
107+
mutate([
108+
`${server}/api/meeting/get_all?year=${year}`,
109+
accessToken,
110+
]);
106111
close();
107112
} else {
108113
console.log(res.err);
@@ -111,7 +116,10 @@ const MeetingForm: React.FC<MeetingFormProps> = ({
111116
} else {
112117
const res = await createMeeting(data, accessToken);
113118
if (res.done) {
114-
mutate([`${server}/api/meeting/get_all`, accessToken]);
119+
mutate([
120+
`${server}/api/meeting/get_all?year=${year}`,
121+
accessToken,
122+
]);
115123
close();
116124
} else {
117125
console.log(res.err);

‎frontend/src/components/Meeting/meetingStuff/RegisterButton.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import useTokenStore from "src/store/tokenStore";
55
import { registerMeeting } from "src/utils/meetingCalls";
66
import { mutate } from "swr";
77
import { server } from "src/store/global";
8+
import useYearStore from "src/store/yearStore";
89

910
const useStyles = makeStyles((theme: Theme) =>
1011
createStyles({
@@ -42,6 +43,7 @@ const RegisterButton: React.FC<RegisterButtonProps> = ({
4243
...props
4344
}) => {
4445
const classes = useStyles();
46+
const year = useYearStore((state) => state.year);
4547
const accessToken = useTokenStore((state) => state.token);
4648
const states = [
4749
{
@@ -65,7 +67,7 @@ const RegisterButton: React.FC<RegisterButtonProps> = ({
6567
if (!res.done) {
6668
console.log(res.err);
6769
} else {
68-
mutate([`${server}/api/meeting/get_all`, accessToken]);
70+
mutate([`${server}/api/meeting/get_all?year=${year}`, accessToken]);
6971
}
7072
};
7173
return (

‎frontend/src/components/Meeting/pollStuff/PollCard.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { votePoll } from "src/utils/pollCalls";
1111
import useTokenStore from "src/store/tokenStore";
1212
import { server } from "src/store/global";
1313
import { mutate } from "swr";
14+
import useYearStore from "src/store/yearStore";
1415

1516
const useStyles = makeStyles(() =>
1617
createStyles({
@@ -51,6 +52,7 @@ interface PollCardProps {
5152
const PollCard: React.FC<PollCardProps> = ({ pollData, isAdmin, userId }) => {
5253
const classes = useStyles();
5354
const accessToken = useTokenStore((state) => state.token);
55+
const year = useYearStore((state) => state.year);
5456
const [option, setOption] = React.useState<string | null>(null);
5557
const [polled, setPolled] = React.useState<boolean>(false);
5658
const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -62,7 +64,7 @@ const PollCard: React.FC<PollCardProps> = ({ pollData, isAdmin, userId }) => {
6264
if (res.done) {
6365
setOption((event.target as HTMLInputElement).value);
6466
setPolled(true);
65-
mutate([`${server}/api/poll/get_all`, accessToken]);
67+
mutate([`${server}/api/poll/get_all?year=${year}`, accessToken]);
6668
} else {
6769
console.log(res.err);
6870
}

‎frontend/src/components/Meeting/pollStuff/PollForm.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { createPoll, updatePoll } from "src/utils/pollCalls";
1616
import useTokenStore from "src/store/tokenStore";
1717
import { mutate } from "swr";
1818
import { server } from "src/store/global";
19+
import useYearStore from "src/store/yearStore";
1920

2021
export const useStyles = makeStyles((theme: Theme) =>
2122
createStyles({
@@ -86,6 +87,7 @@ interface PollFormProps {
8687
const PollForm: React.FC<PollFormProps> = ({ close, open, initialVal }) => {
8788
const classes = useStyles();
8889
const accessToken = useTokenStore((state) => state.token);
90+
const year = useYearStore((state) => state.year);
8991
const [openError, setOpenError] = React.useState(false);
9092
const [errorText, setErrorText] = React.useState("Permission Denied");
9193

@@ -119,7 +121,10 @@ const PollForm: React.FC<PollFormProps> = ({ close, open, initialVal }) => {
119121
setErrorText("Permission Denied");
120122
setOpenError(true);
121123
} else {
122-
mutate([`${server}/api/poll/get_all`, accessToken]);
124+
mutate([
125+
`${server}/api/poll/get_all?year=${year}`,
126+
accessToken,
127+
]);
123128
close();
124129
}
125130
} else {
@@ -128,7 +133,10 @@ const PollForm: React.FC<PollFormProps> = ({ close, open, initialVal }) => {
128133
setErrorText("Permission Denied");
129134
setOpenError(true);
130135
} else {
131-
mutate([`${server}/api/poll/get_all`, accessToken]);
136+
mutate([
137+
`${server}/api/poll/get_all?year=${year}`,
138+
accessToken,
139+
]);
132140
close();
133141
}
134142
}

‎frontend/src/customHooks/useMeetingData.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import { server } from "src/store/global";
22
import useTokenStore from "src/store/tokenStore";
3+
import useYearStore from "src/store/yearStore";
34
import { fetcherToken } from "src/utils/fetcher";
45
import useSWR from "swr";
56

67
// eslint-disable-next-line @typescript-eslint/no-explicit-any
78
const useMeetingData = (): any => {
9+
const year = useYearStore((state) => state.year);
810
const accessToken = useTokenStore((state) => state.token);
911
const { data } = useSWR(
10-
[`${server}/api/meeting/get_all`, accessToken],
12+
[`${server}/api/meeting/get_all?year=${year}`, accessToken],
1113
fetcherToken,
1214
{ revalidateOnFocus: false, revalidateOnMount: true }
1315
);

‎frontend/src/customHooks/usePollData.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import { server } from "src/store/global";
22
import useTokenStore from "src/store/tokenStore";
3+
import useYearStore from "src/store/yearStore";
34
import { fetcherToken } from "src/utils/fetcher";
45
import useSWR from "swr";
56

67
// eslint-disable-next-line @typescript-eslint/no-explicit-any
78
const usePollData = (): any => {
89
const accessToken = useTokenStore((state) => state.token);
10+
const year = useYearStore((state) => state.year);
911
const { data } = useSWR(
10-
[server + "/api/poll/get_all", accessToken],
12+
[`${server}/api/poll/get_all?year=${year}`, accessToken],
1113
fetcherToken,
1214
{ revalidateOnFocus: false, revalidateOnMount: true }
1315
);

‎frontend/src/store/tokenStore.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,3 @@ const useTokenStore = create(
1717
);
1818

1919
export default useTokenStore;
20-
21-
// let token = "";
22-
// export const setToken = (newToken: string): void => {
23-
// token = newToken;
24-
// };
25-
// export const getToken = (): string => {
26-
// return token;
27-
// };

0 commit comments

Comments
 (0)