diff --git a/package-lock.json b/package-lock.json index 36bdebc..38f82dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ucentral-client", - "version": "2.11.0(7)", + "version": "2.11.0(11)", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "ucentral-client", - "version": "2.11.0(7)", + "version": "2.11.0(11)", "license": "ISC", "dependencies": { "@chakra-ui/anatomy": "^2.1.1", diff --git a/package.json b/package.json index cc07137..950b23a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ucentral-client", - "version": "2.11.0(7)", + "version": "2.11.0(11)", "description": "", "private": true, "main": "index.tsx", diff --git a/src/components/Modals/ConfigureModal/index.tsx b/src/components/Modals/ConfigureModal/index.tsx index 8ae3167..d2e9ff9 100644 --- a/src/components/Modals/ConfigureModal/index.tsx +++ b/src/components/Modals/ConfigureModal/index.tsx @@ -30,7 +30,7 @@ export type ConfigureModalProps = { }; }; -export const ConfigureModal = ({ serialNumber, modalProps }: ConfigureModalProps) => { +const _ConfigureModal = ({ serialNumber, modalProps }: ConfigureModalProps) => { const { t } = useTranslation(); const toast = useToast(); const configure = useConfigureDevice({ serialNumber }); @@ -45,6 +45,7 @@ export const ConfigureModal = ({ serialNumber, modalProps }: ConfigureModalProps const onImportConfiguration = () => { setNewConfig(getDevice.data?.configuration ? JSON.stringify(getDevice.data.configuration, null, 4) : ''); }; + const isValid = React.useMemo(() => { try { JSON.parse(newConfig); @@ -71,9 +72,19 @@ export const ConfigureModal = ({ serialNumber, modalProps }: ConfigureModalProps modalProps.onClose(); }, }); - } catch (e) {} + } catch (e) { + // do nothing + } }; + React.useEffect(() => { + if (modalProps.isOpen) { + getDevice.refetch(); + } else { + setNewConfig(''); + } + }, [modalProps.isOpen]); + return ( ); }; + +export const ConfigureModal = React.memo(_ConfigureModal); diff --git a/src/hooks/Network/Commands.ts b/src/hooks/Network/Commands.ts index 99696ad..5f14e4b 100644 --- a/src/hooks/Network/Commands.ts +++ b/src/hooks/Network/Commands.ts @@ -187,6 +187,8 @@ export const useConfigureDevice = ({ serialNumber }: { serialNumber: string }) = return useMutation(configureDevice(serialNumber), { onSuccess: () => { queryClient.invalidateQueries(['commands', serialNumber]); + queryClient.invalidateQueries(['device', serialNumber]); + queryClient.invalidateQueries(['devices']); }, }); }; @@ -248,27 +250,14 @@ const startScript = (data: { serialNumber: string; timeout?: number; [k: string] }) .then((response: { data: DeviceCommandHistory }) => response.data); export const useDeviceScript = ({ serialNumber }: { serialNumber: string }) => { - const { t } = useTranslation(); - const toast = useToast(); const queryClient = useQueryClient(); return useMutation(startScript, { onSuccess: () => { queryClient.invalidateQueries(['commands', serialNumber]); }, - onError: (e) => { + onError: () => { queryClient.invalidateQueries(['commands', serialNumber]); - if (axios.isAxiosError(e)) { - toast({ - id: 'script-error', - title: t('common.error'), - description: e?.response?.data?.ErrorDescription, - status: 'error', - duration: 5000, - isClosable: true, - position: 'top-right', - }); - } }, }); }; diff --git a/src/pages/Device/Details.tsx b/src/pages/Device/Details.tsx index cf7e820..69fef7b 100644 --- a/src/pages/Device/Details.tsx +++ b/src/pages/Device/Details.tsx @@ -11,7 +11,6 @@ import { compactDate } from 'helpers/dateFormatting'; import { useGetDevice } from 'hooks/Network/Devices'; import { useGetProvUi } from 'hooks/Network/Endpoints'; import { useGetTag } from 'hooks/Network/Inventory'; -import { DeviceConfiguration } from 'models/Device'; type Props = { serialNumber: string; @@ -60,7 +59,7 @@ const DeviceDetails = ({ serialNumber }: Props) => { {t('common.details')} - + diff --git a/src/pages/Device/ViewConfigurationModal.tsx b/src/pages/Device/ViewConfigurationModal.tsx index 872c85e..05371b3 100644 --- a/src/pages/Device/ViewConfigurationModal.tsx +++ b/src/pages/Device/ViewConfigurationModal.tsx @@ -7,7 +7,9 @@ import { AccordionPanel, Box, Button, + Center, IconButton, + Spinner, Tooltip, useClipboard, useColorMode, @@ -17,19 +19,26 @@ import { JsonViewer } from '@textea/json-viewer'; import { Barcode } from '@phosphor-icons/react'; import { useTranslation } from 'react-i18next'; import { Modal } from 'components/Modals/Modal'; -import { DeviceConfiguration } from 'models/Device'; +import { useGetDevice } from 'hooks/Network/Devices'; +import { RefreshButton } from 'components/Buttons/RefreshButton'; -const ViewConfigurationModal = ({ configuration }: { configuration?: DeviceConfiguration }) => { +const ViewConfigurationModal = ({ serialNumber }: { serialNumber: string }) => { const { t } = useTranslation(); + const getDevice = useGetDevice({ serialNumber }); const { isOpen, onOpen, onClose } = useDisclosure(); - const { hasCopied, onCopy, setValue } = useClipboard(JSON.stringify(configuration ?? {}, null, 2)); + const { hasCopied, onCopy, setValue } = useClipboard(JSON.stringify(getDevice.data?.configuration ?? {}, null, 2)); const { colorMode } = useColorMode(); React.useEffect(() => { - if (configuration) { - setValue(JSON.stringify(configuration, null, 2)); + if (getDevice.data) { + setValue(JSON.stringify(getDevice.data.configuration, null, 2)); } - }, [configuration]); + }, [getDevice.data?.configuration]); + + const handleOpenClick = () => { + getDevice.refetch(); + onOpen(); + }; return ( <> @@ -37,7 +46,7 @@ const ViewConfigurationModal = ({ configuration }: { configuration?: DeviceConfi } - onClick={onOpen} + onClick={handleOpenClick} colorScheme="purple" /> @@ -45,14 +54,17 @@ const ViewConfigurationModal = ({ configuration }: { configuration?: DeviceConfi isOpen={isOpen} title={t('configurations.one')} topRightButtons={ - + <> + + + } onClose={onClose} > - {configuration && ( + {getDevice.data && !getDevice.isFetching ? ( @@ -71,7 +83,7 @@ const ViewConfigurationModal = ({ configuration }: { configuration?: DeviceConfi enableClipboard={false} theme={colorMode === 'light' ? undefined : 'dark'} defaultInspectDepth={1} - value={configuration as object} + value={getDevice.data.configuration as object} style={{ background: 'unset', display: 'unset' }} /> @@ -86,11 +98,15 @@ const ViewConfigurationModal = ({ configuration }: { configuration?: DeviceConfi -
{JSON.stringify(configuration, null, 2)}
+
{JSON.stringify(getDevice.data.configuration, null, 2)}
+ ) : ( +
+ +
)}
@@ -98,4 +114,4 @@ const ViewConfigurationModal = ({ configuration }: { configuration?: DeviceConfi ); }; -export default ViewConfigurationModal; +export default React.memo(ViewConfigurationModal);