- {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..4b957a9b 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..13f1a18f 100644
--- a/src/components/container/DropDownContainer.tsx
+++ b/src/components/container/DropDownContainer.tsx
@@ -5,20 +5,27 @@ import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
interface DropDownContainerProps {
- classname?: string;
+ containerClassName?: string;
+ elementsClassName?: 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 animationDivRef = React.useRef(null);
const handleClick = () => {
setShowItems(!showItems);
+ if (animationDivRef.current) {
+ // Prevent scroll bar from rendering
+ animationDivRef.current.style["overflow"] = "hidden";
+ }
};
return (
-
+
{
icon={showItems ? faCaretDown : faCaretRight}
/>
- {props.title}
+ {props.title ?? (
+
+ Show more
+
+ )}
+ (ref.currentTarget.style["overflow"] = "auto")
}
>
- {props.children}
+
{props.children}
);
diff --git a/src/components/user/UserJoinRequest.tsx b/src/components/user/UserJoinRequest.tsx
index 82f8ae8b..2ebfb1bc 100644
--- a/src/components/user/UserJoinRequest.tsx
+++ b/src/components/user/UserJoinRequest.tsx
@@ -1,13 +1,6 @@
"use client";
import { Prisma, UserRequest } from "@prisma/client";
-import { TileEdit } from "../TileGrid/TileEdit";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
- faCheck,
- faEllipsis,
- faRotateLeft,
-} from "@fortawesome/free-solid-svg-icons";
import {
handleJoinChapterRequest,
handleManageChapterRequest,
@@ -57,7 +50,7 @@ const UserJoinRequest = (props: UserJoinRequestProps) => {
fetchingHandleJoinChapterRequest || fetchingManageChapterRequest;
return (
-
+
Welcome To The Legacy Project
Join a Chapter Below: