Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update UI #135

Merged
merged 4 commits into from
Apr 3, 2024
Merged

Update UI #135

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
67d5978
Update UI
nickbar01234 Apr 2, 2024
360aa6f
Fix layout props
nickbar01234 Apr 2, 2024
80d7a55
Return if no chapter ID is found
nickbar01234 Apr 2, 2024
6e30f1a
Address comments
nickbar01234 Apr 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/app/private/[uid]/chapter-leader/pending/PendingHomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const PendingHomePage = ({ users }: MembersHomePageProps) => {
</h1>
{users.length > 0 ? (
<CardGrid
column_count={2}
tiles={users.map((user, index) => {
return (
<PendingCard key={index} name={user.name ?? ""} uid={user.id} />
Expand Down
31 changes: 0 additions & 31 deletions src/app/private/[uid]/user/home/@joinChapter/page.tsx
View file
Open in desktop
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using a parallel route results in a backend error if the user is not part of any chapter. I.e, their chapter ID will be undefined.

This file was deleted.

15 changes: 11 additions & 4 deletions src/app/private/[uid]/user/home/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
import { prisma } from "@server/db/client";
import { HeaderContainer } from "@components/container/index";
import { faHouse } from "@fortawesome/free-solid-svg-icons";
import { UserJoinRequest } from "@components/user";

interface LayoutProps {
children: React.ReactNode;
joinChapter: React.ReactNode;
params: {
uid: string;
};
}

const Layout = async ({ children, params, joinChapter }: LayoutProps) => {
const Layout = async ({ children, params }: LayoutProps) => {
const user = await prisma.user.findFirstOrThrow({
where: {
id: params.uid,
},
});

if (user.ChapterID != null) {
return (
<HeaderContainer
Expand All @@ -28,7 +27,15 @@ const Layout = async ({ children, params, joinChapter }: LayoutProps) => {
</HeaderContainer>
);
} else {
return joinChapter;
const chapters = await prisma.chapter.findMany({
include: { students: true },
});
const joinRequest = await prisma.userRequest.findFirst({
where: {
uid: params.uid,
},
});
return <UserJoinRequest chapters={chapters} joinRequest={joinRequest} />;
}
};

Expand Down
59 changes: 0 additions & 59 deletions src/components/TileGrid/UserRequestTile.tsx
View file
Open in desktop

This file was deleted.

164 changes: 95 additions & 69 deletions src/components/user/UserJoinRequest.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
"use client";

import { UserRequestTile } from "@components/TileGrid/UserRequestTile";
import { Prisma, UserRequest } from "@prisma/client";
import { TileEdit } from "../TileGrid/TileEdit";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEllipsis, faRotateLeft } from "@fortawesome/free-solid-svg-icons";
import {
faCheck,
faEllipsis,
faRotateLeft,
} from "@fortawesome/free-solid-svg-icons";
import {
handleJoinChapterRequest,
handleManageChapterRequest,
} from "@api/user-request/route.client";
import { useRouter } from "next/navigation";
import { CardGrid } from "@components/container";
import { Card } from "@material-tailwind/react";
import { UserContext } from "@context/UserProvider";
import React from "react";
import { InfoTile } from "@components/TileGrid";
import { fullName } from "@utils";

type ChapterWithUser = Prisma.ChapterGetPayload<{
include: { students: true };
Expand All @@ -20,86 +26,106 @@ type ChapterWithUser = Prisma.ChapterGetPayload<{
interface UserJoinRequestProps {
chapters: ChapterWithUser[];
joinRequest: UserRequest | null;
uid: string;
}

const UserJoinRequest = (props: UserJoinRequestProps) => {
const { chapters, joinRequest } = props;
const userContext = React.useContext(UserContext);
const router = useRouter();

return (
// TODO(nickbar01234) - Add padding bottom
<div className="flex h-full w-full flex-col gap-y-6 px-7 pt-[104px]">
<div className="flex h-full w-full flex-col gap-y-6 px-7 py-[104px]">
<p className="text-center text-4xl"> Welcome To The Legacy Project</p>
<p className="text-2xl font-bold">Join a Chapter Below:</p>
<CardGrid
column_count={2}
tiles={chapters.map((chapter) => {
const options: Parameters<typeof TileEdit>[0]["options"] = [
{
name: "Undo request",
onClick: () => {
handleManageChapterRequest({
body: {
userId: props.uid,
},
}).then((res) => {
console.log(res);
router.refresh();
});
},
color: "#22555A",
icon: <FontAwesomeIcon icon={faRotateLeft} />,
},
];
let yearsActive =
(new Date().getTime() - chapter.dateCreated.getTime()) / 1000;
yearsActive /= 60 * 60 * 24;
yearsActive = Math.abs(Math.round(yearsActive / 365.25));

const prez = chapter.students.find(
(user) => user.role === "CHAPTER_LEADER"
);

// const options: Parameters<typeof TileEdit>[0]["options"] = [];
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: remove commented-out code if not needed


// if (joinRequest == null) {
// options.push({
// name: "Join Chapter",
// onClick: () =>
// handleJoinChapterRequest({
// body: { chapterId: chapter.id },
// }).then(() => router.refresh()),
// color: "#22555A",
// icon: <FontAwesomeIcon icon={faCheck} />,
// });
// } else if (joinRequest.chapterId === chapter.id) {
// options.push({
// name: "Undo request",
// onClick: () => {
// handleManageChapterRequest({
// body: {
// userId: userContext.user.id,
// },
// }).then(() => {
// router.refresh();
// });
// },
// color: "#22555A",
// icon: <FontAwesomeIcon icon={faRotateLeft} />,
// });
// }

return (
<div
className="col-span-2 flex w-full flex-col gap-y-1.5 md:col-span-1"
<InfoTile
key={chapter.id}
>
<UserRequestTile
chapter={chapter}
topRightButton={
joinRequest?.chapterId === chapter.id ? (
<TileEdit
options={options}
icon={<FontAwesomeIcon icon={faEllipsis} size="lg" />}
/>
) : undefined
}
/>
{joinRequest?.chapterId === chapter.id ? (
<div className="w-full rounded-xl bg-[#A6A6A6] py-1 text-center text-white">
Request Pending
</div>
) : (
<div
className={`w-full rounded-xl py-1 text-center text-white
${
joinRequest == null
? "cursor-pointer bg-dark-green hover:bg-[#1b4448]"
: "bg-[#A6A6A6]"
}`}
//Bug of not updating buttons
onClick={
joinRequest == null
? () => {
handleJoinChapterRequest({
body: {
chapterId: chapter.id,
},
}).then((res) => {
console.log(res);
router.refresh();
});
}
: undefined
}
>
Join
</div>
)}
</div>
title={chapter.chapterName}
information={[
{ key: "No. of members", value: chapter.students.length },
{
key: "President",
value:
prez != undefined
? fullName(prez)
: "This chapter has no president",
},
{
key: "Years active",
value: yearsActive,
},
{
key: "Email",
value: prez?.email ?? "",
},
]}
topRightButton={
joinRequest == null ? (
<button
className="rounded bg-dark-teal px-5 py-2 text-sm text-white transition duration-300 ease-in-out hover:-translate-y-1"
onClick={() =>
handleJoinChapterRequest({
body: { chapterId: chapter.id },
}).then(() => router.refresh())
}
>
Join
</button>
) : joinRequest.chapterId === chapter.id ? (
<button
className="rounded bg-dark-teal px-5 py-2 text-sm text-white transition duration-300 ease-in-out hover:-translate-y-1"
onClick={() =>
handleManageChapterRequest({
body: { userId: userContext.user.id },
}).then(() => router.refresh())
}
>
Undo
</button>
) : null
}
/>
);
})}
/>
Expand Down