Skip to content

Commit 23e5768

Browse files
ngjiayuanngjiayuan
committed
2 parents 1cce8be + 7b311c8 commit 23e5768

File tree

12 files changed

+626
-68
lines changed

12 files changed

+626
-68
lines changed

‎public/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<link rel="preconnect" href="https://fonts.googleapis.com">
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
69
<meta name="viewport" content="width=device-width, initial-scale=1" />
710
<meta name="theme-color" content="#000000" />
811
<meta

‎src/App.tsx‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎src/auth/auth.context.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
5555
signInWithEmailAndPassword(auth, email, password)
5656
.then((u) => {
5757
setUser(u.user);
58-
navigate("/");
58+
navigate("/home", { replace: true });
5959
})
6060
.catch((e) => setError(e.message));
6161
},
@@ -64,9 +64,12 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
6464

6565
const logout = useCallback(() => {
6666
signOut(auth)
67-
.then(() => setUser(undefined))
67+
.then(() => {
68+
setUser(undefined);
69+
navigate("/", { replace: true });
70+
})
6871
.catch((e) => setError(e.message));
69-
}, [setUser]);
72+
}, [setUser, navigate]);
7073

7174
const authContextProviderValue = useMemo(
7275
() => ({ user, error, signUp, login, logout }),
@@ -80,6 +83,6 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
8083
);
8184
}
8285

83-
export function useAuth() {
86+
export const useAuth = () => {
8487
return useContext(AuthContext);
85-
}
88+
};

‎src/components/Home.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { useState, useEffect } from "react";
2+
import { Box } from "@mui/material";
3+
import { useData } from "../data/data.context";
4+
5+
export default function Home() {
6+
// Sample data for practice questions (you can replace this with actual data)
7+
const practiceQuestions = [
8+
{ difficulty: "Easy", count: 10 },
9+
{ difficulty: "Medium", count: 20 },
10+
{ difficulty: "Hard", count: 15 },
11+
];
12+
const { getQuestions } = useData();
13+
14+
// State to hold the practice questions data
15+
const [questionsData, setQuestionsData] = useState(practiceQuestions);
16+
17+
// You can fetch the actual data from your API using useEffect
18+
19+
useEffect(() => {
20+
// Fetch practice questions data from your API here and update the state
21+
// Example API call:
22+
// fetch('/api/practice-questions')
23+
// .then((response) => response.json())
24+
// .then((data) => setQuestionsData(data));
25+
}, []);
26+
27+
return (
28+
<Box>
29+
<div>
30+
<h1>Welcome to the Technical Interview Preparation Portal</h1>
31+
<div>
32+
<h2>Practice Questions</h2>
33+
<ul>
34+
{questionsData.map((question, index) => (
35+
<li key={index}>
36+
{question.difficulty}: {question.count} questions
37+
</li>
38+
))}
39+
</ul>
40+
</div>
41+
</div>
42+
</Box>
43+
);
44+
}

‎src/components/Navbar.tsx‎

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1-
import * as React from "react";
1+
import { MouseEvent, useState } from "react";
22
import {
33
AppBar,
4+
Avatar,
45
Box,
56
Button,
67
Container,
78
IconButton,
89
Menu,
910
MenuItem,
1011
Toolbar,
12+
Tooltip,
1113
Typography,
1214
} from "@mui/material";
1315
import MenuIcon from "@mui/icons-material/Menu";
1416
import AdbIcon from "@mui/icons-material/Adb";
17+
import { useAuth } from "../auth/auth.context";
1518

1619
const pages = ["Products", "Pricing", "Blog"];
1720
const authPages = [
@@ -24,20 +27,17 @@ const authPages = [
2427
link: "/signup",
2528
},
2629
];
27-
const settings = ["Profile", "Account", "Dashboard", "Logout"];
2830

29-
function Navbar() {
30-
const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
31-
null
32-
);
33-
const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(
34-
null
35-
);
31+
export default function Navbar() {
32+
const { user, logout } = useAuth();
33+
const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
34+
const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
3635

37-
const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
36+
const handleOpenNavMenu = (event: MouseEvent<HTMLElement>) => {
3837
setAnchorElNav(event.currentTarget);
3938
};
40-
const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
39+
40+
const handleOpenUserMenu = (event: MouseEvent<HTMLElement>) => {
4141
setAnchorElUser(event.currentTarget);
4242
};
4343

@@ -49,6 +49,13 @@ function Navbar() {
4949
setAnchorElUser(null);
5050
};
5151

52+
const settings = [
53+
{ name: "Profile", onclick: handleCloseUserMenu },
54+
{ name: "Account", onclick: handleCloseUserMenu },
55+
{ name: "Dashboard", onclick: handleCloseUserMenu },
56+
{ name: "Logout", onclick: logout },
57+
];
58+
5259
return (
5360
<AppBar position="static">
5461
<Container maxWidth="xl">
@@ -62,7 +69,7 @@ function Navbar() {
6269
sx={{
6370
mr: 2,
6471
display: { xs: "none", md: "flex" },
65-
fontFamily: "monospace",
72+
fontFamily: "Roboto",
6673
fontWeight: 700,
6774
letterSpacing: ".3rem",
6875
color: "inherit",
@@ -145,18 +152,27 @@ function Navbar() {
145152
</Box>
146153

147154
<Box sx={{ flexGrow: 0 }}>
148-
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
149-
{authPages.map((page) => (
150-
<Button
151-
key={page.name}
152-
// onClick={handleCloseNavMenu}
153-
href={page.link}
154-
sx={{ my: 2, color: "white", display: "block" }}
155-
>
156-
{page.name}
157-
</Button>
158-
))}
159-
</Box>
155+
{!user && (
156+
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
157+
{authPages.map((page) => (
158+
<Button
159+
key={page.name}
160+
// onClick={handleCloseNavMenu}
161+
href={page.link}
162+
sx={{ my: 2, color: "white", display: "block" }}
163+
>
164+
{page.name}
165+
</Button>
166+
))}
167+
</Box>
168+
)}
169+
{user && (
170+
<Tooltip title="Open settings">
171+
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
172+
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
173+
</IconButton>
174+
</Tooltip>
175+
)}
160176
<Menu
161177
sx={{ mt: "45px" }}
162178
id="menu-appbar"
@@ -174,8 +190,8 @@ function Navbar() {
174190
onClose={handleCloseUserMenu}
175191
>
176192
{settings.map((setting) => (
177-
<MenuItem key={setting} onClick={handleCloseUserMenu}>
178-
<Typography textAlign="center">{setting}</Typography>
193+
<MenuItem key={setting.name} onClick={setting.onclick}>
194+
<Typography textAlign="center">{setting.name}</Typography>
179195
</MenuItem>
180196
))}
181197
</Menu>
@@ -185,4 +201,3 @@ function Navbar() {
185201
</AppBar>
186202
);
187203
}
188-
export default Navbar;

0 commit comments

Comments
 (0)