[WIFI-11566] Fixed uses of useClipboard

Signed-off-by: Charles <charles.bourque96@gmail.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "2.8.0(9)",
+  "version": "2.8.0(10)",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "2.8.0(9)",
+      "version": "2.8.0(10)",
       "license": "ISC",
       "dependencies": {
         "@chakra-ui/icons": "^2.0.11",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.8.0(9)",
+  "version": "2.8.0(10)",
   "description": "",
   "private": true,
   "main": "index.tsx",

src/components/Modals/TelemetryModal/index.tsx

@@ -53,7 +53,7 @@ const _TelemetryModal = ({ serialNumber, modalProps }: TelemetryModalProps) => {
   });
   const [lastDate, setLastDate] = React.useState<Date>(new Date());
   const telemetry = useTelemetry();
-  const { hasCopied, onCopy } = useClipboard(JSON.stringify(telemetry.lastMessage?.msg ?? {}, null, 2));
+  const { hasCopied, onCopy, setValue } = useClipboard(JSON.stringify(telemetry.lastMessage?.msg ?? {}, null, 2));
 
   const onStart = () => {
     telemetry.startTelemetry(form, modalProps.onClose);
@@ -89,6 +89,10 @@ const _TelemetryModal = ({ serialNumber, modalProps }: TelemetryModalProps) => {
     telemetry.closeSocket();
   }, [modalProps.isOpen]);
 
+  React.useEffect(() => {
+    setValue(JSON.stringify(telemetry.lastMessage?.msg ?? {}, null, 2));
+  }, [telemetry.lastMessage?.msg]);
+
   React.useEffect(() => {
     const timerID = setTimeout(() => tick(), 1000);
 

src/pages/Device/Details.tsx

@@ -23,7 +23,7 @@ const DeviceDetails = ({ serialNumber }: Props) => {
   const getDevice = useGetDevice({ serialNumber });
   const getTag = useGetTag({ serialNumber });
   const { isOpen: isShowingPassword, onToggle: onTogglePassword } = useDisclosure();
-  const { hasCopied, onCopy } = useClipboard(
+  const { hasCopied, onCopy, setValue } = useClipboard(
     getDevice.data?.devicePassword !== undefined && getDevice.data?.devicePassword !== ''
       ? getDevice.data?.devicePassword
       : 'openwifi',
@@ -39,6 +39,16 @@ const DeviceDetails = ({ serialNumber }: Props) => {
 
   const goToProvUi = (dir: string) => `${getProvUi.data}/#/${dir}`;
 
+  React.useEffect(() => {
+    if (getDevice.data) {
+      setValue(
+        getDevice.data?.devicePassword !== undefined && getDevice.data?.devicePassword !== ''
+          ? getDevice.data?.devicePassword
+          : 'openwifi',
+      );
+    }
+  }, [getDevice.data]);
+
   return (
     <Card mb={4}>
       <CardHeader mb={2}>

src/pages/Device/StatisticsCard/ViewLastStatsModal.tsx

@@ -31,9 +31,14 @@ const ViewLastStatsModal = ({ serialNumber }: Props) => {
   const { t } = useTranslation();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const getLastStats = useGetDeviceLastStats({ serialNumber });
-  const { hasCopied, onCopy } = useClipboard(JSON.stringify(getLastStats.data ?? {}, null, 2));
+  const { hasCopied, onCopy, setValue } = useClipboard(JSON.stringify(getLastStats.data ?? {}, null, 2));
   const { colorMode } = useColorMode();
 
+  React.useEffect(() => {
+    if (getLastStats.data) {
+      setValue(JSON.stringify(getLastStats.data, null, 2));
+    }
+  }, [getLastStats.data]);
   return (
     <>
       <Tooltip label={t('statistics.last_stats')}>

src/pages/Device/ViewCapabilitiesModal.tsx

@@ -30,9 +30,16 @@ const ViewCapabilitiesModal = ({ serialNumber }: Props) => {
   const { t } = useTranslation();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const getCapabilities = useGetDeviceCapabilities({ serialNumber });
-  const { hasCopied, onCopy } = useClipboard(JSON.stringify(getCapabilities.data?.capabilities ?? {}, null, 2));
+  const { hasCopied, onCopy, setValue } = useClipboard(
+    JSON.stringify(getCapabilities.data?.capabilities ?? {}, null, 2),
+  );
   const { colorMode } = useColorMode();
 
+  React.useEffect(() => {
+    if (getCapabilities.data) {
+      setValue(JSON.stringify(getCapabilities.data.capabilities, null, 2));
+    }
+  }, [getCapabilities.data]);
   return (
     <>
       <Button onClick={onOpen} colorScheme="pink" mr={2}>

src/pages/Device/ViewConfigurationModal.tsx

@@ -19,9 +19,15 @@ import { DeviceConfiguration } from 'models/Device';
 const ViewConfigurationModal = ({ configuration }: { configuration?: DeviceConfiguration }) => {
   const { t } = useTranslation();
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { hasCopied, onCopy } = useClipboard(JSON.stringify(configuration ?? {}, null, 2));
+  const { hasCopied, onCopy, setValue } = useClipboard(JSON.stringify(configuration ?? {}, null, 2));
   const { colorMode } = useColorMode();
 
+  React.useEffect(() => {
+    if (configuration) {
+      setValue(JSON.stringify(configuration, null, 2));
+    }
+  }, [configuration]);
+
   return (
     <>
       <Button onClick={onOpen} isDisabled={!configuration} colorScheme="purple">