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') dayjs.extend(isSameOrBefore) 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 = 0; } // Until day end, push new times every x minutes for (;i < 1440; 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 times.forEach(time => { busy.forEach(busyTime => { let startTime = dayjs(busyTime.start) let endTime = dayjs(busyTime.end) // Check if start times are the same if (dayjs(time).format('HH:mm') == startTime.format('HH:mm')) { const conflictIndex = times.indexOf(time); if (conflictIndex > -1) { times.splice(conflictIndex, 1); } } // TODO: Check if time is between start and end times }); }); // 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 } }); 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 }, } }