feat: Added code highlight tabs

MathisBurger · Nov 5, 2024 · 48187f7 · 48187f7
1 parent fe98f03
commit 48187f7
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 11 deletions.
diff --git a/web/components/CodeDisplay.tsx b/web/components/CodeDisplay.tsx
@@ -1,14 +1,15 @@
 import { MongoTaskFile, MongoTestFile } from "@/service/types/tasky";
 import { Card, Text } from "@mantine/core";
-import { CodeHighlight } from "@mantine/code-highlight";
-import { useMemo } from "react";
+import {CodeHighlightTabs} from "@mantine/code-highlight";
+import {useCallback} from "react";
+import FileIcon from "@/components/FileIcon";
 
 interface CodeDisplayProps {
-  file: MongoTestFile | MongoTaskFile | null;
+  files: (MongoTestFile | MongoTaskFile)[];
 }
 
-const CodeDisplay = ({ file }: CodeDisplayProps) => {
-  const language = useMemo<string | undefined>(() => {
+const CodeDisplay = ({ files }: CodeDisplayProps) => {
+  const language = useCallback((file: MongoTestFile | MongoTaskFile) => {
     if (null === file) return undefined;
     switch (file.file_name.split(".").pop()) {
       case "java":
@@ -20,9 +21,9 @@ const CodeDisplay = ({ file }: CodeDisplayProps) => {
       default:
         return file.file_name.split(".").pop();
     }
-  }, [file]);
+  }, []);
 
-  if (null === file) {
+  if (files.length === 0) {
     return (
       <Card>
         <Text>No file selected</Text>
@@ -32,9 +33,17 @@ const CodeDisplay = ({ file }: CodeDisplayProps) => {
 
   return (
     <Card>
-      <CodeHighlight
-        code={file?.content}
-        language={language}
+      <CodeHighlightTabs
+        code={files.map((file: MongoTestFile|MongoTaskFile) => ({
+          fileName: file.file_name,
+            language: language(file),
+            code: file.content,
+            icon: <FileIcon
+                name={file.file_name}
+                isFolder={false}
+                expanded={false}
+            />
+        }))}
         copyLabel="Copy Code"
         copiedLabel="Copied!"
       />

diff --git a/web/components/FileStructureDisplay.tsx b/web/components/FileStructureDisplay.tsx
@@ -44,6 +44,7 @@ const FileStructureDisplay = ({
   }
   const { user } = useCurrentUser();
   const api = useApiServiceClient();
+  const [selectedFiles, setSelectedFiles] = useState<(MongoTaskFile|MongoTestFile)[]>([]);
 
   const filesFlattened = useMemo<FileStructureFile[]>(
     () => flattenStructureToFiles(structure),
@@ -162,6 +163,16 @@ const FileStructureDisplay = ({
     return null;
   }, [selected, contents, getApiCall, solutionId]);
 
+  useEffect(() => {
+    if (selected) {
+      const newFile = getSelectedValue();
+      if (newFile && selectedFiles.indexOf(newFile) === -1) {
+        setSelectedFiles([...selectedFiles, newFile]);
+      }
+
+    }
+  }, [getSelectedValue, selected]);
+
   useEffect(() => {
     if (loadAll) {
       getApiCall(
@@ -208,7 +219,7 @@ const FileStructureDisplay = ({
         {loading ? (
           <CentralLoading />
         ) : (
-          <CodeDisplay file={getSelectedValue()} />
+          <CodeDisplay files={selectedFiles} />
         )}
       </Grid.Col>
     </Grid>