diff --git a/client/src/modules/dashboard/Events/components/EventForm.tsx b/client/src/modules/dashboard/Events/components/EventForm.tsx index badf8803f4..1bb784f500 100644 --- a/client/src/modules/dashboard/Events/components/EventForm.tsx +++ b/client/src/modules/dashboard/Events/components/EventForm.tsx @@ -1,11 +1,21 @@ -import { Button, Checkbox, Heading, Grid, Text } from '@chakra-ui/react'; +import { + Button, + Checkbox, + Container, + Grid, + Heading, + Spinner, + Text, +} from '@chakra-ui/react'; import React, { useMemo } from 'react'; import { useForm, FormProvider } from 'react-hook-form'; import { add } from 'date-fns'; +import { InfoIcon, WarningTwoIcon } from '@chakra-ui/icons'; import { - useChapterQuery, + useCalendarIntegrationStatusQuery, useChapterVenuesQuery, + useDashboardChapterQuery, useSponsorsQuery, VenueType, } from '../../../../generated/graphql'; @@ -20,6 +30,57 @@ import EventSponsorsForm from './EventSponsorsForm'; import EventVenueForm from './EventVenueForm'; import { EventFormProps, fields, EventFormData } from './EventFormUtils'; +interface IntegrationInfoData { + isAuthenticated: boolean | null | undefined; + hasCalendar: boolean; +} + +const IntegrationInfo = ({ + isAuthenticated, + hasCalendar, +}: IntegrationInfoData) => { + const infoData = ({ isAuthenticated, hasCalendar }: IntegrationInfoData) => { + if (isAuthenticated) { + if (hasCalendar) { + return { + Icon: InfoIcon, + text: 'Instance is authenticated with calendar api, and chapter has created calendar. Chapter will attempt creating event in the calendar.', + }; + } + return { + Icon: WarningTwoIcon, + text: "Instance is authenticated with calendar api, but chapter doesn't have calendar created. Event will not be created in the calendar.", + }; + } + + const isBroken = isAuthenticated === null; + if (isBroken) { + if (hasCalendar) { + return { + Icon: WarningTwoIcon, + text: 'Chapter has calendar created, but calendar integration is not working. Event will not be created in the calendar.', + }; + } + return { + Icon: WarningTwoIcon, + text: 'Calendar integration is not working, and chapter does not have calendar created. Event will not be created in calendar.', + }; + } + return { + Icon: WarningTwoIcon, + text: 'Instance is not authenticated with calendar api. Automatic creation of events in calendar is not possible.', + }; + }; + + const { Icon, text } = infoData({ isAuthenticated, hasCalendar }); + return ( + + + {text} + + ); +}; + const EventForm: React.FC = (props) => { const { onSubmit, @@ -31,18 +92,6 @@ const EventForm: React.FC = (props) => { } = props; const isChaptersDropdownNeeded = typeof initialChapterId === 'undefined'; - const queryOptions = isChaptersDropdownNeeded - ? { skip: true } - : { variables: { chapterId: initialChapterId } }; - - const { - loading: loadingChapter, - error: errorChapter, - data: dataChapter, - } = useChapterQuery(queryOptions); - - const sponsorQuery = useSponsorsQuery(); - const defaultValues = useMemo(() => { if (!data) { const date = new Date(); @@ -83,6 +132,16 @@ const EventForm: React.FC = (props) => { const inviteOnly = watch('invite_only'); const chapterId = watch('chapter_id'); + const { + loading: loadingChapter, + error: errorChapter, + data: dataChapter, + } = useDashboardChapterQuery({ variables: { chapterId } }); + const { loading: loadingStatus, data: dataStatus } = + useCalendarIntegrationStatusQuery({ skip: !!data }); + + const sponsorQuery = useSponsorsQuery(); + const chapterVenuesQuery = useChapterVenuesQuery( !chapterId ? { skip: true } : { variables: { chapterId } }, ); @@ -101,10 +160,10 @@ const EventForm: React.FC = (props) => { {!isChaptersDropdownNeeded || data ? ( loadingChapter ? ( Loading Chapter - ) : errorChapter || !dataChapter?.chapter ? ( + ) : errorChapter || !dataChapter?.dashboardChapter ? ( Error loading chapter ) : ( - {dataChapter.chapter.name} + {dataChapter.dashboardChapter.name} ) ) : ( @@ -160,6 +219,16 @@ const EventForm: React.FC = (props) => { )} + {!data && + (loadingStatus || loadingChapter ? ( + + ) : ( + + ))} +