import Head from 'next/head'; import Link from 'next/link'; import prisma from '../lib/prisma'; import Shell from '../components/Shell'; import {getSession, useSession} from 'next-auth/client'; import {CheckIcon, ClockIcon, InformationCircleIcon} from '@heroicons/react/outline'; import DonateBanner from '../components/DonateBanner'; function classNames(...classes) { return classes.filter(Boolean).join(' ') } export default function Home(props) { const [session, loading] = useSession(); 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 stats = [ { name: 'Event Types', stat: props.eventTypeCount }, { name: 'Integrations', stat: props.integrationCount }, { name: 'Available Hours', stat: Math.round(((props.user.endTime - props.user.startTime) / 60) * 100) / 100 + ' hours' }, ]; let timeline = []; if (session) { timeline = [ { id: 1, content: 'Add your first', target: 'integration', href: '/integrations', icon: props.integrationCount != 0 ? CheckIcon : InformationCircleIcon, iconBackground: props.integrationCount != 0 ? 'bg-green-400' : 'bg-gray-400', }, { id: 2, content: 'Add one or more', target: 'event types', href: '/availability', icon: props.eventTypeCount != 0 ? CheckIcon : InformationCircleIcon, iconBackground: props.eventTypeCount != 0 ? 'bg-green-400' : 'bg-gray-400', }, { id: 3, content: 'Complete your', target: 'profile', href: '/settings/profile', icon: session.user.image ? CheckIcon : InformationCircleIcon, iconBackground: session.user.image ? 'bg-green-400' : 'bg-gray-400', }, ]; } else { timeline = []; } return (
Calendso

Your stats

{stats.map((item) => (
{item.name}
{item.stat}
))}

Your event types

    {props.eventTypes.map((type) => (

  • {type.title}

    in {type.description}

    • ))} {props.eventTypes.length == 0 && (

    You haven't created any event types.

    )}

Getting started

Steps you should take to get started with Calendso.

    {timeline.map((event, eventIdx) => (
  • {eventIdx !== timeline.length - 1 ? (
    • ))}

Your day

Offering time slots between{" "} {convertMinsToHrsMins(props.user.startTime)} and{" "} {convertMinsToHrsMins(props.user.endTime)}

Your integrations

    {props.credentials.map((integration) => (
  • {integration.type == "google_calendar" && ( Google Calendar )} {integration.type == "office365_calendar" && ( Office 365 / Outlook.com Calendar )} {integration.type == "zoom_video" && ( Zoom )}
    {integration.type == "office365_calendar" && (

    Office 365 / Outlook.com Calendar

    )} {integration.type == "google_calendar" && (

    Google Calendar

    )} {integration.type == "zoom_video" && (

    Zoom

    )} {integration.type.endsWith("_calendar") && (

    Calendar Integration

    )} {integration.type.endsWith("_video") && (

    Video Conferencing

    )}
    • ))} {props.credentials.length == 0 && (

    You haven't added any integrations.

    )}

Your event types

    {props.eventTypes.map((type) => (
  • {type.length} minutes
    • ))} {props.eventTypes.length == 0 && (

    You haven't created any event types.

    )}
); } export async function getServerSideProps(context) { const session = await getSession(context); let user = []; let credentials = []; let eventTypes = []; if (session) { user = await prisma.user.findFirst({ where: { email: session.user.email, }, select: { id: true, startTime: true, endTime: true } }); credentials = await prisma.credential.findMany({ where: { userId: session.user.id, }, select: { type: true } }); eventTypes = await prisma.eventType.findMany({ where: { userId: session.user.id, } }); } return { props: { user, credentials, eventTypes, eventTypeCount: eventTypes.length, integrationCount: credentials.length }, // will be passed to the page component as props } }