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, useState } from "react"; import { getSession, useSession } from "next-auth/client"; import { ClockIcon } from "@heroicons/react/outline"; import Loader from '@components/Loader'; 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 (

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.

Launch troubleshooter

{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, 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 }; }