Route connection

.env

@@ -0,0 +1 @@
+VITE_API_URL=https://api-url:port

.gitignore

@@ -25,4 +25,4 @@ dist-ssr
 *.sln
 *.sw?
 
-.env
+.env.local

src/components/PreviewCard.tsx

@@ -67,56 +67,26 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
         <Grid.Col span={3} style={{ position: "relative", padding: "10px" }}>
           {selectedData ? (
             <>
-              <div style={{ display: "flex", alignItems: "center" }}>
-                <Text size="md" fw={700}>
-                  {selectedData.mcap_file_name}{" "}
-                </Text>
-              </div>
-              <div style={{ display: "flex", alignItems: "center" }}>
-                <Text size="xs" fw={700}>
-                  Date:{" "}
-                </Text>
-                <span style={{ marginLeft: "5px" }} />
-                <Text size="xs" fw={400}>
-                  {formatDate(selectedData.date)}{" "}
-                </Text>
-              </div>
-              <div style={{ display: "flex", alignItems: "center" }}>
-                <Text size="xs" fw={700}>
-                  Time:{" "}
-                </Text>
-                <span style={{ marginLeft: "5px" }} />
-                <Text size="xs" fw={400}>
-                  {formatTime(selectedData.date)}{" "}
-                </Text>
-              </div>
-              <div style={{ display: "flex", alignItems: "center" }}>
-                <Text size="xs" fw={700}>
-                  Location:{" "}
-                </Text>
-                <span style={{ marginLeft: "5px" }} />
-                <Text size="xs" fw={400}>
-                  {selectedData.location}
-                </Text>
-              </div>
-              <div style={{ display: "flex", alignItems: "center" }}>
-                <Text size="xs" fw={700}>
-                  Sensors:{" "}
-                </Text>
-                <span style={{ marginLeft: "5px" }} />
-                <Text size="xs" fw={400}>
-                  {selectedData.event_type || "N/A"}{" "}
-                </Text>
-              </div>
-              <div style={{ display: "flex", alignItems: "center" }}>
-                <Text size="xs" fw={700}>
-                  Notes:{" "}
-                </Text>
-                <span style={{ marginLeft: "5px" }} />
-                <Text size="xs" fw={400}>
-                  {selectedData.notes || "N/A"}{" "}
-                </Text>
-              </div>
+              <PreviewDataDiv name={selectedData.mcap_file_name} val={""} />
+              <PreviewDataDiv
+                name={"Date"}
+                val={formatDate(selectedData.date)}
+              />
+              <PreviewDataDiv
+                name={"Time"}
+                val={formatTime(selectedData.date)}
+              />
+              <PreviewDataDiv
+                name={"Date"}
+                val={formatDate(selectedData.date)}
+              />
+              <PreviewDataDiv name={"Location"} val={selectedData.location} />
+              <PreviewDataDiv
+                name={"Event Type"}
+                val={selectedData.event_type ?? null}
+              />
+              <PreviewDataDiv name={"Notes"} val={selectedData.notes ?? null} />
+              <PreviewDataDiv name={"Location"} val={selectedData.location} />
               <div
                 style={{
                   display: "flex",
@@ -131,7 +101,7 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
                 <DownloadButton
                   buttonText="MCAP"
                   fileName={selectedData.mcap_file_name}
-                  signedUrl={selectedData.signed_url}
+                  signedUrl={selectedData.signed_url ?? null}
                 />
                 <DownloadButton
                   buttonText="MAT"
@@ -157,6 +127,24 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
 
 export default PreviewCard;
 
+interface PreviewDataDivProps {
+  name: string;
+  val: string | null;
+}
+export function PreviewDataDiv({ name, val }: PreviewDataDivProps) {
+  return (
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <Text size="xs" fw={700}>
+        {name}:{" "}
+      </Text>
+      <span style={{ marginLeft: "5px" }} />
+      <Text size="xs" fw={400}>
+        {val}
+      </Text>
+    </div>
+  );
+}
+
 interface DownloadButtonProps {
   buttonText: string;
   fileName: string;
@@ -194,7 +182,7 @@ export function DownloadButton({
             />
           }
           onClick={() => {
-            window.open(signedUrl, "_blank");
+            window.open(signedUrl ?? undefined, "_blank");
           }}
         >
           {fileName}

src/components/SearchBar.tsx

@@ -1,86 +1,98 @@
-import React, { useState, useEffect } from "react";
-import { data } from "@/data/sampledata";
+import React, { useState } from "react";
 import { eventType, location } from "@/data/dataFilters";
 import "@/css/SearchBar.css";
 
 interface SearchBarWithFilterProps {
   setFilteredData: React.Dispatch<
     React.SetStateAction<MCAPFileInformation[] | undefined>
   >;
+  setSearchFilters: React.Dispatch<React.SetStateAction<SearchFilter>>;
 }
 
-function SearchBarWithFilter({ setFilteredData }: SearchBarWithFilterProps) {
+function SearchBarWithFilter({ setSearchFilters }: SearchBarWithFilterProps) {
   const [searchTerm, setSearchTerm] = useState("");
-  const [filters, setFilters] = useState({
-    location: "",
-    eventType: "",
-    beforeDate: "",
-    afterDate: "",
-  });
-  useEffect(() => {
-    // add code to get data from server here
-    // setFilteredData(serverData)
-  }, []);
+  // const [filters] = useState({
+  //   location: "",
+  //   eventType: "",
+  //   beforeDate: "",
+  //   afterDate: "",
+  // });
 
   // Check if a date is in the valid range
-  const isDateInRange = (
-    dateStr: string,
-    beforeDate: string,
-    afterDate: string,
-  ) => {
-    const itemDate = new Date(dateStr);
-    const before = beforeDate ? new Date(beforeDate) : null;
-    const after = afterDate ? new Date(afterDate) : null;
+  // const isDateInRange = (
+  //   dateStr: string,
+  //   beforeDate: string,
+  //   afterDate: string,
+  // ) => {
+  //   const itemDate = new Date(dateStr);
+  //   const before = beforeDate ? new Date(beforeDate) : null;
+  //   const after = afterDate ? new Date(afterDate) : null;
 
-    if (before && itemDate > before) return false;
-    if (after && itemDate < after) return false;
+  //   if (before && itemDate > before) return false;
+  //   if (after && itemDate < after) return false;
 
-    return true;
-  };
+  //   return true;
+  // };
 
   // Filter logic
-  const handleSearch = () => {
-    const filtered = data.filter((item) => {
-      // Match search term in multiple fields
-      const matchesSearch =
-        item.mcap_file_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        item.matlab_file_name
-          .toLowerCase()
-          .includes(searchTerm.toLowerCase()) ||
-        item.notes?.toLowerCase().includes(searchTerm.toLowerCase());
-
-      // Match filters
-      const matchesLocation =
-        filters.location === "" ||
-        item.location.toLowerCase() === filters.location.toLowerCase();
-      const matchesEventType =
-        filters.eventType.toLowerCase() === "" ||
-        item.event_type?.toLowerCase() === filters.eventType.toLowerCase();
-      const matchesDate = isDateInRange(
-        item.date,
-        filters.beforeDate,
-        filters.afterDate,
-      );
-
-      return (
-        matchesSearch && matchesLocation && matchesEventType && matchesDate
-      );
-    });
-    setFilteredData(filtered);
-  };
+  // const handleSearch = () => {
+  //   const filtered = data.filter((item) => {
+  //     // Match search term in multiple fields
+  //     const matchesSearch =
+  //       item.mcap_file_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+  //       item.matlab_file_name
+  //         .toLowerCase()
+  //         .includes(searchTerm.toLowerCase()) ||
+  //       item.notes?.toLowerCase().includes(searchTerm.toLowerCase());
+
+  //     // Match filters
+  //     const matchesLocation =
+  //       filters.location === "" ||
+  //       item.location.toLowerCase() === filters.location.toLowerCase();
+  //     const matchesEventType =
+  //       filters.eventType.toLowerCase() === "" ||
+  //       item.event_type?.toLowerCase() === filters.eventType.toLowerCase();
+  //     const matchesDate = isDateInRange(
+  //       item.date,
+  //       filters.beforeDate,
+  //       filters.afterDate,
+  //     );
+
+  //     return (
+  //       matchesSearch && matchesLocation && matchesEventType && matchesDate
+  //     );
+  //   });
+  //   setFilteredData(filtered);
+  // };
 
   // Trigger search on filter or search term change
-  useEffect(() => {
-    handleSearch();
-  }, [searchTerm, filters]);
+  // useEffect(() => {
+  //   handleSearch();
+  // }, [searchTerm, filters]);
 
   // Handle filter changes
   function handleFilterChange(
     e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>,
   ) {
-    const { name, value } = e.target;
-    setFilters((prevFilters) => ({
+    const { name } = e.target;
+    const { value } = e.target;
+
+    const filt: SearchFilter = {
+      notes: "",
+      filename: "",
+    };
+
+    if (name == "") {
+      filt.notes = value;
+      filt.filename = value;
+    }
+
+    // console.log("search", filt);
+
+    setSearchFilters((prevFilters) => ({
       ...prevFilters,
+      notes: filt.notes,
+      filename: filt.filename,
       [name]: value,
     }));
   }
@@ -98,7 +110,10 @@ function SearchBarWithFilter({ setFilteredData }: SearchBarWithFilterProps) {
           className="search-bar"
           placeholder="Search by file name or notes..."
           value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
+          onChange={(e) => {
+            handleFilterChange(e);
+            setSearchTerm(e.target.value);
+          }}
         />
 
         {/* Filter Options */}

src/data/sampledata.ts

@@ -95,6 +95,5 @@ export const data: MCAPFileInformation[] = [
     date: "08-29-2024",
     location: "MRDC",
     notes: "car did not turn on",
-    event_type: null,
   },
 ];