From ef49fc4ce1605f48b49a7a23abfc5039fb8a90ad Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Thu, 13 Jul 2023 02:45:30 +0200
Subject: [PATCH] fix: Remove/Update behaviour of date-overrides

## What does this PR do?

This is not the cleanest approach, but the existing mechanism didn't work in a few situations because of the date sort. The update caused a re-render that caused an invalid unsortedFieldArrayMap.

Reproduction/how to test:

**Updating bug was hit when you changed the date and it went before another date (re-ordering)**; which then modified the wrong date override. This PR replaces the entire array which retains the correct sort order by brute force.

**Delete bug was encountered if the sorted order was not the same as the filtered order, which depends on the order you created the date overrides in**. This PR implements an original order before the sort causing the right item to be removed.

Fixes #8043
---
 apps/web/pages/availability/[schedule].tsx    |  4 ++--
 .../schedules/components/DateOverrideList.tsx | 20 ++++++++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx
index 5be10e58d0..8ebae93942 100644
--- a/apps/web/pages/availability/[schedule].tsx
+++ b/apps/web/pages/availability/[schedule].tsx
@@ -53,7 +53,7 @@ type AvailabilityFormValues = {
 };
 
 const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
-  const { remove, append, update, fields } = useFieldArray<AvailabilityFormValues, "dateOverrides">({
+  const { remove, append, replace, fields } = useFieldArray<AvailabilityFormValues, "dateOverrides">({
     name: "dateOverrides",
   });
   const excludedDates = fields.map((field) => dayjs(field.ranges[0].start).utc().format("YYYY-MM-DD"));
@@ -73,7 +73,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
         <DateOverrideList
           excludedDates={excludedDates}
           remove={remove}
-          update={update}
+          replace={replace}
           items={fields}
           workingHours={workingHours}
         />
diff --git a/packages/features/schedules/components/DateOverrideList.tsx b/packages/features/schedules/components/DateOverrideList.tsx
index 0b7284784a..99d443eae0 100644
--- a/packages/features/schedules/components/DateOverrideList.tsx
+++ b/packages/features/schedules/components/DateOverrideList.tsx
@@ -23,19 +23,25 @@ const useSettings = () => {
 const DateOverrideList = ({
   items,
   remove,
-  update,
+  replace,
   workingHours,
   excludedDates = [],
 }: {
   remove: UseFieldArrayRemove;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  update: any;
+  replace: any;
   items: { ranges: TimeRange[]; id: string }[];
   workingHours: WorkingHours[];
   excludedDates?: string[];
 }) => {
   const { t, i18n } = useLocale();
   const { hour12 } = useSettings();
+
+  const unsortedFieldArrayMap = items.reduce(
+    (map: { [id: string]: number }, { id }, index) => ({ ...map, [id]: index }),
+    {}
+  );
+
   if (!items.length) {
     return <></>;
   }
@@ -54,7 +60,7 @@ const DateOverrideList = ({
 
   return (
     <ul className="border-subtle rounded border" data-testid="date-overrides-list">
-      {items.sort(sortByDate).map((item, index) => (
+      {items.sort(sortByDate).map((item) => (
         <li key={item.id} className="border-subtle flex justify-between border-b px-5 py-4 last:border-b-0">
           <div>
             <h3 className="text-emphasis text-sm">
@@ -81,9 +87,9 @@ const DateOverrideList = ({
               workingHours={workingHours}
               value={item.ranges}
               onChange={(ranges) => {
-                update(index, {
-                  ranges,
-                });
+                // update has very weird side-effects with sorting.
+                replace([...items.filter((currentItem) => currentItem.id !== item.id), { ranges }]);
+                delete unsortedFieldArrayMap[item.id];
               }}
               Trigger={
                 <DialogTrigger asChild>
@@ -103,7 +109,7 @@ const DateOverrideList = ({
                 color="destructive"
                 variant="icon"
                 StartIcon={Trash2}
-                onClick={() => remove(index)}
+                onClick={() => remove(unsortedFieldArrayMap[item.id])}
               />
             </Tooltip>
           </div>