diff --git a/src/app/private/admin/home/page.tsx b/src/app/private/admin/home/page.tsx index 377d4180..f64224b4 100644 --- a/src/app/private/admin/home/page.tsx +++ b/src/app/private/admin/home/page.tsx @@ -5,6 +5,7 @@ const AdminHomePageWrapper = async () => { const chapters = await prisma.chapter.findMany({ include: { students: true, + chapterRequest: true, }, }); diff --git a/src/components/AdminHomePage.tsx b/src/components/AdminHomePage.tsx index c505d44d..a01e756e 100644 --- a/src/components/AdminHomePage.tsx +++ b/src/components/AdminHomePage.tsx @@ -2,20 +2,22 @@ import { Prisma } from "@prisma/client"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faTrashCan } from "@fortawesome/free-solid-svg-icons"; +import { faEllipsis, faTrashCan } from "@fortawesome/free-solid-svg-icons"; import { TileEdit } from "./TileGrid/TileEdit"; import { InfoTile } from "./TileGrid"; import { fullName } from "@utils"; import { deleteChapter } from "@api/chapter/[chapterId]/route.client"; import { useRouter } from "next/navigation"; import SearchableContainer from "./SearchableContainer"; +import ChapterRequest from "./ChapterRequest"; +import DropDownContainer from "./container/DropDownContainer"; -type ChapterWithUser = Prisma.ChapterGetPayload<{ - include: { students: true }; +type ChapterWithUserAndChapterRequest = Prisma.ChapterGetPayload<{ + include: { students: true; chapterRequest: true }; }>; type AdminHomePageProps = { - chapters: ChapterWithUser[]; + chapters: ChapterWithUserAndChapterRequest[]; }; const AdminHomePage = ({ chapters }: AdminHomePageProps) => { @@ -66,7 +68,31 @@ const AdminHomePage = ({ chapters }: AdminHomePageProps) => { value: prez?.email ?? "", }, ]} - topRightButton={} + topRightButton={ + + } + /> + } + moreInformation={ + + ( +
+ {children} +
+ )} + readonly + title="" + /> + + } /> ); }} diff --git a/src/components/ChapterRequest.tsx b/src/components/ChapterRequest.tsx index 9b9f167c..bbd3ab37 100644 --- a/src/components/ChapterRequest.tsx +++ b/src/components/ChapterRequest.tsx @@ -5,6 +5,7 @@ import { ChapterRequest } from "@prisma/client"; import { InfoTile } from "./TileGrid"; import { useApiThrottle } from "@hooks"; import { Spinner } from "./skeleton"; +import DropDownContainer from "./container/DropDownContainer"; interface ChapterRequestMoreInformation { question: string; @@ -13,6 +14,9 @@ interface ChapterRequestMoreInformation { interface ChapterRequestProps { chapterRequest: ChapterRequest; + readonly?: boolean; // Defaults to false + ContainerNode?: ({ children }: { children?: React.ReactNode }) => JSX.Element; + title?: string; } const MoreInformation = (props: ChapterRequestMoreInformation) => { @@ -26,7 +30,8 @@ const MoreInformation = (props: ChapterRequestMoreInformation) => { }; const ChapterRequest = (props: ChapterRequestProps) => { - const { chapterRequest: request } = props; + const { chapterRequest: request, ContainerNode, title } = props; + const readonly = props.readonly ?? false; const router = useRouter(); @@ -59,7 +64,7 @@ const ChapterRequest = (props: ChapterRequestProps) => { return ( { value: request.phoneNumber, }, ]} + ContainerNode={ContainerNode} moreInformation={ -
- {qas.map((question) => ( - - ))} - {!fetching ? ( -
-
- throttleChapterRequest({ - body: { - chapterRequestId: request.id, - approved: true, - }, - }) - } - > - Accept -
-
- throttleChapterRequest({ - body: { - chapterRequestId: request.id, - approved: false, - }, - }) - } - > - Decline -
+ readonly ? ( +
+ {qas.map((question) => ( + + ))} +
+ ) : ( + +
+ {qas.map((question) => ( + + ))} + {!fetching ? ( +
+
+ throttleChapterRequest({ + body: { + chapterRequestId: request.id, + approved: true, + }, + }) + } + > + Accept +
+
+ throttleChapterRequest({ + body: { + chapterRequestId: request.id, + approved: false, + }, + }) + } + > + Decline +
+
+ ) : ( +
+ +
+ )}
- ) : ( -
- -
- )} -
+ + ) } /> ); diff --git a/src/components/TileGrid/InfoTile.tsx b/src/components/TileGrid/InfoTile.tsx index e7d762be..79cd98cf 100644 --- a/src/components/TileGrid/InfoTile.tsx +++ b/src/components/TileGrid/InfoTile.tsx @@ -2,7 +2,6 @@ import Link from "next/link"; import React from "react"; -import DropDownContainer from "@components/container/DropDownContainer"; interface Information { key: string; @@ -15,24 +14,19 @@ interface InfoTileProps { topRightButton?: React.ReactNode; moreInformation?: React.ReactNode; href?: string; + ContainerNode?: ({ children }: { children?: React.ReactNode }) => JSX.Element; + defaultExpand?: boolean; } -/** - * Displays a tile with the given information. - * - * @param information An array of key-value pairs. Each row of the tile display 2 information, as specified by the order - * in the array - * @param moreInformation If present, will display a "show more" option that expands on click - */ -const InfoTile = (params: InfoTileProps) => { - const { title, information, topRightButton, moreInformation, href } = params; +const _InfoTile = (props: Omit) => { + const { title, information, topRightButton, moreInformation, href } = props; return (

{title}

@@ -49,17 +43,31 @@ const InfoTile = (params: InfoTileProps) => {
))}
- {moreInformation ? ( - - Show more -

- } - > - {moreInformation} - - ) : null} + {moreInformation ?? null} +
+ ); +}; + +/** + * Displays a tile with the given information. + * + * @param information An array of key-value pairs. Each row of the tile display 2 information, as specified by the order + * in the array + * @param moreInformation If present, will display a "show more" option that expands on click + */ +const InfoTile = (props: InfoTileProps) => { + const { ContainerNode, ...other } = props; + + if (ContainerNode != undefined) { + return ( + + <_InfoTile {...other} /> + + ); + } + return ( +
+ <_InfoTile {...other} />
); }; diff --git a/src/components/container/DropDownContainer.tsx b/src/components/container/DropDownContainer.tsx index 4183932f..f6fe0f48 100644 --- a/src/components/container/DropDownContainer.tsx +++ b/src/components/container/DropDownContainer.tsx @@ -8,10 +8,11 @@ interface DropDownContainerProps { classname?: string; title?: React.ReactNode; children?: React.ReactNode; + defaultExpand?: boolean; } const DropDownContainer = (props: DropDownContainerProps) => { - const [showItems, setShowItems] = React.useState(true); + const [showItems, setShowItems] = React.useState(props.defaultExpand ?? true); const handleClick = () => { setShowItems(!showItems); @@ -26,7 +27,11 @@ const DropDownContainer = (props: DropDownContainerProps) => { icon={showItems ? faCaretDown : faCaretRight} /> - {props.title} + {props.title ?? ( +

+ Show more +

+ )}
{ fetchingHandleJoinChapterRequest || fetchingManageChapterRequest; return ( -
+

Welcome To The Legacy Project

Join a Chapter Below: