Revamp styles (#130)

* Revamp styles * Remove chapter information * rounded college text, and addfiletile, and senior name changes git push --------- Co-authored-by: Johnny Tan <[email protected]>
JumboCode · Mar 15, 2024 · 25d44e4 · 25d44e4
1 parent 9266268
commit 25d44e4
Show file tree

Hide file tree

Showing 22 changed files with 427 additions and 319 deletions.
diff --git a/src/app/private/[uid]/admin/pending-chapters/page.tsx b/src/app/private/[uid]/admin/pending-chapters/page.tsx
@@ -16,16 +16,7 @@ const PendingChapters = async () => {
       tiles={pendingChapters.map((pendingChapter) => (
         <ChapterRequest
           key={pendingChapter.id}
-          chapterRequestId={pendingChapter.id}
-          universityName={pendingChapter.university}
-          universityAddress={pendingChapter.universityAddress}
-          name={pendingChapter.firstName + " " + pendingChapter.lastName}
-          phoneNumber={pendingChapter.phoneNumber}
-          email={pendingChapter.universityEmail}
-          leadershipExperience={pendingChapter.leadershipExperience}
-          motivation={pendingChapter.motivation}
-          availabilities={pendingChapter.availabilities}
-          questions={pendingChapter.questions}
+          chapterRequest={pendingChapter}
         />
       ))}
     />

diff --git a/src/app/private/[uid]/chapter-leader/home/layout.tsx b/src/app/private/[uid]/chapter-leader/home/layout.tsx
@@ -1,4 +1,3 @@
-import TabButtons from "@components/TabButtons";
 import { HeaderContainer } from "@components/container/index";
 import { faHouse } from "@fortawesome/free-solid-svg-icons";
 
@@ -8,20 +7,8 @@ interface LayoutProps {
 
 const Layout = async ({ children }: LayoutProps) => {
   return (
-    <HeaderContainer
-      header="Home"
-      headerIcon={faHouse}
-      showHorizontalLine={false}
-    >
-      <div className="flex flex-col gap-y-6">
-        <TabButtons
-          queries={[
-            { segment: "home", name: "My Chapter" },
-            { segment: "home/resources", name: "resources" },
-          ]}
-        />
-        {children}
-      </div>
+    <HeaderContainer header="Home" headerIcon={faHouse} showHorizontalLine>
+      {children}
     </HeaderContainer>
   );
 };

diff --git a/src/app/private/[uid]/chapter-leader/home/page.tsx b/src/app/private/[uid]/chapter-leader/home/page.tsx
@@ -1,7 +1,5 @@
-import { UserTile } from "@components/TileGrid";
 import DisplayChapterInfo from "@components/DisplayChapterInfo";
 import { prisma } from "@server/db/client";
-import { CardGrid } from "@components/container";
 
 interface UserHomePageParams {
   params: {
@@ -23,33 +21,9 @@ const UserHomePage = async ({ params }: UserHomePageParams) => {
       students: true,
     },
   });
+  const resources = await prisma.resource.findMany();
 
-  return (
-    <div className="mt-6 flex flex-col gap-y-6">
-      <div className="font-merriweather text-2xl font-bold text-[#000022]">
-        {chapter.chapterName}
-      </div>
-      <DisplayChapterInfo
-        location={chapter.location}
-        noMembers={
-          chapter.students.filter((user) => user.role == "USER").length
-        }
-        dateCreated={chapter.dateCreated}
-      />
-      <CardGrid
-        title={
-          <div className="font-merriweather text-xl font-bold">
-            Executive Board
-          </div>
-        }
-        tiles={chapter.students
-          .filter((user) => user.role == "CHAPTER_LEADER")
-          .map((user) => (
-            <UserTile key={user.id} student={user} link="" />
-          ))}
-      />
-    </div>
-  );
+  return <DisplayChapterInfo chapter={chapter} resources={resources} />;
 };
 
 export default UserHomePage;
diff --git a/src/app/private/[uid]/chapter-leader/home/resources/page.tsx b/src/app/private/[uid]/chapter-leader/home/resources/page.tsx
diff --git a/src/app/private/[uid]/user/home/layout.tsx b/src/app/private/[uid]/user/home/layout.tsx
@@ -1,5 +1,4 @@
 import { prisma } from "@server/db/client";
-import TabButtons from "@components/TabButtons";
 import { HeaderContainer } from "@components/container/index";
 import { faHouse } from "@fortawesome/free-solid-svg-icons";
 
@@ -25,15 +24,7 @@ const Layout = async ({ children, params, joinChapter }: LayoutProps) => {
         headerIcon={faHouse}
         showHorizontalLine={false}
       >
-        <div className="flex flex-col gap-y-6">
-          <TabButtons
-            queries={[
-              { segment: "home", name: "My Chapter" },
-              { segment: "home/resources", name: "resources" },
-            ]}
-          />
-          {children}
-        </div>
+        {children}
       </HeaderContainer>
     );
   } else {

diff --git a/src/app/private/[uid]/user/home/page.tsx b/src/app/private/[uid]/user/home/page.tsx
@@ -1,7 +1,5 @@
-import { UserTile } from "@components/TileGrid";
 import DisplayChapterInfo from "@components/DisplayChapterInfo";
 import { prisma } from "@server/db/client";
-import { CardGrid } from "@components/container";
 
 interface UserHomePageParams {
   params: {
@@ -23,27 +21,20 @@ const UserHomePage = async ({ params }: UserHomePageParams) => {
       students: true,
     },
   });
+  const resources = await prisma.resource.findMany({
+    where: {
+      access: {
+        isEmpty: true,
+      },
+    },
+  });
 
   return (
     <div className="mt-6 flex flex-col gap-y-6">
       <div className="text-2xl font-bold text-[#000022]">
         {chapter.chapterName}
       </div>
-      <DisplayChapterInfo
-        location={chapter.location}
-        noMembers={
-          chapter.students.filter((user) => user.role == "USER").length
-        }
-        dateCreated={chapter.dateCreated}
-      />
-      <CardGrid
-        title={<div className="text-xl font-bold">Executive Board</div>}
-        tiles={chapter.students
-          .filter((user) => user.role == "CHAPTER_LEADER")
-          .map((user) => (
-            <UserTile key={user.id} student={user} link="" />
-          ))}
-      />
+      <DisplayChapterInfo chapter={chapter} resources={resources} />
     </div>
   );
 };

diff --git a/src/app/private/[uid]/user/home/resources/page.tsx b/src/app/private/[uid]/user/home/resources/page.tsx
diff --git a/src/components/AddSenior.tsx b/src/components/AddSenior.tsx
@@ -14,6 +14,7 @@ import { patchSenior } from "src/app/api/senior/[id]/route.client";
 import { postSenior } from "src/app/api/senior/route.client";
 import z from "zod/lib";
 import { seniorSchema } from "@server/model";
+import { fullName } from "@utils";
 
 type AddSeniorProps = {
   seniors: Senior[];
@@ -79,10 +80,10 @@ const StudentSelector = ({
       </div>
       <FilterDropdown<User>
         items={students}
-        filterMatch={(usr, term) => (usr.name ?? "").indexOf(term) != -1}
+        filterMatch={(usr, term) => fullName(usr).indexOf(term) != -1}
         display={(usr: User) => (
           <div className="m-1 flex whitespace-nowrap rounded-full bg-amber-red px-4 py-2 text-white">
-            {usr.name}
+            {fullName(usr)}
             <div className="flex1 ml-3">
               <button
                 type="button"

diff --git a/src/components/AdminHomePage.tsx b/src/components/AdminHomePage.tsx
@@ -1,14 +1,14 @@
 "use client";
 
-import SearchBar from "@components/SearchBar";
-import { ChapterTile } from "@components/TileGrid/ChapterTile";
-import { useContext, useState } from "react";
+import { useContext } from "react";
 import { Prisma } from "@prisma/client";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEllipsis, faTrashCan } from "@fortawesome/free-solid-svg-icons";
 import { TileEdit } from "./TileGrid/TileEdit";
 import { UserContext } from "src/context/UserProvider";
-import { CardGrid } from "./container";
+import { InfoTile } from "./TileGrid";
+import { fullName } from "@utils";
+import SearchableContainer from "./SearchableContainer";
 
 type ChapterWithUser = Prisma.ChapterGetPayload<{
   include: { students: true };
@@ -19,67 +19,67 @@ type AdminHomePageProps = {
 };
 
 const AdminHomePage = ({ chapters }: AdminHomePageProps) => {
-  const [filter, setFilter] = useState("");
   const userContext = useContext(UserContext);
 
   return (
-    <>
-      <div className="flex w-full gap-2.5">
-        <SearchBar setFilter={setFilter} />
-      </div>
+    <SearchableContainer
+      elements={chapters}
+      column_count={2}
+      search={(elem, filter) => elem.chapterName.includes(filter)}
+      display={(chapter) => {
+        const prez = chapter.students.find(
+          (user) => user.role == "CHAPTER_LEADER"
+        );
 
-      <CardGrid
-        column_count={2}
-        tiles={chapters
-          .filter((chapter) =>
-            chapter.chapterName.toLowerCase().includes(filter.toLowerCase())
-          )
-          .map((chapter, index) => {
-            let yearsActive =
-              (new Date().getTime() - chapter.dateCreated.getTime()) / 1000;
-            yearsActive /= 60 * 60 * 24;
-            yearsActive = Math.abs(Math.round(yearsActive / 365.25));
+        const options: Parameters<typeof TileEdit>[0]["options"] = [];
 
-            const prez = chapter.students.find(
-              (user) => user.role == "CHAPTER_LEADER"
-            );
+        options.push({
+          name: "Remove Chapter",
+          onClick: () => {
+            console.log("This worked");
+          },
+          color: "#ef6767",
+          icon: <FontAwesomeIcon icon={faTrashCan} />,
+        });
 
-            const options: Parameters<typeof TileEdit>[0]["options"] = [];
-
-            options.push({
-              name: "Remove Chapter",
-              onClick: () => {
-                console.log("This worked");
+        return (
+          <InfoTile
+            key={chapter.id}
+            title={chapter.chapterName}
+            href={`/private/${userContext.user.id}/admin/home/chapters/${chapter.id}`}
+            information={[
+              { key: "Location", value: chapter.location },
+              {
+                key: "Members",
+                value: chapter.students.length,
               },
-              color: "#ef6767",
-              icon: <FontAwesomeIcon icon={faTrashCan} />,
-            });
-
-            return (
-              <ChapterTile
-                key={index}
-                title={chapter.chapterName}
-                president={prez?.name ?? ""}
-                numMembers={chapter.students.length}
-                yearsActive={yearsActive}
-                emailPresident={prez?.email ?? ""}
-                topRightButton={
-                  <TileEdit
-                    options={options}
-                    icon={
-                      <FontAwesomeIcon
-                        className="fa-lg cursor-pointer"
-                        icon={faEllipsis}
-                      />
-                    }
+              {
+                key: "President",
+                value:
+                  prez != undefined
+                    ? fullName(prez)
+                    : "This chapter has no president",
+              },
+              {
+                key: "Email",
+                value: prez?.email ?? "",
+              },
+            ]}
+            topRightButton={
+              <TileEdit
+                options={options}
+                icon={
+                  <FontAwesomeIcon
+                    className="fa-lg cursor-pointer"
+                    icon={faEllipsis}
                   />
                 }
-                href={`/private/${userContext.user.id}/admin/home/chapters/${chapter.id}`}
               />
-            );
-          })}
-      />
-    </>
+            }
+          />
+        );
+      }}
+    />
   );
 };