From 2904230009da407bba39d45b4d059e60854da1f6 Mon Sep 17 00:00:00 2001 From: Sean Brydon Date: Thu, 26 Oct 2023 10:17:57 +0100 Subject: [PATCH] Store more event info than just slug --- .../components/EventScheduleItem.tsx | 25 ++++-- .../components/EventTypeSelect.tsx | 25 +++--- .../components/LargeCalendar.tsx | 76 +++++++++++-------- packages/features/troubleshooter/store.ts | 18 +++-- 4 files changed, 86 insertions(+), 58 deletions(-) diff --git a/packages/features/troubleshooter/components/EventScheduleItem.tsx b/packages/features/troubleshooter/components/EventScheduleItem.tsx index 32e2eb5ac4..5cd47b2ccb 100644 --- a/packages/features/troubleshooter/components/EventScheduleItem.tsx +++ b/packages/features/troubleshooter/components/EventScheduleItem.tsx @@ -1,18 +1,22 @@ +import Link from "next/link"; + +import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; -import { Label } from "@calcom/ui"; +import { Badge, Label } from "@calcom/ui"; import { useTroubleshooterStore } from "../store"; import { TroubleshooterListItemHeader } from "./TroubleshooterListItemContainer"; export function EventScheduleItem() { - const selectedEventType = useTroubleshooterStore((state) => state.eventSlug); + const { t } = useLocale(); + const selectedEventType = useTroubleshooterStore((state) => state.event); - const { data: schedule, isLoading } = trpc.viewer.availability.schedule.getScheduleByEventSlug.useQuery( + const { data: schedule } = trpc.viewer.availability.schedule.getScheduleByEventSlug.useQuery( { - eventSlug: selectedEventType as string, // Only enabled when selectedEventType is not null + eventSlug: selectedEventType?.slug as string, }, { - enabled: !!selectedEventType, + enabled: !!selectedEventType?.slug, } ); @@ -20,9 +24,18 @@ export function EventScheduleItem() {
} title={schedule?.name ?? "Loading"} + suffixSlot={ + schedule && ( + + + {t("edit")} + + + ) + } />
); diff --git a/packages/features/troubleshooter/components/EventTypeSelect.tsx b/packages/features/troubleshooter/components/EventTypeSelect.tsx index acaa61cad5..c908e6968b 100644 --- a/packages/features/troubleshooter/components/EventTypeSelect.tsx +++ b/packages/features/troubleshooter/components/EventTypeSelect.tsx @@ -1,40 +1,39 @@ -import { useMemo, useEffect } from "react"; +import { useMemo } from "react"; import { trpc } from "@calcom/trpc"; import { SelectField } from "@calcom/ui"; -import { getQueryParam } from "../../bookings/Booker/utils/query-param"; import { useTroubleshooterStore } from "../store"; export function EventTypeSelect() { const { data: eventTypes } = trpc.viewer.eventTypes.list.useQuery(); - const selectedEventType = useTroubleshooterStore((state) => state.eventSlug); - const setSelectedEventType = useTroubleshooterStore((state) => state.setEventSlug); + const selectedEventType = useTroubleshooterStore((state) => state.event); + const setSelectedEventType = useTroubleshooterStore((state) => state.setEvent); - const selectedEventQueryParam = getQueryParam("eventType"); + // const selectedEventQueryParam = getQueryParam("eventType"); const options = useMemo(() => { if (!eventTypes) return []; return eventTypes.map((e) => ({ label: e.title, value: e.slug, + id: e.id, + duration: e.length, })); }, [eventTypes]); - useEffect(() => { - if (selectedEventQueryParam !== selectedEventType && selectedEventQueryParam) { - setSelectedEventType(selectedEventQueryParam); - } - }, [selectedEventQueryParam, selectedEventType, setSelectedEventType]); - return ( option.value === selectedEventType) || options[0]} + value={options.find((option) => option.value === selectedEventType?.slug) || options[0]} onChange={(option) => { if (!option) return; - setSelectedEventType(option.value); + setSelectedEventType({ + slug: option.value, + id: option.id, + duration: option.duration, + }); }} /> ); diff --git a/packages/features/troubleshooter/components/LargeCalendar.tsx b/packages/features/troubleshooter/components/LargeCalendar.tsx index df66ada603..ac220c5cf1 100644 --- a/packages/features/troubleshooter/components/LargeCalendar.tsx +++ b/packages/features/troubleshooter/components/LargeCalendar.tsx @@ -3,62 +3,72 @@ import { useMemo } from "react"; import dayjs from "@calcom/dayjs"; import { Calendar } from "@calcom/features/calendars/weeklyview"; -import { BookingStatus } from "@calcom/prisma/enums"; -import { trpc } from "@calcom/trpc/react"; +import type { CalendarAvailableTimeslots } from "@calcom/features/calendars/weeklyview/types/state"; +import { useTimePreferences } from "../../bookings/lib/timePreferences"; +import { useSchedule } from "../../schedules/lib/use-schedule"; import { useTroubleshooterStore } from "../store"; export const LargeCalendar = ({ extraDays }: { extraDays: number }) => { + const { timezone } = useTimePreferences(); const selectedDate = useTroubleshooterStore((state) => state.selectedDate); + const event = useTroubleshooterStore((state) => state.event); const { data: session } = useSession(); const date = selectedDate ? dayjs(selectedDate) : dayjs(); const { data: schedule } = useSchedule({ username: session?.user.username || "", - eventSlug: eventSlug, - eventId: event.data?.id ?? eventId, - monthCount, - rescheduleUid, + eventSlug: event?.slug, + eventId: event?.id, + timezone, + month: date.format("YYYY-MM"), }); - const { data, isLoading } = trpc.viewer.availability.user.useQuery( - { - username: session?.user?.username || "", - dateFrom: date.startOf("day").utc().format(), - dateTo: date.endOf("day").utc().format(), - withSource: true, - }, - { - enabled: !!session?.user?.username, - } - ); const startDate = selectedDate ? dayjs(selectedDate).toDate() : dayjs().toDate(); const endDate = dayjs(startDate) .add(extraDays - 1, "day") .toDate(); - const events = useMemo(() => { - if (!data?.busy) return []; - return data?.busy.map((event, idx) => { - return { - id: idx, - title: event.title ?? "Busy", - start: new Date(event.start), - end: new Date(event.end), - options: { - borderColor: "#F97417", - status: BookingStatus.ACCEPTED, - }, - }; - }); - }, [data]); + const availableSlots = useMemo(() => { + const availableTimeslots: CalendarAvailableTimeslots = {}; + if (!schedule) return availableTimeslots; + if (!schedule?.slots) return availableTimeslots; + + for (const day in schedule.slots) { + availableTimeslots[day] = schedule.slots[day].map((slot) => ({ + start: dayjs(slot.time).toDate(), + end: dayjs(slot.time) + .add(event?.duration ?? 30, "minutes") + .toDate(), + })); + } + + return availableTimeslots; + }, [schedule, event]); + + // const events = useMemo(() => { + // if (!data?.busy) return []; + // return data?.busy.map((event, idx) => { + // return { + // id: idx, + // title: event.title ?? "Busy", + // start: new Date(event.start), + // end: new Date(event.end), + // options: { + // borderColor: "#F97417", + // status: BookingStatus.ACCEPTED, + // }, + // }; + // }); + // }, [data]); return (
void; + event: EventType | null; + setEvent: (eventSlug: EventType) => void; month: string | null; setMonth: (month: string | null) => void; selectedDate: string | null; @@ -64,10 +70,10 @@ export const useTroubleshooterStore = create((set, get) => set({ selectedDate: newSelectionFormatted }); updateQueryParam("date", newSelectionFormatted); }, - eventSlug: null, - setEventSlug: (eventSlug: string | null) => { - set({ eventSlug }); - updateQueryParam("eventType", eventSlug ?? ""); + event: null, + setEvent: (event: EventType) => { + set({ event }); + updateQueryParam("eventType", event.slug ?? ""); }, month: getQueryParam("month") || getQueryParam("date") || dayjs().format("YYYY-MM"), setMonth: (month: string | null) => {