Availability | Calendso

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 } from 'react'; import { useState } from 'react'; import { useSession, getSession } from 'next-auth/client'; import { PlusIcon, ClockIcon } 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(); if (loading) { return

; } function toggleAddModal() { setShowAddModal(!showAddModal); } function toggleChangeTimesModal() { setShowChangeTimesModal(!showChangeTimesModal); } const closeSuccessModal = () => { 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 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' } }); setShowChangeTimesModal(false); setSuccessModalOpen(true); } return(

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)}.

{showAddModal && } {showChangeTimesModal && }

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