Skip to content

Commit 6bb5cb7

Browse files
Mikadowsangristan
Mikadows
authored and
angristan
committed
refactor(benchmarks): convert Benchmark creation class to function
1 parent 122282a commit 6bb5cb7

File tree

4 files changed

+148
-164
lines changed

4 files changed

+148
-164
lines changed

‎src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import { ReactQueryDevtools } from 'react-query/devtools';
44
import { BrowserRouter, Route, Switch } from 'react-router-dom';
55
import './App.css';
66
import BenchmarkDetail from './components/Benchmarks/BenchmarkDetail';
7-
import { CreateBenchmark } from './components/Benchmarks/CreateBenchmark';
87
import Dashboard from './components/Dashboard/Dashboard';
98
import Landing from './components/Landing';
109
import Login from './components/Login';
1110
import Register from './components/Register';
1211
import PrivateRoute from './components/Routing/PrivateRoute';
1312
import Benchmarks from './components/Benchmarks/Benchmarks';
13+
import CreateBenchmark from './components/Benchmarks/CreateBenchmark';
1414

1515
function App() {
1616
const queryClient = new QueryClient();

‎src/api/BenchmarkServices.ts

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

‎src/components/Benchmarks/CreateBenchmark.tsx

Lines changed: 124 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,124 @@
1-
import React from 'react';
2-
import { Link } from 'react-router-dom';
3-
import { BenchmarkServices } from '../../api/BenchmarkServices';
4-
import Label from '../utils/Label';
5-
import Header from '../Page/Header';
6-
import Page from '../Page/Page';
7-
8-
export class CreateBenchmark extends React.Component<
9-
{},
10-
{ state: String; message: String; id: String }
11-
> {
12-
constructor(props: {} | Readonly<{}>) {
13-
super(props);
14-
this.state = {
15-
state: '',
16-
message: '',
17-
id: '',
18-
};
19-
this.onSubmit = this.onSubmit.bind(this);
20-
}
21-
22-
onSubmit(event: any) {
23-
event.preventDefault();
24-
const title = event.target.title.value;
25-
const subject = event.target.subject.value;
26-
const difficulty = event.target.difficulty.value;
27-
28-
if (title === '' || subject === '') {
29-
// console.log('At least one field is blank')
30-
this.setState({ message: 'At least one field is blank' });
31-
this.setState({ state: 'Error' });
32-
this.setState({ id: '' });
33-
return;
34-
}
35-
36-
BenchmarkServices.createBenchmark(title, subject, difficulty).then((r) => {
37-
this.setState({
38-
message: 'Your benchmark' + r.title + ' have been saved',
39-
});
40-
this.setState({ state: 'Success' });
41-
this.setState({ id: r.id! });
42-
});
43-
}
44-
45-
render() {
46-
return (
47-
<Page>
48-
<Header title="Create benchmark" />
49-
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
50-
<form className="w-full max-w-lg" onSubmit={this.onSubmit}>
51-
<div className="flex flex-wrap -mx-3 mb-6">
52-
<div className="w-full px-3">
53-
<label
54-
className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
55-
htmlFor="grid-password"
56-
>
57-
Title
58-
</label>
59-
<input
60-
className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
61-
id="title"
62-
type="text"
63-
placeholder="Your benchmark title"
64-
/>
65-
</div>
66-
</div>
67-
<div className="flex flex-wrap -mx-3 mb-6">
68-
<div className="w-full px-3">
69-
<label
70-
className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
71-
htmlFor="grid-password"
72-
>
73-
Subject
74-
</label>
75-
<textarea
76-
className="xl:resize-y appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
77-
id="subject"
78-
placeholder="Your benchmark subject"
79-
/>
80-
</div>
81-
</div>
82-
<div className="flex flex-wrap -mx-3 mb-6">
83-
<div className="w-full px-3">
84-
<label
85-
className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
86-
htmlFor="grid-password"
87-
>
88-
Difficulty
89-
</label>
90-
<select
91-
className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
92-
id="difficulty"
93-
>
94-
<option>Easy</option>
95-
<option>Medium</option>
96-
<option>Hard</option>
97-
</select>
98-
</div>
99-
</div>
100-
<div className="text-center pb-3">
101-
<Label status={this.state.state} message={this.state.message} />
102-
</div>
103-
<div className="flex flex-col bg-grey-light">
104-
<input
105-
type="submit"
106-
value="Create"
107-
className=" bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
108-
/>
109-
</div>
110-
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 flex justify-between">
111-
<Link
112-
className="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-full"
113-
to="/benchmarks"
114-
>
115-
Back to benchmarks
116-
</Link>
117-
{(() => {
118-
if (this.state.state === 'Success') {
119-
return (
120-
<Link
121-
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
122-
to={'/benchmarks/' + this.state.id}
123-
>
124-
See my benchmark
125-
</Link>
126-
);
127-
}
128-
})()}
129-
</div>
130-
</form>
131-
</div>
132-
</Page>
133-
);
134-
}
135-
}
1+
import React, { useState } from 'react';
2+
import { Link } from 'react-router-dom';
3+
import Label from '../utils/Label';
4+
import Header from '../Page/Header';
5+
import Page from '../Page/Page';
6+
import { createBenchmark } from '../../hooks/benchmark';
7+
8+
const CreateBenchmark: React.FC = () => {
9+
const [status, setStatus] = useState('');
10+
const [message, setMessage] = useState('');
11+
const [id, setId] = useState('');
12+
13+
const submitBenchmarkCreation = async (event: any) => {
14+
event.preventDefault();
15+
const title = event.target.title.value;
16+
const subject = event.target.subject.value;
17+
const difficulty = event.target.difficulty.value;
18+
19+
if (title === '' || subject === '') {
20+
setMessage('At least one field is blank');
21+
setStatus('Error');
22+
setId('');
23+
return;
24+
}
25+
26+
await createBenchmark(title, subject, difficulty).then((data) => {
27+
setMessage('Your benchmark' + data.title + ' have been saved');
28+
setStatus('Success');
29+
setId(data.id!);
30+
});
31+
};
32+
33+
return (
34+
<Page>
35+
<Header title="Create benchmark" />
36+
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
37+
<form className="w-full max-w-lg" onSubmit={submitBenchmarkCreation}>
38+
<div className="flex flex-wrap -mx-3 mb-6">
39+
<div className="w-full px-3">
40+
<label
41+
className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
42+
htmlFor="grid-password"
43+
>
44+
Title
45+
</label>
46+
<input
47+
className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
48+
id="title"
49+
type="text"
50+
placeholder="Your benchmark title"
51+
/>
52+
</div>
53+
</div>
54+
<div className="flex flex-wrap -mx-3 mb-6">
55+
<div className="w-full px-3">
56+
<label
57+
className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
58+
htmlFor="grid-password"
59+
>
60+
Subject
61+
</label>
62+
<textarea
63+
className="xl:resize-y appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
64+
id="subject"
65+
placeholder="Your benchmark subject"
66+
/>
67+
</div>
68+
</div>
69+
<div className="flex flex-wrap -mx-3 mb-6">
70+
<div className="w-full px-3">
71+
<label
72+
className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
73+
htmlFor="grid-password"
74+
>
75+
Difficulty
76+
</label>
77+
<select
78+
className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
79+
id="difficulty"
80+
>
81+
<option>Easy</option>
82+
<option>Medium</option>
83+
<option>Hard</option>
84+
</select>
85+
</div>
86+
</div>
87+
<div className="text-center pb-3">
88+
<Label status={status} message={message} />
89+
</div>
90+
<div className="flex flex-col bg-grey-light">
91+
<input
92+
type="submit"
93+
value="Create"
94+
className=" bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
95+
/>
96+
</div>
97+
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 flex justify-between">
98+
<Link
99+
className="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-full"
100+
to="/benchmarks"
101+
>
102+
Back to benchmarks
103+
</Link>
104+
{(() => {
105+
if (status === 'Success') {
106+
return (
107+
<Link
108+
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
109+
to={'/benchmarks/' + id}
110+
>
111+
See my benchmark
112+
</Link>
113+
);
114+
}
115+
})()}
116+
</div>
117+
</form>
118+
</div>
119+
</Page>
120+
);
121+
// }
122+
};
123+
124+
export default CreateBenchmark;

‎src/hooks/benchmark.ts

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useQuery } from 'react-query';
2-
import axios from 'axios';
2+
import axios, { AxiosResponse } from 'axios';
33
import benchmarkModel from '../components/Benchmarks/BenchmarkModel';
44
import useToken from './token';
55

@@ -36,3 +36,25 @@ export function useBenchmarkSList() {
3636
return data;
3737
});
3838
}
39+
40+
export async function createBenchmark(
41+
title: string,
42+
subject: string,
43+
difficulty: string,
44+
): Promise<benchmarkModel> {
45+
const res: AxiosResponse<benchmarkModel> = await axios.post(
46+
`${process.env.REACT_APP_API_ENDPOINT}/benchmarks`,
47+
{
48+
title,
49+
subject,
50+
difficulty,
51+
},
52+
{
53+
headers: {
54+
Authorization: 'Bearer ' + localStorage.getItem('access_token'),
55+
// 'Authorization': 'Bearer ' + useToken() //
56+
},
57+
},
58+
);
59+
return res.data;
60+
}

0 commit comments

Comments
 (0)