1 files changed, 112 insertions, 0 deletions
diff --git a/benchmark/frontend/src/components/index/SelectedTask.tsx b/benchmark/frontend/src/components/index/SelectedTask.tsx
new file mode 100644
index 000000000..7a6b712b7
--- /dev/null
+++ b/benchmark/frontend/src/components/index/SelectedTask.tsx
@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+
+import tw from "tailwind-styled-components";
+
+import { TaskData } from "../../lib/types";
+import RunButton from "./RunButton";
+import MockCheckbox from "./MockCheckbox";
+
+interface SelectedTaskProps {
+  selectedTask: TaskData | null;
+  isMock: boolean;
+  setIsMock: React.Dispatch<React.SetStateAction<boolean>>;
+  cutoff: number | null;
+  setResponseData: React.Dispatch<React.SetStateAction<any>>;
+  allResponseData: any[];
+  setAllResponseData: React.Dispatch<React.SetStateAction<any[]>>;
+}
+
+const SelectedTask: React.FC<SelectedTaskProps> = ({
+  selectedTask,
+  isMock,
+  setIsMock,
+  cutoff,
+  setResponseData,
+  setAllResponseData,
+  allResponseData,
+}) => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const runTest = async () => {
+    // If there's no selected task, do nothing
+    if (!selectedTask?.name) return;
+
+    const testParam = selectedTask.name;
+    setIsLoading(true);
+    try {
+      let url = `http://localhost:8000/run_single_test?test=${testParam}&mock=${isMock}`;
+      cutoff && !isMock && (url += `&cutoff=${cutoff}`);
+      const response = await fetch(url);
+      const data = await response.json();
+
+      if (data["returncode"] > 0) {
+        throw new Error(data["stderr"]);
+      } else {
+        const jsonObject = JSON.parse(data["stdout"]);
+        setAllResponseData([...allResponseData, jsonObject]);
+        setResponseData(jsonObject);
+      }
+    } catch (error) {
+      console.error("There was an error fetching the data", error);
+    }
+    setIsLoading(false);
+  };
+
+  return (
+    <>
+      <TaskName>{selectedTask?.name}</TaskName>
+      <TaskPrompt>{selectedTask?.task}</TaskPrompt>
+      <Detail>
+        <b>Cutoff:</b> {selectedTask?.cutoff}
+      </Detail>
+      <Detail>
+        <b>Description:</b> {selectedTask?.info?.description}
+      </Detail>
+      <Detail>
+        <b>Difficulty:</b> {selectedTask?.info?.difficulty}
+      </Detail>
+      <Detail>
+        <b>Category:</b> {selectedTask?.category.join(", ")}
+      </Detail>
+      <RunButton
+        cutoff={selectedTask?.cutoff}
+        isLoading={isLoading}
+        testRun={runTest}
+        isMock={isMock}
+      />
+      <MockCheckbox isMock={isMock} setIsMock={setIsMock} />
+    </>
+  );
+};
+
+export default SelectedTask;
+
+const TaskName = tw.h1`
+    font-bold
+    text-2xl
+    break-words
+`;
+
+const TaskPrompt = tw.p`
+    text-gray-900
+    break-words
+`;
+const Detail = tw.p`
+    mt-2
+`;
+
+const MockCheckboxInput = tw.input`
+    border 
+    rounded 
+    focus:border-blue-400 
+    focus:ring 
+    focus:ring-blue-200 
+    focus:ring-opacity-50
+`;
+
+const CheckboxWrapper = tw.label`
+    flex 
+    items-center 
+    space-x-2 
+    mt-2
+`;