Nickbar01234 julia/approve tile (#141)

* Update pending card style * Add to DisplayChapterView * Update dashboard
JumboCode · Apr 4, 2024 · cb35a3e · cb35a3e
1 parent 0ed0d38
commit cb35a3e
Show file tree

Hide file tree

Showing 12 changed files with 130 additions and 55 deletions.
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -70,6 +70,8 @@ model User {
   approved  Approval  @default(PENDING)
   ChapterID String?   @db.ObjectId
   Chapter   Chapter?  @relation(fields: [ChapterID], references: [id])
+  
+  userRequest UserRequest?
 }
 
 enum Approval {
@@ -151,4 +153,5 @@ model UserRequest {
   approved  Approval @default(PENDING)
   uid       String   @unique @db.ObjectId
   chapterId String   @db.ObjectId
+  user      User     @relation(fields: [uid], references: [id])
 }
diff --git a/src/app/private/[uid]/admin/home/chapters/[chapterId]/page.tsx b/src/app/private/[uid]/admin/home/chapters/[chapterId]/page.tsx
@@ -1,5 +1,5 @@
 import { prisma } from "@server/db/client";
-import { DisplayChapter } from "@components/admin";
+import DisplayChapterInfo from "@components/DisplayChapterInfo";
 
 interface ChapterPageParams {
   params: {
@@ -18,18 +18,19 @@ const ChapterPage = async ({ params }: ChapterPageParams) => {
     },
   });
 
-  const chapterRequests = await prisma.userRequest.findMany({
-    where: { chapterId: params.chapterId, approved: "PENDING" },
-  });
-  const requestUsers = await prisma.user.findMany({
-    where: { id: { in: chapterRequests.map((req) => req.uid) } },
+  const userRequests = await prisma.userRequest.findMany({
+    where: {
+      approved: "PENDING",
+    },
+    include: { user: true },
   });
+  const resources = await prisma.resource.findMany();
 
   return (
-    <DisplayChapter
+    <DisplayChapterInfo
       chapter={chapter}
-      uid={params.uid}
-      requestUsers={requestUsers}
+      userRequests={userRequests}
+      resources={resources}
     />
   );
 };

diff --git a/src/app/private/[uid]/admin/layout.tsx b/src/app/private/[uid]/admin/layout.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { CollapsableSidebarContainer } from "@components/container";
+import { CollapsibleSidebarContainer } from "@components/container";
 import {
   faEnvelope,
   faHome,
@@ -43,9 +43,9 @@ const AdminLayout = ({ children }: IAdminLayout) => {
   );
 
   return (
-    <CollapsableSidebarContainer buttons={buttons}>
+    <CollapsibleSidebarContainer buttons={buttons}>
       {children}
-    </CollapsableSidebarContainer>
+    </CollapsibleSidebarContainer>
   );
 };
 

diff --git a/src/app/private/[uid]/chapter-leader/home/page.tsx b/src/app/private/[uid]/chapter-leader/home/page.tsx
@@ -18,12 +18,35 @@ const UserHomePage = async ({ params }: UserHomePageParams) => {
       id: user.ChapterID ?? "",
     },
     include: {
-      students: true,
+      students: {
+        where: {
+          position: {
+            not: "",
+          },
+        },
+      },
     },
   });
+
   const resources = await prisma.resource.findMany();
 
-  return <DisplayChapterInfo chapter={chapter} resources={resources} />;
+  const userRequests = await prisma.userRequest.findMany({
+    where: {
+      chapterId: chapter.id,
+      approved: "PENDING",
+    },
+    include: {
+      user: true,
+    },
+  });
+
+  return (
+    <DisplayChapterInfo
+      chapter={chapter}
+      resources={resources}
+      userRequests={userRequests}
+    />
+  );
 };
 
 export default UserHomePage;
diff --git a/src/app/private/[uid]/chapter-leader/layout.tsx b/src/app/private/[uid]/chapter-leader/layout.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Sidebar, { ISideBar } from "@components/Sidebar";
-import { CollapsableSidebarContainer } from "@components/container";
+import { CollapsibleSidebarContainer } from "@components/container";
 import {
   faHome,
   faUser,
@@ -50,9 +50,9 @@ const UserLayout = ({ children }: IUserLayout) => {
   );
 
   return (
-    <CollapsableSidebarContainer buttons={buttons}>
+    <CollapsibleSidebarContainer buttons={buttons}>
       {children}
-    </CollapsableSidebarContainer>
+    </CollapsibleSidebarContainer>
   );
 };
 

diff --git a/src/app/private/[uid]/user/home/page.tsx b/src/app/private/[uid]/user/home/page.tsx
@@ -23,7 +23,13 @@ const UserHomePage = async ({ params }: UserHomePageParams) => {
       id: user.ChapterID ?? "",
     },
     include: {
-      students: true,
+      students: {
+        where: {
+          position: {
+            not: "",
+          },
+        },
+      },
     },
   });
   const resources = await prisma.resource.findMany({

diff --git a/src/app/private/[uid]/user/layout.tsx b/src/app/private/[uid]/user/layout.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { CollapsableSidebarContainer } from "@components/container";
+import { CollapsibleSidebarContainer } from "@components/container";
 import { faHome, faUsers, faUser } from "@fortawesome/free-solid-svg-icons";
 import React, { useContext } from "react";
 import { UserContext } from "src/context/UserProvider";
@@ -33,9 +33,9 @@ const UserLayout = ({ children }: IUserLayout) => {
   );
 
   return (
-    <CollapsableSidebarContainer buttons={buttons}>
+    <CollapsibleSidebarContainer buttons={buttons}>
       {children}
-    </CollapsableSidebarContainer>
+    </CollapsibleSidebarContainer>
   );
 };
 

diff --git a/src/components/DisplayChapterInfo.tsx b/src/components/DisplayChapterInfo.tsx
@@ -1,26 +1,43 @@
 "use client";
 
-import { Prisma, Resource } from "@prisma/client";
+import { Prisma, Resource, User, UserRequest } from "@prisma/client";
 import { CardGrid } from "./container";
 import { UserTile } from "./TileGrid";
 import DisplayResources from "./DisplayResources";
 import React from "react";
 import { UserContext } from "@context/UserProvider";
+import PendingCard from "@components/PendingCard";
+import { fullName } from "@utils";
+import { RoleToUrlSegment } from "@constants/RoleAlias";
 
 type ChapterWithUser = Prisma.ChapterGetPayload<{
   include: { students: true };
 }>;
 
+type RequestWithUser = Prisma.UserRequestGetPayload<{
+  include: { user: true };
+}>;
+
 interface DisplayChapterInfoParams {
   chapter: ChapterWithUser;
   resources: Resource[];
+  userRequests?: RequestWithUser[];
 }
 
 const DisplayChapterInfo = ({
   chapter,
   resources,
+  userRequests,
 }: DisplayChapterInfoParams) => {
   const userContext = React.useContext(UserContext);
+  const { user } = userContext;
+
+  const students =
+    user.role === "ADMIN"
+      ? chapter.students
+      : chapter.students.filter(
+          (user) => user.role === "CHAPTER_LEADER" || user.position !== ""
+        );
 
   return (
     <div className="w-full">
@@ -41,20 +58,48 @@ const DisplayChapterInfo = ({
           </div>
         ))}
       </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>
+          )}
+        </div>
+      )}
+
       <div className="mb-12">
         <CardGrid
-          title={<div className="text-xl text-[#000022]">Executive Board</div>}
-          tiles={chapter.students
-            .filter(
-              (user) => user.role === "CHAPTER_LEADER" || user.position !== ""
-            )
-            .map((user) => (
-              <UserTile
-                key={user.id}
-                student={user}
-                link={`/private/${userContext.user.id}/chapter-leader/users/${user.id}`}
-              />
-            ))}
+          title={
+            <div className="text-xl text-[#000022]">
+              {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
+              }`}
+            />
+          ))}
         />
       </div>
       <div className="flex flex-col gap-y-6">

diff --git a/src/components/PendingCard.tsx b/src/components/PendingCard.tsx
@@ -4,7 +4,7 @@ import React from "react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faUser } from "@fortawesome/free-regular-svg-icons";
-
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import {
   handleManageChapterRequest,
   handleAcceptChapterRequest,
@@ -16,18 +16,17 @@ interface IPendingCard {
 }
 
 const PendingCard = (props: IPendingCard) => {
-  // TODO(nickbar01234) - Link in functionality for accepting / rejecting user
   return (
-    <div className="h-[10.5rem] w-40 space-y-2 rounded-lg border-[1.5px] border-dark-teal px-2.5 py-2 text-center">
-      <div className="mt-3">
+    <div className="flex w-full items-center justify-between rounded bg-white p-6 shadow-lg">
+      <div className="flex items-center gap-x-4">
         <FontAwesomeIcon className="h-6 w-4 text-dark-teal" icon={faUser} />
+        <span className="max-w-[164px] grow-0 overflow-hidden text-ellipsis whitespace-nowrap text-lg">
+          {props.name}
+        </span>
       </div>
-      <div className="my-4 overflow-hidden text-ellipsis whitespace-nowrap text-lg text-dark-teal">
-        {props.name}
-      </div>
-      <div className="flex flex-col gap-2 text-white">
+      <div className="flex items-center gap-x-4">
         <button
-          className="rounded-2xl bg-dark-teal py-1 text-sm transition duration-300 ease-in-out hover:-translate-y-1"
+          className="rounded bg-dark-teal px-5 py-2 text-sm text-white transition duration-300 ease-in-out hover:-translate-y-1"
           onClick={() => {
             handleAcceptChapterRequest({
               body: {
@@ -40,10 +39,11 @@ const PendingCard = (props: IPendingCard) => {
         >
           Accept
         </button>
-        <button
-          className="rounded-2xl bg-sunset-orange py-1 text-sm transition duration-300 ease-in-out hover:-translate-y-1"
+        <FontAwesomeIcon
+          icon={faXmark}
+          className="cursor-pointer text-[#65696C] transition duration-300 ease-in-out hover:-translate-y-1"
+          size="xl"
           onClick={() => {
-            console.log(props.uid);
             handleManageChapterRequest({
               body: {
                 userId: props.uid,
@@ -52,9 +52,7 @@ const PendingCard = (props: IPendingCard) => {
               window.location.reload();
             });
           }}
-        >
-          Reject
-        </button>
+        />
       </div>
     </div>
   );

diff --git a/src/components/admin/DisplayChapter.tsx b/src/components/admin/DisplayChapter.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { editRole } from "@api/user/[uid]/edit-role/route.client";
-import DisplayChapterInfo from "@components/DisplayChapterInfo";
 import PathNav, { PathInfoType } from "@components/PathNav";
 import PendingCard from "@components/PendingCard";
 import { UserTile } from "@components/TileGrid";

diff --git a/...container/CollapsableSidebarContainer.tsx → ...container/CollapsibleSidebarContainer.tsx b/...container/CollapsableSidebarContainer.tsx → ...container/CollapsibleSidebarContainer.tsx
@@ -1,12 +1,12 @@
 import Sidebar, { ISideBar } from "@components/Sidebar";
 import React from "react";
 
-interface CollapsableSidebarContainerProps extends ISideBar {
+interface CollapsibleSidebarContainerProps extends ISideBar {
   children?: React.ReactNode;
 }
 
-const CollapsableSidebarContainer = (
-  props: CollapsableSidebarContainerProps
+const CollapsibleSidebarContainer = (
+  props: CollapsibleSidebarContainerProps
 ) => {
   const { buttons, children } = props;
 
@@ -22,4 +22,4 @@ const CollapsableSidebarContainer = (
   );
 };
 
-export default CollapsableSidebarContainer;
+export default CollapsibleSidebarContainer;
diff --git a/src/components/container/index.tsx b/src/components/container/index.tsx
@@ -1,4 +1,4 @@
 export { default as HeaderContainer } from "./HeaderContainer";
 export { default as CardGrid } from "./CardGrid";
-export { default as CollapsableSidebarContainer } from "./CollapsableSidebarContainer";
+export { default as CollapsibleSidebarContainer } from "./CollapsibleSidebarContainer";
 export { default as Popup } from "./Popup";