import Head from 'next/head'; import Link from 'next/link'; import prisma from '../../lib/prisma'; import Shell from '../../components/Shell'; import Router from 'next/router'; import { useRef } from 'react'; import { useState } from 'react'; import { useSession, getSession } from 'next-auth/client'; export default function Availability(props) { const [ session, loading ] = useSession(); const [showAddModal, setShowAddModal] = useState(false); const [showChangeTimesModal, setShowChangeTimesModal] = useState(false); const titleRef = useRef(); const descriptionRef = useRef(); const lengthRef = useRef(); const startHoursRef = useRef(); const startMinsRef = useRef(); const endHoursRef = useRef(); const endMinsRef = useRef(); if (loading) { return

Loading...

; } else { if (!session) { window.location.href = "/auth/login"; } } function toggleAddModal() { setShowAddModal(!showAddModal); } function toggleChangeTimesModal() { setShowChangeTimesModal(!showChangeTimesModal); } 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 enteredDescription = descriptionRef.current.value; const enteredLength = lengthRef.current.value; // TODO: Add validation const response = await fetch('/api/availability/eventtype', { method: 'POST', body: JSON.stringify({title: enteredTitle, description: enteredDescription, length: enteredLength}), headers: { 'Content-Type': 'application/json' } }); if (enteredTitle && enteredLength) { Router.reload(); } } 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 startMins = enteredStartHours * 60 + enteredStartMins; const endMins = enteredEndHours * 60 + enteredEndMins; // TODO: Add validation const response = await fetch('/api/availability/day', { method: 'PATCH', body: JSON.stringify({start: startMins, end: endMins}), headers: { 'Content-Type': 'application/json' } }); console.log(response); Router.reload(); } return(
Availability | Calendso

Event Types

{props.types.map((eventType) => )}
Name Description Length Edit
{eventType.title} {eventType.description} {eventType.length} minutes 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)}.

{showAddModal &&

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

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

Set the start and end time of your day.

:
:
}
); } export async function getServerSideProps(context) { const session = await getSession(context); const user = await prisma.user.findFirst({ where: { email: session.user.email, }, select: { id: true, startTime: true, endTime: true } }); const types = await prisma.eventType.findMany({ where: { userId: user.id, }, select: { id: true, title: true, description: true, length: true } }); return { props: {user, types}, // will be passed to the page component as props } }