diff --git a/src/hooks/useAnalogueModels.tsx b/src/hooks/useAnalogueModels.tsx index 0582b1ae..ce4047d1 100644 --- a/src/hooks/useAnalogueModels.tsx +++ b/src/hooks/useAnalogueModels.tsx @@ -1,4 +1,5 @@ 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' @@ -6,7 +7,7 @@ import { useAccessToken } from './useAccessToken' type UseQueryOptions = ParamsOption & RequestBodyOption & { - // 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) { - 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) { - // 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 index ac5ce0e5..e2c69c75 100644 --- 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(false) const [uploadStatus, setUploadStatus] = useState() - 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 (