media and upload of image working

src/scenes/ProgressReports/EditForm/ProgressReportEdit.graphql

@@ -24,7 +24,26 @@ fragment ProgressReportEdit on ProgressReport {
   }
   media {
     items {
+      variant {
+        key
+        label
+        responsibleRole
+      }
+      variantGroup
       id
+      category
+      media {
+        altText
+        caption
+        file {
+          id
+          url
+          name
+          mimeType
+          type
+          size
+        }
+      }
     }
     uploadableVariants {
       key

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

@@ -1,21 +1,33 @@
-import { Box } from '@mui/material';
+import { Box, TextField } from '@mui/material';
 import {
   ProgressReportMediaCategoryLabels,
   ProgressReportMediaCategoryList,
 } from '~/api/schema/enumLists';
 import { labelFrom } from '~/common';
-import { Form, SelectField, TextField } from '~/components/form';
+import { Form, SelectField } from '~/components/form';
 import { minLength, required } from '~/components/form/validators';
+import { useCallback, useState } from 'react';
+import { ProgressReportMediaCategory } from '~/api/schema.graphql';
 
 // TODO type submitForm
 // @ts-ignore
 export const MediaInfoForm = ({
   submitForm,
   disabled,
+  initialValues,
 }: {
   submitForm: any;
   disabled: boolean;
+  initialValues: {
+    category: ProgressReportMediaCategory | null;
+    caption: string | null;
+  };
 }) => {
+  const [category, setCategory] = useState(initialValues.category);
+  const [caption, setCaption] = useState(initialValues.caption);
+  const updateMedia = useCallback(() => {
+    submitForm({ variables: {} });
+  }, []);
   return (
     <Form onSubmit={submitForm}>
       <Box sx={{ p: 1, m: 1, flexGrow: 2 }}>
@@ -26,7 +38,9 @@ export const MediaInfoForm = ({
           options={ProgressReportMediaCategoryList}
           variant="outlined"
           getOptionLabel={labelFrom(ProgressReportMediaCategoryLabels)}
-          defaultValue={disabled ? null : ProgressReportMediaCategoryList[0]}
+          defaultValue={
+            disabled ? null : category || ProgressReportMediaCategoryList[0]
+          }
         />
         <TextField
           variant="outlined"
@@ -35,8 +49,8 @@ export const MediaInfoForm = ({
           disabled={disabled}
           placeholder="Enter Photo Caption"
           minRows={4}
-          validate={[required, minLength()]}
           margin="none"
+          defaultValue={initialValues?.caption}
         />
       </Box>
     </Form>

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

@@ -0,0 +1,31 @@
+mutation CreateMedia($input: UploadProgressReportMedia!) {
+  uploadProgressReportMedia(input: $input) {
+    id
+    media {
+      items {
+        id
+        variant {
+          key
+          label
+          responsibleRole
+        }
+        category
+      }
+    }
+  }
+}
+
+mutation UpdateMedia($input: UpdateProgressReportMedia!) {
+  updateProgressReportMedia(input: $input) {
+    id
+    media {
+      altText
+      caption
+      id
+      mimeType
+      url
+    }
+  }
+}
+# placeholder for delete
+# placeholder for download

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

@@ -1,43 +1,58 @@
+import { useMutation } from '@apollo/client';
 import { Box, Typography } from '@mui/material';
-import React from 'react';
-import { useState } from 'react';
+import { Fragment } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useUploadFileAsync } from '~/components/files/hooks';
 import { DropOverlay } from '~/components/Upload/DropOverlay';
 import { StepComponent } from '../step.types';
+import { CreateMediaDocument, UpdateMediaDocument } from './MediaStep.graphql';
 import { VariantMediaAccordion } from './VariantMediaAccordion';
 
 // TODO find types for actual uploadVariant here
 export interface MediaVariantResponse {
-  item?: string | undefined;
+  item: any[];
   uploadVariant: any;
 }
 export const MediaStep: StepComponent = ({ report }) => {
-  // TODO need to replace this with the actual file version and upload
-  const [currentFile, setCurrentFile] = useState('');
+  const [createMedia] = useMutation(CreateMediaDocument);
+  const [updateMedia] = useMutation(UpdateMediaDocument);
   const uploadFile = useUploadFileAsync();
-  //
-  // const handleFileUpload = async () => {
-  //   console.log('handleFileUpload')
-  // }
+
   // TODO remove this before going live
   console.log(report);
-  const handleDrop = (files: File[]) => {
-    console.log(`file dropped`);
-    console.log(files);
-    // uploadFile({ files });
+  const handleFileUpload = async (files: File[]) => {
+    const [uploadedImageInfo, finalizeUpload] = await uploadFile(files[0]);
+    if (!uploadedImageInfo) {
+      finalizeUpload.tap;
+      return;
+    }
+    await createMedia({
+      variables: {
+        input: {
+          file: uploadedImageInfo,
+          reportId: report.id,
+          variant: 'published',
+        },
+      },
+    }).then(...finalizeUpload.tap);
+    // finalizeUpload.tap;
   };
   const {
     getRootProps,
     getInputProps,
     isDragActive,
     open: openFileBrowser,
   } = useDropzone({
-    onDrop: handleDrop,
+    onDrop: handleFileUpload,
     noClick: true,
     noKeyboard: true,
     disabled: false,
   });
+
+  const chooseFileAndUpload = () => {
+    const file = openFileBrowser();
+    console.log(file);
+  };
   return (
     <div {...getRootProps()}>
       <Box sx={{ maxWidth: 'md' }}>
@@ -49,19 +64,28 @@ export const MediaStep: StepComponent = ({ report }) => {
           .reverse()
           .map((variant) => {
             return (
-              <React.Fragment key={variant.key}>
+              <Fragment key={variant.key}>
                 <DropOverlay isDragActive={isDragActive}>
                   Drop files to start uploading
                 </DropOverlay>
-                <input {...getInputProps()} name="media_file_uploader" />
+                <input
+                  {...getInputProps()}
+                  name={`upload-media-${variant.key}`}
+                />
                 <Box sx={{ display: 'block' }} key={variant.key}>
                   <VariantMediaAccordion
+                    updateMedia={updateMedia}
                     openFileBrowser={openFileBrowser}
-                    response={{ item: undefined, uploadVariant: variant }}
+                    response={{
+                      item: report.media.items.filter(
+                        (item) => item.variant.key === variant.key
+                      ),
+                      uploadVariant: variant,
+                    }}
                     initiallyOpen={false}
                   />
                 </Box>
-              </React.Fragment>
+              </Fragment>
             );
           })}
       </Box>

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

@@ -15,15 +15,25 @@ const ImageBox = ({
   media,
   openFileBrowser,
 }: {
-  media: string | undefined;
+  media: any[];
   openFileBrowser: any;
 }) => {
   return (
     <>
-      {media ? (
+      {media.length ? (
         // TODO replace with image when it exists
-        <Box sx={{ border: '1px solid green', p: 1, m: 1 }}>
-          placeholder for current media imag
+        <Box
+          sx={{
+            borderRadius: '3px',
+            backgroundColor: 'rgba(0, 0, 0, 0.12)',
+            p: 1,
+            pt: 6,
+            m: 1,
+            flexGrow: 1.75,
+            textAlign: 'center',
+          }}
+        >
+          <img src={media[0].media.file.url} alt={media[0].media.altText} />
         </Box>
       ) : (
         <Box
@@ -46,14 +56,17 @@ const ImageBox = ({
   );
 };
 
+// TODO proper types
 export const VariantMediaAccordion = ({
   openFileBrowser,
   response,
   initiallyOpen,
+  updateMedia,
 }: {
   openFileBrowser: any;
   response: MediaVariantResponse;
   initiallyOpen: boolean;
+  updateMedia: any;
 }) => {
   const [expanded, setExpanded] = useState(initiallyOpen);
 
@@ -76,6 +89,10 @@ export const VariantMediaAccordion = ({
         <Box sx={{ display: 'flex', p: '0px 16px' }}>
           <ImageBox media={response.item} openFileBrowser={openFileBrowser} />
           <MediaInfoForm
+            initialValues={{
+              category: response.item[0]?.category,
+              caption: response.item[0]?.media?.caption,
+            }}
             disabled={!response.item}
             submitForm={() => {
               console.log('submit');