From 79bcc4d2f4cb102cb021d6bed09c7cbf92b80316 Mon Sep 17 00:00:00 2001 From: Umang Patel Date: Wed, 13 Mar 2024 00:18:34 +0530 Subject: [PATCH 1/5] [GSoC2024] fix and refactor import-dataset-modal code (#7428) Refactor code to use useReducer instead of useState. Fixes #7428 'file' and 'fileName' in the uploadParams was not set to null after import. To avoid this changed the code to set 'file' and 'fileName' null after importing is done. --- .../import-dataset/import-dataset-modal.tsx | 332 ++++++++++++++---- 1 file changed, 265 insertions(+), 67 deletions(-) diff --git a/cvat-ui/src/components/import-dataset/import-dataset-modal.tsx b/cvat-ui/src/components/import-dataset/import-dataset-modal.tsx index 674768cecd09..1c1cf7ff6ac0 100644 --- a/cvat-ui/src/components/import-dataset/import-dataset-modal.tsx +++ b/cvat-ui/src/components/import-dataset/import-dataset-modal.tsx @@ -4,7 +4,7 @@ // SPDX-License-Identifier: MIT import './styles.scss'; -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useReducer } from 'react'; import { connect, useDispatch } from 'react-redux'; import Modal from 'antd/lib/modal'; import Form, { RuleObject } from 'antd/lib/form'; @@ -24,6 +24,7 @@ import Space from 'antd/lib/space'; import Switch from 'antd/lib/switch'; import { getCore, Storage, StorageData } from 'cvat-core-wrapper'; import StorageField from 'components/storage/storage-field'; +import { createAction, ActionUnion } from 'utils/redux'; import ImportDatasetStatusModal from './import-dataset-status-modal'; const { confirm } = Modal; @@ -57,6 +58,216 @@ interface UploadParams { fileName: string | null; } +interface State { + instanceType: string; + file: File | null; + selectedLoader: any; + useDefaultSettings: boolean; + defaultStorageLocation: string; + defaultStorageCloudId: number | undefined; + helpMessage: string; + selectedSourceStorageLocation: StorageLocation; + uploadParams: UploadParams; + resource: string; +} + +enum ReducerActionType { + SET_INSTANCE_TYPE = 'SET_INSTANCE_TYPE', + SET_FILE = 'SET_FILE', + SET_SELECTED_LOADER = 'SET_SELECTED_LOADER', + SET_USE_DEFAULT_SETTINGS = 'SET_USE_DEFAULT_SETTINGS', + SET_DEFAULT_STORAGE_LOCATION = 'SET_DEFAULT_STORAGE_LOCATION', + SET_DEFAULT_STORAGE_CLOUD_ID = 'SET_DEFAULT_STORAGE_CLOUD_ID', + SET_HELP_MESSAGE = 'SET_HELP_MESSAGE', + SET_SELECTED_SOURCE_STORAGE_LOCATION = 'SET_SELECTED_SOURCE_STORAGE_LOCATION', + SET_FILE_NAME = 'SET_FILE_NAME', + SET_SELECTED_FORMAT = 'SET_SELECTED_FORMAT', + SET_CONV_MASK_TO_POLY = 'SET_CONV_MASK_TO_POLY', + SET_SOURCE_STORAGE = 'SET_SOURCE_STORAGE', + SET_RESOURCE = 'SET_RESOURCE', +} + +export const reducerActions = { + setInstanceType: (instanceType: string) => ( + createAction(ReducerActionType.SET_INSTANCE_TYPE, { instanceType }) + ), + setFile: (file: File | null) => ( + createAction(ReducerActionType.SET_FILE, { file }) + ), + setSelectedLoader: (selectedLoader: any) => ( + createAction(ReducerActionType.SET_SELECTED_LOADER, { selectedLoader }) + ), + setUseDefaultSettings: (useDefaultSettings: boolean) => ( + createAction(ReducerActionType.SET_USE_DEFAULT_SETTINGS, { useDefaultSettings }) + ), + setDefaultStorageLocation: (defaultStorageLocation: string) => ( + createAction(ReducerActionType.SET_DEFAULT_STORAGE_LOCATION, { defaultStorageLocation }) + ), + setDefaultStorageCloudId: (defaultStorageCloudId: number | undefined) => ( + createAction(ReducerActionType.SET_DEFAULT_STORAGE_CLOUD_ID, { defaultStorageCloudId }) + ), + setHelpMessage: (helpMessage: string) => ( + createAction(ReducerActionType.SET_HELP_MESSAGE, { helpMessage }) + ), + setSelectedSourceStorageLocation: (selectedSourceStorageLocation: StorageLocation) => ( + createAction(ReducerActionType.SET_SELECTED_SOURCE_STORAGE_LOCATION, { selectedSourceStorageLocation }) + ), + setFileName: (fileName: string) => ( + createAction(ReducerActionType.SET_FILE_NAME, { fileName }) + ), + setSelectedFormat: (selectedFormat: string) => ( + createAction(ReducerActionType.SET_SELECTED_FORMAT, { selectedFormat }) + ), + setConvMaskToPoly: (convMaskToPoly: boolean) => ( + createAction(ReducerActionType.SET_CONV_MASK_TO_POLY, { convMaskToPoly }) + ), + setSourceStorage: (sourceStorage: Storage) => ( + createAction(ReducerActionType.SET_SOURCE_STORAGE, { sourceStorage }) + ), + setResource: (resource: string) => ( + createAction(ReducerActionType.SET_RESOURCE, { resource }) + ), +}; + +const reducer = (state: State, action: ActionUnion): State => { + if (action.type === ReducerActionType.SET_INSTANCE_TYPE) { + return { + ...state, + instanceType: action.payload.instanceType, + }; + } + + if (action.type === ReducerActionType.SET_FILE) { + return { + ...state, + file: action.payload.file, + uploadParams: { + ...state.uploadParams, + file: action.payload.file, + } as UploadParams, + }; + } + + if (action.type === ReducerActionType.SET_SELECTED_LOADER) { + return { + ...state, + selectedLoader: action.payload.selectedLoader, + }; + } + + if (action.type === ReducerActionType.SET_USE_DEFAULT_SETTINGS) { + const isDefaultSettings = action.payload.useDefaultSettings; + return { + ...state, + useDefaultSettings: action.payload.useDefaultSettings, + uploadParams: { + ...state.uploadParams, + useDefaultSettings: action.payload.useDefaultSettings, + sourceStorage: isDefaultSettings ? { + location: state.defaultStorageLocation, + cloudStorageId: state.defaultStorageCloudId, + } as Storage : state.uploadParams.sourceStorage, + } as UploadParams, + }; + } + + if (action.type === ReducerActionType.SET_DEFAULT_STORAGE_LOCATION) { + return { + ...state, + defaultStorageLocation: action.payload.defaultStorageLocation, + uploadParams: { + ...state.uploadParams, + sourceStorage: { + location: action.payload.defaultStorageLocation, + cloudStorageId: state.defaultStorageCloudId, + } as Storage, + } as UploadParams, + }; + } + + if (action.type === ReducerActionType.SET_DEFAULT_STORAGE_CLOUD_ID) { + return { + ...state, + defaultStorageCloudId: action.payload.defaultStorageCloudId, + uploadParams: { + ...state.uploadParams, + sourceStorage: { + location: state.defaultStorageLocation, + cloudStorageId: action.payload.defaultStorageCloudId, + } as Storage, + } as UploadParams, + }; + } + + if (action.type === ReducerActionType.SET_HELP_MESSAGE) { + return { + ...state, + helpMessage: action.payload.helpMessage, + }; + } + + if (action.type === ReducerActionType.SET_SELECTED_SOURCE_STORAGE_LOCATION) { + return { + ...state, + selectedSourceStorageLocation: action.payload.selectedSourceStorageLocation, + }; + } + + if (action.type === ReducerActionType.SET_FILE_NAME) { + return { + ...state, + uploadParams: { + ...state.uploadParams, + fileName: action.payload.fileName, + } as UploadParams, + }; + } + + if (action.type === ReducerActionType.SET_SELECTED_FORMAT) { + return { + ...state, + uploadParams: { + ...state.uploadParams, + selectedFormat: action.payload.selectedFormat, + } as UploadParams, + }; + } + + if (action.type === ReducerActionType.SET_CONV_MASK_TO_POLY) { + return { + ...state, + uploadParams: { + ...state.uploadParams, + convMaskToPoly: action.payload.convMaskToPoly, + } as UploadParams, + }; + } + + if (action.type === ReducerActionType.SET_SOURCE_STORAGE) { + return { + ...state, + uploadParams: { + ...state.uploadParams, + sourceStorage: action.payload.sourceStorage, + } as UploadParams, + }; + } + + if (action.type === ReducerActionType.SET_RESOURCE) { + const [resource] = action.payload.resource; + return { + ...state, + resource: action.payload.resource, + uploadParams: { + ...state.uploadParams, + resource: resource === 'dataset' ? 'dataset' : 'annotation', + } as UploadParams, + }; + } + + return state; +}; + function ImportDatasetModal(props: StateToProps): JSX.Element { const { importers, @@ -66,50 +277,54 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { } = props; const [form] = Form.useForm(); const dispatch = useDispatch(); - // TODO useState -> useReducer - const [instanceType, setInstanceType] = useState(''); - const [file, setFile] = useState(null); - const [selectedLoader, setSelectedLoader] = useState(null); - const [useDefaultSettings, setUseDefaultSettings] = useState(true); - const [defaultStorageLocation, setDefaultStorageLocation] = useState(StorageLocation.LOCAL); - const [defaultStorageCloudId, setDefaultStorageCloudId] = useState(undefined); - const [helpMessage, setHelpMessage] = useState(''); - const [selectedSourceStorageLocation, setSelectedSourceStorageLocation] = useState(StorageLocation.LOCAL); - const [uploadParams, setUploadParams] = useState({ - convMaskToPoly: true, + + const [state, dispatchReducer] = useReducer(reducer, { + instanceType: '', + file: null, + selectedLoader: null, useDefaultSettings: true, - } as UploadParams); - const [resource, setResource] = useState(''); + defaultStorageLocation: StorageLocation.LOCAL, + defaultStorageCloudId: undefined, + helpMessage: '', + selectedSourceStorageLocation: StorageLocation.LOCAL, + uploadParams: { + convMaskToPoly: true, + useDefaultSettings: true, + } as UploadParams, + resource: '', + }); + + const { + instanceType, + file, + selectedLoader, + useDefaultSettings, + defaultStorageLocation, + defaultStorageCloudId, + helpMessage, + selectedSourceStorageLocation, + uploadParams, + resource, + } = state; useEffect(() => { if (instanceT === 'project') { - setResource('dataset'); + dispatchReducer(reducerActions.setResource('dataset')); } else if (instanceT === 'task' || instanceT === 'job') { - setResource('annotation'); + dispatchReducer(reducerActions.setResource('annotation')); } }, [instanceT]); const isDataset = useCallback((): boolean => resource === 'dataset', [resource]); const isAnnotation = useCallback((): boolean => resource === 'annotation', [resource]); - useEffect(() => { - setUploadParams({ - ...uploadParams, - resource, - sourceStorage: { - location: defaultStorageLocation, - cloudStorageId: defaultStorageCloudId, - } as Storage, - } as UploadParams); - }, [resource, defaultStorageLocation, defaultStorageCloudId]); - const isProject = useCallback((): boolean => instance instanceof core.classes.Project, [instance]); const isTask = useCallback((): boolean => instance instanceof core.classes.Task, [instance]); useEffect(() => { if (instance) { - setDefaultStorageLocation(instance.sourceStorage.location); - setDefaultStorageCloudId(instance.sourceStorage.cloudStorageId); + dispatchReducer(reducerActions.setDefaultStorageLocation(instance.sourceStorage.location)); + dispatchReducer(reducerActions.setDefaultStorageCloudId(instance.sourceStorage.cloudStorageId)); let type: 'project' | 'task' | 'job' = 'job'; if (isProject()) { @@ -117,16 +332,16 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { } else if (isTask()) { type = 'task'; } - setInstanceType(`${type} #${instance.id}`); + dispatchReducer(reducerActions.setInstanceType(`${type} #${instance.id}`)); } }, [instance, resource]); useEffect(() => { - setHelpMessage( + dispatchReducer(reducerActions.setHelpMessage( // eslint-disable-next-line prefer-template `Import from ${(defaultStorageLocation) ? defaultStorageLocation.split('_')[0] : 'local'} ` + `storage ${(defaultStorageCloudId) ? `№${defaultStorageCloudId}` : ''}`, - ); + )); }, [defaultStorageLocation, defaultStorageCloudId]); const uploadLocalFile = (): JSX.Element => ( @@ -156,16 +371,12 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { `${selectedLoader.format.toLowerCase()} extension can be used`, ); } else { - setFile(_file); - setUploadParams({ - ...uploadParams, - file: _file, - } as UploadParams); + dispatchReducer(reducerActions.setFile(_file)); } return false; }} onRemove={() => { - setFile(null); + dispatchReducer(reducerActions.setFile(null)); }} >

@@ -215,20 +426,18 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { placeholder='Dataset file name' className='cvat-modal-import-filename-input' onChange={(e: React.ChangeEvent) => { - setUploadParams({ - ...uploadParams, - fileName: e.target.value || '', - } as UploadParams); + dispatchReducer(reducerActions.setFileName(e.target.value || '')); }} /> ); const closeModal = useCallback((): void => { - setUseDefaultSettings(true); - setSelectedSourceStorageLocation(StorageLocation.LOCAL); + dispatchReducer(reducerActions.setUseDefaultSettings(true)); + dispatchReducer(reducerActions.setSelectedSourceStorageLocation(StorageLocation.LOCAL)); form.resetFields(); - setFile(null); + dispatchReducer(reducerActions.setFile(null)); + dispatchReducer(reducerActions.setFileName('')); dispatch(importActions.closeImportDatasetModal(instance)); }, [form, instance]); @@ -338,11 +547,8 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { const [loader] = importers.filter( (importer: any): boolean => importer.name === format, ); - setSelectedLoader(loader); - setUploadParams({ - ...uploadParams, - selectedFormat: format, - } as UploadParams); + dispatchReducer(reducerActions.setSelectedLoader(loader)); + dispatchReducer(reducerActions.setSelectedFormat(format)); }} > {importers @@ -381,10 +587,7 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { > { - setUploadParams({ - ...uploadParams, - convMaskToPoly: value, - } as UploadParams); + dispatchReducer(reducerActions.setConvMaskToPoly(value)); }} /> @@ -401,11 +604,7 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { > { - setUseDefaultSettings(value); - setUploadParams({ - ...uploadParams, - useDefaultSettings: value, - } as UploadParams); + dispatchReducer(reducerActions.setUseDefaultSettings(value)); }} /> @@ -419,16 +618,15 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { locationName={['sourceStorage', 'location']} selectCloudStorageName={['sourceStorage', 'cloudStorageId']} onChangeStorage={(value: StorageData) => { - setUploadParams({ - ...uploadParams, - sourceStorage: new Storage({ - location: value?.location || defaultStorageLocation, - cloudStorageId: (value.location) ? value.cloudStorageId : defaultStorageCloudId, - }), - } as UploadParams); + dispatchReducer(reducerActions.setSourceStorage(new Storage({ + location: value?.location || defaultStorageLocation, + cloudStorageId: (value.location) ? value.cloudStorageId : defaultStorageCloudId, + }))); }} locationValue={selectedSourceStorageLocation} - onChangeLocationValue={(value: StorageLocation) => setSelectedSourceStorageLocation(value)} + onChangeLocationValue={(value: StorageLocation) => { + dispatchReducer(reducerActions.setSelectedSourceStorageLocation(value)); + }} /> )} { !loadFromLocal && renderCustomName() } From 3de9812f1c1213b8ac6f080b1076ea32c562e83d Mon Sep 17 00:00:00 2001 From: Umang Patel Date: Wed, 13 Mar 2024 01:44:35 +0530 Subject: [PATCH 2/5] changelog added --- ...20240313_014112_umangapatel123_refactor_into_usereducer.md | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelog.d/20240313_014112_umangapatel123_refactor_into_usereducer.md diff --git a/changelog.d/20240313_014112_umangapatel123_refactor_into_usereducer.md b/changelog.d/20240313_014112_umangapatel123_refactor_into_usereducer.md new file mode 100644 index 000000000000..4c26a77d6a67 --- /dev/null +++ b/changelog.d/20240313_014112_umangapatel123_refactor_into_usereducer.md @@ -0,0 +1,4 @@ +### Fixed + +- set `file` and `fileName` to null after import is done and change `useState` to `useReducer` + () From aafa5420d14564ff1d023540132527ba3ec22db7 Mon Sep 17 00:00:00 2001 From: Umang Patel Date: Wed, 13 Mar 2024 19:54:45 +0530 Subject: [PATCH 3/5] changelog changed --- .../20240313_014112_umangapatel123_refactor_into_usereducer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog.d/20240313_014112_umangapatel123_refactor_into_usereducer.md b/changelog.d/20240313_014112_umangapatel123_refactor_into_usereducer.md index 4c26a77d6a67..4f0b83c76d43 100644 --- a/changelog.d/20240313_014112_umangapatel123_refactor_into_usereducer.md +++ b/changelog.d/20240313_014112_umangapatel123_refactor_into_usereducer.md @@ -1,4 +1,4 @@ ### Fixed -- set `file` and `fileName` to null after import is done and change `useState` to `useReducer` +- Incorrect file name usage in importing annotation via cloud storage () From d5cccafa863604a1562959eefa8eb8f5f7e5646e Mon Sep 17 00:00:00 2001 From: Umang Patel <113035910+umangapatel123@users.noreply.github.com> Date: Wed, 13 Mar 2024 20:08:01 +0530 Subject: [PATCH 4/5] Update changelog.d/20240313_014112_umangapatel123_refactor_into_usereducer.md Co-authored-by: Boris Sekachev --- .../20240313_014112_umangapatel123_refactor_into_usereducer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog.d/20240313_014112_umangapatel123_refactor_into_usereducer.md b/changelog.d/20240313_014112_umangapatel123_refactor_into_usereducer.md index 4f0b83c76d43..ac7ca1a92b5e 100644 --- a/changelog.d/20240313_014112_umangapatel123_refactor_into_usereducer.md +++ b/changelog.d/20240313_014112_umangapatel123_refactor_into_usereducer.md @@ -1,4 +1,4 @@ ### Fixed -- Incorrect file name usage in importing annotation via cloud storage +- Incorrect file name usage when importing annotations from a cloud storage () From 63d573eaca34949a0e3b069c7421f325d60f2bdc Mon Sep 17 00:00:00 2001 From: Umang Patel Date: Thu, 14 Mar 2024 16:35:47 +0530 Subject: [PATCH 5/5] refactor: minor changes --- .../import-dataset/import-dataset-modal.tsx | 107 ++++++++++-------- 1 file changed, 58 insertions(+), 49 deletions(-) diff --git a/cvat-ui/src/components/import-dataset/import-dataset-modal.tsx b/cvat-ui/src/components/import-dataset/import-dataset-modal.tsx index 1c1cf7ff6ac0..5051b4a96542 100644 --- a/cvat-ui/src/components/import-dataset/import-dataset-modal.tsx +++ b/cvat-ui/src/components/import-dataset/import-dataset-modal.tsx @@ -1,5 +1,5 @@ // Copyright (C) 2021-2022 Intel Corporation -// Copyright (C) 2022-2023 CVAT.ai Corporation +// Copyright (C) 2022-2024 CVAT.ai Corporation // // SPDX-License-Identifier: MIT @@ -49,7 +49,7 @@ const initialValues: FormValues = { }; interface UploadParams { - resource: 'annotation' | 'dataset'; + resource: 'annotation' | 'dataset' | null; convMaskToPoly: boolean; useDefaultSettings: boolean; sourceStorage: Storage; @@ -64,7 +64,7 @@ interface State { selectedLoader: any; useDefaultSettings: boolean; defaultStorageLocation: string; - defaultStorageCloudId: number | undefined; + defaultStorageCloudId?: number; helpMessage: string; selectedSourceStorageLocation: StorageLocation; uploadParams: UploadParams; @@ -103,7 +103,7 @@ export const reducerActions = { setDefaultStorageLocation: (defaultStorageLocation: string) => ( createAction(ReducerActionType.SET_DEFAULT_STORAGE_LOCATION, { defaultStorageLocation }) ), - setDefaultStorageCloudId: (defaultStorageCloudId: number | undefined) => ( + setDefaultStorageCloudId: (defaultStorageCloudId?: number) => ( createAction(ReducerActionType.SET_DEFAULT_STORAGE_CLOUD_ID, { defaultStorageCloudId }) ), setHelpMessage: (helpMessage: string) => ( @@ -144,7 +144,7 @@ const reducer = (state: State, action: ActionUnion): Stat uploadParams: { ...state.uploadParams, file: action.payload.file, - } as UploadParams, + }, }; } @@ -163,11 +163,12 @@ const reducer = (state: State, action: ActionUnion): Stat uploadParams: { ...state.uploadParams, useDefaultSettings: action.payload.useDefaultSettings, - sourceStorage: isDefaultSettings ? { - location: state.defaultStorageLocation, + sourceStorage: isDefaultSettings ? new Storage({ + location: state.defaultStorageLocation === StorageLocation.LOCAL ? + StorageLocation.LOCAL : StorageLocation.CLOUD_STORAGE, cloudStorageId: state.defaultStorageCloudId, - } as Storage : state.uploadParams.sourceStorage, - } as UploadParams, + }) : state.uploadParams.sourceStorage, + }, }; } @@ -177,11 +178,12 @@ const reducer = (state: State, action: ActionUnion): Stat defaultStorageLocation: action.payload.defaultStorageLocation, uploadParams: { ...state.uploadParams, - sourceStorage: { - location: action.payload.defaultStorageLocation, + sourceStorage: new Storage({ + location: action.payload.defaultStorageLocation === StorageLocation.LOCAL ? + StorageLocation.LOCAL : StorageLocation.CLOUD_STORAGE, cloudStorageId: state.defaultStorageCloudId, - } as Storage, - } as UploadParams, + }), + }, }; } @@ -191,11 +193,12 @@ const reducer = (state: State, action: ActionUnion): Stat defaultStorageCloudId: action.payload.defaultStorageCloudId, uploadParams: { ...state.uploadParams, - sourceStorage: { - location: state.defaultStorageLocation, + sourceStorage: new Storage({ + location: state.defaultStorageLocation === StorageLocation.LOCAL ? + StorageLocation.LOCAL : StorageLocation.CLOUD_STORAGE, cloudStorageId: action.payload.defaultStorageCloudId, - } as Storage, - } as UploadParams, + }), + }, }; } @@ -219,7 +222,7 @@ const reducer = (state: State, action: ActionUnion): Stat uploadParams: { ...state.uploadParams, fileName: action.payload.fileName, - } as UploadParams, + }, }; } @@ -229,7 +232,7 @@ const reducer = (state: State, action: ActionUnion): Stat uploadParams: { ...state.uploadParams, selectedFormat: action.payload.selectedFormat, - } as UploadParams, + }, }; } @@ -239,7 +242,7 @@ const reducer = (state: State, action: ActionUnion): Stat uploadParams: { ...state.uploadParams, convMaskToPoly: action.payload.convMaskToPoly, - } as UploadParams, + }, }; } @@ -249,19 +252,18 @@ const reducer = (state: State, action: ActionUnion): Stat uploadParams: { ...state.uploadParams, sourceStorage: action.payload.sourceStorage, - } as UploadParams, + }, }; } if (action.type === ReducerActionType.SET_RESOURCE) { - const [resource] = action.payload.resource; return { ...state, resource: action.payload.resource, uploadParams: { ...state.uploadParams, - resource: resource === 'dataset' ? 'dataset' : 'annotation', - } as UploadParams, + resource: action.payload.resource === 'dataset' ? 'dataset' : 'annotation', + }, }; } @@ -276,9 +278,9 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { current, } = props; const [form] = Form.useForm(); - const dispatch = useDispatch(); + const appDispatch = useDispatch(); - const [state, dispatchReducer] = useReducer(reducer, { + const [state, dispatch] = useReducer(reducer, { instanceType: '', file: null, selectedLoader: null, @@ -288,9 +290,17 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { helpMessage: '', selectedSourceStorageLocation: StorageLocation.LOCAL, uploadParams: { + resource: null, convMaskToPoly: true, useDefaultSettings: true, - } as UploadParams, + sourceStorage: new Storage({ + location: StorageLocation.LOCAL, + cloudStorageId: undefined, + }), + selectedFormat: null, + file: null, + fileName: null, + }, resource: '', }); @@ -309,9 +319,9 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { useEffect(() => { if (instanceT === 'project') { - dispatchReducer(reducerActions.setResource('dataset')); + dispatch(reducerActions.setResource('dataset')); } else if (instanceT === 'task' || instanceT === 'job') { - dispatchReducer(reducerActions.setResource('annotation')); + dispatch(reducerActions.setResource('annotation')); } }, [instanceT]); @@ -323,8 +333,8 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { useEffect(() => { if (instance) { - dispatchReducer(reducerActions.setDefaultStorageLocation(instance.sourceStorage.location)); - dispatchReducer(reducerActions.setDefaultStorageCloudId(instance.sourceStorage.cloudStorageId)); + dispatch(reducerActions.setDefaultStorageLocation(instance.sourceStorage.location)); + dispatch(reducerActions.setDefaultStorageCloudId(instance.sourceStorage.cloudStorageId)); let type: 'project' | 'task' | 'job' = 'job'; if (isProject()) { @@ -332,13 +342,12 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { } else if (isTask()) { type = 'task'; } - dispatchReducer(reducerActions.setInstanceType(`${type} #${instance.id}`)); + dispatch(reducerActions.setInstanceType(`${type} #${instance.id}`)); } }, [instance, resource]); useEffect(() => { - dispatchReducer(reducerActions.setHelpMessage( - // eslint-disable-next-line prefer-template + dispatch(reducerActions.setHelpMessage( `Import from ${(defaultStorageLocation) ? defaultStorageLocation.split('_')[0] : 'local'} ` + `storage ${(defaultStorageCloudId) ? `№${defaultStorageCloudId}` : ''}`, )); @@ -371,12 +380,12 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { `${selectedLoader.format.toLowerCase()} extension can be used`, ); } else { - dispatchReducer(reducerActions.setFile(_file)); + dispatch(reducerActions.setFile(_file)); } return false; }} onRemove={() => { - dispatchReducer(reducerActions.setFile(null)); + dispatch(reducerActions.setFile(null)); }} >

@@ -426,24 +435,24 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { placeholder='Dataset file name' className='cvat-modal-import-filename-input' onChange={(e: React.ChangeEvent) => { - dispatchReducer(reducerActions.setFileName(e.target.value || '')); + dispatch(reducerActions.setFileName(e.target.value || '')); }} /> ); const closeModal = useCallback((): void => { - dispatchReducer(reducerActions.setUseDefaultSettings(true)); - dispatchReducer(reducerActions.setSelectedSourceStorageLocation(StorageLocation.LOCAL)); + dispatch(reducerActions.setUseDefaultSettings(true)); + dispatch(reducerActions.setSelectedSourceStorageLocation(StorageLocation.LOCAL)); form.resetFields(); - dispatchReducer(reducerActions.setFile(null)); - dispatchReducer(reducerActions.setFileName('')); - dispatch(importActions.closeImportDatasetModal(instance)); + dispatch(reducerActions.setFile(null)); + dispatch(reducerActions.setFileName('')); + appDispatch(importActions.closeImportDatasetModal(instance)); }, [form, instance]); const onUpload = (): void => { if (uploadParams && uploadParams.resource) { - dispatch( + appDispatch( importDatasetAsync( instance, uploadParams.selectedFormat as string, @@ -547,8 +556,8 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { const [loader] = importers.filter( (importer: any): boolean => importer.name === format, ); - dispatchReducer(reducerActions.setSelectedLoader(loader)); - dispatchReducer(reducerActions.setSelectedFormat(format)); + dispatch(reducerActions.setSelectedLoader(loader)); + dispatch(reducerActions.setSelectedFormat(format)); }} > {importers @@ -587,7 +596,7 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { > { - dispatchReducer(reducerActions.setConvMaskToPoly(value)); + dispatch(reducerActions.setConvMaskToPoly(value)); }} /> @@ -604,7 +613,7 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { > { - dispatchReducer(reducerActions.setUseDefaultSettings(value)); + dispatch(reducerActions.setUseDefaultSettings(value)); }} /> @@ -618,14 +627,14 @@ function ImportDatasetModal(props: StateToProps): JSX.Element { locationName={['sourceStorage', 'location']} selectCloudStorageName={['sourceStorage', 'cloudStorageId']} onChangeStorage={(value: StorageData) => { - dispatchReducer(reducerActions.setSourceStorage(new Storage({ + dispatch(reducerActions.setSourceStorage(new Storage({ location: value?.location || defaultStorageLocation, cloudStorageId: (value.location) ? value.cloudStorageId : defaultStorageCloudId, }))); }} locationValue={selectedSourceStorageLocation} onChangeLocationValue={(value: StorageLocation) => { - dispatchReducer(reducerActions.setSelectedSourceStorageLocation(value)); + dispatch(reducerActions.setSelectedSourceStorageLocation(value)); }} /> )}