fixed table sizing with length of notes

.env

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

src/App.tsx

@@ -0,0 +1,45 @@
+import "@mantine/core/styles.css";
+import { MantineProvider } from "@mantine/core";
+import { theme } from "@/theme";
+import { data } from "@/data/sampledata";
+import { useState } from "react";
+import Navbar from "@/components/Navbar";
+import SearchBar from "@/components/SearchBar";
+import "@/css/App.css";
+import DataTable from "@/components/DataTable";
+import PreviewCard from "@/components/PreviewCard";
+
+export default function App() {
+  const [filteredData, setFilteredData] = useState<MCAPFileInformation[]>(data);
+
+  return (
+    <MantineProvider theme={theme}>
+      <div className="app-container">
+        <header className="navbar">
+          <Navbar />
+        </header>
+
+        <div className="main-content static">
+          <div className="results-container">
+
+            <div className="table-contain-result scrollable-container">
+              <div className="scrollable">
+                <DataTable data={filteredData} />
+              </div>
+            </div>
+
+            <div className="search-container scrollable">
+              <SearchBar setFilteredData={setFilteredData}/>
+            </div>
+
+          </div>
+          <div className="preview-contain-result">
+            <PreviewCard />
+          </div>
+        </div>
+      </div>
+
+      {/* <PreviewCard /> */}
+    </MantineProvider>
+  );
+}

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,18 +54,42 @@ 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>
+          {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>
+          <Input.Wrapper>
+            <Textarea
+              variant="unstyled"
+              value="
+                    testing long text text text text text text text text text text text text text text text text text text text text text text"
+              //  now with four rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows"
+              //  now with four rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows"
+              //  now with four rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows rows"
+              style={{ whiteSpace: "normal", wordWrap: "break-word" }}
+              readOnly
+              placeholder="Note"
+              rows={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}

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 */}

src/components/PreviewCard.tsx

@@ -105,6 +105,63 @@
           <SchemaTable></SchemaTable>
         </Grid.Col>
         <Grid.Col span={3} style={{ position: "relative", padding: "10px" }}>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="md" fw={700}>
+              run 2024-18-10.mcap
+            </Text>
+          </div>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="xs" fw={700}>
+              Date:{" "}
+            </Text>
+            <span style={{ marginLeft: "5px" }} /> {/* Spacer */}
+            <Text size="xs" fw={400}>
+              Fri, Oct 18, 2024
+            </Text>
+          </div>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="xs" fw={700}>
+              Time:{" "}
+            </Text>
+            <span style={{ marginLeft: "5px" }} /> {/* Spacer */}
+            <Text size="xs" fw={400}>
+              12:24:02 PM
+            </Text>
+          </div>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="xs" fw={700}>
+              Location:{" "}
+            </Text>
+            <span style={{ marginLeft: "5px" }} /> {/* Spacer */}
+            <Text size="xs" fw={400}>
+              MRDC
+            </Text>
+          </div>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="xs" fw={700}>
+              Sensors:{" "}
+            </Text>
+            <span style={{ marginLeft: "5px" }} /> {/* Spacer */}
+            <Text size="xs" fw={400}>
+              aero_sensor_1
+            </Text>
+          </div>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              padding: 20,
+              gap: "10px",
+            }}
+          >
+            <div className="previewFileButtons">
+              <DownloadButton buttonText="MAT" />
+              <DownloadButton buttonText="MCAP" />
+            </div>
+          </div>
           {selectedData ? (
             <>
               <PreviewDataDiv name={getFileNameWithoutExtension(selectedData.mcap_files[0].file_name)} val={""} />