diff --git a/components/Dialog.tsx b/components/Dialog.tsx index e2698179..08140d72 100644 --- a/components/Dialog.tsx +++ b/components/Dialog.tsx @@ -19,6 +19,19 @@ export const DialogContent = React.forwardRef(({ children, ...props }, forwarded )); +export function DialogHeader({ title, subtitle }: { title: string; subtitle: string }) { + return ( +
+ +
+

{subtitle}

+
+
+ ); +} + DialogContent.displayName = "DialogContent"; export const DialogTrigger = DialogPrimitive.Trigger; diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx index b1142be3..55294b4d 100644 --- a/pages/integrations/index.tsx +++ b/pages/integrations/index.tsx @@ -4,34 +4,18 @@ 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 { CheckCircleIcon, ChevronRightIcon, PlusIcon, XCircleIcon } from "@heroicons/react/solid"; import { InformationCircleIcon } from "@heroicons/react/outline"; import { Switch } from "@headlessui/react"; -import Loader from '@components/Loader'; +import Loader from "@components/Loader"; import classNames from "@lib/classNames"; +import { Dialog, DialogClose, DialogContent, DialogTrigger, DialogHeader } from "@components/Dialog"; export default function IntegrationHome({ integrations }) { // eslint-disable-next-line @typescript-eslint/no-unused-vars 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()) @@ -89,6 +73,104 @@ export default function IntegrationHome({ integrations }) { return ; } + const ConnectNewAppDialog = () => ( + + + + Connect a new App + + + + +
+
    + {integrations + .filter((integration) => integration.installed) + .map((integration) => ( +
  • +
    + {integration.title} +
    +
    +

    {integration.title}

    +

    {integration.description}

    +
    +
    + +
    +
  • + ))} +
+
+
+ + Cancel + +
+
+
+ ); + + const SelectCalendarDialog = () => ( + + + Select calendars + + + + +
+
    + {selectableCalendars.map((calendar) => ( +
  • +
    + {calendar.integration} +
    +
    +

    {calendar.name}

    +
    +
    + + Select calendar + +
    +
  • + ))} +
+
+
+ + Cancel + +
+
+
+ ); + return (
@@ -96,18 +178,7 @@ export default function IntegrationHome({ integrations }) { - - - Connect a new App - - }> + }>
{integrations.filter((ig) => ig.credential).length !== 0 ? (
    @@ -174,217 +245,21 @@ export default function IntegrationHome({ integrations }) { You currently do not have any apps connected. Connect your first app to get started.

-
- -
+
)} - {showAddModal && ( -
-
- {/* */} - - - {/* */} -
-
-
- -
-
- -
-

Connect a new app 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 - -
    -
  • - ))} -
-
-
- -
-
-
-
- )} -

Launch your own App