refactor(benchmarks): convert Benchmark class component to function

Author: Mikadows

src/App.tsx

@@ -4,13 +4,13 @@ import { ReactQueryDevtools } from 'react-query/devtools';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import './App.css';
 import BenchmarkDetail from './components/Benchmarks/BenchmarkDetail';
-import { Benchmarks } from './components/Benchmarks/Benchmarks';
 import { CreateBenchmark } from './components/Benchmarks/CreateBenchmark';
 import Dashboard from './components/Dashboard/Dashboard';
 import Landing from './components/Landing';
 import Login from './components/Login';
 import Register from './components/Register';
 import PrivateRoute from './components/Routing/PrivateRoute';
+import Benchmarks from './components/Benchmarks/Benchmarks';
 
 function App() {
   const queryClient = new QueryClient();

src/api/BenchmarkServices.ts

@@ -24,12 +24,4 @@ export class BenchmarkServices {
     );
     return res.data;
   }
-
-  static async getAllBenchmarks(): Promise<benchmarkModel[]> {
-    return axios
-      .get(`${process.env.REACT_APP_API_ENDPOINT}/benchmarks`)
-      .then((response) => {
-        return response.data;
-      });
-  }
 }

src/components/Benchmarks/Benchmarks.tsx

@@ -1,88 +1,88 @@
-import React from 'react';
-import { BenchmarkServices } from '../../api/BenchmarkServices';
 import Header from '../Page/Header';
 import Page from '../Page/Page';
 import benchmarkModel from './BenchmarkModel';
 import BenchmarkRow from './BenchmarkRow';
+import { useBenchmarkSList } from '../../hooks/benchmark';
 
-export class Benchmarks extends React.Component<
-  {},
-  { benchmarksJson: benchmarkModel[] }
-> {
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      benchmarksJson: [],
-    };
-  }
+const Benchmarks: React.FC = () => {
+  let benchmarks: benchmarkModel[] = [];
+  const {
+    isLoading: isBenchmarksLoading,
+    isError: isBenchmarksError,
+    data: benchmarksData,
+    error,
+  } = useBenchmarkSList();
 
-  onLoadData() {
-    BenchmarkServices.getAllBenchmarks().then((response) => {
-      this.setState({ benchmarksJson: response });
-    });
+  if (isBenchmarksLoading) {
+    return <span>Loading....</span>;
   }
 
-  componentDidMount() {
-    this.onLoadData();
+  if (isBenchmarksError) {
+    if (error) {
+      return <span>Error: {error.message}</span>;
+    }
   }
 
-  render() {
-    return (
-      <Page>
-        <Header title="Benchmarks" button="Create" navTo="/benchmarks/create" />
-        <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-          <div className="flex flex-col">
-            <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-              <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-                <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
-                  <table className="min-w-full divide-y divide-gray-200">
-                    <thead className="bg-gray-50">
-                      <tr>
-                        <th
-                          scope="col"
-                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                        >
-                          Title
-                        </th>
-                        <th
-                          scope="col"
-                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                        >
-                          Subject
-                        </th>
-                        <th
-                          scope="col"
-                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                        >
-                          Difficulty
-                        </th>
-                        <th
-                          scope="col"
-                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                        >
-                          Creator
-                        </th>
-                        <th scope="col" className="relative px-6 py-3">
-                          <span className="sr-only">View</span>
-                        </th>
-                      </tr>
-                    </thead>
+  if (benchmarksData) {
+    benchmarks = benchmarksData;
+  }
 
-                    <tbody className="bg-white divide-y divide-gray-200">
-                      {this.state.benchmarksJson.map((benchmark) => (
-                        <BenchmarkRow
-                          key={benchmark.id?.toString()}
-                          benchmark={benchmark}
-                        />
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
+  return (
+    <Page>
+      <Header title="Benchmarks" button="Create" navTo="/benchmarks/create" />
+      <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+        <div className="flex flex-col">
+          <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+            <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+              <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+                <table className="min-w-full divide-y divide-gray-200">
+                  <thead className="bg-gray-50">
+                    <tr>
+                      <th
+                        scope="col"
+                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Title
+                      </th>
+                      <th
+                        scope="col"
+                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Subject
+                      </th>
+                      <th
+                        scope="col"
+                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Difficulty
+                      </th>
+                      <th
+                        scope="col"
+                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Creator
+                      </th>
+                      <th scope="col" className="relative px-6 py-3">
+                        <span className="sr-only">View</span>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="bg-white divide-y divide-gray-200">
+                    {benchmarks.map((benchmark: benchmarkModel) => (
+                      <BenchmarkRow
+                        key={benchmark.id?.toString()}
+                        benchmark={benchmark}
+                      />
+                    ))}
+                  </tbody>
+                </table>
               </div>
             </div>
           </div>
         </div>
-      </Page>
-    );
-  }
-}
+      </div>
+    </Page>
+  );
+};
+
+export default Benchmarks;

src/hooks/benchmark.ts

@@ -20,3 +20,19 @@ export default function useBenchmarkDetail(id: string) {
     }
   });
 }
+
+export function useBenchmarkSList() {
+  const { token } = useToken();
+
+  return useQuery<benchmarkModel[], Error>(`benchmark`, async () => {
+    const { data } = await axios.get(
+      `${process.env.REACT_APP_API_ENDPOINT}/benchmarks`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      },
+    );
+    return data;
+  });
+}