From a13df41bae9826b23c2a7ab7a6539aed83c3c699 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Sun, 13 Oct 2024 11:48:25 +0100
Subject: [PATCH] More fixes

---
 .../month-calendar/month-calendar.tsx         | 38 +++++++++----------
 .../src/components/participant-avatar-bar.tsx |  6 ++-
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx b/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
index 166a3b104..9824e6384 100644
--- a/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
+++ b/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
@@ -34,8 +34,7 @@ import {
 } from "../../../../utils/date-time-utils";
 import DateCard from "../../../date-card";
 import { useHeadlessDatePicker } from "../../../headless-date-picker";
-import type { DateTimeOption } from "..";
-import type { DateTimePickerProps } from "../types";
+import type { DateTimeOption, DateTimePickerProps } from "../types";
 import { formatDateWithoutTime, formatDateWithoutTz } from "../utils";
 import TimePicker from "./time-picker";
 
@@ -127,7 +126,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
               {datepicker.days.map((day, i) => {
                 return (
                   <div
-                    key={i}
+                    key={day.date.toISOString()}
                     className={cn("h-11", {
                       "border-r": (i + 1) % 7 !== 0,
                       "border-b": i < datepicker.days.length - 7,
@@ -411,22 +410,21 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                                     },
                                   );
                                   const newOptions: DateTimeOption[] = [];
-                                  Object.keys(optionsByDay).forEach(
-                                    (dateString) => {
-                                      times.forEach((time) => {
-                                        const start =
-                                          dateString + time.startTime;
-                                        newOptions.push({
-                                          type: "timeSlot",
-                                          start: start,
-                                          duration,
-                                          end: dayjs(start)
-                                            .add(duration, "minutes")
-                                            .format("YYYY-MM-DDTHH:mm"),
-                                        });
+                                  for (const dateString of Object.keys(
+                                    optionsByDay,
+                                  )) {
+                                    for (const time of times) {
+                                      const start = dateString + time.startTime;
+                                      newOptions.push({
+                                        type: "timeSlot",
+                                        start: start,
+                                        duration,
+                                        end: dayjs(start)
+                                          .add(duration, "minutes")
+                                          .format("YYYY-MM-DDTHH:mm"),
                                       });
-                                    },
-                                  );
+                                    }
+                                  }
                                   onChange(newOptions);
                                 }}
                               >
@@ -462,10 +460,10 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
             <div className="flex flex-wrap gap-3 p-3 sm:gap-4 sm:p-4">
               {datepicker.selection
                 .sort((a, b) => a.getTime() - b.getTime())
-                .map((selectedDate, i) => {
+                .map((selectedDate) => {
                   return (
                     <DateCard
-                      key={i}
+                      key={selectedDate.toISOString()}
                       {...getDateProps(selectedDate)}
                       // annotation={
                       //   <CompactButton
diff --git a/apps/web/src/components/participant-avatar-bar.tsx b/apps/web/src/components/participant-avatar-bar.tsx
index 4c1ab18bf..4fda2f0de 100644
--- a/apps/web/src/components/participant-avatar-bar.tsx
+++ b/apps/web/src/components/participant-avatar-bar.tsx
@@ -17,7 +17,7 @@ export const ParticipantAvatarBar = ({
   return (
     <ul className="flex items-center -space-x-1">
       {participants.slice(0, visibleCount).map((participant, index) => (
-        <Tooltip key={index}>
+        <Tooltip key={`${participant.name}-${index}`}>
           <TooltipTrigger asChild>
             <li className="z-10 inline-flex items-center justify-center rounded-full ring-2 ring-white">
               <OptimizedAvatarImage name={participant.name} size="xs" />
@@ -45,7 +45,9 @@ export const ParticipantAvatarBar = ({
                 {participants
                   .slice(visibleCount, 10)
                   .map((participant, index) => (
-                    <li key={index}>{participant.name}</li>
+                    <li key={`${participant.name}-${index}`}>
+                      {participant.name}
+                    </li>
                   ))}
               </ul>
             </TooltipContent>