diff --git a/src/react/actions/s3object.ts b/src/react/actions/s3object.ts index edf5ff1aa..9b047b750 100644 --- a/src/react/actions/s3object.ts +++ b/src/react/actions/s3object.ts @@ -40,6 +40,7 @@ import { LIST_OBJECT_VERSIONS_S3_TYPE } from '../utils/s3'; import { Marker, ZenkoClient } from '../../types/zenko'; import { getClients } from '../utils/actions'; import { newSearchListing } from '.'; +import { QueryClient } from 'react-query'; export const UPLOADING_OBJECT = 'Uploading object(s)'; export function listObjectsSuccess( @@ -178,17 +179,22 @@ export function resetObjectMetadata(): ResetObjectMetadataAction { type: 'RESET_OBJECT_METADATA', }; } + export function createFolder( bucketName: string, prefixWithSlash: string, folderName: string, + queryClient: QueryClient, ): ThunkStatePromisedAction { return (dispatch, getState) => { const { zenkoClient } = getClients(getState()); dispatch(networkStart('Creating folder')); return zenkoClient .createFolder(bucketName, prefixWithSlash, folderName) - .then(() => dispatch(listObjects(bucketName, prefixWithSlash))) + .then(() => { + queryClient.removeQueries(['objectVersions', bucketName]); + dispatch(listObjects(bucketName, prefixWithSlash)); + }) .catch((error) => dispatch(handleAWSClientError(error))) .catch((error) => dispatch(handleAWSError(error, 'byComponent'))) .finally(() => { @@ -447,6 +453,7 @@ export function uploadFiles( bucketName: string, prefixWithSlash: string, files: Array, + queryClient: QueryClient, ): ThunkStatePromisedAction { return (dispatch, getState) => { const { zenkoClient } = getClients(getState()); @@ -455,6 +462,7 @@ export function uploadFiles( return zenkoClient .uploadObject(bucketName, prefixWithSlash, files) .then(() => { + queryClient.removeQueries(['objectVersions', bucketName]); dispatch(listObjects(bucketName, prefixWithSlash)); }) .catch((error) => { diff --git a/src/react/databrowser/objects/FolderCreate.tsx b/src/react/databrowser/objects/FolderCreate.tsx index 65363810f..cae60e20f 100644 --- a/src/react/databrowser/objects/FolderCreate.tsx +++ b/src/react/databrowser/objects/FolderCreate.tsx @@ -8,6 +8,7 @@ import { AppState } from '../../../types/state'; import { closeFolderCreateModal, createFolder } from '../../actions'; import { CustomModal as Modal } from '../../ui-elements/Modal'; import { addTrailingSlash } from '../../utils'; +import { useQueryClient } from 'react-query'; export const Description = styled.div` margin-top: ${spacing.sp16}; width: 20.5rem; @@ -28,6 +29,8 @@ const FolderCreate = ({ bucketName, prefixWithSlash }: Props) => { ); const dispatch = useDispatch(); + const queryClient = useQueryClient(); + if (!show) { return null; } @@ -44,7 +47,12 @@ const FolderCreate = ({ bucketName, prefixWithSlash }: Props) => { setFolderName(''); dispatch( - createFolder(bucketName, prefixWithSlash, addTrailingSlash(folderName)), + createFolder( + bucketName, + prefixWithSlash, + addTrailingSlash(folderName), + queryClient, + ), ); }; diff --git a/src/react/databrowser/objects/ObjectUpload.tsx b/src/react/databrowser/objects/ObjectUpload.tsx index c10d9022f..929dc8ef4 100644 --- a/src/react/databrowser/objects/ObjectUpload.tsx +++ b/src/react/databrowser/objects/ObjectUpload.tsx @@ -12,6 +12,7 @@ import { CustomModal as Modal } from '../../ui-elements/Modal'; import Table, * as T from '../../ui-elements/Table'; import { maybePluralize } from '../../utils'; import { usePrefixWithSlash } from '../../utils/hooks'; +import { useQueryClient } from 'react-query'; const DropZone = styled.div` flex: 1; display: flex; @@ -116,6 +117,7 @@ const ObjectUpload = ({ bucketName }: Props) => { ); const dispatch = useDispatch(); const prefixWithSlash = usePrefixWithSlash(); + const queryClient = useQueryClient(); const onDrop = (accepted, rejections) => { if (accepted.length > 0) { @@ -154,7 +156,9 @@ const ObjectUpload = ({ bucketName }: Props) => { const upload = () => { cleanFiles(); - dispatch(uploadFiles(bucketName, prefixWithSlash, acceptedFiles)); + dispatch( + uploadFiles(bucketName, prefixWithSlash, acceptedFiles, queryClient), + ); }; if (!show) { diff --git a/src/react/ui-elements/DeleteBucket/index.tsx b/src/react/ui-elements/DeleteBucket/index.tsx index 22b6fdbea..119fe2698 100644 --- a/src/react/ui-elements/DeleteBucket/index.tsx +++ b/src/react/ui-elements/DeleteBucket/index.tsx @@ -38,12 +38,12 @@ export const DeleteBucket = ({ bucketName }: DeleteBucketProps) => { : 'Bucket is not empty' } overlayStyle={{ - display: isBucketEmpty ? undefined : 'none', + display: isBucketEmpty ? 'none' : undefined, }} >