import Head from 'next/head'; import Link from 'next/link'; import prisma from '../lib/prisma'; import Shell from '../components/Shell'; import { signIn, useSession, getSession } from 'next-auth/client'; import { ClockIcon, CheckIcon, 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: (props.user.endTime - props.user.startTime) / 60 + ' 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}

    • ))}

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 == 'office365_calendar' &&

    Office 365 / Outlook.com Calendar

    } {integration.type == 'google_calendar' &&

    Google Calendar

    }

    Calendar Integration

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

    You haven't added any integrations.

    }

Your event types

); } export async function getServerSideProps(context) { const session = await getSession(context); let user = []; let credentials = []; let eventTypes = []; let eventTypeCount = 0; let integrationCount = 0; 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: user.id, }, select: { type: true } }); eventTypes = await prisma.eventType.findMany({ where: { userId: user.id, } }); eventTypeCount = await prisma.eventType.count({ where: { userId: session.user.id } }); integrationCount = await prisma.credential.count({ where: { userId: session.user.id } }); } return { props: { user, credentials, eventTypes, eventTypeCount, integrationCount }, // will be passed to the page component as props } }