Skip to content

Commit 43522eb

Browse files
izzhafeezizzhafeez
authored
Merge pull request #58 from CS3219-AY2425S1/wheatgrassmc/cs3-28-m514-matching-service-page
Matching Service Page
2 parents 8d3479b + a65d3ca commit 43522eb

File tree

19 files changed

+1722
-17
lines changed

19 files changed

+1722
-17
lines changed

‎frontend/package-lock.json‎

Lines changed: 551 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,18 @@
1212
"@hookform/resolvers": "^3.9.0",
1313
"@next/font": "^14.2.13",
1414
"@radix-ui/react-checkbox": "^1.1.1",
15+
"@radix-ui/react-dialog": "^1.1.1",
1516
"@radix-ui/react-dropdown-menu": "^2.1.1",
1617
"@radix-ui/react-label": "^2.1.0",
18+
"@radix-ui/react-popover": "^1.1.1",
19+
"@radix-ui/react-select": "^2.1.1",
20+
"@radix-ui/react-separator": "^1.1.0",
1721
"@radix-ui/react-slot": "^1.1.0",
1822
"@react-oauth/google": "^0.12.1",
1923
"@tanstack/react-table": "^8.20.5",
2024
"class-variance-authority": "^0.7.0",
2125
"clsx": "^2.1.1",
26+
"cmdk": "^1.0.0",
2227
"js-cookie": "^3.0.5",
2328
"lucide-react": "^0.445.0",
2429
"next": "14.2.11",

‎frontend/src/api/user.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export const setGetProfile = async (access_token: string, user: User): Promise<U
2222
github,
2323
}),
2424
});
25+
console.log(response.json());
2526

2627
// return response.json();
2728
return {

‎frontend/src/app/(auth)/dashboard/pages/Dashboard.tsx‎ renamed to ‎frontend/src/app/(auth)/components/dashboard/Dashboard.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { getUserInterviewMetadata } from "@/api/dashboard";
2-
import DashboardCard from "@/app/(auth)/dashboard/components/DashboardCard";
3-
import { DashboardDataTable } from "@/app/(auth)/dashboard/components/DashboardDataTable";
2+
import DashboardCard from "@/app/(auth)/components/dashboard/DashboardCard";
3+
import { DashboardDataTable } from "@/app/(auth)/components/dashboard/DashboardDataTable";
44
import { useAuth } from "@/components/auth/AuthContext";
55
import { Button } from "@/components/ui/button";
66
import Container from "@/components/ui/Container";
@@ -63,7 +63,7 @@ const AuthDashboard = () => {
6363
</div>
6464
<DashboardDataTable />
6565
</Container>
66-
)
67-
}
66+
);
67+
};
6868

69-
export default AuthDashboard;
69+
export default AuthDashboard;

‎frontend/src/app/(auth)/dashboard/components/DashboardCard.tsx‎ renamed to ‎frontend/src/app/(auth)/components/dashboard/DashboardCard.tsx‎

File renamed without changes.

‎frontend/src/app/(auth)/dashboard/components/DashboardDataTable.tsx‎ renamed to ‎frontend/src/app/(auth)/components/dashboard/DashboardDataTable.tsx‎

File renamed without changes.

‎frontend/src/app/(auth)/dashboard/pages/LandingPage.tsx‎ renamed to ‎frontend/src/app/(auth)/components/landing-page/LandingPage.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,14 @@ const LandingPage = () => {
1414
return (
1515
<div className="max-w-6xl mx-auto my-10 p-2">
1616
<h1 className="text-white font-extrabold text-h1">PP Large</h1>
17-
<button onClick={() => googleLogin()} className="bg-yellow-500 hover:bg-yellow-300 px-4 py-2 my-2 rounded-md">login</button>
17+
<button
18+
onClick={() => googleLogin()}
19+
className="bg-yellow-500 hover:bg-yellow-300 px-4 py-2 my-2 rounded-md"
20+
>
21+
login
22+
</button>
1823
</div>
1924
);
20-
}
25+
};
2126

22-
export default LandingPage;
27+
export default LandingPage;

‎frontend/src/app/(auth)/layout.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const sidebarItems: SidebarMenuItemProps[] = [
5151
{
5252
menuLabel: "Find Match",
5353
menuIcon: IoMdSearch,
54-
linksTo: "/find-match",
54+
linksTo: "/match",
5555
},
5656
];
5757

@@ -85,7 +85,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
8585
icon: "error",
8686
showDenyButton: true,
8787
confirmButtonText: "Sign in with Google",
88-
denyButtonText: "Nevermind"
88+
denyButtonText: "Nevermind",
8989
}).then((result) => {
9090
/* Read more about isConfirmed, isDenied below */
9191
if (result.isConfirmed) {
@@ -101,9 +101,10 @@ const Layout = ({ children }: { children: ReactNode }) => {
101101
googleLogout();
102102
logout();
103103
router.push("/");
104-
}
104+
};
105105

106-
return (<div className="flex h-full overflow-y-auto">
106+
return (
107+
<div className="flex h-full overflow-y-auto">
107108
<Sidebar
108109
className="sticky top-0 h-screen"
109110
rootStyles={{
@@ -139,7 +140,8 @@ const Layout = ({ children }: { children: ReactNode }) => {
139140
>
140141
Logout
141142
</MenuItem>
142-
</Menu>}
143+
</Menu>
144+
}
143145
</div>
144146
</Sidebar>
145147
<div className="w-full overflow-y-scroll">{children}</div>

‎frontend/src/app/(auth)/match/page.tsx‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
"use client";
2+
3+
import { Button } from "@/components/ui/button";
4+
import Container from "@/components/ui/Container";
5+
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
6+
import { MultiSelect } from "@/components/ui/multiselect";
7+
import {
8+
Select,
9+
SelectContent,
10+
SelectItem,
11+
SelectTrigger,
12+
SelectValue,
13+
} from "@/components/ui/select";
14+
import {
15+
QuestionDifficulty,
16+
QuestionLanguages,
17+
QuestionTopics,
18+
} from "@/types/find-match";
19+
import { useForm } from "react-hook-form";
20+
21+
interface FindMatchFormOutput {
22+
questionDifficulty: string;
23+
preferredLanguages: string;
24+
}
25+
26+
function capitalizeWord(word: string) {
27+
if (!word) return word;
28+
return word[0].toUpperCase() + word.substr(1).toLowerCase();
29+
}
30+
31+
const FindPeerHeader = () => {
32+
return (
33+
<div className="flex flex-col mt-8">
34+
<span className="text-h3 font-medium text-white">Find a Peer</span>
35+
<div className="flex flex-col text-white text-lg font-light">
36+
<span>
37+
Customize your experience by selecting multiple languages, difficulty
38+
levels,
39+
</span>
40+
<span>and question topics.</span>
41+
</div>
42+
</div>
43+
);
44+
};
45+
46+
const FindPeer = () => {
47+
const form = useForm({
48+
defaultValues: {
49+
questionDifficulty: QuestionDifficulty.MEDIUM.valueOf(),
50+
preferredLanguages: QuestionLanguages.PYTHON.valueOf(),
51+
},
52+
});
53+
54+
const preferredLanguagesList = Object.values(QuestionLanguages).map((ql) => {
55+
return {
56+
label: capitalizeWord(ql),
57+
value: ql,
58+
};
59+
});
60+
61+
const topicsList = Object.values(QuestionTopics)
62+
.map((qt) => {
63+
return {
64+
label: capitalizeWord(qt),
65+
value: qt,
66+
};
67+
})
68+
.sort((a, b) => a.label.localeCompare(b.label));
69+
70+
const onSubmit = (data: FindMatchFormOutput) => {
71+
console.log(data);
72+
};
73+
74+
return (
75+
<Container>
76+
<FindPeerHeader />
77+
<Form {...form}>
78+
<form onSubmit={form.handleSubmit(onSubmit)}>
79+
<div className="grid grid-cols-[1fr_8fr] grid-rows-3 mt-5 mb-14 gap-y-10">
80+
<span className="text-sm text-primary-400 self-center">
81+
Difficulty
82+
</span>
83+
<Select
84+
name="questionDifficulty"
85+
defaultValue={QuestionDifficulty.MEDIUM.valueOf()}
86+
>
87+
<SelectTrigger className="w-full bg-primary-800 text-white">
88+
<SelectValue placeholder="Choose a difficulty..." />
89+
</SelectTrigger>
90+
<SelectContent>
91+
{Object.values(QuestionDifficulty).map((qd) => (
92+
<SelectItem value={qd} key={qd}>
93+
<span className="capitalize">{qd}</span>
94+
</SelectItem>
95+
))}
96+
</SelectContent>
97+
</Select>
98+
99+
<span className="text-sm text-primary-400">
100+
Preferred Languages
101+
</span>
102+
<FormField
103+
control={form.control}
104+
name="preferredLanguages"
105+
render={({ field }) => (
106+
<FormItem>
107+
<FormControl>
108+
<MultiSelect
109+
options={preferredLanguagesList}
110+
onValueChange={field.onChange}
111+
placeholder="Select options"
112+
variant="inverted"
113+
/>
114+
</FormControl>
115+
</FormItem>
116+
)}
117+
/>
118+
119+
<span className="text-sm text-primary-400">Topics</span>
120+
<FormField
121+
control={form.control}
122+
name="preferredLanguages"
123+
render={({ field }) => (
124+
<FormItem>
125+
<FormControl>
126+
<MultiSelect
127+
options={topicsList}
128+
onValueChange={field.onChange}
129+
placeholder="Select options"
130+
variant="inverted"
131+
/>
132+
</FormControl>
133+
</FormItem>
134+
)}
135+
/>
136+
</div>
137+
<Button type="submit" className="pl-10 pr-10">
138+
Find Interview Peer
139+
</Button>
140+
</form>
141+
</Form>
142+
</Container>
143+
);
144+
};
145+
146+
export default FindPeer;

‎frontend/src/app/(auth)/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
"use client";
22

33
import { useAuth } from "@/components/auth/AuthContext";
4-
import LandingPage from "./dashboard/pages/LandingPage";
5-
import Dashboard from "./dashboard/pages/Dashboard";
4+
import LandingPage from "./components/landing-page/LandingPage";
5+
import Dashboard from "./components/dashboard/Dashboard";
66

77
const Home = () => {
88
const { token } = useAuth();

0 commit comments

Comments
 (0)