Skip to content

Commit 12a3a39

Browse files
angristanangristan
committed
feat(profile): load benchmarks
1 parent 629f14d commit 12a3a39

File tree

2 files changed

+78
-38
lines changed

2 files changed

+78
-38
lines changed

‎src/components/User.tsx

Lines changed: 69 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { DateTime } from 'luxon';
22
import Gravatar from 'react-gravatar';
33
import { RouteComponentProps } from 'react-router-dom';
4+
import { useBenchmarksForUser } from '../hooks/benchmark';
45
import { useUser } from '../hooks/users';
6+
import benchmarkModel from './Benchmarks/BenchmarkModel';
7+
import BenchmarkRow from './Benchmarks/BenchmarkRow';
58
import Header from './Page/Header';
69
import Page from './Page/Page';
710

@@ -17,6 +20,14 @@ const User = ({ match }: RouteComponentProps<UserParams>) => {
1720
error,
1821
} = useUser(match.params.id);
1922

23+
let benchmarks: benchmarkModel[] = [];
24+
const {
25+
isLoading: isBenchmarksLoading,
26+
isError: isBenchmarksError,
27+
data: benchmarksData,
28+
error: benchmarksError,
29+
} = useBenchmarksForUser(match.params.id);
30+
2031
if (isProfileLoading) {
2132
return <span>Loading....</span>;
2233
}
@@ -26,6 +37,11 @@ const User = ({ match }: RouteComponentProps<UserParams>) => {
2637
return <span>Error: {error.message}</span>;
2738
}
2839
}
40+
41+
if (benchmarksData) {
42+
benchmarks = benchmarksData;
43+
}
44+
2945
return (
3046
<Page>
3147
<Header title="Profile" />
@@ -83,7 +99,7 @@ const User = ({ match }: RouteComponentProps<UserParams>) => {
8399

84100
{/* <!-- Experience and education --> */}
85101
<div className="bg-white p-3 shadow-sm rounded-sm">
86-
<div className="grid grid-cols-2">
102+
<div className="grid grid-cols-1">
87103
<div>
88104
<div className="flex items-center space-x-2 font-semibold text-gray-900 leading-8 mb-3">
89105
<span className="text-green-500">
@@ -95,49 +111,64 @@ const User = ({ match }: RouteComponentProps<UserParams>) => {
95111
stroke="currentColor"
96112
>
97113
<path
98-
stroke-linecap="round"
99-
stroke-linejoin="round"
100-
stroke-width="2"
114+
strokeLinecap="round"
115+
strokeLinejoin="round"
116+
strokeWidth="2"
101117
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
102118
/>
103119
</svg>
104120
</span>
105-
<span className="tracking-wide">Experience</span>
121+
<span className="tracking-wide">
122+
Published benchmarks
123+
</span>
106124
</div>
107-
<ul className="list-inside space-y-2">
108-
<li>
109-
<div className="text-teal-600">
110-
Owner at Her Company Inc.
111-
</div>
112-
<div className="text-gray-500 text-xs">
113-
March 2020 - Now
125+
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
126+
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
127+
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
128+
<table className="min-w-full divide-y divide-gray-200">
129+
<thead className="bg-gray-50 dark:bg-gray-800">
130+
<tr>
131+
<th
132+
scope="col"
133+
className="dark:text-gray-100 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
134+
>
135+
Title
136+
</th>
137+
<th
138+
scope="col"
139+
className="dark:text-gray-100 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
140+
>
141+
Subject
142+
</th>
143+
<th
144+
scope="col"
145+
className="dark:text-gray-100 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
146+
>
147+
Difficulty
148+
</th>
149+
<th
150+
scope="col"
151+
className="dark:text-gray-100 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
152+
>
153+
Creator
154+
</th>
155+
<th scope="col" className="relative px-6 py-3">
156+
<span className="sr-only">View</span>
157+
</th>
158+
</tr>
159+
</thead>
160+
<tbody className="bg-white dark:bg-gray-300 divide-y divide-gray-200">
161+
{benchmarks.map((benchmark: benchmarkModel) => (
162+
<BenchmarkRow
163+
key={benchmark.id?.toString()}
164+
benchmark={benchmark}
165+
/>
166+
))}
167+
</tbody>
168+
</table>
114169
</div>
115-
</li>
116-
<li>
117-
<div className="text-teal-600">
118-
Owner at Her Company Inc.
119-
</div>
120-
<div className="text-gray-500 text-xs">
121-
March 2020 - Now
122-
</div>
123-
</li>
124-
<li>
125-
<div className="text-teal-600">
126-
Owner at Her Company Inc.
127-
</div>
128-
<div className="text-gray-500 text-xs">
129-
March 2020 - Now
130-
</div>
131-
</li>
132-
<li>
133-
<div className="text-teal-600">
134-
Owner at Her Company Inc.
135-
</div>
136-
<div className="text-gray-500 text-xs">
137-
March 2020 - Now
138-
</div>
139-
</li>
140-
</ul>
170+
</div>
171+
</div>
141172
</div>
142173
</div>
143174
{/* <!-- End of Experience and education grid --> */}

‎src/hooks/benchmark.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,15 @@ export function useBenchmarkSList() {
2222
});
2323
}
2424

25+
export function useBenchmarksForUser(username: string) {
26+
return useQuery<benchmarkModel[], Error>(`benchmark`, async () => {
27+
const { data } = await authenticatedRequest({
28+
url: `users/${username}/benchmarks`,
29+
});
30+
return data;
31+
});
32+
}
33+
2534
export async function createBenchmark(bench: {
2635
title: string;
2736
subject: string;

0 commit comments

Comments
 (0)