Improve types of event editor form

webkom · Sep 22, 2024 · 24222e0 · 24222e0
1 parent 83ca56d
commit 24222e0
Show file tree

Hide file tree

Showing 12 changed files with 402 additions and 346 deletions.
diff --git a/app/models.ts b/app/models.ts
@@ -9,7 +9,7 @@ import type { EntityId } from '@reduxjs/toolkit';
 import type Comment from 'app/store/models/Comment';
 import type { ListCompany } from 'app/store/models/Company';
 import type { ReactionsGrouped } from 'app/store/models/Reaction';
-import type { DetailedUser, PhotoConsent } from 'app/store/models/User';
+import type { PhotoConsent } from 'app/store/models/User';
 import type { RoleType } from 'app/utils/constants';
 import type { Moment } from 'moment';
 
@@ -27,10 +27,6 @@ export enum EventTime {
   activate = 'activationTime',
   start = 'startTime',
 }
-type SelectInput = {
-  label: string;
-  value: string;
-};
 export type EventStatusType = 'NORMAL' | 'OPEN' | 'TBA' | 'INFINITE';
 export type Grade = {
   name: string;
@@ -236,23 +232,6 @@ export type Event = EventBase & {
   isForeignLanguage: boolean;
 };
 
-type EventTransformPool = EventPoolBase & {
-  permissionGroups: Array<SelectInput>;
-};
-
-export type TransformEvent = EventBase & {
-  pools: Array<EventTransformPool>;
-  company: SelectInput;
-  responsibleGroup: SelectInput;
-  eventStatusType: SelectInput;
-  eventType: SelectInput;
-  mazemapPoi: Record<string, any>;
-  useMazemap: boolean;
-  hasFeedbackQuestion: boolean;
-  responsibleUsers: DetailedUser[];
-  isForeignLanguage: boolean;
-};
-
 export type Workplace = {
   town: string;
 };

diff --git a/app/routes/events/components/EventEditor/EditorSection/Descriptions.tsx b/app/routes/events/components/EventEditor/EditorSection/Descriptions.tsx
@@ -1,17 +1,13 @@
-import { Flex } from '@webkom/lego-bricks';
 import { Field } from 'react-final-form';
 import { EditorField, TextEditor } from 'app/components/Form';
-import Tag from 'app/components/Tags/Tag';
 import styles from '../EventEditor.css';
 import type { UploadArgs } from 'app/actions/FileActions';
-import type { EditingEvent } from 'app/routes/events/utils';
 
 type Props = {
   uploadFile: (uploadArgs: UploadArgs) => void;
-  values: EditingEvent;
 };
 
-const Descriptions: React.FC<Props> = ({ uploadFile, values }) => {
+const Descriptions = ({ uploadFile }: Props) => {
   return (
     <>
       <Field
@@ -30,11 +26,6 @@ const Descriptions: React.FC<Props> = ({ uploadFile, values }) => {
         uploadFile={uploadFile}
         required
       />
-      <Flex className={styles.tagRow}>
-        {(values.tags || []).map((tag, i) => (
-          <Tag key={i} tag={tag} />
-        ))}
-      </Flex>
     </>
   );
 };

diff --git a/app/routes/events/components/EventEditor/EditorSection/Details.tsx b/app/routes/events/components/EventEditor/EditorSection/Details.tsx
@@ -12,13 +12,13 @@ import MazemapLink from 'app/components/MazemapEmbed/MazemapLink';
 import Tooltip from 'app/components/Tooltip';
 import { EventTypeConfig } from 'app/routes/events/utils';
 import styles from '../EventEditor.css';
-import type { EditingEvent } from 'app/routes/events/utils';
+import type { EventEditorFormValues } from 'app/routes/events/components/EventEditor';
 
 type Props = {
-  values: EditingEvent;
+  values: EventEditorFormValues;
 };
 
-const Details: React.FC<Props> = ({ values }) => {
+const Details = ({ values }: Props) => {
   return (
     <>
       <Flex className={styles.editorSectionRow}>

diff --git a/app/routes/events/components/EventEditor/EditorSection/Header.tsx b/app/routes/events/components/EventEditor/EditorSection/Header.tsx
@@ -7,6 +7,7 @@ import {
   Image,
 } from '@webkom/lego-bricks';
 import { FolderOpen, Trash2 } from 'lucide-react';
+import { useState } from 'react';
 import { Field } from 'react-final-form';
 import { setSaveForUse } from 'app/actions/FileActions';
 import EmptyState from 'app/components/EmptyState';
@@ -16,32 +17,29 @@ import {
   Button,
   ImageUploadField,
 } from 'app/components/Form';
+import { selectAllImageGalleryEntries } from 'app/reducers/imageGallery';
 import { colorForEventType } from 'app/routes/events/utils';
+import { useAppSelector } from 'app/store/hooks';
+import { spyForm } from 'app/utils/formSpyUtils';
 import styles from '../EventEditor.css';
-import type { EditingEvent } from 'app/routes/events/utils';
-import type { FormApi } from 'final-form';
+import type { EventEditorFormValues } from 'app/routes/events/components/EventEditor';
 
 type Props = {
-  form: FormApi<EditingEvent, Partial<EditingEvent>>;
-  values: EditingEvent;
-  useImageGallery: boolean;
-  imageGalleryUrl: string;
-  event: any;
-  imageGallery: any;
-  setUseImageGallery: React.Dispatch<React.SetStateAction<boolean>>;
-  setImageGalleryUrl: React.Dispatch<React.SetStateAction<string>>;
+  values: EventEditorFormValues;
 };
 
-const Header = ({
-  form,
-  values,
-  useImageGallery,
-  imageGalleryUrl,
-  event,
-  imageGallery,
-  setUseImageGallery,
-  setImageGalleryUrl,
-}: Props) => {
+const Header = ({ values }: Props) => {
+  const [useImageGallery, setUseImageGallery] = useState(false);
+  const [imageGalleryUrl, setImageGalleryUrl] = useState('');
+
+  const imageGalleryEntries = useAppSelector(selectAllImageGalleryEntries);
+  const imageGallery = imageGalleryEntries?.map((image) => ({
+    key: image.key,
+    cover: image.cover,
+    token: image.token,
+    coverPlaceholder: image.coverPlaceholder,
+  }));
+
   return (
     <>
       <Field
@@ -70,7 +68,7 @@ const Header = ({
         name="cover"
         component={ImageUploadField}
         aspectRatio={20 / 6}
-        img={useImageGallery ? imageGalleryUrl : event?.cover}
+        img={useImageGallery ? imageGalleryUrl : values.cover}
         required
       />
 
@@ -92,49 +90,53 @@ const Header = ({
                   justifyContent="space-around"
                   gap="var(--spacing-md)"
                 >
-                  {imageGallery?.map((e) => (
-                    <Flex
-                      key={e.key}
-                      alignItems="center"
-                      gap="var(--spacing-md)"
-                    >
-                      <Image
-                        src={e.cover}
-                        placeholder={e.coverPlaceholder}
-                        alt={`Forsidebildet til ${e.cover}`}
-                        onClick={() => {
-                          form.change('cover', `${e.key}:${e.token}`);
-                          close();
-                          setUseImageGallery(true);
-                          setImageGalleryUrl(e.cover);
-                        }}
-                        className={styles.imageGalleryEntry}
-                      />
-                      <ConfirmModal
-                        title="Fjern fra galleri"
-                        message="Er du sikker på at du vil fjerne bildet fra bildegalleriet? Bildet blir ikke slettet fra databasen."
-                        closeOnConfirm
-                        onConfirm={() => {
-                          setSaveForUse(e.key, e.token, false);
-                        }}
-                      >
-                        {({ openConfirmModal }) => (
-                          <Icon
-                            onClick={openConfirmModal}
-                            iconNode={<Trash2 />}
-                            danger
+                  {spyForm<EventEditorFormValues>((form) => (
+                    <>
+                      {imageGallery?.map((e) => (
+                        <Flex
+                          key={e.key}
+                          alignItems="center"
+                          gap="var(--spacing-md)"
+                        >
+                          <Image
+                            src={e.cover}
+                            placeholder={e.coverPlaceholder}
+                            alt={`Forsidebildet til ${e.cover}`}
+                            onClick={() => {
+                              form.change('cover', `${e.key}:${e.token}`);
+                              close();
+                              setUseImageGallery(true);
+                              setImageGalleryUrl(e.cover);
+                            }}
+                            className={styles.imageGalleryEntry}
                           />
-                        )}
-                      </ConfirmModal>
-                    </Flex>
+                          <ConfirmModal
+                            title="Fjern fra galleri"
+                            message="Er du sikker på at du vil fjerne bildet fra bildegalleriet? Bildet blir ikke slettet fra databasen."
+                            closeOnConfirm
+                            onConfirm={() => {
+                              setSaveForUse(e.key, e.token, false);
+                            }}
+                          >
+                            {({ openConfirmModal }) => (
+                              <Icon
+                                onClick={openConfirmModal}
+                                iconNode={<Trash2 />}
+                                danger
+                              />
+                            )}
+                          </ConfirmModal>
+                        </Flex>
+                      ))}
+                      {imageGallery.length === 0 && (
+                        <EmptyState
+                          iconNode={<FolderOpen />}
+                          header="Bildegalleriet er tomt ..."
+                          body="Hvorfor ikke laste opp et bilde?"
+                        />
+                      )}
+                    </>
                   ))}
-                  {imageGallery.length === 0 && (
-                    <EmptyState
-                      iconNode={<FolderOpen />}
-                      header="Bildegalleriet er tomt ..."
-                      body="Hvorfor ikke laste opp et bilde?"
-                    />
-                  )}
                 </Flex>
               </>
             )}

diff --git a/app/routes/events/components/EventEditor/EditorSection/Registration.tsx b/app/routes/events/components/EventEditor/EditorSection/Registration.tsx
@@ -18,14 +18,14 @@ import {
 } from 'app/routes/events/utils';
 import { spyValues } from 'app/utils/formSpyUtils';
 import styles from '../EventEditor.css';
-import renderPools from '../renderPools';
-import type { EditingEvent } from 'app/routes/events/utils';
+import PoolsField from '../PoolsField';
+import type { EventEditorFormValues } from 'app/routes/events/components/EventEditor';
 
 type Props = {
-  values: EditingEvent;
+  values: EventEditorFormValues;
 };
 
-const Registrations: React.FC<Props> = ({ values }) => {
+const Registrations = ({ values }: Props) => {
   const initialPool = {
     name: 'Pool #1',
     registrations: [],
@@ -35,13 +35,17 @@ const Registrations: React.FC<Props> = ({ values }) => {
       .minute(0)
       .toISOString(),
     permissionGroups: [],
-  };
+  } satisfies EventEditorFormValues['pools'][number];
 
   return (
     <>
-      {spyValues((values: EditingEvent) => {
+      {spyValues<Partial<EventEditorFormValues>>((values) => {
         // Adding an initial pool if the event status type allows for it and there are no current pools
-        if (['NORMAL', 'INFINITE'].includes(values.eventStatusType?.value)) {
+        values.pools ??= [];
+        if (
+          values.eventStatusType &&
+          ['NORMAL', 'INFINITE'].includes(values.eventStatusType?.value)
+        ) {
           if (values.pools.length === 0) {
             values.pools = [initialPool];
           }
@@ -227,9 +231,13 @@ const NormalOrInfiniteStatusType: React.FC<NormalOrInfiniteStatusTypeProps> = ({
         <div className={styles.metaList}>
           <FieldArray
             name="pools"
-            component={renderPools}
-            startTime={values.startTime}
-            eventStatusType={values.eventStatusType?.value}
+            render={(props) => (
+              <PoolsField
+                {...props}
+                startTime={values.startTime}
+                eventStatusType={values.eventStatusType?.value}
+              />
+            )}
           />
         </div>
         {values.pools?.length > 1 && (

diff --git a/app/routes/events/components/EventEditor/EditorSection/index.tsx b/app/routes/events/components/EventEditor/EditorSection/index.tsx
@@ -2,20 +2,21 @@ import { Flex, Icon } from '@webkom/lego-bricks';
 import cx from 'classnames';
 import { useState } from 'react';
 import styles from '../EventEditor.css';
-import type { PropsWithChildren } from 'react';
+import type { ReactNode } from 'react';
 
 type Props = {
   title: string;
   collapsible?: boolean;
   initiallyExpanded?: boolean;
+  children: ReactNode;
 };
 
-const EditorSection: React.FC<PropsWithChildren<Props>> = ({
+const EditorSection = ({
   children,
   title,
   collapsible = true,
   initiallyExpanded = false,
-}) => {
+}: Props) => {
   const [expanded, setExpanded] = useState(!collapsible || initiallyExpanded);
 
   return (
@@ -37,9 +38,7 @@ const EditorSection: React.FC<PropsWithChildren<Props>> = ({
         )}
         <h3>{title}</h3>
       </Flex>
-      {expanded && (
-        <div className={styles.editorSectionContent}>{children}</div>
-      )}
+      {expanded && <div>{children}</div>}
     </>
   );
 };