feat: link submissions to benchmarks

Author: Mikadows

src/components/Benchmarks/BenchmarkDetail.tsx

@@ -1,13 +1,13 @@
-import React, { Fragment, useEffect, useRef, useState } from 'react';
-import { Redirect } from 'react-router-dom';
-import { BenchmarkServices } from '../../api/BenchmarkServices';
+import React, { Fragment, useRef, useState } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
 import Header from '../Page/Header';
 import Page from '../Page/Page';
 import Editor from '@monaco-editor/react';
 import useProcessInterval from '../../hooks/submissions';
 import Result from '../Dashboard/Result';
 import { Listbox, Transition } from '@headlessui/react';
 import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
+import useBenchmarkDetail from '../../hooks/benchmark';
 
 const languages = [
   {
@@ -30,9 +30,14 @@ const languages = [
   },
 ];
 
-// @ts-ignore
-const BenchmarkDetail = (props) => {
-  const [benchmark, setBenchmark] = useState();
+type BenchmarkDetailParams = {
+  id: string;
+};
+
+const BenchmarkDetail = ({
+  match,
+}: RouteComponentProps<BenchmarkDetailParams>) => {
+  // const [benchmark, setBenchmark] = useState<BenchmarkModel>();
   const [selected, setSelected] = useState(languages[0]);
 
   //Get monaco instance to access code later
@@ -60,36 +65,29 @@ const BenchmarkDetail = (props) => {
     result = <Result status={jobData.status} output={jobData.output} />;
   }
 
-  useEffect(() => {
-    let isMounted = true;
-    BenchmarkServices.getBenchmarkById(props.match.params.id)
-      .then((response) => {
-        if (isMounted) {
-          // @ts-ignore
-          setBenchmark(response);
-        }
-        return () => {
-          isMounted = false;
-        };
-      })
-      .catch((e) => {
-        // @ts-ignore
-        setBenchmark('');
-        console.log('Error : ' + e);
-      });
-  }, [setBenchmark, props.match.params.id]);
+  const {
+    isLoading: isBenchmarkLoading,
+    isError: isBenchmarkError,
+    data: benchmarkData,
+    error,
+  } = useBenchmarkDetail(match.params.id);
+
+  if (isBenchmarkLoading) {
+    return <span>Loading....</span>;
+  }
 
-  if (benchmark === '' || undefined) {
-    return <Redirect to="/404" />;
+  if (isBenchmarkError) {
+    if (error) {
+      return <span>Error: {error.message}</span>;
+    }
   }
 
+  console.log(benchmarkData);
+
   return (
     <Page>
       <Header
-        title={
-          // @ts-ignore
-          benchmark === undefined ? '' : benchmark.title
-        }
+        title={benchmarkData?.title || 'eee'}
         button="Back"
         navTo="/benchmarks"
       />
@@ -194,12 +192,7 @@ const BenchmarkDetail = (props) => {
                 </Listbox>
               </div>
             </div>
-            <p>
-              {
-                // @ts-ignore
-                benchmark === undefined ? '' : benchmark.subject
-              }
-            </p>
+            <p>{benchmarkData?.subject || ''}</p>
           </div>
         </div>
         <div className="grid flex-1">
@@ -216,7 +209,11 @@ const BenchmarkDetail = (props) => {
             <button
               className="bg-blue-500 hover:bg-blue-700 text-white font-bold mt-2 py-2 px-4 rounded"
               onClick={() => {
-                mutate(editorRef.current.getValue());
+                mutate({
+                  code: editorRef.current.getValue(),
+                  benchmarkId:
+                    benchmarkData?.id !== undefined ? benchmarkData.id : '',
+                });
               }}
             >
               Run code

src/components/Benchmarks/BenchmarkModel.ts

@@ -1,18 +1,18 @@
 export default class benchmarkModel {
-  id: String | undefined;
-  title: String | undefined;
-  subject: String | undefined;
+  id: string | undefined;
+  title: string | undefined;
+  subject: string | undefined;
   gitUrl: null | undefined;
-  createdAt: String | undefined;
-  difficulty: String | undefined;
+  createdAt: string | undefined;
+  difficulty: string | undefined;
   creator:
     | {
-        id: String | undefined;
-        name: String | undefined;
-        username: String | undefined;
-        email: String | undefined;
-        createdAt: String | undefined;
-        updatedAt: String | undefined;
+        id: string | undefined;
+        name: string | undefined;
+        username: string | undefined;
+        email: string | undefined;
+        createdAt: string | undefined;
+        updatedAt: string | undefined;
       }
     | undefined;
 }

src/hooks/benchmark.ts

@@ -0,0 +1,23 @@
+import { useQuery } from 'react-query';
+import axios from 'axios';
+import benchmarkModel from '../components/Benchmarks/BenchmarkModel';
+import useToken from './token';
+
+export default function useBenchmarkDetail(id: string) {
+  const { token } = useToken();
+
+  return useQuery<benchmarkModel, Error>(`benchmark-${id}`, async () => {
+    if (id) {
+      const { data } = await axios.get(
+        `${process.env.REACT_APP_API_ENDPOINT}/benchmarks/${id}`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        },
+      );
+      console.log(data);
+      return data;
+    }
+  });
+}

src/hooks/submissions.ts

@@ -15,7 +15,13 @@ function useProcessInterval({
   const { token } = useToken();
 
   // 1: Handle code submission
-  async function createJob(code: string) {
+  async function createJob({
+    code,
+    benchmarkId,
+  }: {
+    code: string;
+    benchmarkId: string;
+  }) {
     const response = await fetch(
       `${process.env.REACT_APP_API_ENDPOINT}/submissions`,
       {
@@ -27,6 +33,7 @@ function useProcessInterval({
         body: JSON.stringify({
           language: 'cpython3',
           code: code,
+          benchmarkId: benchmarkId,
         }),
       },
     );