More fixes

This commit is contained in:
Luke Vella 2024-10-13 11:48:25 +01:00
parent c9f6b67cbf
commit a13df41bae
No known key found for this signature in database
GPG key ID: 469CAD687F0D784C
2 changed files with 22 additions and 22 deletions

View file

@ -34,8 +34,7 @@ import {
} from "../../../../utils/date-time-utils"; } from "../../../../utils/date-time-utils";
import DateCard from "../../../date-card"; import DateCard from "../../../date-card";
import { useHeadlessDatePicker } from "../../../headless-date-picker"; import { useHeadlessDatePicker } from "../../../headless-date-picker";
import type { DateTimeOption } from ".."; import type { DateTimeOption, DateTimePickerProps } from "../types";
import type { DateTimePickerProps } from "../types";
import { formatDateWithoutTime, formatDateWithoutTz } from "../utils"; import { formatDateWithoutTime, formatDateWithoutTz } from "../utils";
import TimePicker from "./time-picker"; import TimePicker from "./time-picker";
@ -127,7 +126,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
{datepicker.days.map((day, i) => { {datepicker.days.map((day, i) => {
return ( return (
<div <div
key={i} key={day.date.toISOString()}
className={cn("h-11", { className={cn("h-11", {
"border-r": (i + 1) % 7 !== 0, "border-r": (i + 1) % 7 !== 0,
"border-b": i < datepicker.days.length - 7, "border-b": i < datepicker.days.length - 7,
@ -411,11 +410,11 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
}, },
); );
const newOptions: DateTimeOption[] = []; const newOptions: DateTimeOption[] = [];
Object.keys(optionsByDay).forEach( for (const dateString of Object.keys(
(dateString) => { optionsByDay,
times.forEach((time) => { )) {
const start = for (const time of times) {
dateString + time.startTime; const start = dateString + time.startTime;
newOptions.push({ newOptions.push({
type: "timeSlot", type: "timeSlot",
start: start, start: start,
@ -424,9 +423,8 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
.add(duration, "minutes") .add(duration, "minutes")
.format("YYYY-MM-DDTHH:mm"), .format("YYYY-MM-DDTHH:mm"),
}); });
}); }
}, }
);
onChange(newOptions); 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"> <div className="flex flex-wrap gap-3 p-3 sm:gap-4 sm:p-4">
{datepicker.selection {datepicker.selection
.sort((a, b) => a.getTime() - b.getTime()) .sort((a, b) => a.getTime() - b.getTime())
.map((selectedDate, i) => { .map((selectedDate) => {
return ( return (
<DateCard <DateCard
key={i} key={selectedDate.toISOString()}
{...getDateProps(selectedDate)} {...getDateProps(selectedDate)}
// annotation={ // annotation={
// <CompactButton // <CompactButton

View file

@ -17,7 +17,7 @@ export const ParticipantAvatarBar = ({
return ( return (
<ul className="flex items-center -space-x-1"> <ul className="flex items-center -space-x-1">
{participants.slice(0, visibleCount).map((participant, index) => ( {participants.slice(0, visibleCount).map((participant, index) => (
<Tooltip key={index}> <Tooltip key={`${participant.name}-${index}`}>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<li className="z-10 inline-flex items-center justify-center rounded-full ring-2 ring-white"> <li className="z-10 inline-flex items-center justify-center rounded-full ring-2 ring-white">
<OptimizedAvatarImage name={participant.name} size="xs" /> <OptimizedAvatarImage name={participant.name} size="xs" />
@ -45,7 +45,9 @@ export const ParticipantAvatarBar = ({
{participants {participants
.slice(visibleCount, 10) .slice(visibleCount, 10)
.map((participant, index) => ( .map((participant, index) => (
<li key={index}>{participant.name}</li> <li key={`${participant.name}-${index}`}>
{participant.name}
</li>
))} ))}
</ul> </ul>
</TooltipContent> </TooltipContent>