From c5a22994e479896a776e5735e280daf7587a5a1e Mon Sep 17 00:00:00 2001 From: Olava Faksdal <38139899+olavis@users.noreply.github.com> Date: Thu, 7 Sep 2023 14:23:38 +0200 Subject: [PATCH] chore: workaround solution for file upload testing --- .../AddModelDialog/AddModelDialog.tsx | 12 ++++- .../ModelInputFilesTable.tsx | 13 +++++- src/hooks/useAnalogueModels.tsx | 46 ++++++++----------- src/pages/Browse/Browse.tsx | 33 +++++++++---- 4 files changed, 63 insertions(+), 41 deletions(-) diff --git a/src/features/AddModelDialog/AddModelDialog.tsx b/src/features/AddModelDialog/AddModelDialog.tsx index b9c35172..7a1020d6 100644 --- a/src/features/AddModelDialog/AddModelDialog.tsx +++ b/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 cancel: () => void } @@ -16,6 +16,10 @@ export const AddModelDialog = ({ cancel, }: AddModelDialogProps) => { const [isFileDisplay, setFileDisplay] = useState(false) + const [files, setFiles] = useState<{ NC?: File; INI?: File }>({ + NC: undefined, + INI: undefined, + }) function toggleINIFileContent() { setFileDisplay(!isFileDisplay) @@ -30,6 +34,8 @@ export const AddModelDialog = ({ - + diff --git a/src/features/ModelInputFilesTable/ModelInputFilesTable.tsx b/src/features/ModelInputFilesTable/ModelInputFilesTable.tsx index 7cd1e9e1..ba1d89a4 100644 --- a/src/features/ModelInputFilesTable/ModelInputFilesTable.tsx +++ b/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) { e.preventDefault() diff --git a/src/hooks/useAnalogueModels.tsx b/src/hooks/useAnalogueModels.tsx index 0ab6b655..55f6c01b 100644 --- a/src/hooks/useAnalogueModels.tsx +++ b/src/hooks/useAnalogueModels.tsx @@ -8,9 +8,15 @@ type UseQueryOptions = ParamsOption & RequestBodyOption & { // 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 - // 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) => + 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 } } diff --git a/src/pages/Browse/Browse.tsx b/src/pages/Browse/Browse.tsx index 8ae3184f..1ee03e4c 100644 --- a/src/pages/Browse/Browse.tsx +++ b/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(false) const [uploadStatus, setUploadStatus] = useState() - - 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 (