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 ? (
+
+ ) : (
+
+ ))}
+