import {useEffect, useState} from 'react'; import Head from 'next/head'; import Link from 'next/link'; import prisma from '../../lib/prisma'; import { useRouter } from 'next/router'; const dayjs = require('dayjs'); const isSameOrBefore = require('dayjs/plugin/isSameOrBefore'); const isBetween = require('dayjs/plugin/isBetween'); dayjs.extend(isSameOrBefore); dayjs.extend(isBetween); export default function Type(props) { // Initialise state const [selectedDate, setSelectedDate] = useState(''); const [selectedMonth, setSelectedMonth] = useState(dayjs().month()); const [loading, setLoading] = useState(false); const [busy, setBusy] = useState([]); // Get router variables const router = useRouter(); const { user } = router.query; // Handle month changes const incrementMonth = () => { setSelectedMonth(selectedMonth + 1); } const decrementMonth = () => { setSelectedMonth(selectedMonth - 1); } // Set up calendar var daysInMonth = dayjs().month(selectedMonth).daysInMonth(); var days = []; for (let i = 1; i <= daysInMonth; i++) { days.push(i); } const calendar = days.map((day) => ); // Handle date change useEffect(async () => { setLoading(true); const res = await fetch('/api/availability/' + user + '?date=' + dayjs(selectedDate).format("YYYY-MM-DD")); const data = await res.json(); setBusy(data.primary.busy); setLoading(false); }, [selectedDate]); // Set up timeslots let times = []; // If we're looking at availability throughout the current date, work out the current number of minutes elapsed throughout the day if (selectedDate == dayjs().format("YYYY-MM-DD")) { var i = (parseInt(dayjs().startOf('hour').format('H') * 60) + parseInt(dayjs().startOf('hour').format('m'))); } else { var i = props.user.startTime; } // Until day end, push new times every x minutes for (;i < props.user.endTime; i += parseInt(props.eventType.length)) { times.push(dayjs(selectedDate).hour(Math.floor(i / 60)).minute(i % 60).startOf(props.eventType.length, 'minute').add(props.eventType.length, 'minute').format("YYYY-MM-DD HH:mm:ss")); } // Check for conflicts for(i = times.length - 1; i >= 0; i -= 1) { busy.forEach(busyTime => { let startTime = dayjs(busyTime.start); let endTime = dayjs(busyTime.end); // Check if time has passed if (dayjs(times[i]).isBefore(dayjs())) { times.splice(i, 1); } // Check if start times are the same if (dayjs(times[i]).format('HH:mm') == startTime.format('HH:mm')) { times.splice(i, 1); } // Check if time is between start and end times if (dayjs(times[i]).isBetween(startTime, endTime)) { times.splice(i, 1); } }); } // Display available times const availableTimes = times.map((time) =>
{dayjs(time).format("hh:mma")}
); return (
{props.eventType.title} | {props.user.name || props.user.username} | Calendso
{props.user.avatar && Avatar}

{props.user.name}

{props.eventType.title}

{props.eventType.length} minutes

{props.eventType.description}

{dayjs().month(selectedMonth).format("MMMM YYYY")}
{calendar}
{selectedDate &&
{dayjs(selectedDate).format("dddd DD MMMM YYYY")}
{!loading ? availableTimes :
}
}
); } export async function getServerSideProps(context) { const user = await prisma.user.findFirst({ where: { username: context.query.user, }, select: { username: true, name: true, bio: true, avatar: true, eventTypes: true, startTime: true, endTime: true } }); const eventType = await prisma.eventType.findUnique({ where: { id: parseInt(context.query.type), }, select: { id: true, title: true, description: true, length: true } }); return { props: { user, eventType }, } }