chore: workaround solution for file upload testing

src/features/AddModelDialog/AddModelDialog.tsx

@@ -6,7 +6,7 @@ import * as Styled from './AddModelDialog.styled'
 
 interface AddModelDialogProps {
   isOpen: boolean
-  confirm: () => void
+  confirm: (file: File) => Promise<void>
   cancel: () => void
 }
 
@@ -16,6 +16,10 @@ export const AddModelDialog = ({
   cancel,
 }: AddModelDialogProps) => {
   const [isFileDisplay, setFileDisplay] = useState<boolean>(false)
+  const [files, setFiles] = useState<{ NC?: File; INI?: File }>({
+    NC: undefined,
+    INI: undefined,
+  })
 
   function toggleINIFileContent() {
     setFileDisplay(!isFileDisplay)
@@ -30,6 +34,8 @@ export const AddModelDialog = ({
       </Styled.Dialog.Header>
       <Styled.DialogCustomContent scrollable>
         <ModelInputFilesTable
+          files={files}
+          setFiles={setFiles}
           fileDisplay={{
             isVisible: isFileDisplay,
             toggle: toggleINIFileContent,
@@ -39,7 +45,9 @@ export const AddModelDialog = ({
         <ModelMetadata />
       </Styled.DialogCustomContent>
       <Styled.DialogActions>
-        <Button onClick={confirm}>Confirm and start uploading</Button>
+        <Button onClick={() => (files.NC ? confirm(files.NC) : {})}>
+          Confirm and start uploading
+        </Button>
         <Button variant="outlined" onClick={cancel}>
           Cancel
         </Button>

src/features/ModelInputFilesTable/ModelInputFilesTable.tsx

@@ -1,6 +1,6 @@
 import { Button, Table } from '@equinor/eds-core-react'
 import { delete_to_trash as deleteIcon } from '@equinor/eds-icons'
-import { ChangeEvent, useState } from 'react'
+import { ChangeEvent } from 'react'
 import IconButton from '../../components/IconButton/IconButton'
 import { FileUploader } from '../FileUploader/FileUploader'
 
@@ -59,10 +59,19 @@ const FileColumn = ({
 
 export const ModelInputFilesTable = ({
   fileDisplay,
+  files,
+  setFiles,
 }: {
   fileDisplay: FileDisplay
+  files: { NC?: File; INI?: File }
+  setFiles: React.Dispatch<
+    React.SetStateAction<{
+      NC?: File | undefined
+      INI?: File | undefined
+    }>
+  >
 }) => {
-  const [files, setFiles] = useState<{ NC?: File; INI?: File }>()
+  // const [files, setFiles] = useState<{ NC?: File; INI?: File }>()
 
   function updateFileDisplay(e: ChangeEvent<HTMLInputElement>) {
     e.preventDefault()

src/hooks/useAnalogueModels.tsx

@@ -8,9 +8,15 @@ type UseQueryOptions<T> = ParamsOption<T> &
   RequestBodyOption<T> & {
     // add your custom options here
     // token: string
+    params?: {
+      path: {
+        id: string
+      }
+    }
   }
 
 const ANALOGUEMODELS_KEY = '/api/analoguemodels'
+const NC_FILE_KEY = '/api/analoguemodels/{id}/input-models'
 
 export function useAnalogueModels() {
   const apiClient = useApiClient()
@@ -34,37 +40,23 @@ export function useAnalogueModels() {
     return data
   }
 
-  // PathsWithMethod<paths, 'get'>
-  // async function get(url: string) {
-  //   const { data } = await apiClient.GET(url, {
-  //     headers: headers,
-  //   })
-  //   return data
-  // }
-
-  // async function get({ signal }: { signal: AbortSignal | undefined }) {
-  //   const { data } = await apiClient.GET(ANALOGUEMODELS_KEY, {
-  //     signal, // allows React Query to cancel request
-  //     headers: new Headers({ Authorization: `Bearer ${token}` }),
-  //   })
-  //   return data
-  // }
+  const NC = ({
+    params,
+    body,
+  }: UseQueryOptions<paths[typeof NC_FILE_KEY]['post']>) =>
+    useQuery([NC_FILE_KEY, token, params.path.id], async () => {
+      const { data } = await apiClient.POST(NC_FILE_KEY, {
+        params,
+        body,
+        headers: new Headers({ Authorization: `Bearer ${token}` }),
+      })
+      return data
+    })
 
   const models = useQuery(
     [ANALOGUEMODELS_KEY, token],
     async () => await fetchModels()
   )
 
-  return { fetchModels, createModel, models }
-
-  // return useQuery(
-  //   [ANALOGUEMODELS_KEY, token],
-  //   async ({ signal }) =>
-  //     await apiClient
-  //       .GET(ANALOGUEMODELS_KEY, {
-  //         signal, // allows React Query to cancel request
-  //         headers: new Headers({ Authorization: `Bearer ${token}` }),
-  //       })
-  //       .then((response) => response.data?.data)
-  // )
+  return { fetchModels, createModel, models, NC }
 }

src/pages/Browse/Browse.tsx

@@ -2,15 +2,21 @@ import { Button, Snackbar } from '@equinor/eds-core-react'
 import { useState } from 'react'
 import { Table } from '../../components/Table'
 import { AddModelDialog } from '../../features/AddModelDialog/AddModelDialog'
+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.',
+}
 
 export const Browse = () => {
+  const { createModel, NC } = useAnalogueModels()
   const [isAddModelDialog, setAddModelDialog] = useState<boolean>(false)
   const [uploadStatus, setUploadStatus] = useState<string>()
-
-  const 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.',
+  const testModel = {
+    name: 'hei',
+    description: 'beste modell',
+    sourceType: 'Deltares',
   }
 
   function clearStatus() {
@@ -21,11 +27,18 @@ export const Browse = () => {
     setAddModelDialog(!isAddModelDialog)
   }
 
-  function uploadModel() {
-    toggleDialog()
-    setUploadStatus(uploadProcess.started)
-    // TODO: upload model
-    // setUploadStatus(uploadProcess.success)
+  async function uploadModel(file: File | string) {
+    setUploadStatus(UploadProcess.STARTED)
+    await createModel({ body: testModel })
+      .then((model) => model?.data.analogueModelId)
+      .then((id) => {
+        NC({
+          params: { path: { id: id ?? '' } },
+          body: { File: file, FileType: 'NetCDF' },
+        })
+      })
+    // toggleDialog()
+    // setUploadStatus(UploadProcess.SUCCESS)
   }
 
   return (