Skip to content

Commit 1e33f70

Browse files
angristanangristan
committed
feat: add "my benchmarks" page
1 parent 12a3a39 commit 1e33f70

File tree

3 files changed

+124
-24
lines changed

3 files changed

+124
-24
lines changed

‎src/App.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import './App.css';
66
import BenchmarkDetail from './components/Benchmarks/BenchmarkDetail';
77
import Benchmarks from './components/Benchmarks/Benchmarks';
88
import CreateBenchmark from './components/Benchmarks/CreateBenchmark';
9+
import UserBenchmarks from './components/Benchmarks/UserBenchmarks';
910
import Landing from './components/Landing';
1011
import Login from './components/Login';
1112
import Register from './components/Register';
@@ -17,7 +18,7 @@ function App() {
1718
const queryClient = new QueryClient();
1819

1920
return (
20-
<div className="wrapper transition duration-500 dark:bg-gray-600 h-screen">
21+
<div className="wrapper transition duration-500 dark:bg-gray-600 h-screen bg-gray-50">
2122
<QueryClientProvider client={queryClient}>
2223
<BrowserRouter>
2324
<Switch>
@@ -33,6 +34,10 @@ function App() {
3334
<PrivateRoute path="/user/:id" component={User} />
3435
<PrivateRoute exact path="/benchmarks" component={Benchmarks} />
3536
<PrivateRoute exact path="/rules" component={Rules} />
37+
<PrivateRoute
38+
path="/benchmarks/user/:id"
39+
component={UserBenchmarks}
40+
/>
3641
<PrivateRoute
3742
exact
3843
path="/benchmarks/create"

‎src/components/Benchmarks/UserBenchmarks.tsx

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { RouteComponentProps } from 'react-router-dom';
2+
import { useBenchmarksForUser } from '../../hooks/benchmark';
3+
import Header from '../Page/Header';
4+
import Page from '../Page/Page';
5+
import benchmarkModel from './BenchmarkModel';
6+
import BenchmarkRow from './BenchmarkRow';
7+
8+
type UserParams = {
9+
id: string;
10+
};
11+
12+
const UserBenchmarks = ({ match }: RouteComponentProps<UserParams>) => {
13+
let benchmarks: benchmarkModel[] = [];
14+
const {
15+
isLoading: isBenchmarksLoading,
16+
isError: isBenchmarksError,
17+
data: benchmarksData,
18+
error,
19+
} = useBenchmarksForUser(match.params.id);
20+
21+
if (isBenchmarksLoading) {
22+
return <span>Loading....</span>;
23+
}
24+
25+
if (isBenchmarksError) {
26+
if (error) {
27+
return <span>Error: {error.message}</span>;
28+
}
29+
}
30+
31+
if (benchmarksData) {
32+
benchmarks = benchmarksData;
33+
}
34+
35+
return (
36+
<Page>
37+
<Header
38+
title="My Benchmarks"
39+
button="Create"
40+
navTo="/benchmarks/create"
41+
/>
42+
<div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
43+
<div className="flex flex-col">
44+
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
45+
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
46+
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
47+
<table className="min-w-full divide-y divide-gray-200">
48+
<thead className="bg-gray-50 dark:bg-gray-800">
49+
<tr>
50+
<th
51+
scope="col"
52+
className="dark:text-gray-100 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
53+
>
54+
Title
55+
</th>
56+
<th
57+
scope="col"
58+
className="dark:text-gray-100 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
59+
>
60+
Subject
61+
</th>
62+
<th
63+
scope="col"
64+
className="dark:text-gray-100 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
65+
>
66+
Difficulty
67+
</th>
68+
<th
69+
scope="col"
70+
className="dark:text-gray-100 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
71+
>
72+
Creator
73+
</th>
74+
<th scope="col" className="relative px-6 py-3">
75+
<span className="sr-only">View</span>
76+
</th>
77+
</tr>
78+
</thead>
79+
<tbody className="bg-white dark:bg-gray-300 divide-y divide-gray-200">
80+
{benchmarks.map((benchmark: benchmarkModel) => (
81+
<BenchmarkRow
82+
key={benchmark.id?.toString()}
83+
benchmark={benchmark}
84+
/>
85+
))}
86+
</tbody>
87+
</table>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
</Page>
94+
);
95+
};
96+
97+
export default UserBenchmarks;

‎src/components/Page/Navbar.tsx

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -71,29 +71,27 @@ export default function Navbar() {
7171

7272
<div className="hidden md:block">
7373
<div className="ml-10 flex items-baseline space-x-4">
74-
{navigation.map(
75-
(item, itemIdx) => (
76-
// itemIdx === 0 ? (
77-
// <Fragment key={item}>
78-
// {/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */}
79-
// <a
80-
// href={"/" + item.toLowerCase()}
81-
// className="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium"
82-
// >
83-
// {item}
84-
// </a>
85-
// </Fragment>
86-
// ) : (
87-
<Link
88-
key={item}
89-
to={'/' + item.toLowerCase()}
90-
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
91-
>
92-
{item}
93-
</Link>
94-
),
95-
// )
96-
)}
74+
<Link
75+
key={'benchmarks'}
76+
to={'/benchmarks'}
77+
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
78+
>
79+
{'All benchmarks'}
80+
</Link>
81+
<Link
82+
key={'my-benchmarks'}
83+
to={`/benchmarks/user/${profileData?.username}`}
84+
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
85+
>
86+
{'My benchmarks'}
87+
</Link>
88+
<Link
89+
key={'profile'}
90+
to={`/user/${profileData?.username}`}
91+
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
92+
>
93+
{'My profile'}
94+
</Link>
9795
</div>
9896
</div>
9997
</div>

0 commit comments

Comments
 (0)