import dayjs from "dayjs"; import React, { useState, useEffect, CSSProperties } from "react"; import TimezoneSelect, { ITimezone } from "react-timezone-select"; import AutoSizer from "react-virtualized-auto-sizer"; import { FixedSizeList as List } from "react-window"; 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"; interface Props { team?: inferQueryOutput<"viewer.teams.get">; } export default function TeamAvailabilityScreen(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"]); // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedTimeZone, selectedDate]); const Item = ({ index, style }: { index: number; style: CSSProperties }) => { const member = props.team?.members?.[index]; if (!member) return <>; return (
{member?.name} {member?.email}
} /> ); }; return (
Date { setSelectedDate(dayjs(newDate)); }} />
Timezone setSelectedTimeZone(timezone.value)} classNamePrefix="react-select" className="react-select-container w-full rounded-sm border border-gray-300 shadow-sm sm:text-sm" />
Slot Length