Merge pull request #60 from ProvideQ/feat/load-examples

Load examples
ProvideQ · Jan 9, 2025 · 20fdd50 · 20fdd50
2 parents 6b827a8 + ef41492
commit 20fdd50
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 7 deletions.
diff --git a/src/api/ToolboxAPI.ts b/src/api/ToolboxAPI.ts
@@ -142,3 +142,12 @@ export async function fetchSolverSettings(
       return [];
     });
 }
+
+export async function fetchExampleProblems(problemTypeId: string) {
+  return fetch(`${baseUrl()}/problems/${problemTypeId}/examples`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  }).then((response) => response.json());
+}
diff --git a/src/components/solvers/EditorControls.tsx b/src/components/solvers/EditorControls.tsx
@@ -2,17 +2,19 @@ import {
   ButtonGroup,
   HStack,
   IconButton,
+  Select,
   Text,
   Tooltip,
 } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
 import {
   TbDownload,
   TbHelp,
   TbRepeat,
   TbTrash,
   TbUpload,
 } from "react-icons/tb";
-import { baseUrl } from "../../api/ToolboxAPI";
+import { baseUrl, fetchExampleProblems } from "../../api/ToolboxAPI";
 import { chooseFile } from "./FileInput";
 
 export interface EditorControlsProps {
@@ -40,6 +42,11 @@ export interface EditorControlsProps {
    * If omitted, the documentation link will point to the API docs.
    */
   documentationLink?: string;
+
+  /**
+   * Problem type id.
+   */
+  problemTypeId: string;
 }
 
 /**
@@ -75,15 +82,40 @@ const upload = async (onUpload: (uploadContent: string) => void) => {
  * messages, an upload, a download and a help button.
  */
 export const EditorControls = (props: EditorControlsProps) => {
-  const documentationLink = props.documentationLink || baseUrl();
+  const [examples, setExamples] = useState<string[]>([]);
+
+  const documentationLink = props.documentationLink ?? baseUrl();
+
+  useEffect(() => {
+    fetchExampleProblems(props.problemTypeId).then((json) => setExamples(json));
+  }, [props.problemTypeId]);
 
   return (
     <HStack justifyContent={"space-between"} width="100%">
-      {props.errorText ? (
-        <Text textColor="tomato">{props.errorText}</Text>
-      ) : (
-        <Text as="i">{props.idleText}</Text>
-      )}
+      <HStack>
+        {examples.length > 0 && (
+          <Select
+            placeholder="Load example"
+            overflow="hidden"
+            textOverflow="ellipsis"
+            width="10rem"
+            onChange={(e) => props.setEditorContent(e.target.value)}
+          >
+            {examples.map((example) => (
+              <option key={example} value={example}>
+                {example.length > 100 ? example.slice(0, 100) + "..." : example}
+              </option>
+            ))}
+          </Select>
+        )}
+
+        {props.errorText ? (
+          <Text textColor="tomato">{props.errorText}</Text>
+        ) : (
+          <Text as="i">{props.idleText}</Text>
+        )}
+      </HStack>
+
       <ButtonGroup isAttached variant="outline" colorScheme="teal">
         <Tooltip label="Download problem from editor">
           <IconButton

diff --git a/src/components/solvers/TextInputMask.tsx b/src/components/solvers/TextInputMask.tsx
@@ -47,6 +47,7 @@ export const TextInputMask = (props: TextInputMaskProperties) => {
       </Head>
 
       <EditorControls
+        problemTypeId={props.problemTypeId}
         errorText={errorString}
         idleText={props.textPlaceholder + " 👇"}
         setEditorContent={onTextChanged}