import dayjs from "dayjs"; import utc from "dayjs/plugin/utc"; import React, { useState, useEffect } from "react"; import TimezoneSelect, { ITimezone } from "react-timezone-select"; import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar"; import { trpc, inferQueryOutput } from "@lib/trpc"; import Avatar from "@components/ui/Avatar"; import { DatePicker } from "@components/ui/form/DatePicker"; import Select from "@components/ui/form/Select"; import TeamAvailabilityTimes from "./TeamAvailabilityTimes"; dayjs.extend(utc); interface Props { team?: inferQueryOutput<"viewer.teams.get">; member?: inferQueryOutput<"viewer.teams.get">["members"][number]; } export default function TeamAvailabilityModal(props: Props) { const utils = trpc.useContext(); const [selectedDate, setSelectedDate] = useState(dayjs()); const [selectedTimeZone, setSelectedTimeZone] = useState( localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess() ); const [frequency, setFrequency] = useState<15 | 30 | 60>(30); useEffect(() => { utils.invalidateQueries(["viewer.teams.getMemberAvailability"]); }, [utils, selectedTimeZone, selectedDate]); return (
{props.member?.name} {props.member?.email}
Date { setSelectedDate(dayjs(newDate)); }} />
Timezone setSelectedTimeZone(timezone.value)} className="mt-1 block w-full rounded-sm border border-gray-300 shadow-sm sm:text-sm" />
Slot Length