import Head from 'next/head'; import Link from 'next/link'; import prisma from '../../lib/prisma'; import Modal from '../../components/Modal'; import Shell from '../../components/Shell'; import {useRouter} from 'next/router'; import {useRef, useState} from 'react'; import {getSession, useSession} from 'next-auth/client'; import {ClockIcon, PlusIcon} from '@heroicons/react/outline'; export default function Availability(props) { const [ session, loading ] = useSession(); const router = useRouter(); const [showAddModal, setShowAddModal] = useState(false); const [successModalOpen, setSuccessModalOpen] = useState(false); const [showChangeTimesModal, setShowChangeTimesModal] = useState(false); const titleRef = useRef(); const slugRef = useRef(); const descriptionRef = useRef(); const lengthRef = useRef(); const isHiddenRef = useRef(); const startHoursRef = useRef(); const startMinsRef = useRef(); const endHoursRef = useRef(); const endMinsRef = useRef(); const bufferHoursRef = useRef(); const bufferMinsRef = useRef(); if (loading) { return
; } function toggleAddModal() { setShowAddModal(!showAddModal); } function toggleChangeTimesModal() { setShowChangeTimesModal(!showChangeTimesModal); } const closeSuccessModal = () => { setSuccessModalOpen(false); router.replace(router.asPath); } function convertMinsToHrsMins (mins) { let h = Math.floor(mins / 60); let m = mins % 60; h = h < 10 ? '0' + h : h; m = m < 10 ? '0' + m : m; return `${h}:${m}`; } 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; const enteredIsHidden = isHiddenRef.current.checked; // TODO: Add validation const response = await fetch('/api/availability/eventtype', { method: 'POST', body: JSON.stringify({title: enteredTitle, slug: enteredSlug, description: enteredDescription, length: enteredLength, hidden: enteredIsHidden}), headers: { 'Content-Type': 'application/json' } }); if (enteredTitle && enteredLength) { router.replace(router.asPath); toggleAddModal(); } } async function updateStartEndTimesHandler(event) { event.preventDefault(); const enteredStartHours = parseInt(startHoursRef.current.value); const enteredStartMins = parseInt(startMinsRef.current.value); const enteredEndHours = parseInt(endHoursRef.current.value); const enteredEndMins = parseInt(endMinsRef.current.value); const enteredBufferHours = parseInt(bufferHoursRef.current.value); const enteredBufferMins = parseInt(bufferMinsRef.current.value); const startMins = enteredStartHours * 60 + enteredStartMins; const endMins = enteredEndHours * 60 + enteredEndMins; const bufferMins = enteredBufferHours * 60 + enteredBufferMins; // TODO: Add validation const response = await fetch('/api/availability/day', { method: 'PATCH', body: JSON.stringify({start: startMins, end: endMins, buffer: bufferMins}), headers: { 'Content-Type': 'application/json' } }); setShowChangeTimesModal(false); setSuccessModalOpen(true); } return(
Availability | Calendso

Event Types

{props.types.map((eventType) => )}
Name Description Length Edit
{eventType.title} {eventType.hidden && Hidden } {eventType.description} {eventType.length} minutes View Edit

Change the start and end times of your day

Currently, your day is set to start at {convertMinsToHrsMins(props.user.startTime)} and end at {convertMinsToHrsMins(props.user.endTime)}.

Something doesn't look right?

Troubleshoot your availability to explore why your times are showing as they are.

{showAddModal &&

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

{location.hostname}/{props.user.username}/
minutes

Hide the event type from your page, so it can only be booked through it's URL.

{/* TODO: Add an error message when required input fields empty*/}
} {showChangeTimesModal &&

Set the start and end time of your day and a minimum buffer between your meetings.

:
:
:
}
); } 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 } }