refactor(benchmarks): use mutation for submission

Author: angristan

src/components/Benchmarks/CreateBenchmark.tsx

@@ -1,15 +1,29 @@
 import React, { useState } from 'react';
+import { useMutation } from 'react-query';
 import { Link } from 'react-router-dom';
-import Label from '../utils/Label';
+import { createBenchmark } from '../../hooks/benchmark';
 import Header from '../Page/Header';
 import Page from '../Page/Page';
-import { createBenchmark } from '../../hooks/benchmark';
+import Label from '../utils/Label';
+import benchmarkModel from './BenchmarkModel';
 
 const CreateBenchmark: React.FC = () => {
   const [status, setStatus] = useState('');
   const [message, setMessage] = useState('');
   const [id, setId] = useState('');
 
+  const { mutate } = useMutation(createBenchmark, {
+    onSuccess: (data: benchmarkModel) => {
+      setMessage(`Your benchmark ${data.title} has been saved`);
+      setStatus('Success');
+      setId(data.id!);
+    },
+    onError: (err: any) => {
+      setMessage(`Failed to create benchmark: ${err}`);
+      setStatus('Error');
+    },
+  });
+
   const submitBenchmarkCreation = async (event: any) => {
     event.preventDefault();
     const title = event.target.title.value;
@@ -19,15 +33,10 @@ const CreateBenchmark: React.FC = () => {
     if (title === '' || subject === '') {
       setMessage('At least one field is blank');
       setStatus('Error');
-      setId('');
       return;
     }
 
-    await createBenchmark(title, subject, difficulty).then((data) => {
-      setMessage('Your benchmark' + data.title + ' have been saved');
-      setStatus('Success');
-      setId(data.id!);
-    });
+    mutate({ title, subject, difficulty });
   };
 
   return (

src/hooks/benchmark.ts

@@ -1,5 +1,5 @@
-import { useQuery } from 'react-query';
 import axios, { AxiosResponse } from 'axios';
+import { useQuery } from 'react-query';
 import benchmarkModel from '../components/Benchmarks/BenchmarkModel';
 import useToken from './token';
 
@@ -37,22 +37,18 @@ export function useBenchmarkSList() {
   });
 }
 
-export async function createBenchmark(
-  title: string,
-  subject: string,
-  difficulty: string,
-): Promise<benchmarkModel> {
+export async function createBenchmark(bench: {
+  title: string;
+  subject: string;
+  difficulty: string;
+}): Promise<benchmarkModel> {
   const res: AxiosResponse<benchmarkModel> = await axios.post(
     `${process.env.REACT_APP_API_ENDPOINT}/benchmarks`,
+    bench,
     {
-      title,
-      subject,
-      difficulty,
-    },
-    {
+      timeout: 5000,
       headers: {
-        Authorization: 'Bearer ' + localStorage.getItem('access_token'),
-        // 'Authorization': 'Bearer ' + useToken() //
+        Authorization: 'Bearer ' + localStorage.getItem('access_token'), // FIX ME
       },
     },
   );