fixed table sizing with length of notes

.env

@@ -1 +1 @@
-VITE_API_URL=api-url:port
+VITE_API_URL=api-url:port

package.json

@@ -21,7 +21,7 @@
     "@mantine/hooks": "^7.13.1",
     "@tabler/icons-react": "3.17.0",
     "dayjs": "^1.11.13",
-    "nuqs": "^2.2.1",
+    "nuqs": "^2.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",

src/components/DataTable.tsx

@@ -1,5 +1,6 @@
 import { Table } from "@mantine/core";
 import { useMantineTheme } from "@mantine/core";
+import { Input, Textarea } from "@mantine/core";
 
 interface DataTableProps {
   data?: MCAPFileInformation[];
@@ -17,7 +18,7 @@ export default function DataTable({
   setSelectedData,
 }: DataTableProps) {
   const theme = useMantineTheme();
-  
+
   const setPreviewData = (file: MCAPFileInformation) => {
     if (selectedRow === file.id) {
       setSelectedRow("");
@@ -30,8 +31,10 @@ export default function DataTable({
 
   // Take out when API server team implements filename id in their get route
   const getFileNameWithoutExtension = (fileNameWithExtension: string) => {
-    const lastDotIndex = fileNameWithExtension.lastIndexOf('.');
-    return lastDotIndex !== -1 ? fileNameWithExtension.slice(0, lastDotIndex) : fileNameWithExtension;
+    const lastDotIndex = fileNameWithExtension.lastIndexOf(".");
+    return lastDotIndex !== -1
+      ? fileNameWithExtension.slice(0, lastDotIndex)
+      : fileNameWithExtension;
   };
 
   const rows = !data ? (
@@ -51,29 +54,49 @@ export default function DataTable({
       <Table.Tr
         key={file.id}
         onClick={() => setPreviewData(file)}
-
         bg={selectedRow === file.id ? theme.primaryColor : ""}
       >
-        <Table.Td>{getFileNameWithoutExtension(file.mcap_files[0].file_name)}</Table.Td>
+        <Table.Td style={{ paddingLeft: "25px" }}>
+          {getFileNameWithoutExtension(file.mcap_files[0].file_name)}
+        </Table.Td>
         <Table.Td>{file.date}</Table.Td>
         <Table.Td>{file.location}</Table.Td>
-        <Table.Td>{file.notes}</Table.Td>
+
+        {/* Change back to notes once notes field is implemented in the server */}
+        {/* <Table.Td>{file.car_model}</Table.Td> */}
+        <Table.Td style={{ paddingRight: "25px" }}>
+          <Input.Wrapper>
+            <Textarea
+              variant="unstyled"
+              value={file.notes}
+              style={{ whiteSpace: "normal", wordWrap: "break-word" }}
+              readOnly
+              placeholder="No Note Available"
+              minRows={1}
+              maxRows={4}
+            />
+          </Input.Wrapper>
+        </Table.Td>
       </Table.Tr>
     ))
   );
   return (
-    <Table.ScrollContainer h="100%" minWidth={800} style={{ overflowY: 'auto' }}>
+    <Table.ScrollContainer
+      h="100%"
+      minWidth={800}
+      style={{ overflowY: "auto" }}
+    >
       <Table
         stickyHeader
         highlightOnHover={data && data.length > 0}
         highlightOnHoverColor={"#F8F9FA"}
       >
         <Table.Thead bg={"#D1BF80"}>
           <Table.Tr>
-            <Table.Th>Name</Table.Th>
+            <Table.Th style={{ paddingLeft: "25px" }}>Name</Table.Th>
             <Table.Th>Date</Table.Th>
             <Table.Th>Location</Table.Th>
-            <Table.Th>Notes</Table.Th>
+            <Table.Th style={{ paddingRight: "25px" }}>Notes</Table.Th>
           </Table.Tr>
         </Table.Thead>
         <Table.Tbody>{rows}</Table.Tbody>

src/components/FileUpload.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import { Modal, Button, Notification, FileInput } from '@mantine/core';
-import '@/css/FileUpload.css';
+import React, { useState } from "react";
+import { Modal, Button, Notification, FileInput } from "@mantine/core";
+import "@/css/FileUpload.css";
 
 interface FileUploadProps {
   uploadUrl: string;
@@ -25,6 +25,24 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
     setError(null);
     setSuccess(null)
     if (selectedFiles.length > 0) {
+      const formData = new FormData();
+      selectedFiles.forEach((file) => {
+        formData.append("files", file);
+      });
+
+      try {
+        const response = await fetch(uploadUrl, {
+          method: "POST",
+          body: formData,
+        });
+
+        if (!response.ok) {
+          setError("Upload failed. Network response was not ok.");
+          return;
+        }
+
+        const data = await response.json();
+        console.log("Upload successful:", data);
       try {
         const formData = new FormData();
         selectedFiles.forEach(file => {
@@ -57,11 +75,12 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
 
         setSelectedFiles([]);
       } catch (error) {
-        console.error('Upload failed:', error);
-        setError('An error occurred while uploading. Please try again.');
+        console.error("Upload failed:", error);
+        setError("An error occurred while uploading. Please try again.");
       }
-    } else {
-      setError('Please select files to upload.');
+    } catch (error) {
+      setError("Please select files to upload.");
+    }
     }
     setLoading(false);
   };
@@ -86,7 +105,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
         onClose={handleClose}
         title="Select files to upload"
         centered
-        style={{ textAlign: "center" }} 
+        style={{ textAlign: "center" }}
       >
         <div className="files">
           <FileInput
@@ -95,7 +114,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
             onChange={handleFileChange}
             placeholder="Select files to upload"
             label="Choose files"
-            style={{ display: 'block', margin: '0 auto' }}
+            style={{ display: "block", margin: "0 auto" }}
           />
           {selectedFiles.length > 0 && (
             <div>
@@ -117,7 +136,11 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
           </Notification>
         )}
         {error && (
-          <Notification color="red" onClose={() => setError(null)} style={{ marginTop: 10 }}>
+          <Notification
+            color="red"
+            onClose={() => setError(null)}
+            style={{ marginTop: 10 }}
+          >
             {error}
           </Notification>
         )}

src/components/Navbar.tsx

@@ -1,7 +1,7 @@
 import "@mantine/core/styles.css";
 import "@/css/Navbar.css";
 import { NavLink } from "react-router-dom";
-import FileUpload from "@/components/FileUpload"
+import FileUpload from "@/components/FileUpload";
 
 const mainLinksData = [
   { name: "Files", url: "/" },
@@ -27,6 +27,7 @@ export default function Navbar() {
       />
       {links}
 
+      {/* Once POST API is out -- Currently WIP */}
       <FileUpload uploadUrl={`${import.meta.env.VITE_API_URL}/api/v2/mcaps/bulk_upload`}/>
 
       {/* Optionally render active link or other content here */}