Merge pull request #22 from bleu-fi/add-intial-filter-on-table

Add initial filters on swr table if param is passed, month short on datetime and handle time picker for AM/PM

src/components/DataTable/DataTableToolbar.tsx

@@ -1,5 +1,5 @@
 import { Cross2Icon } from "@radix-ui/react-icons";
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { Button, Input } from "@/components/ui";
 
 import { DataTableFacetedFilter } from "./DataTableFacetedFilter";
@@ -17,6 +17,25 @@ export function DataTableToolbar({
 
   const isFiltered = table.getState().columnFilters.length > 0;
 
+  const initialFilterSet = useRef(false);
+
+  useEffect(() => {
+    if (filters && !initialFilterSet.current) {
+      filters.map((filter) => {
+        const column = table.getColumn(filter.value);
+        if (column) {
+          column.setFilterValue(
+            filter.options
+              .filter((option) => option.defaultSelected)
+              .map((option) => option.value)
+          );
+        }
+        return null;
+      });
+      initialFilterSet.current = true;
+    }
+  }, [filters, table]);
+
   return (
     <div className="flex items-center justify-between">
       <div className="flex flex-1 items-center space-x-2">

src/components/ui/Calendar.tsx

@@ -54,11 +54,21 @@ function Calendar({
 
   const handleTimeChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
     const time = e.target.value;
+    let [hours, minutes] = time.split(":").map((str) => parseInt(str, 10));
+
+    // If the input is not a valid time, set the time to 00:00
+    // This will handle 00 being inputed on 12h format
+    hours = !Number.isFinite(hours) || hours < 0 || hours > 23 ? 0 : hours;
+    minutes =
+      !Number.isFinite(minutes) || minutes < 0 || minutes > 59 ? 0 : minutes;
+
+    const validatedTime = `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
+
     if (!selected) {
-      setTimeValue(time);
+      setTimeValue(validatedTime);
       return;
     }
-    const [hours, minutes] = time.split(":").map((str) => parseInt(str, 10));
+
     const selectedDate = new Date(selected);
     const newSelectedDate = new Date(
       selectedDate.getFullYear(),
@@ -68,7 +78,7 @@ function Calendar({
       minutes
     );
     setSelected(newSelectedDate);
-    setTimeValue(time);
+    setTimeValue(validatedTime);
   };
 
   const handleDaySelect = (date: Date | undefined) => {

src/lib/formatDate.ts

@@ -9,7 +9,7 @@ export function formatDate(date) {
 export function formatDateTime(date: Date | string | number) {
   return Intl.DateTimeFormat("en", {
     year: "numeric",
-    month: "long",
+    month: "short",
     day: "numeric",
     hour: "numeric",
     minute: "numeric",