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, }, }) ).map((eventType) => { return { ...eventType, periodStartDate: eventType.periodStartDate?.toString() ?? null, periodEndDate: eventType.periodEndDate?.toString() ?? null, }; }); } return { props: { user, credentials, eventTypes, eventTypeCount: eventTypes.length, integrationCount: credentials.length, }, // will be passed to the page component as props }; }