feat: store date in url when filtering in missing locations and potential albums

Signed-off-by: Varun Raj <mailme@varunraj.in>

src/components/albums/potential-albums/PotentialAlbumsDates.tsx

@@ -5,8 +5,10 @@ import {
 import React, { use, useEffect, useState } from "react";
 import PotentialDateItem from "./PotentialDateItem";
 import { usePotentialAlbumContext } from "@/contexts/PotentialAlbumContext";
+import { useRouter } from "next/router";
 
 export default function PotentialAlbumsDates() {
+  const router = useRouter();
   const { updateContext } = usePotentialAlbumContext();
   const [dateRecords, setDateRecords] = React.useState<
     IPotentialAlbumsDatesResponse[]
@@ -25,6 +27,11 @@ export default function PotentialAlbumsDates() {
 
   const handleSelect = (date: string) => {
     updateContext({ startDate: date });
+    router.push({
+      pathname: router.pathname,
+      query: { startDate: date },
+    })
+    
   };
 
   useEffect(() => {

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

@@ -3,13 +3,14 @@ import { usePotentialAlbumContext } from "@/contexts/PotentialAlbumContext";
 import { IMissingLocationDatesResponse, listMissingLocationDates } from "@/handlers/api/asset.handler";
 import MissingLocationDateItem from "./MissingLocationDateItem";
 import { useMissingLocationContext } from "@/contexts/MissingLocationContext";
+import { useRouter } from "next/router";
 
 export default function MissingLocationDates() {
   const { updateContext } = useMissingLocationContext();
+  const router = useRouter();
   const [dateRecords, setDateRecords] = React.useState<
     IMissingLocationDatesResponse[]
   >([]);
-
   const [loading, setLoading] = useState(false);
 
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -23,6 +24,10 @@ export default function MissingLocationDates() {
 
   const handleSelect = (date: string) => {
     updateContext({ startDate: date });
+    router.push({
+      pathname: router.pathname,
+      query: { startDate: date },
+    });
   };
 
   useEffect(() => {

src/pages/albums/potential-albums.tsx

@@ -13,14 +13,17 @@ import PotentialAlbumContext, {
 } from "@/contexts/PotentialAlbumContext";
 import { addAssetToAlbum, createAlbum } from "@/handlers/api/album.handler";
 import { IAlbum, IAlbumCreate } from "@/types/album";
+import { useRouter } from "next/router";
 import React from "react";
 
 export default function PotentialAlbums() {
   const { toast } = useToast();
   const { id } = useCurrentUser();
 
+  const { query } = useRouter();
+  const { startDate } = query as { startDate: string };
   const [config, setConfig] = React.useState<IPotentialAlbumConfig>({
-    startDate: undefined,
+    startDate: startDate || undefined,
     selectedIds: [],
     assets: [],
   });
@@ -62,6 +65,7 @@ export default function PotentialAlbums() {
       }]
     })
   }
+  
   return (
     <PageLayout className="!p-0 !mb-0">
       <Header
@@ -71,7 +75,7 @@ export default function PotentialAlbums() {
             <Badge variant={"outline"}>
               {config.selectedIds.length} Selected
             </Badge>
-            {config.selectedIds.length === config.assets.length ? (
+            {config.selectedIds.length && config.selectedIds.length === config.assets.length ? (
               <Button
                 variant={"outline"}
                 onClick={() =>

src/pages/assets/missing-locations.tsx

@@ -15,13 +15,16 @@ import MissingLocationContext, {
 import { updateAssets } from "@/handlers/api/asset.handler";
 
 import { IPlace } from "@/types/common";
+import { useRouter } from "next/router";
 import React from "react";
 
 export default function MissingLocations() {
   const { toast } = useToast();
 
+  const { query } = useRouter();
+  const { startDate } = query as { startDate: string };
   const [config, setConfig] = React.useState<IMissingLocationConfig>({
-    startDate: undefined,
+    startDate: startDate || undefined,
     selectedIds: [],
     assets: [],
   });