Skip to content

Commit 06a868b

Browse files
Mikadowsangristan
Mikadows
authored and
angristan
committed
refactor(benchmarks): split BenchmarkRow component to separate file
1 parent 7e8064c commit 06a868b

File tree

2 files changed

+179
-162
lines changed

2 files changed

+179
-162
lines changed

‎src/components/Benchmarks/BenchmarkRow.tsx

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { Link } from 'react-router-dom';
2+
import React from 'react';
3+
import benchmarkModel from './BenchmarkModel';
4+
5+
interface BenchmarkRowProps {
6+
benchmark: benchmarkModel;
7+
}
8+
9+
// @ts-ignore
10+
const BenchmarkRow: React.FC<BenchmarkRowProps> = ({ benchmark }) => {
11+
const difficultyEasyColor =
12+
'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800';
13+
const difficultyMediumColor =
14+
'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800';
15+
const difficultyHardColor =
16+
'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800';
17+
const truncateSize = 80;
18+
19+
if (
20+
benchmark.subject === undefined ||
21+
benchmark.title === undefined ||
22+
benchmark.creator === undefined
23+
) {
24+
return;
25+
}
26+
27+
return (
28+
<tr key={benchmark.id}>
29+
<td className="px-6 py-4 whitespace-nowrap">
30+
<div className="flex items-center">
31+
{/*<div className="flex-shrink-0 h-10 w-10">*/}
32+
{/* /!*<img className="h-10 w-10 rounded-full"*!/*/}
33+
{/* /!* src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60"*!/*/}
34+
{/* /!* alt=""/>*!/*/}
35+
{/*</div>*/}
36+
<div className="ml-4">
37+
<div
38+
key={benchmark.title}
39+
className="text-sm font-medium text-gray-900"
40+
>
41+
{benchmark.title}
42+
</div>
43+
{/*<div className="text-sm text-gray-500">*/}
44+
{/* [email protected]*/}
45+
{/*</div>*/}
46+
</div>
47+
</div>
48+
</td>
49+
<td className="px-6 py-4 whitespace-nowrap">
50+
<div
51+
key={benchmark.subject.substring(0, 50)}
52+
className="text-sm text-gray-900"
53+
>
54+
{benchmark.subject.length > truncateSize
55+
? benchmark.subject.substring(0, truncateSize) + '...'
56+
: benchmark.subject}
57+
</div>
58+
</td>
59+
<td className="px-6 py-4 whitespace-nowrap">
60+
<span
61+
key={benchmark.difficulty}
62+
className={
63+
benchmark.difficulty === 'Hard'
64+
? difficultyHardColor
65+
: benchmark.difficulty === 'Medium'
66+
? difficultyMediumColor
67+
: difficultyEasyColor
68+
}
69+
>
70+
{benchmark.difficulty}
71+
</span>
72+
</td>
73+
<td
74+
key={benchmark.creator.name}
75+
className="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
76+
>
77+
{benchmark.creator.name}
78+
</td>
79+
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
80+
<Link
81+
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
82+
to={'/benchmarks/' + benchmark.id}
83+
>
84+
See
85+
</Link>
86+
</td>
87+
</tr>
88+
);
89+
};
90+
91+
export default BenchmarkRow;

‎src/components/Benchmarks/Benchmarks.tsx

Lines changed: 88 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,88 @@
1-
import React from 'react';
2-
import { Link } from 'react-router-dom';
3-
import { BenchmarkServices } from '../../api/BenchmarkServices';
4-
import Header from '../Page/Header';
5-
import Page from '../Page/Page';
6-
import benchmarkModel from './BenchmarkModel';
7-
8-
// @ts-ignore
9-
function BenchmarkRow({ benchmark }) {
10-
let difficultyEasyColor =
11-
'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800';
12-
let difficultyMediumColor =
13-
'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800';
14-
let difficultyHardColor =
15-
'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800';
16-
const truncateSize = 80;
17-
18-
return (
19-
<tr key={benchmark.id}>
20-
<td className="px-6 py-4 whitespace-nowrap">
21-
<div className="flex items-center">
22-
{/*<div className="flex-shrink-0 h-10 w-10">*/}
23-
{/* /!*<img className="h-10 w-10 rounded-full"*!/*/}
24-
{/* /!* src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60"*!/*/}
25-
{/* /!* alt=""/>*!/*/}
26-
{/*</div>*/}
27-
<div className="ml-4">
28-
<div
29-
key={benchmark.title}
30-
className="text-sm font-medium text-gray-900"
31-
>
32-
{benchmark.title}
33-
</div>
34-
{/*<div className="text-sm text-gray-500">*/}
35-
{/* [email protected]*/}
36-
{/*</div>*/}
37-
</div>
38-
</div>
39-
</td>
40-
<td className="px-6 py-4 whitespace-nowrap">
41-
<div
42-
key={benchmark.subject.substring(0, 50)}
43-
className="text-sm text-gray-900"
44-
>
45-
{benchmark.subject.length > truncateSize
46-
? benchmark.subject.substring(0, truncateSize) + '...'
47-
: benchmark.subject}
48-
</div>
49-
</td>
50-
<td className="px-6 py-4 whitespace-nowrap">
51-
<span
52-
key={benchmark.difficulty}
53-
className={
54-
benchmark.difficulty === 'Hard'
55-
? difficultyHardColor
56-
: benchmark.difficulty === 'Medium'
57-
? difficultyMediumColor
58-
: difficultyEasyColor
59-
}
60-
>
61-
{benchmark.difficulty}
62-
</span>
63-
</td>
64-
<td
65-
key={benchmark.creator.name}
66-
className="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
67-
>
68-
{benchmark.creator.name}
69-
</td>
70-
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
71-
<Link
72-
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
73-
to={'/benchmarks/' + benchmark.id}
74-
>
75-
See
76-
</Link>
77-
</td>
78-
</tr>
79-
);
80-
}
81-
82-
export class Benchmarks extends React.Component<
83-
{},
84-
{ benchmarksJson: benchmarkModel[] }
85-
> {
86-
constructor(props: any) {
87-
super(props);
88-
this.state = {
89-
benchmarksJson: [],
90-
};
91-
}
92-
93-
onLoadData() {
94-
BenchmarkServices.getAllBenchmarks().then((response) => {
95-
this.setState({ benchmarksJson: response });
96-
});
97-
}
98-
99-
componentDidMount() {
100-
this.onLoadData();
101-
}
102-
103-
render() {
104-
return (
105-
<Page>
106-
<Header title="Benchmarks" button="Create" navTo="/benchmarks/create"/>
107-
<div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
108-
<div className="flex flex-col">
109-
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
110-
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
111-
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
112-
<table className="min-w-full divide-y divide-gray-200">
113-
<thead className="bg-gray-50">
114-
<tr>
115-
<th
116-
scope="col"
117-
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
118-
>
119-
Title
120-
</th>
121-
<th
122-
scope="col"
123-
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
124-
>
125-
Subject
126-
</th>
127-
<th
128-
scope="col"
129-
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
130-
>
131-
Difficulty
132-
</th>
133-
<th
134-
scope="col"
135-
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
136-
>
137-
Creator
138-
</th>
139-
<th scope="col" className="relative px-6 py-3">
140-
<span className="sr-only">View</span>
141-
</th>
142-
</tr>
143-
</thead>
144-
145-
<tbody className="bg-white divide-y divide-gray-200">
146-
{this.state.benchmarksJson.map((benchmark) => (
147-
<BenchmarkRow
148-
key={benchmark.id?.toString()}
149-
benchmark={benchmark}
150-
/>
151-
))}
152-
</tbody>
153-
</table>
154-
</div>
155-
</div>
156-
</div>
157-
</div>
158-
</div>
159-
</Page>
160-
);
161-
}
162-
}
1+
import React from 'react';
2+
import { BenchmarkServices } from '../../api/BenchmarkServices';
3+
import Header from '../Page/Header';
4+
import Page from '../Page/Page';
5+
import benchmarkModel from './BenchmarkModel';
6+
import BenchmarkRow from './BenchmarkRow';
7+
8+
export class Benchmarks extends React.Component<
9+
{},
10+
{ benchmarksJson: benchmarkModel[] }
11+
> {
12+
constructor(props: any) {
13+
super(props);
14+
this.state = {
15+
benchmarksJson: [],
16+
};
17+
}
18+
19+
onLoadData() {
20+
BenchmarkServices.getAllBenchmarks().then((response) => {
21+
this.setState({ benchmarksJson: response });
22+
});
23+
}
24+
25+
componentDidMount() {
26+
this.onLoadData();
27+
}
28+
29+
render() {
30+
return (
31+
<Page>
32+
<Header title="Benchmarks" button="Create" navTo="/benchmarks/create" />
33+
<div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
34+
<div className="flex flex-col">
35+
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
36+
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
37+
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
38+
<table className="min-w-full divide-y divide-gray-200">
39+
<thead className="bg-gray-50">
40+
<tr>
41+
<th
42+
scope="col"
43+
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
44+
>
45+
Title
46+
</th>
47+
<th
48+
scope="col"
49+
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
50+
>
51+
Subject
52+
</th>
53+
<th
54+
scope="col"
55+
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
56+
>
57+
Difficulty
58+
</th>
59+
<th
60+
scope="col"
61+
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
62+
>
63+
Creator
64+
</th>
65+
<th scope="col" className="relative px-6 py-3">
66+
<span className="sr-only">View</span>
67+
</th>
68+
</tr>
69+
</thead>
70+
71+
<tbody className="bg-white divide-y divide-gray-200">
72+
{this.state.benchmarksJson.map((benchmark) => (
73+
<BenchmarkRow
74+
key={benchmark.id?.toString()}
75+
benchmark={benchmark}
76+
/>
77+
))}
78+
</tbody>
79+
</table>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
</Page>
86+
);
87+
}
88+
}

0 commit comments

Comments
 (0)