Issue 1542/refactor EVENTS into hooks

integrationTesting/tests/organize/campaigns/list/list.spec.ts

@@ -16,6 +16,7 @@ test.describe('Campaigns list page ', () => {
   });
 
   test('shows list of campaigns ', async ({ page, appUri, moxy }) => {
+    moxy.setZetkinApiMock('/orgs/1/actions', 'get', []);
     moxy.setZetkinApiMock('/orgs/1/campaigns', 'get', [
       ReferendumSignatures,
       WelcomeNewMembers,

src/features/calendar/components/CalendarDayView/Day/Event.tsx

@@ -3,7 +3,6 @@ import NextLink from 'next/link';
 import { Box, Link, Typography } from '@mui/material';
 import { People, PlaceOutlined, Schedule } from '@mui/icons-material';
 
-import EventDataModel from 'features/events/models/EventDataModel';
 import EventSelectionCheckBox from 'features/events/components/EventSelectionCheckBox';
 import EventWarningIcons from 'features/events/components/EventWarningIcons';
 import getEventState from 'features/events/utils/getEventState';
@@ -14,14 +13,10 @@ import StatusDot from 'features/events/components/EventPopper/StatusDot';
 import theme from 'theme';
 import { truncateOnMiddle } from 'utils/stringUtils';
 import { useMessages } from 'core/i18n';
-import useModel from 'core/useModel';
 import { ZetkinEvent } from 'utils/types/zetkin';
 
 const Event = ({ event }: { event: ZetkinEvent }) => {
   const messages = useMessages(messageIds);
-  const model = useModel(
-    (env) => new EventDataModel(env, event.organization.id, event.id)
-  );
 
   const needsParticipants =
     event.num_participants_required > event.num_participants_available;
@@ -118,7 +113,11 @@ const Event = ({ event }: { event: ZetkinEvent }) => {
           </Box>
           {/* Icons */}
           <Box alignItems="center" display="flex" gap={1}>
-            <EventWarningIcons compact model={model} />
+            <EventWarningIcons
+              compact
+              eventId={event.id}
+              orgId={event.organization.id}
+            />
             <People color={needsParticipants ? 'error' : 'secondary'} />
             <Typography color={needsParticipants ? 'error' : 'secondary'}>
               {event.num_participants_available}/

src/features/calendar/components/CalendarEventFilter/EventFilterPane.tsx

@@ -1,11 +1,8 @@
-import { Box, Button } from '@mui/material';
-
 import CheckboxFilterList from './CheckboxFilterList';
 import EventInputFilter from './EventInputFilter';
-import EventTypesModel from 'features/events/models/EventTypesModel';
 import messageIds from 'features/calendar/l10n/messageIds';
 import PaneHeader from 'utils/panes/PaneHeader';
-import useModel from 'core/useModel';
+import useEventTypes from 'features/events/hooks/useEventTypes';
 import { ZetkinActivity } from 'utils/types/zetkin';
 import ZUIFuture from 'zui/ZUIFuture';
 import {
@@ -15,6 +12,7 @@ import {
   filterUpdated,
   STATE_FILTER_OPTIONS,
 } from 'features/events/store';
+import { Box, Button } from '@mui/material';
 import { Msg, useMessages } from 'core/i18n';
 import { useAppDispatch, useAppSelector } from 'core/hooks';
 
@@ -25,7 +23,7 @@ const EventFilterPane = ({ orgId }: EventFilterPaneProps) => {
   const dispatch = useAppDispatch();
   const messages = useMessages(messageIds);
   const state = useAppSelector((state) => state.events.filters);
-  const typesModel = useModel((env) => new EventTypesModel(env, orgId));
+  const eventTypes = useEventTypes(orgId);
 
   const disableReset =
     state.selectedActions.length === 0 &&
@@ -106,7 +104,7 @@ const EventFilterPane = ({ orgId }: EventFilterPaneProps) => {
             selectedValues={state.selectedStates}
             title={messages.eventFilter.filterOptions.stateFilters.title()}
           />
-          <ZUIFuture future={typesModel.getTypes()}>
+          <ZUIFuture future={eventTypes}>
             {(data) => {
               return (
                 <CheckboxFilterList

src/features/calendar/components/CalendarWeekView/index.tsx

@@ -25,7 +25,7 @@ import { scrollToEarliestEvent } from './utils';
 import theme from 'theme';
 import useWeekCalendarEvents from 'features/calendar/hooks/useWeekCalendarEvents';
 import { ZetkinEvent } from 'utils/types/zetkin';
-import { ZetkinEventPostBody } from 'features/events/repo/EventsRepo';
+import { ZetkinEventPostBody } from 'features/events/hooks/useEventMutations';
 import { useAppDispatch, useEnv, useNumericRouteParams } from 'core/hooks';
 
 dayjs.extend(isoWeek);

src/features/calendar/components/EventCluster/Arbitrary.tsx

@@ -1,7 +1,7 @@
 import { EventOutlined } from '@mui/icons-material';
 import { FC } from 'react';
 
-import { EventState } from 'features/events/models/EventDataModel';
+import { EventState } from 'features/events/hooks/useEventState';
 import { fieldsToPresent } from './utils';
 import getEventState from 'features/events/utils/getEventState';
 import messageIds from 'features/calendar/l10n/messageIds';

src/features/calendar/components/EventCluster/MultiLocation.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 
 import calendarMessageIds from 'features/calendar/l10n/messageIds';
 import eventMessageIds from 'features/events/l10n/messageIds';
-import { EventState } from 'features/events/models/EventDataModel';
+import { EventState } from 'features/events/hooks/useEventState';
 import { fieldsToPresent } from './utils';
 import getEventState from 'features/events/utils/getEventState';
 import MultiLocationIcon from 'zui/icons/MultiLocation';

src/features/calendar/components/EventCluster/MultiShift.tsx

@@ -4,7 +4,7 @@ import { ScheduleOutlined } from '@mui/icons-material';
 
 import calendarMessageIds from 'features/calendar/l10n/messageIds';
 import eventMessageIds from 'features/events/l10n/messageIds';
-import { EventState } from 'features/events/models/EventDataModel';
+import { EventState } from 'features/events/hooks/useEventState';
 import getEventState from 'features/events/utils/getEventState';
 import LocationLabel from 'features/events/components/LocationLabel';
 import { removeOffset } from 'utils/dateUtils';

src/features/calendar/components/EventCluster/Single.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 
 import calendarMessageIds from 'features/calendar/l10n/messageIds';
 import eventMessageIds from 'features/events/l10n/messageIds';
-import { EventState } from 'features/events/models/EventDataModel';
+import { EventState } from 'features/events/hooks/useEventState';
 import { fieldsToPresent } from './utils';
 import getEventState from 'features/events/utils/getEventState';
 import LocationLabel from 'features/events/components/LocationLabel';

src/features/campaigns/components/ActivitiesOverview/items/EventOverviewListItem.tsx

@@ -7,15 +7,13 @@ import {
 } from '@mui/icons-material';
 
 import { CLUSTER_TYPE } from 'features/campaigns/hooks/useClusteredActivities';
-import EventDataModel from 'features/events/models/EventDataModel';
 import EventWarningIcons from 'features/events/components/EventWarningIcons';
 import getEventUrl from 'features/events/utils/getEventUrl';
 import messageIds from 'features/events/l10n/messageIds';
 import OverviewListItem from './OverviewListItem';
 import { removeOffset } from 'utils/dateUtils';
 import { useEventPopper } from 'features/events/components/EventPopper/EventPopperProvider';
 import { useMessages } from 'core/i18n';
-import useModel from 'core/useModel';
 import { ZetkinEvent } from 'utils/types/zetkin';
 import ZUIIconLabelRow from 'zui/ZUIIconLabelRow';
 import ZUITimeSpan from 'zui/ZUITimeSpan';
@@ -30,9 +28,6 @@ const EventOverviewListItem: FC<EventOverviewListItemProps> = ({
   focusDate,
 }) => {
   const { openEventPopper } = useEventPopper();
-  const model = useModel(
-    (env) => new EventDataModel(env, event.organization.id, event.id)
-  );
   const messages = useMessages(messageIds);
 
   return (
@@ -46,7 +41,13 @@ const EventOverviewListItem: FC<EventOverviewListItemProps> = ({
       }
       focusDate={focusDate}
       href={getEventUrl(event)}
-      meta={<EventWarningIcons compact model={model} />}
+      meta={
+        <EventWarningIcons
+          compact
+          eventId={event.id}
+          orgId={event.organization.id}
+        />
+      }
       onClick={(x: number, y: number) => {
         openEventPopper(
           { events: [event], kind: CLUSTER_TYPE.SINGLE },

src/features/campaigns/components/CampaignActionButtons.tsx

@@ -27,8 +27,9 @@ import ZUIEllipsisMenu from 'zui/ZUIEllipsisMenu';
 import ZUISnackbarContext from 'zui/ZUISnackbarContext';
 import { Msg, useMessages } from 'core/i18n';
 
-import EventDataModel from 'features/events/models/EventDataModel';
 import messageIds from '../l10n/messageIds';
+import useCreateEvent from 'features/events/hooks/useCreateEvent';
+import { useNumericRouteParams } from 'core/hooks';
 
 enum CAMPAIGN_MENU_ITEMS {
   EDIT_CAMPAIGN = 'editCampaign',
@@ -46,7 +47,7 @@ const CampaignActionButtons: React.FunctionComponent<
   const messages = useMessages(messageIds);
   const queryClient = useQueryClient();
   const router = useRouter();
-  const { orgId } = router.query;
+  const { orgId } = useNumericRouteParams();
   // Dialogs
   const { showSnackbar } = useContext(ZUISnackbarContext);
   const { showConfirmDialog } = useContext(ZUIConfirmDialogContext);
@@ -56,18 +57,15 @@ const CampaignActionButtons: React.FunctionComponent<
   const closeCreateTaskDialog = () => setCreateTaskDialogOpen(false);
 
   const model = useModel(
-    (env) => new CampaignDataModel(env, parseInt(orgId as string), campaign.id)
-  );
-  const eventModel = useModel(
-    (env) => new EventDataModel(env, parseInt(orgId as string), campaign.id)
+    (env) => new CampaignDataModel(env, orgId, campaign.id)
   );
 
+  const { createEvent } = useCreateEvent(orgId);
+
   // Mutations
-  const patchCampaignMutation = useMutation(
-    patchCampaign(orgId as string, campaign.id)
-  );
+  const patchCampaignMutation = useMutation(patchCampaign(orgId, campaign.id));
   const deleteCampaignMutation = useMutation(
-    deleteCampaign(orgId as string, campaign.id)
+    deleteCampaign(orgId, campaign.id)
   );
 
   // Event Handlers
@@ -82,7 +80,7 @@ const CampaignActionButtons: React.FunctionComponent<
       onError: () =>
         showSnackbar('error', messages.form.deleteCampaign.error()),
       onSuccess: () => {
-        router.push(`/organize/${orgId as string}/projects`);
+        router.push(`/organize/${orgId}/projects`);
       },
     });
   };
@@ -96,7 +94,7 @@ const CampaignActionButtons: React.FunctionComponent<
 
     const defaultEnd = new Date(defaultStart.getTime() + 60 * 60 * 1000);
 
-    eventModel.createEvent({
+    createEvent({
       activity_id: null,
       campaign_id: campaign.id,
       end_time: defaultEnd.toISOString(),

src/features/events/components/AddPersonButton.tsx

@@ -1,26 +1,27 @@
+import messageIds from '../l10n/messageIds';
 import PersonAddIcon from '@mui/icons-material/PersonAdd';
+import useEventParticipants from '../hooks/useEventParticipants';
+import useEventParticipantsMutations from '../hooks/useEventParticipantsMutations';
 import { useState } from 'react';
-import { Box, IconButton, Popover } from '@mui/material';
-import { EmojiPeople, People } from '@mui/icons-material';
-
-import EventDataModel from 'features/events/models/EventDataModel';
-import messageIds from '../l10n/messageIds';
 import ZUIFutures from 'zui/ZUIFutures';
 import { MUIOnlyPersonSelect as ZUIPersonSelect } from 'zui/ZUIPersonSelect';
+import { Box, IconButton, Popover } from '@mui/material';
+import { EmojiPeople, People } from '@mui/icons-material';
 import { Msg, useMessages } from 'core/i18n';
 
 interface AddPersonButtonProps {
-  model: EventDataModel;
+  orgId: number;
+  eventId: number;
 }
 
-const AddPersonButton = ({ model }: AddPersonButtonProps) => {
+const AddPersonButton = ({ orgId, eventId }: AddPersonButtonProps) => {
   const [anchorEl, setAnchorEl] = useState<Element | null>(null);
-
   const messages = useMessages(messageIds);
-
-  const handleSelectedPerson = (personId: number) => {
-    model.addParticipant(personId);
-  };
+  const { addParticipant } = useEventParticipantsMutations(orgId, eventId);
+  const { participantsFuture, respondentsFuture } = useEventParticipants(
+    orgId,
+    eventId
+  );
 
   return (
     <>
@@ -60,8 +61,8 @@ const AddPersonButton = ({ model }: AddPersonButtonProps) => {
         <Box mt={1} p={2}>
           <ZUIFutures
             futures={{
-              participants: model.getParticipants(),
-              respondents: model.getRespondents(),
+              participants: participantsFuture,
+              respondents: respondentsFuture,
             }}
           >
             {({ data: { participants, respondents } }) => {
@@ -117,7 +118,7 @@ const AddPersonButton = ({ model }: AddPersonButtonProps) => {
                     }}
                     name="person"
                     onChange={(person) => {
-                      handleSelectedPerson(person.id);
+                      addParticipant(person.id);
                     }}
                     placeholder={messages.addPerson.addPlaceholder()}
                     selectedPerson={null}

src/features/events/components/EventActionButtons.tsx

@@ -8,10 +8,10 @@ import {
 } from '@mui/icons-material';
 import React, { useContext } from 'react';
 
-import EventDataModel from '../models/EventDataModel';
 import messageIds from '../l10n/messageIds';
+import useDuplicateEvent from '../hooks/useDuplicateEvent';
+import useEventMutations from '../hooks/useEventMutations';
 import { useMessages } from 'core/i18n';
-import useModel from 'core/useModel';
 import { ZetkinEvent } from 'utils/types/zetkin';
 import { ZUIConfirmDialogContext } from 'zui/ZUIConfirmDialogProvider';
 import ZUIDatePicker from 'zui/ZUIDatePicker';
@@ -28,34 +28,35 @@ const EventActionButtons: React.FunctionComponent<EventActionButtonsProps> = ({
   const orgId = event.organization.id;
   const { showConfirmDialog } = useContext(ZUIConfirmDialogContext);
   const router = useRouter();
-
-  const model = useModel((env) => new EventDataModel(env, orgId, event.id));
+  const { cancelEvent, deleteEvent, restoreEvent, setPublished } =
+    useEventMutations(orgId, event.id);
+  const { duplicateEvent } = useDuplicateEvent(orgId, event.id);
 
   const published =
     !!event.published && new Date(event.published) <= new Date();
 
   const handlePublish = () => {
-    model.setPublished(new Date().toISOString());
+    setPublished(new Date().toISOString());
   };
 
   const handleUnpublish = () => {
-    model.setPublished(null);
+    setPublished(null);
   };
   const handleChangeDate = (date: string | null) => {
-    model.setPublished(date);
+    setPublished(date);
   };
 
   const handleDelete = () => {
-    model.deleteEvent();
+    deleteEvent();
     router.push(`/organize/${orgId}/projects/${event.campaign?.id || ''} `);
   };
 
   const handleDuplicate = () => {
-    model.duplicateEvent();
+    duplicateEvent();
   };
 
   const handleCancel = () => {
-    event.cancelled ? model.restoreEvent() : model.cancel();
+    event.cancelled ? restoreEvent() : cancelEvent();
   };
 
   return (