collapsible items in univ home page and chapter requests

JumboCode · Apr 7, 2024 · 6ae1bd5 · 6ae1bd5
1 parent 28c3863
commit 6ae1bd5
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 52 deletions.
diff --git a/src/app/private/[uid]/chapter-leader/home/page.tsx b/src/app/private/[uid]/chapter-leader/home/page.tsx
@@ -20,9 +20,16 @@ const UserHomePage = async ({ params }: UserHomePageParams) => {
     include: {
       students: {
         where: {
-          position: {
-            not: "",
-          },
+          OR: [
+            {
+              position: {
+                not: "",
+              },
+            },
+            {
+              role: "CHAPTER_LEADER",
+            },
+          ],
         },
       },
     },

diff --git a/src/components/DisplayChapterInfo.tsx b/src/components/DisplayChapterInfo.tsx
@@ -9,6 +9,7 @@ import { UserContext } from "@context/UserProvider";
 import PendingCard from "@components/PendingCard";
 import { fullName } from "@utils";
 import { RoleToUrlSegment } from "@constants/RoleAlias";
+import DropDownContainer from "@components/container/DropDownContainer";
 
 type ChapterWithUser = Prisma.ChapterGetPayload<{
   include: { students: true };
@@ -60,56 +61,66 @@ const DisplayChapterInfo = ({
       </div>
       {userRequests && (
         <div className="mb-12">
-          <h1 className="mb-6 text-xl">{`Pending (${userRequests.length})`}</h1>
-          {userRequests.length > 0 ? (
-            <CardGrid
-              column_count={2}
-              tiles={userRequests.map((user, index) => {
-                return (
-                  <PendingCard
-                    key={index}
-                    name={fullName(user.user)}
-                    uid={user.id}
-                  />
-                );
-              })}
-            />
-          ) : (
-            <h1 className="font-light">
-              {"This chapter has no pending members."}
-            </h1>
-          )}
+          <DropDownContainer
+            title={
+              <div className="mb-6 text-xl">{`Pending (${userRequests.length})`}</div>
+            }
+          >
+            {userRequests.length > 0 ? (
+              <CardGrid
+                column_count={2}
+                tiles={userRequests.map((user, index) => {
+                  return (
+                    <PendingCard
+                      key={index}
+                      name={fullName(user.user)}
+                      uid={user.id}
+                    />
+                  );
+                })}
+              />
+            ) : (
+              <h1 className="font-light">
+                {"This chapter has no pending members."}
+              </h1>
+            )}
+          </DropDownContainer>
         </div>
       )}
-
       <div className="mb-12">
-        <CardGrid
+        <DropDownContainer
           title={
-            <div className="text-xl text-[#000022]">
+            <div className="mb-6 text-xl">
               {user.role === "ADMIN"
                 ? `Members (${chapter.students.length})`
                 : "Executive Board"}
             </div>
           }
-          tiles={students.map((student) => (
-            <UserTile
-              key={student.id}
-              student={student}
-              link={`/private/${user.id}/${RoleToUrlSegment[user.role]}/users/${
-                student.id
-              }`}
-            />
-          ))}
-        />
+        >
+          <CardGrid
+            tiles={students.map((student) => (
+              <UserTile
+                key={student.id}
+                student={student}
+                link={`/private/${user.id}/${
+                  RoleToUrlSegment[user.role]
+                }/users/${student.id}`}
+              />
+            ))}
+          />
+        </DropDownContainer>
       </div>
-      <div className="flex flex-col gap-y-6">
-        <div className="text-xl text-[#000022]">Resources</div>
-        <DisplayResources
-          resources={resources}
-          showRole={false}
-          editable={false}
-          column={3}
-        />
+      <div className="mb-12">
+        <DropDownContainer
+          title={<div className="mb-6 text-xl">Resources</div>}
+        >
+          <DisplayResources
+            resources={resources}
+            showRole={false}
+            editable={false}
+            column={3}
+          />
+        </DropDownContainer>
       </div>
     </div>
   );

diff --git a/src/components/TileGrid/InfoTile.tsx b/src/components/TileGrid/InfoTile.tsx
@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import React from "react";
+import DropDownContainer from "@components/container/DropDownContainer";
 
 interface Information {
   key: string;
@@ -54,17 +55,15 @@ const InfoTile = (params: InfoTileProps) => {
           </div>
         ))}
       </div>
-      {moreInformation != undefined ? (
-        <div>
-          <p
-            className="mb-6 w-fit cursor-pointer text-dark-teal underline"
-            onClick={onToggleShouldShowMore}
-          >
+      <DropDownContainer
+        title={
+          <p className="mb-6 w-fit cursor-pointer text-dark-teal underline">
             {!shouldShowMore ? "Show more" : "Show less"}
           </p>
-          {shouldShowMore ? moreInformation : null}
-        </div>
-      ) : null}
+        }
+      >
+        {moreInformation}
+      </DropDownContainer>
     </div>
   );
 };

diff --git a/src/components/container/DropDownContainer.tsx b/src/components/container/DropDownContainer.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import React from "react";
+import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+interface DropDownContainerProps {
+  classname?: string;
+  title?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+const DropDownContainer = (props: DropDownContainerProps) => {
+  const [showItems, setShowItems] = React.useState(false);
+
+  const handleClick = () => {
+    setShowItems(!showItems);
+  };
+
+  return (
+    <div className={props.classname ?? ""}>
+      <div className="flex cursor-pointer" onClick={handleClick}>
+        <div className="h-full pr-2">
+          <FontAwesomeIcon icon={showItems ? faCaretDown : faCaretRight} />
+        </div>
+        {props.title}
+      </div>
+      <div
+        className={`overflow-scroll`}
+        style={
+          showItems
+            ? { maxHeight: "1024px", transition: "max-height 1s ease" }
+            : { maxHeight: "0px", transition: "max-height 0.1s ease" }
+        }
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+};
+
+export default DropDownContainer;