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

Loading...

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