import Head from "next/head"; import Link from "next/link"; import prisma from "../../lib/prisma"; import Shell from "../../components/Shell"; import { useRouter } from "next/router"; import { getSession, useSession } from "next-auth/client"; import { Fragment, useRef, useState } from "react"; import { Menu, Transition } from "@headlessui/react"; import { ClockIcon, DotsHorizontalIcon, ExternalLinkIcon, InformationCircleIcon, LinkIcon, PlusIcon, UserIcon, } from "@heroicons/react/solid"; function classNames(...classes) { return classes.filter(Boolean).join(" "); } export default function Availability({ user, types }) { const [session, loading] = useSession(); const router = useRouter(); const [showAddModal, setShowAddModal] = useState(false); const titleRef = useRef(); const slugRef = useRef(); const descriptionRef = useRef(); const lengthRef = useRef(); async function createEventTypeHandler(event) { event.preventDefault(); const enteredTitle = titleRef.current.value; const enteredSlug = slugRef.current.value; const enteredDescription = descriptionRef.current.value; const enteredLength = lengthRef.current.value; // TODO: Add validation await fetch("/api/availability/eventtype", { method: "POST", body: JSON.stringify({ title: enteredTitle, slug: enteredSlug, description: enteredDescription, length: enteredLength, }), headers: { "Content-Type": "application/json", }, }); if (enteredTitle && enteredLength) { router.replace(router.asPath); toggleAddModal(); } } function toggleAddModal() { setShowAddModal(!showAddModal); } if (loading) { return (
); } return (
Event Types | Calendso New event type }>
    {types.map((type) => (

  • {type.title}

    {type.hidden && ( Hidden )}
    {({ 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.

)} {showAddModal && (

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

{location.hostname}/{user.username}/
minutes
{/* TODO: Add an error message when required input fields empty*/}
)}
); } export async function getServerSideProps(context) { const session = await getSession(context); 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 }, // will be passed to the page component as props }; }