Feature: Update UI after location assigned (Missing-locations)

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

@@ -9,22 +9,19 @@ import { Button } from "@/components/ui/button";
 import { SortAsc, SortDesc } from "lucide-react";
 
 export default function MissingLocationDates() {
-  const { updateContext } = useMissingLocationContext();
+  const { dates, updateContext } = useMissingLocationContext();
   const router = useRouter();
-  const [dateRecords, setDateRecords] = React.useState<
-    IMissingLocationDatesResponse[]
-  >([]);
   const [filters, setFilters] = useState<{ sortBy: string, sortOrder: string }>({ sortBy: "date", sortOrder: "desc" });
   const [loading, setLoading] = useState(false);
 
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
-  const fetchData = async () => {
+  const fetchData = () => {
     return listMissingLocationDates({
       sortBy: filters.sortBy,
       sortOrder: filters.sortOrder,
     })
-      .then(setDateRecords)
+      .then((r) => updateContext({dates: r}))
       .catch(setErrorMessage)
       .finally(() => setLoading(false));
   };
@@ -68,7 +65,7 @@ export default function MissingLocationDates() {
         </div>
       </div>
 
-      {dateRecords.map((record) => (
+      {dates.map((record) => (
         <MissingLocationDateItem
           key={record.date}
           record={record}

src/contexts/MissingLocationContext.tsx

@@ -1,17 +1,20 @@
+import { IMissingLocationDatesResponse } from "@/handlers/api/asset.handler";
 import { IAsset } from "@/types/asset";
 import { createContext, useContext } from "react";
 
 export interface IMissingLocationConfig {
   startDate?: string;
   selectedIds: string[];
   assets: IAsset[];
+  dates: IMissingLocationDatesResponse[];
 }
 
 export interface MissingLocationContext extends IMissingLocationConfig {
   updateContext: (newConfig: Partial<MissingLocationContext>) => void;
 }
 const MissingLocationContext = createContext<MissingLocationContext>({
   startDate: undefined,
+  dates: [],
   selectedIds: [],
   assets: [],
   updateContext: () => { },

src/pages/assets/missing-locations.tsx

@@ -13,6 +13,7 @@ import MissingLocationContext, {
 import { updateAssets } from "@/handlers/api/asset.handler";
 
 import { IPlace } from "@/types/common";
+import { isSameDay } from "date-fns";
 import { useRouter } from "next/router";
 import React, { useMemo } from "react";
 
@@ -25,21 +26,41 @@ export default function MissingLocations() {
     startDate: startDate || undefined,
     selectedIds: [],
     assets: [],
+    dates: []
   });
 
   const selectedAssets = useMemo(() => config.assets.filter((a) => config.selectedIds.includes(a.id)), [config.assets, config.selectedIds]) ;
 
-  const handleSubmit = (place: IPlace) => {
-    return updateAssets({
+  const handleSubmit = async (place: IPlace) => {
+    await updateAssets({
       ids: config.selectedIds,
       latitude: place.latitude,
       longitude: place.longitude,
-    }).then(() => {
-      setConfig({
-        ...config,
-        selectedIds: [],
-      });
-    })
+    });
+
+    const newAssets = config.assets.filter(asset => !config.selectedIds.includes(asset.id));
+
+    if (config.startDate) {
+      const dayRecord = config.dates.filter(f => isSameDay(new Date(f.date), new Date(config.startDate!)));
+
+      if (dayRecord.length === 1) {
+        if (newAssets.length > 0)
+          dayRecord[0].asset_count = newAssets.length;
+        else {
+          const indexToRemove = config.dates.findIndex(v=>isSameDay(v.date, dayRecord[0].date));
+
+          if (indexToRemove !== -1) {
+            config.dates.splice(indexToRemove, 1);
+          }
+        }
+      }
+    }
+
+    setConfig({
+      ...config,
+      selectedIds: [],
+      assets: newAssets
+    });
   };
 
   return (