feat: file upload, closes #41

equinor · Sep 15, 2023 · ad15927 · ad15927
1 parent bdf9382
commit ad15927
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 39 deletions.
diff --git a/src/hooks/useAnalogueModels.tsx b/src/hooks/useAnalogueModels.tsx
@@ -1,12 +1,13 @@
 import { useQuery } from '@tanstack/react-query'
+import axios from 'axios'
 import type { ParamsOption, RequestBodyOption } from 'openapi-fetch'
 import { useApiClient } from '../context/ApiClientProvider'
 import { paths } from '../models/schema'
 import { useAccessToken } from './useAccessToken'
 
 type UseQueryOptions<T> = ParamsOption<T> &
   RequestBodyOption<T> & {
-    // add your custom options here
+    // custom options
     params?: {
       path: {
         id: string
@@ -39,32 +40,24 @@ export function useAnalogueModels() {
     return data
   }
 
-  async function uploadNCFile({
-    params,
-    body,
-  }: UseQueryOptions<paths[typeof NC_FILE_KEY]['post']>) {
-    const { data } = await apiClient.POST(NC_FILE_KEY, {
-      params,
-      body,
-      headers: new Headers({ Authorization: `Bearer ${token}` }),
-    })
+  async function uploadNCFile(modelId: string, file: File) {
+    axios.defaults.baseURL = process.env.REACT_APP_BACKEND_ENV
+    const form = new FormData()
+    form.append('file', file)
+    const { data } = await axios.post(
+      NC_FILE_KEY.replace('{id}', modelId),
+      form,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'multipart/form-data',
+        },
+      }
+    )
     return data
   }
 
-  // async function NC({
-  //   params,
-  //   body,
-  // }: UseQueryOptions<paths[typeof NC_FILE_KEY]['post']>) {
-  //   return useQuery(
-  //     [NC_FILE_KEY, token, params.path.id],
-  //     async () => await uploadNCFile(params, body)
-  //   )
-  // }
-
-  const models = useQuery(
-    [ANALOGUEMODELS_KEY, token],
-    async () => await fetchModels()
-  )
+  const models = useQuery([ANALOGUEMODELS_KEY, token], fetchModels)
 
   return { fetchModels, createModel, models, uploadNCFile }
 }
diff --git a/src/pages/Browse/Browse.tsx b/src/pages/Browse/Browse.tsx
@@ -7,17 +7,13 @@ import { useAnalogueModels } from '../../hooks/useAnalogueModels'
 enum UploadProcess {
   STARTED = 'We are uploading your new model. Please keep this browser tab open.',
   SUCCESS = 'Model successfully uploaded. You may close this browser tab now.',
+  FAILED = 'File upload failed.',
 }
 
 export const Browse = () => {
   const { createModel, uploadNCFile } = useAnalogueModels()
   const [isAddModelDialog, setAddModelDialog] = useState<boolean>(false)
   const [uploadStatus, setUploadStatus] = useState<string>()
-  const testModel = {
-    name: 'hei',
-    description: 'beste modell',
-    sourceType: 'Deltares',
-  }
 
   function clearStatus() {
     setUploadStatus(undefined)
@@ -29,16 +25,28 @@ export const Browse = () => {
 
   async function uploadModel(file: File) {
     setUploadStatus(UploadProcess.STARTED)
-    await createModel({ body: testModel })
-      .then((model) => model?.data.analogueModelId)
-      .then((id) => {
-        uploadNCFile({
-          params: { path: { id: id ?? '' } },
-          body: { File: file, FileType: 'NetCDF' },
-        })
-      })
-    // toggleDialog()
-    // setUploadStatus(UploadProcess.SUCCESS)
+    const modelUpload = await createModel({
+      // TODO
+      body: {
+        name: 'testModel',
+        description: 'description',
+        sourceType: 'Deltares',
+      },
+    })
+
+    if (modelUpload?.success) {
+      toggleDialog()
+      const fileUpload = await uploadNCFile(
+        modelUpload.data.analogueModelId ?? '',
+        file
+      )
+
+      if (fileUpload.success) setUploadStatus(UploadProcess.SUCCESS)
+      else if (!fileUpload.success) {
+        setUploadStatus(UploadProcess.FAILED)
+        // TODO: show validation message
+      }
+    }
   }
 
   return (