incomplete updates

src/scenes/ProgressReports/EditForm/ProgressReportEdit.graphql

@@ -22,35 +22,7 @@ fragment ProgressReportEdit on ProgressReport {
   progressForAllVariants {
     ...ProgressReportProgress
   }
-  media {
-    items {
-      variant {
-        key
-        label
-        responsibleRole
-      }
-      variantGroup
-      id
-      category
-      media {
-        altText
-        caption
-        file {
-          id
-          url
-          name
-          mimeType
-          type
-          size
-        }
-      }
-    }
-    uploadableVariants {
-      key
-      label
-      responsibleRole
-    }
-  }
+  ...mediaStep
   status {
     ...ProgressReportStatus
   }

src/scenes/ProgressReports/EditForm/Steps/Media/MediaInfoForm.tsx

@@ -5,46 +5,41 @@ import {
   ProgressReportMediaCategoryList,
 } from '~/api/schema/enumLists';
 import { labelFrom } from '~/common';
-import { Form, SelectField } from '~/components/form';
+import { Form, FormProps, SelectField } from '~/components/form';
 
-export const MediaInfoForm = ({
-  disabled,
-  initialValues,
-}: {
-  disabled: boolean;
-  initialValues: {
-    category: ProgressReportMediaCategory | null;
-    caption: string | null;
-    id: string;
-  };
-}) => {
+export interface MediaFormState {
+  category: ProgressReportMediaCategory | null;
+  caption: string | null;
+  id?: string;
+}
+export const MediaInfoForm = ({ ...formValues }: FormProps<MediaFormState>) => {
   return (
-    <Form
-      onSubmit={() => {
-        // placeholder for submit logic
-      }}
-    >
-      <Box sx={{ p: 1, m: 1, flexGrow: 2 }}>
-        <SelectField
-          label="Photo Category"
-          name="category"
-          disabled={true}
-          options={ProgressReportMediaCategoryList}
-          variant="outlined"
-          getOptionLabel={labelFrom(ProgressReportMediaCategoryLabels)}
-          defaultValue={disabled ? null : ProgressReportMediaCategoryList[0]}
-        />
-        <TextField
-          variant="outlined"
-          name="caption"
-          label="Caption"
-          disabled={true}
-          placeholder="Enter Photo Caption"
-          minRows={4}
-          margin="none"
-          defaultValue={initialValues?.caption}
-        />
-      </Box>
+    <Form<MediaFormState> {...formValues}>
+      {({ handleSubmit, values }) => (
+        <Box
+          sx={{ p: 1, m: 1, flexGrow: 2 }}
+          onSubmit={handleSubmit}
+          component="form"
+        >
+          <SelectField
+            label="Photo Category"
+            name="category"
+            disabled={!values.id}
+            options={ProgressReportMediaCategoryList}
+            variant="outlined"
+            getOptionLabel={labelFrom(ProgressReportMediaCategoryLabels)}
+          />
+          <TextField
+            variant="outlined"
+            name="caption"
+            label="Caption"
+            disabled={!values.id}
+            placeholder="Enter Photo Caption"
+            minRows={4}
+            margin="none"
+          />
+        </Box>
+      )}
     </Form>
   );
 };

src/scenes/ProgressReports/EditForm/Steps/Media/MediaStep.graphql

@@ -1,34 +1,28 @@
 mutation CreateMedia($input: UploadProgressReportMedia!) {
   uploadProgressReportMedia(input: $input) {
-    id
-    media {
-      items {
-        id
-        variant {
-          ...variant
-        }
-        category
-      }
-    }
+    ...mediaStep
   }
 }
 
 mutation UpdateMedia($input: UpdateProgressReportMedia!) {
   updateProgressReportMedia(input: $input) {
-    id
-    media {
-      altText
-      caption
-      id
-      mimeType
-      url
-    }
+    ...progressReportMedia
   }
 }
 mutation DeleteMedia($deleteProgressReportMediaId: ID!) {
   deleteProgressReportMedia(id: $deleteProgressReportMediaId) {
-    parent {
-      id
+    ...mediaStep
+  }
+}
+
+fragment mediaStep on ProgressReport {
+  id
+  media {
+    items {
+      ...progressReportMedia
+    }
+    uploadableVariants {
+      ...variant
     }
   }
 }

src/scenes/ProgressReports/EditForm/Steps/Media/MediaStep.tsx

@@ -7,6 +7,8 @@ import { DropOverlay } from '~/components/Upload/DropOverlay';
 import { StepComponent } from '../step.types';
 import { CreateMediaDocument, DeleteMediaDocument } from './MediaStep.graphql';
 import { VariantMediaAccordion } from './VariantMediaAccordion';
+import { FormProps } from "~/components/form";
+import { MediaFormState } from "~/scenes/ProgressReports/EditForm/Steps/Media/MediaInfoForm";
 
 // TODO find types for actual uploadVariant here
 export interface MediaVariantResponse {
@@ -18,8 +20,10 @@ export const MediaStep: StepComponent = ({ report }) => {
   const [deleteMedia] = useMutation(DeleteMediaDocument);
   const uploadFile = useUploadFileAsync();
 
-  const handleFileUpload = async (files: File[]) => {
-    const [uploadedImageInfo, finalizeUpload] = await uploadFile(files[0]);
+  const handleSubmit: FormProps<MediaFormState>["onSubmit"] = async (values) => {
+    // use values.id to determine if we want to create, update, delete
+    // delete = values.id + submitAction
+    const [uploadedImageInfo, finalizeUpload] = await uploadFile(values);
     if (!uploadedImageInfo) {
       finalizeUpload.tap;
       return;
@@ -59,13 +63,6 @@ export const MediaStep: StepComponent = ({ report }) => {
           .map((variant) => {
             return (
               <Fragment key={variant.key}>
-                <DropOverlay isDragActive={isDragActive}>
-                  Drop files to start uploading
-                </DropOverlay>
-                <input
-                  {...getInputProps()}
-                  name={`upload-media-${variant.key}`}
-                />
                 <VariantMediaAccordion
                   deleteMedia={deleteMedia}
                   openFileBrowser={openFileBrowser}

src/scenes/ProgressReports/EditForm/Steps/Media/VariantMediaAccordion.tsx

@@ -28,14 +28,15 @@ import {
   SyntheticEvent,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
 import { Sensitivity as SensitivityType } from '~/api/schema/schema.graphql';
 import { RoleIcon } from '~/components/RoleIcon';
 import { SensitivityIcon } from '~/components/Sensitivity';
 import { MediaInfoForm } from './MediaInfoForm';
-import { MediaVariantResponse } from './MediaStep';
+import { ProgressReportMediaFragment } from './progressReportMedia.graphql';
 
 // TODO update types
 const MoreActionsButton = ({
@@ -233,18 +234,29 @@ const ImageBox = ({
 // TODO proper types
 export const VariantMediaAccordion = ({
   openFileBrowser,
-  response,
+  existingMedia,
   initiallyOpen,
   sensitivity,
   deleteMedia,
 }: {
   openFileBrowser: any;
-  response: MediaVariantResponse;
+  existingMedia?: ProgressReportMediaFragment;
   initiallyOpen: boolean;
   sensitivity: SensitivityType;
   deleteMedia: any;
 }) => {
   const [expanded, setExpanded] = useState(initiallyOpen);
+  const initialValues = useMemo(
+    () =>
+      existingMedia
+        ? {
+            category: existingMedia.category,
+            caption: existingMedia.media.caption,
+            id: existingMedia.id,
+          }
+        : undefined,
+    [existingMedia]
+  );
   const deleteCurrentMedia = useCallback(async () => {
     await deleteMedia({
       variables: { deleteProgressReportMediaId: response.item[0]?.id },
@@ -272,14 +284,7 @@ export const VariantMediaAccordion = ({
           deleteMedia={deleteCurrentMedia}
           sensitivity={sensitivity}
         />
-        <MediaInfoForm
-          initialValues={{
-            category: response.item[0]?.category,
-            caption: response.item[0]?.media?.caption,
-            id: response.item[0]?.id,
-          }}
-          disabled={!response.item}
-        />
+        <MediaInfoForm initialValues={initialValues} onSubmit={updateMedia} />
       </AccordionDetails>
     </Accordion>
   );

src/scenes/ProgressReports/EditForm/Steps/Media/progressReportMedia.graphql

@@ -0,0 +1,23 @@
+fragment progressReportMedia on ProgressReportMedia {
+  variant {
+    key
+    label
+    responsibleRole
+  }
+  variantGroup
+  id
+  category
+  media {
+    id
+    altText
+    caption
+    file {
+      id
+      url
+      name
+      mimeType
+      type
+      size
+    }
+  }
+}