Merge branch 'main' into scroll-ui

Author: jyuenbeep

.env

@@ -1,2 +1 @@
-VITE_API_URL=https://hytechracing.duckdns.org
- 
+VITE_API_URL=api-url:port

.gitignore

@@ -23,4 +23,8 @@ dist-ssr
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?
+
+.env
+.env.local
+.env.*

package-lock.json

@@ -21,6 +21,7 @@
     "@mantine/hooks": "^7.13.1",
     "@tabler/icons-react": "3.17.0",
     "dayjs": "^1.11.13",
+    "nuqs": "^2.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",
@@ -54,7 +55,7 @@
     "storybook": "^8.3.4",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.10"
+    "vite": "^5.4.11"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": [

package.json

@@ -80,6 +80,7 @@ export default function DataTable({
             />
           </Input.Wrapper>
         </Table.Td>
+        
       </Table.Tr>
     ))
   );

src/components/DataTable.tsx

@@ -11,6 +11,8 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
 
   const handleFileChange = (files: File[]) => {
     if (files.length > 0) {
@@ -19,6 +21,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
   };
 
   const handleUpload = async () => {
+    setLoading(true);
     setError(null);
     setSuccess(null)
     if (selectedFiles.length > 0) {
@@ -79,6 +82,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
       setError("Please select files to upload.");
     }
     }
+    setLoading(false);
   };
 
   const toggleModal = () => {
@@ -123,12 +127,9 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
             </div>
           )}
         </div>
-
-        <Button onClick={handleUpload} style={{ marginTop: 10 }}>
-          Upload
-        </Button>
-
-        <Button onClick={handleUpload} style={{ marginTop: 10 }}>Upload</Button>
+        
+        <Button loading={loading} loaderProps={{ type: 'dots' }} onClick={handleUpload} style={{ marginTop: 10 }} disabled={loading}>Upload</Button>
+        
         {success && (
           <Notification color="green" onClose={() => setSuccess(null)} style={{ marginTop: 10 }}>
             {success}

src/components/FileUpload.tsx

@@ -8,6 +8,7 @@ import {
   Table,
   ScrollArea,
   TextInput,
+  Notification,
 } from "@mantine/core";
 import {
   IconDownload,
@@ -23,6 +24,39 @@ interface PreviewCardProps {
 }
 
 function PreviewCard({ selectedData }: PreviewCardProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const handleDelete = async () => {
+    setLoading(true)
+    setError(null);
+    setSuccess(null)
+    try {
+        const response = await fetch(`${import.meta.env.VITE_API_URL}/mcaps/${selectedData?.id}`, {
+          method: 'DELETE',
+        });
+
+        if (!response.ok) {
+          if (response.status === 503) {
+            const errorMsg = await response.text();
+            setError(`Failed to delete: ${errorMsg} \nTry again in a few minutes!`);
+          } else {
+            const errorMsg = await response.text();
+            setError(`Failed to delete: ${errorMsg}`);
+          }
+        } else {
+          const result = await response.json();
+          setSuccess('File deleted successfully!');
+          console.log('Delete successful:', result);
+        }
+    } catch (error) {
+      console.error('Error sending Delete request:', error);
+      setError('An error occurred during file deletion.');
+    }
+    setLoading(false)
+  }
+  
   const formatDate = (dateString: string) => {
     const date = new Date(dateString);
     return date.toLocaleDateString("en-US", {
@@ -158,20 +192,37 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
                   bottom: 0,
                   left: 0,
                   padding: 20,
-                  gap: "10px",
+                  gap: "8px",
                 }}
               >
-                <DownloadButton
-                  buttonText="MCAP"
-                  //One file for now -- can make it dynamically read several files at a time
-                  fileName={selectedData.mcap_files[0].file_name}
-                  signedUrl={selectedData.mcap_files[0].signed_url ?? null}
-                />
-                <DownloadButton
-                  buttonText="MAT"
-                  fileName={selectedData.mat_files[0].file_name}
-                  signedUrl={selectedData.mat_files[0].signed_url}
-                />
+                <div>
+                  {selectedData.mcap_files.map((item) => (
+                    <DownloadButton
+                      buttonText="MCAP"
+                      fileName={item.file_name}
+                      signedUrl={item.signed_url ?? null}
+                    />
+                  ))}
+                  {selectedData.mat_files.map((item) => (
+                    <DownloadButton
+                      buttonText="MAT"
+                      fileName={item.file_name}
+                      signedUrl={item.signed_url}
+                    />
+                  ))}
+                  <Button loading={loading} loaderProps={{ type: 'dots' }} size="compact-md" color="red" onClick={handleDelete}>Delete</Button>
+                  {success && (
+                    <Notification color="green" onClose={() => setSuccess(null)} style={{ marginTop: 10 }}>
+                      {success}
+                    </Notification>
+                  )}
+                  {error && (
+                    <Notification color="red" onClose={() => setError(null)} style={{ marginTop: 10 }}>
+                      {error}
+                    </Notification>
+                  )}
+                </div>
+                
               </div>
             </>
           ) : (

src/components/PreviewCard.tsx

@@ -1,44 +1,24 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { MultiSelect } from "@mantine/core";
 import "@/css/SchemaSearch.css";
+import { parseAsArrayOf, parseAsString, useQueryState } from "nuqs";
 
 interface SchemaSearch {
   schemas: string[];
-  clear: boolean;
 }
 
-const SchemaSearch: React.FC<SchemaSearch> = ({ schemas, clear }) => {
-  const [value, setValue] = useState<string>("");
-  const [selectedSchemas, setSelectedSchemas] = useState<string[]>([]);
-
-  const filteredSchemas = schemas.filter((schema) =>
-    schema.toLowerCase().includes(value.toLowerCase()),
+const SchemaSearch: React.FC<SchemaSearch> = ({ schemas }) => {
+  const [selectedSchemas, setSelectedSchemas] = useQueryState<string[]>(
+    "schemas",
+    parseAsArrayOf(parseAsString).withDefault([]),
   );
-  
-
-  const clearSchema = () => {
-    setValue("");
-    setSelectedSchemas([])
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === "Enter" && filteredSchemas.length > 0) {
-      setValue(filteredSchemas[0]);
-      setValue("")
-    }
-  };
-
-  useEffect(() => {
-    clearSchema();
-  }, [clear]);
 
   return (
     <div className="schemasearchbutton">
       <MultiSelect
         label="Schema"
         placeholder="Schema name"
-        data={filteredSchemas}
-        onKeyDown={handleKeyDown}
+        data={schemas}
         value={selectedSchemas}
         onChange={setSelectedSchemas}
         searchable