Skip to content

Commit 0f72231

Browse files
nolawiyonas1sarinali
nolawiyonas1
and
sarinali
authored
Nolawiyonas1/cfd 196 all my toggle (#536)
Co-authored-by: Sarina Li <sarinajin.li@gmail.com>
1 parent fff16a9 commit 0f72231

File tree

3 files changed

+134
-70
lines changed

3 files changed

+134
-70
lines changed

‎apps/nextjs/src/components/ToggleButton.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from "react";
2+
3+
interface ToggleButtonProps {
4+
word: string;
5+
isToggled: boolean;
6+
setAll: () => void;
7+
setMy: () => void;
8+
}
9+
10+
const ToggleButton: React.FC<ToggleButtonProps> = ({
11+
word,
12+
isToggled,
13+
setAll,
14+
setMy,
15+
}) => {
16+
return (
17+
<div className="m-2 w-max self-center rounded-3xl border border-[#2E4D90]">
18+
{isToggled ? (
19+
<>
20+
<button className="rounded-3xl px-10 py-2" onClick={setAll}>
21+
All {word}
22+
</button>
23+
<button
24+
className="rounded-3xl bg-[#2E4D90] px-10 py-2 text-white"
25+
onClick={setMy}
26+
>
27+
My {word}
28+
</button>
29+
</>
30+
) : (
31+
<>
32+
<button
33+
className="rounded-3xl bg-[#2E4D90] px-10 py-2 text-white"
34+
onClick={setAll}
35+
>
36+
All {word}
37+
</button>
38+
<button className="rounded-3xl px-10 py-2" onClick={setMy}>
39+
My {word}
40+
</button>
41+
</>
42+
)}
43+
</div>
44+
);
45+
};
46+
47+
export default ToggleButton;

‎apps/nextjs/src/pages/announcements.tsx‎

Lines changed: 30 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,34 @@
11
import React, { useState } from "react";
22
import { SignInButton, useAuth, UserButton } from "@clerk/nextjs";
3+
import type { PostType } from "@prisma/client";
34

45
import { api } from "~/utils/api";
56
import Announcement from "../components/announcement";
7+
import ToggleButton from "../components/ToggleButton";
8+
9+
interface User {
10+
id: number;
11+
clerkId: string;
12+
participantId: number;
13+
notificationOnPostLikes: boolean;
14+
notificationOnPostComments: boolean;
15+
notificationOnAnnoucements: boolean;
16+
notificationOnScheduleUpdates: boolean;
17+
}
18+
interface AnnouncementData {
19+
id: number;
20+
title: string;
21+
contents: string | null;
22+
createdAt: Date;
23+
userId: number;
24+
images: string[];
25+
postType: PostType;
26+
}
627

728
function Announcements() {
8-
const announcements = api.announcement.getAnnouncements.useQuery();
9-
const users = api.user.getAllUsers.useQuery();
29+
const announcements =
30+
api.announcement.getAnnouncements.useQuery<AnnouncementData[]>();
31+
const users = api.user.getAllUsers.useQuery<User[]>();
1032
const { userId, isSignedIn } = useAuth(); // Get userId from useAuth
1133

1234
const [myAnnouncementToggle, setMyAnnouncementToggle] = useState(true);
@@ -49,39 +71,12 @@ function Announcements() {
4971
</button>
5072
</div>
5173
<div className="flex w-full flex-col items-center pt-6">
52-
<div className="m-2 max-w-max self-center rounded-3xl border border-[#2E4D90]">
53-
{myAnnouncementToggle ? (
54-
<>
55-
<button
56-
className="rounded-3xl p-2 px-10"
57-
onClick={setAllAnnouncements}
58-
>
59-
All Announcements
60-
</button>
61-
<button
62-
className="rounded-3xl bg-[#2E4D90] p-2 px-10 text-white"
63-
onClick={setMyAnnouncements}
64-
>
65-
My Announcements
66-
</button>
67-
</>
68-
) : (
69-
<>
70-
<button
71-
className="rounded-3xl bg-[#2E4D90] p-2 px-10 text-white"
72-
onClick={setAllAnnouncements}
73-
>
74-
All Announcements
75-
</button>
76-
<button
77-
className="rounded-3xl p-2 px-10"
78-
onClick={setMyAnnouncements}
79-
>
80-
My Announcements
81-
</button>
82-
</>
83-
)}
84-
</div>
74+
<ToggleButton
75+
word="Announcements"
76+
isToggled={myAnnouncementToggle}
77+
setAll={setAllAnnouncements}
78+
setMy={setMyAnnouncements}
79+
/>
8580
{myAnnouncementToggle
8681
? announcements.data
8782
?.filter((a) => a.userId === currentUser?.id) // Filter announcements by userId

‎apps/nextjs/src/pages/posts.tsx‎

Lines changed: 57 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,32 @@
11
import React, { useState } from "react";
2+
import { SignInButton, useAuth, UserButton } from "@clerk/nextjs";
3+
import type { PostType } from "@prisma/client";
24

3-
import NavBar from "~/components/navbar";
45
import { api } from "~/utils/api";
56
import Post from "../components/post";
7+
import ToggleButton from "../components/ToggleButton";
8+
9+
interface PostData {
10+
id: number;
11+
title: string;
12+
content: string;
13+
createdAt: Date;
14+
userId: number;
15+
images: string[];
16+
postType: PostType;
17+
comments: {
18+
id: number;
19+
userId: number;
20+
createdAt: Date;
21+
postId: number;
22+
text: string;
23+
}[];
24+
contents: string | null;
25+
}
626

727
function Posts() {
8-
const posts = api.discussion.getDiscussions.useQuery();
9-
const userPosts = api.discussion.getDiscussionsByUser.useQuery();
28+
const posts = api.discussion.getDiscussions.useQuery<PostData[]>();
29+
const userPosts = api.discussion.getDiscussionsByUser.useQuery<PostData[]>();
1030

1131
const [myPostToggle, setMyPostToggle] = useState(true);
1232

@@ -18,44 +38,46 @@ function Posts() {
1838
setMyPostToggle(false);
1939
};
2040

41+
const { isSignedIn } = useAuth();
42+
2143
return (
2244
<div className="absolute bottom-0 top-0 flex w-full">
23-
<NavBar />
45+
<div className="sticky top-0 flex max-w-[40%] flex-col justify-between bg-[#EFF2FB] p-4">
46+
{isSignedIn ? "" : <SignInButton />}
47+
<UserButton afterSignOutUrl="/" showName />
48+
<nav className="flex flex-col">
49+
<button className="m-2 rounded-3xl border border-[#2E4D90] bg-[#2E4D90] p-2 text-white">
50+
<a href="/posts/">Forum</a>
51+
</button>
52+
<button className="m-2 rounded-3xl border border-[#2E4D90] p-2">
53+
<a href="/announcements/">Announcements</a>
54+
</button>
55+
<button className="m-2 rounded-3xl border border-[#2E4D90] p-2">
56+
<a href="/absences/">Absentees</a>
57+
</button>
58+
<button className="m-2 rounded-3xl border border-[#2E4D90] p-2">
59+
<a href="/activities/">Calendar</a>
60+
</button>
61+
<button className="m-2 rounded-3xl border border-[#2E4D90] p-2">
62+
<a href="/activities/">Invite New User</a>
63+
</button>
64+
</nav>
65+
<button className="m-2 rounded-3xl border border-[#2E4D90] p-2">
66+
<a href="/activities/">Create New</a>
67+
</button>
68+
</div>
2469
<div className="flex w-full flex-col items-center pt-6">
25-
<div className="m-2 w-max self-center rounded-3xl border border-[#2E4D90]">
26-
{myPostToggle ? (
27-
<>
28-
<button className="rounded-3xl px-10 py-2" onClick={setAllPosts}>
29-
All Posts
30-
</button>
31-
<button
32-
className="rounded-3xl bg-[#2E4D90] px-10 py-2 text-white"
33-
onClick={setMyPosts}
34-
>
35-
My Posts
36-
</button>
37-
</>
38-
) : (
39-
<>
40-
<button
41-
className="rounded-3xl bg-[#2E4D90] px-10 py-2 text-white"
42-
onClick={setAllPosts}
43-
>
44-
All Posts
45-
</button>
46-
<button className="rounded-3xl px-10 py-2" onClick={setMyPosts}>
47-
My Posts
48-
</button>
49-
</>
50-
)}
51-
</div>
70+
<ToggleButton
71+
word="Posts"
72+
isToggled={myPostToggle}
73+
setAll={setAllPosts}
74+
setMy={setMyPosts}
75+
/>
5276
{myPostToggle
53-
? userPosts.data?.map((p) => {
54-
// get user name from id and pass it in
77+
? userPosts.data?.map((p: PostData) => {
5578
return <Post key={p.id} {...p} />;
5679
})
57-
: posts.data?.map((p) => {
58-
// get user name from id and pass it in
80+
: posts.data?.map((p: PostData) => {
5981
return <Post key={p.id} {...p} />;
6082
})}
6183
</div>

0 commit comments

Comments
 (0)