scroll date from querystring into view

Author: knom

src/components/assets/missing-location/MissingLocationDateItem.tsx

@@ -3,13 +3,25 @@ import { useMissingLocationContext } from "@/contexts/MissingLocationContext";
 import { IMissingLocationDatesResponse } from "@/handlers/api/asset.handler";
 import { parseDate, formatDate } from "@/helpers/date.helper";
 import { cn } from "@/lib/utils";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 
 interface IProps {
   record: IMissingLocationDatesResponse;
   onSelect: (date: string) => void;
 }
 export default function MissingLocationDateItem({ record, onSelect }: IProps) {
+
+  // Effect to handle scrolling after rendering
+  useEffect(() => {
+    if (startDate === record.date) {
+      itemsRef.current?.scrollIntoView({
+        behavior: "smooth", // Smooth scrolling
+        block: "center", // Center the item in the view
+      });
+    }
+  }, []);
+
+  const itemsRef = useRef<HTMLDivElement | null>(null);
   const { startDate } = useMissingLocationContext()
   const dateLabel = useMemo(() => {
     if (!record.date) return "Unknown"
@@ -22,8 +34,9 @@ export default function MissingLocationDateItem({ record, onSelect }: IProps) {
       key={record.date}
       className={
         cn("flex gap-1 flex-col p-2 py-1 rounded-lg hover:dark:bg-zinc-800 border border-transparent hover:bg-zinc-100 px-4",
-        startDate === record.date ? "bg-zinc-100 dark:bg-zinc-800 border-gray-300 dark:border-zinc-700" : "")
+          startDate === record.date ? "bg-zinc-100 dark:bg-zinc-800 border-gray-300 dark:border-zinc-700" : "")
       }
+      ref={itemsRef}
     >
       <p className="font-mono text-sm">{dateLabel}</p>
       <p className="text-xs text-foreground/50">{record.asset_count} Orphan Assets</p>