Troubleshoot | Calendso

import Head from "next/head"; import Shell from "../../components/Shell"; import { getSession, useSession } from "next-auth/client"; import { useState } from "react"; import dayjs from "dayjs"; import utc from "dayjs/plugin/utc"; import { GetServerSideProps } from "next"; import prisma from "@lib/prisma"; dayjs.extend(utc); export default function Troubleshoot({ user }) { const [session, loading] = useSession(); const [availability, setAvailability] = useState([]); const [selectedDate, setSelectedDate] = useState(dayjs()); if (loading) { return

; } 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}`; } const fetchAvailability = (date) => { fetch( `/api/availability/${session.user.username}?dateFrom=${date .startOf("day") .utc() .startOf("day") .format()}&dateTo=${date.endOf("day").utc().endOf("day").format()}` ) .then((res) => { return res.json(); }) .then((apires) => setAvailability(apires)) .catch((e) => { console.error(e); }); }; fetchAvailability(selectedDate); return (

Understand why certain times are available and others are blocked.

Here is an overview of your day on {selectedDate.format("D MMMM YYYY")}: Tip: Hover over the bold times for a full timestamp

Your day starts at {convertMinsToHrsMins(user.startTime)}

{availability.map((slot) => (

Your calendar shows you as busy between {dayjs(slot.start).format("HH:mm")} and {dayjs(slot.end).format("HH:mm")} on {dayjs(slot.start).format("D MMMM YYYY")}

))} {availability.length === 0 &&

}

Your day ends at {convertMinsToHrsMins(user.endTime)}

); } export const getServerSideProps: GetServerSideProps = async (context) => { const session = await getSession(context); if (!session) { return { redirect: { permanent: false, destination: "/auth/login" } }; } const user = await prisma.user.findFirst({ where: { username: session.user.username, }, select: { startTime: true, endTime: true, }, }); return { props: { user }, }; };