import Head from 'next/head'; import Link from 'next/link'; import prisma from '../../lib/prisma'; import Shell from '../../components/Shell'; import {useEffect, useState} from 'react'; import {getSession, useSession} from 'next-auth/client'; import {CalendarIcon, CheckCircleIcon, ChevronRightIcon, PlusIcon, XCircleIcon} from '@heroicons/react/solid'; import {InformationCircleIcon} from '@heroicons/react/outline'; import { Switch } from '@headlessui/react' export default function Home({ integrations }) { const [session, loading] = useSession(); const [showAddModal, setShowAddModal] = useState(false); const [showSelectCalendarModal, setShowSelectCalendarModal] = useState(false); const [selectableCalendars, setSelectableCalendars] = useState([]); function toggleAddModal() { setShowAddModal(!showAddModal); } function toggleShowCalendarModal() { setShowSelectCalendarModal(!showSelectCalendarModal); } function loadCalendars() { fetch('api/availability/calendar') .then((response) => response.json()) .then(data => { setSelectableCalendars(data) }); } function integrationHandler(type) { fetch('/api/integrations/' + type.replace('_', '') + '/add') .then((response) => response.json()) .then((data) => window.location.href = data.url); } function calendarSelectionHandler(calendar) { return (selected) => { let cals = [...selectableCalendars]; let i = cals.findIndex(c => c.externalId === calendar.externalId); cals[i].selected = selected; setSelectableCalendars(cals); if (selected) { fetch('api/availability/calendar', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(cals[i]) }).then((response) => response.json()); } else { fetch('api/availability/calendar', { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(cals[i]) }).then((response) => response.json()); } } } function getCalendarIntegrationImage(integrationType: string){ switch (integrationType) { case "google_calendar": return "integrations/google-calendar.png"; case "office365_calendar": return "integrations/office-365.png"; default: return ""; } } function classNames(...classes) { return classes.filter(Boolean).join(' ') } useEffect(loadCalendars, [integrations]); if (loading) { return

Loading...

; } return (
Integrations | Calendso
{integrations.filter( (ig) => ig.credential ).length !== 0 ? :

You don't have any integrations added.

You currently do not have any integrations set up. Add your first integration to get started.

}
{showAddModal &&
{/* */} {/* */}

Link a new integration to your account.

    {integrations.filter( (integration) => integration.installed ).map( (integration) => (
  • {integration.title}

    { integration.title }

    { integration.description }

    • ))}
}

Select calendars

Select which calendars are checked for availability to prevent double bookings.

{showSelectCalendarModal &&
{/* */} {/* */}

If no entry is selected, all calendars will be checked

    {selectableCalendars.map( (calendar) => (
  • {calendar.integration}

    { calendar.name }

    Select calendar
    • ))}
}
); } const validJson = (jsonString: string) => { try { const o = JSON.parse(jsonString); if (o && typeof o === "object") { return o; } } catch (e) {} return false; } export async function getServerSideProps(context) { const session = await getSession(context); if (!session) { return { redirect: { permanent: false, destination: '/auth/login' } }; } const user = await prisma.user.findFirst({ where: { email: session.user.email, }, select: { id: true } }); const credentials = await prisma.credential.findMany({ where: { userId: user.id, }, select: { id: true, type: true, key: true } }); const integrations = [ { installed: !!(process.env.GOOGLE_API_CREDENTIALS && validJson(process.env.GOOGLE_API_CREDENTIALS)), credential: credentials.find( (integration) => integration.type === "google_calendar" ) || null, type: "google_calendar", title: "Google Calendar", imageSrc: "integrations/google-calendar.png", description: "For personal and business accounts", }, { installed: !!(process.env.MS_GRAPH_CLIENT_ID && process.env.MS_GRAPH_CLIENT_SECRET), type: "office365_calendar", credential: credentials.find( (integration) => integration.type === "office365_calendar" ) || null, title: "Office 365 / Outlook.com Calendar", imageSrc: "integrations/office-365.png", description: "For personal and business accounts", } ]; return { props: {integrations}, } }