import { Dialog, DialogClose, DialogContent } from "@components/Dialog"; import Loader from "@components/Loader"; import { Tooltip } from "@components/Tooltip"; import { Button } from "@components/ui/Button"; import { Menu, Transition } from "@headlessui/react"; import { ClockIcon, DotsHorizontalIcon, ExternalLinkIcon, InformationCircleIcon, LinkIcon, PlusIcon, UserIcon, } from "@heroicons/react/solid"; import classNames from "@lib/classNames"; import showToast from "@lib/notification"; import { getSession, useSession } from "next-auth/client"; import Link from "next/link"; import { useRouter } from "next/router"; import React, { Fragment, useRef } from "react"; import Shell from "@components/Shell"; import prisma from "@lib/prisma"; import { GetServerSidePropsContext, InferGetServerSidePropsType } from "next"; import { useMutation } from "react-query"; import createEventType from "@lib/mutations/event-types/create-event-type"; const EventTypesPage = (props: InferGetServerSidePropsType) => { const { user, types } = props; const [session, loading] = useSession(); const router = useRouter(); const createMutation = useMutation(createEventType, { onSuccess: async ({ eventType }) => { await router.replace("/event-types/" + eventType.id); showToast(`${eventType.title} event type created successfully`, "success"); }, onError: (err: Error) => { showToast(err.message, "error"); }, }); const titleRef = useRef(); const slugRef = useRef(); const descriptionRef = useRef(); const lengthRef = useRef(); const dialogOpen = router.query.new === "1"; async function createEventTypeHandler(event) { event.preventDefault(); const enteredTitle = titleRef.current.value; const enteredSlug = slugRef.current.value; const enteredDescription = descriptionRef.current.value; const enteredLength = parseInt(lengthRef.current.value); const body = { title: enteredTitle, slug: enteredSlug, description: enteredDescription, length: enteredLength, }; createMutation.mutate(body); } function autoPopulateSlug() { let t = titleRef.current.value; t = t.replace(/\s+/g, "-").toLowerCase(); slugRef.current.value = t; } if (loading) { return ; } const CreateNewEventDialog = () => ( { const newQuery = { ...router.query, }; delete newQuery["new"]; if (!isOpen) { router.push({ pathname: router.pathname, query: newQuery }); } }}>

Create a new event type for people to book times with.

{location.hostname}/{user.username}/
minutes
Cancel
); return (
}>
    {types.map((type) => (

  • {type.title}

    {type.hidden && ( Hidden )}
    {type.description && (
    )}
    {({ open }) => ( <>
    Open options
    {({ active }) => ( )} {({ active }) => ( )} {/**/} {/* {({ active }) => (*/} {/* */} {/* */}
    {/*
    */} {/* */} {/* {({ active }) => (*/} {/* */} {/* */} {/*
    */}     )}
    • ))}
{types.length === 0 && (

Create your first event type

Event types enable you to share links that show available times on your calendar and allow people to make bookings with you.

)}
); }; export const getServerSideProps = async (context: GetServerSidePropsContext) => { const { req } = context; const session = await getSession({ req }); if (!session) { return { redirect: { permanent: false, destination: "/auth/login" } }; } const user = await prisma.user.findFirst({ where: { email: session.user.email, }, select: { id: true, username: true, startTime: true, endTime: true, bufferTime: true, }, }); const types = await prisma.eventType.findMany({ where: { userId: user.id, }, select: { id: true, title: true, slug: true, description: true, length: true, hidden: true, }, }); return { props: { user, types, }, }; }; export default EventTypesPage;