2.6.56: createUuid -> uuid

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "wlan-cloud-owprov-ui",
-  "version": "2.6.55",
+  "version": "2.6.56",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "wlan-cloud-owprov-ui",
-      "version": "2.6.55",
+      "version": "2.6.56",
       "license": "ISC",
       "dependencies": {
         "@chakra-ui/icons": "^1.1.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wlan-cloud-owprov-ui",
-  "version": "2.6.55",
+  "version": "2.6.56",
   "description": "",
   "main": "index.js",
   "scripts": {

src/components/Buttons/FileInputButton/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { FormControl, Input, InputGroup } from '@chakra-ui/react';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 
 const propTypes = {
   value: PropTypes.string.isRequired,
@@ -27,7 +27,7 @@ const FileInputButton = ({
   isHidden,
   isStringFile,
 }) => {
-  const [fileKey, setFileKey] = useState(createUuid());
+  const [fileKey, setFileKey] = useState(uuid());
   let fileReader;
 
   const handleStringFileRead = () => {
@@ -52,7 +52,7 @@ const FileInputButton = ({
   };
 
   useEffect(() => {
-    if (value === '') setFileKey(createUuid());
+    if (value === '') setFileKey(uuid());
   }, [refreshId, value]);
 
   return (

src/components/ColumnPicker/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
@@ -53,7 +53,7 @@ const ColumnPicker = ({ preference, columns, hiddenColumns, setHiddenColumns })
         <MenuList>
           {columns.map((column) => (
             <MenuItem
-              key={createUuid()}
+              key={uuid()}
               isDisabled={column.alwaysShow}
               onClick={() => handleColumnClick(column.id)}
             >
@@ -78,7 +78,7 @@ const ColumnPicker = ({ preference, columns, hiddenColumns, setHiddenColumns })
       <MenuList>
         {columns.map((column) => (
           <MenuItem
-            key={createUuid()}
+            key={uuid()}
             isDisabled={column.alwaysShow}
             onClick={() => handleColumnClick(column.id)}
           >

src/components/CustomFields/ConfigurationResourcePicker/ResourcePicker.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import isEqual from 'react-fast-compare';
 import { Select } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
@@ -24,7 +24,7 @@ const ResourcePicker = ({ value, resources, isDisabled, onChange }) => {
     <Select value={value} isDisabled={isDisabled} maxW={72} onChange={onChange}>
       <option value="">{t('common.manual')}</option>
       {resources.map((res) => (
-        <option key={createUuid()} value={res.value}>
+        <option key={uuid()} value={res.value}>
           {res.label}
         </option>
       ))}

src/components/DataTable/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import {
   Table,
   Tbody,
@@ -165,10 +165,10 @@ const DataTable = ({
           <Table {...getTableProps()} size="small" textColor={textColor} w="100%">
             <Thead fontSize="14px">
               {headerGroups.map((group) => (
-                <Tr {...group.getHeaderGroupProps()} key={createUuid()}>
+                <Tr {...group.getHeaderGroupProps()} key={uuid()}>
                   {group.headers.map((column) => (
                     <Th
-                      key={createUuid()}
+                      key={uuid()}
                       color="gray.400"
                       {...column.getHeaderProps()}
                       minWidth={column.customMinWidth ?? null}
@@ -196,10 +196,10 @@ const DataTable = ({
                 {page.map((row) => {
                   prepareRow(row);
                   return (
-                    <Tr {...row.getRowProps()} key={createUuid()}>
+                    <Tr {...row.getRowProps()} key={uuid()}>
                       {row.cells.map((cell) => (
                         <Td
-                          key={createUuid()}
+                          key={uuid()}
                           px={1}
                           minWidth={cell.column.customMinWidth ?? null}
                           maxWidth={cell.column.customMaxWidth ?? null}
@@ -289,7 +289,7 @@ const DataTable = ({
               }}
             >
               {[10, 20, 30, 40, 50].map((opt) => (
-                <option key={createUuid()} value={opt}>
+                <option key={uuid()} value={opt}>
                   {t('common.show')} {opt}
                 </option>
               ))}

src/components/FileInput/index.js

@@ -11,7 +11,7 @@ import {
   InputRightElement,
 } from '@chakra-ui/react';
 import Papa from 'papaparse';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { CloseIcon } from '@chakra-ui/icons';
 import { useTranslation } from 'react-i18next';
 import { testMac } from 'constants/formTests';
@@ -41,7 +41,7 @@ const defaultProps = {
 const FileInput = ({ setValue, refreshId, errors }) => {
   const { t } = useTranslation();
   const [result, setResult] = useState(null);
-  const [fileKey, setFileKey] = useState(createUuid());
+  const [fileKey, setFileKey] = useState(uuid());
 
   const parseFile = async (file) => {
     setResult(null);
@@ -124,7 +124,7 @@ const FileInput = ({ setValue, refreshId, errors }) => {
   const resetFile = () => {
     setResult(null);
     setValue('commonNames', []);
-    setFileKey(createUuid());
+    setFileKey(uuid());
   };
 
   const changeFile = (e) => {
@@ -141,7 +141,7 @@ const FileInput = ({ setValue, refreshId, errors }) => {
   };
 
   useEffect(() => {
-    setFileKey(createUuid());
+    setFileKey(uuid());
   }, [refreshId]);
 
   return (

src/components/FormFields/FileInputFieldModal/FileInputModal.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import {
   Box,
   CloseButton,
@@ -87,7 +87,7 @@ const FileInputModal = ({
 
   useEffect(() => {
     if (!isOpen) {
-      setRefreshId(createUuid());
+      setRefreshId(uuid());
       setTempValue('');
       setTempFilename('');
     }

src/components/FormFields/ListInputModalField/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import {
   Button,
   useDisclosure,
@@ -147,7 +147,7 @@ const ListInputModalField = ({
             ) : (
               <UnorderedList>
                 {localValue.map((val) => (
-                  <ListItem key={createUuid()}>
+                  <ListItem key={uuid()}>
                     {val}
                     <Tooltip label={t('crud.delete')}>
                       <IconButton

src/components/FormFields/SelectField/FastSelectInput.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormControl, FormErrorMessage, FormLabel, Select } from '@chakra-ui/react';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import isEqual from 'react-fast-compare';
 import ConfigurationFieldExplanation from '../ConfigurationFieldExplanation';
 
@@ -69,7 +69,7 @@ const FastSelectInput = ({
       w={w}
     >
       {options.map((option) => (
-        <option value={option.value} key={createUuid()}>
+        <option value={option.value} key={uuid()}>
           {option.label}
         </option>
       ))}

src/components/Modals/ConfigurationInUseModal/index.js

@@ -12,7 +12,7 @@ import {
   ListItem,
   Heading,
 } from '@chakra-ui/react';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useTranslation } from 'react-i18next';
 import CloseButton from 'components/Buttons/CloseButton';
 import ModalHeader from 'components/ModalHeader';
@@ -61,7 +61,7 @@ const ConfigurationInUseModal = ({ isOpen, onClose, config }) => {
               </Heading>
               <UnorderedList>
                 {inUse?.ent?.map((ent) => (
-                  <ListItem ml={4} key={createUuid()}>
+                  <ListItem ml={4} key={uuid()}>
                     <EntityCell entityName={ent.name} entityId={ent.uuid} />
                   </ListItem>
                 ))}
@@ -71,7 +71,7 @@ const ConfigurationInUseModal = ({ isOpen, onClose, config }) => {
               </Heading>
               <UnorderedList>
                 {inUse?.ven?.map((ven) => (
-                  <ListItem ml={4} key={createUuid()}>
+                  <ListItem ml={4} key={uuid()}>
                     <VenueCell venueName={ven.name} venueId={ven.uuid} />
                   </ListItem>
                 ))}
@@ -81,7 +81,7 @@ const ConfigurationInUseModal = ({ isOpen, onClose, config }) => {
               </Heading>
               <UnorderedList>
                 {inUse?.inv?.map((dev) => (
-                  <ListItem ml={4} key={createUuid()}>
+                  <ListItem ml={4} key={uuid()}>
                     {dev.name}
                   </ListItem>
                 ))}

src/components/NotesTable/index.js

@@ -5,7 +5,7 @@ import { IconButton, Input, InputGroup, InputRightElement, Tooltip } from '@chak
 import { AddIcon } from '@chakra-ui/icons';
 import { useAuth } from 'contexts/AuthProvider';
 import DataTable from 'components/DataTable';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import FormattedDate from 'components/FormattedDate';
 
 const propTypes = {
@@ -39,7 +39,7 @@ const NotesTable = ({ notes, setNotes, isDisabled }) => {
   };
 
   const memoizedDate = useCallback(
-    (cell) => <FormattedDate date={cell.row.values.created} key={createUuid()} />,
+    (cell) => <FormattedDate date={cell.row.values.created} key={uuid()} />,
     [],
   );
 

src/components/NotifyForms/index.js

@@ -1,125 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-import { Field, Form, Formik } from 'formik';
-import { v4 as createUuid } from 'uuid';
-import {
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  IconButton,
-  Input,
-  InputGroup,
-  InputRightElement,
-} from '@chakra-ui/react';
-import { Plus } from 'phosphor-react';
-import { EmailNotificationSchema, SmsNotificationSchema } from 'constants/formSchemas';
-
-const propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  notifyEmails: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
-  setNotifyEmails: PropTypes.func.isRequired,
-  notifySms: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
-  setNotifySms: PropTypes.func.isRequired,
-};
-
-const NotifyForms = ({ isOpen, notifyEmails, setNotifyEmails, notifySms, setNotifySms }) => {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <Formik
-        key={isOpen ? createUuid() : ''}
-        initialValues={{ emailToNotify: '' }}
-        validationSchema={() => EmailNotificationSchema(t)}
-        onSubmit={({ emailToNotify }, { resetForm }) => {
-          setNotifyEmails((value) => [...value, emailToNotify]);
-          resetForm();
-        }}
-      >
-        {({ errors, touched, isValid, dirty, submitForm }) => (
-          <Form>
-            <Field name="emailToNotify">
-              {({ field }) => (
-                <FormControl mt={4} isInvalid={errors.emailToNotify && touched.emailToNotify}>
-                  <FormLabel ms="4px" fontSize="md" fontWeight="normal">
-                    {t('batch.emails_to_notify')}:
-                  </FormLabel>
-                  <p>{notifyEmails.map((email, index) => `${index > 0 ? ', ' : ''}${email}`)}</p>
-                  <InputGroup>
-                    <Input
-                      {...field}
-                      borderRadius="15px"
-                      pt={1}
-                      fontSize="sm"
-                      type="string"
-                      placeholder={t('form.new_email_to_notify')}
-                    />
-                    <InputRightElement>
-                      {' '}
-                      <IconButton
-                        icon={<Plus />}
-                        type="submit"
-                        isDisabled={!isValid || !dirty}
-                        onClick={submitForm}
-                      />
-                    </InputRightElement>
-                  </InputGroup>
-                  <FormErrorMessage>{errors.emailToNotify}</FormErrorMessage>
-                </FormControl>
-              )}
-            </Field>
-          </Form>
-        )}
-      </Formik>
-      <Formik
-        key={isOpen ? createUuid() : ''}
-        initialValues={{ phone: '' }}
-        validationSchema={() => SmsNotificationSchema(t)}
-        onSubmit={({ phone }, { resetForm }) => {
-          setNotifySms((value) => [...value, phone[0] === '+' ? phone : `+${phone}`]);
-          resetForm();
-        }}
-      >
-        {({ errors, touched, isValid, dirty, submitForm }) => (
-          <Form>
-            <Field name="phone">
-              {({ field }) => (
-                <FormControl mt={4} isInvalid={errors.phone && touched.phone}>
-                  <FormLabel ms="4px" fontSize="md" fontWeight="normal">
-                    {t('batch.phones_to_notify')}:
-                  </FormLabel>
-                  <p>{notifySms.map((phone, index) => `${index > 0 ? ', ' : ''}${phone}`)}</p>
-                  <InputGroup>
-                    <Input
-                      {...field}
-                      borderRadius="15px"
-                      pt={1}
-                      fontSize="sm"
-                      type="string"
-                      placeholder={t('form.new_phone_to_notify')}
-                    />
-                    <InputRightElement>
-                      {' '}
-                      <IconButton
-                        icon={<Plus />}
-                        type="submit"
-                        isDisabled={!isValid || !dirty}
-                        onClick={submitForm}
-                      />
-                    </InputRightElement>
-                  </InputGroup>
-                  <FormErrorMessage>{errors.phone}</FormErrorMessage>
-                </FormControl>
-              )}
-            </Field>
-          </Form>
-        )}
-      </Formik>
-    </>
-  );
-};
-
-NotifyForms.propTypes = propTypes;
-
-export default NotifyForms;

src/components/Tables/ConfigurationTable/ConfigurationViewAffectedModal/index.js

@@ -12,7 +12,7 @@ import {
   ListItem,
   Heading,
 } from '@chakra-ui/react';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useTranslation } from 'react-i18next';
 import CloseButton from 'components/Buttons/CloseButton';
 import ModalHeader from 'components/ModalHeader';
@@ -58,7 +58,7 @@ const ConfigurationViewAffectedModal = ({ isOpen, onClose, config }) => {
               </Heading>
               <UnorderedList maxH="800px" overflowY="auto">
                 {affected?.map((dev) => (
-                  <ListItem ml={4} key={createUuid()}>
+                  <ListItem ml={4} key={uuid()}>
                     {dev}
                   </ListItem>
                 ))}

src/components/Tables/ConfigurationTable/CreateConfigurationModal/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useToast, SimpleGrid } from '@chakra-ui/react';
 import { Formik } from 'formik';
 import { CreateConfigurationSchema } from 'constants/formSchemas';
@@ -39,7 +39,7 @@ const CreateConfigurationForm = ({
 }) => {
   const { t } = useTranslation();
   const toast = useToast();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const { data: entities } = useGetEntities({ t, toast });
   const { data: venues } = useGetVenues({ t, toast });
 
@@ -70,7 +70,7 @@ const CreateConfigurationForm = ({
   });
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [isOpen]);
 
   return (
@@ -108,7 +108,7 @@ const CreateConfigurationForm = ({
           },
           onError: (e) => {
             toast({
-              id: createUuid(),
+              id: uuid(),
               title: t('common.error'),
               description: t('crud.error_create_obj', {
                 obj: t('configurations.one'),

src/components/Tables/ConfigurationTable/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import DataTable from 'components/DataTable';
 import { useTranslation } from 'react-i18next';
 import { useToast } from '@chakra-ui/react';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import FormattedDate from 'components/FormattedDate';
 import { useGetSelectConfigurations } from 'hooks/Network/Configurations';
 
@@ -18,7 +18,7 @@ const ConfigurationsTable = ({ select, actions }) => {
   const { data: configurations, isFetching } = useGetSelectConfigurations({ t, toast, select });
 
   const dateCell = useCallback(
-    (cell, key) => <FormattedDate date={cell.row.values[key]} key={createUuid()} />,
+    (cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
     [],
   );
   const typesCell = useCallback((cell) => cell.row.values.deviceTypes.join(', '), []);

src/components/Tables/ContactTable/AssignContactModal/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import {
   Button,
   useDisclosure,
@@ -79,7 +79,7 @@ const AssignContactModal = ({ entityId, venueId, alreadyClaimed }) => {
       onSuccess: ({ claimErrors }) => {
         if (claimErrors.length > 0) {
           toast({
-            id: createUuid(),
+            id: uuid(),
             title: t('common.error'),
             description: t('common.error_claiming_obj'),
             status: 'error',
@@ -106,7 +106,7 @@ const AssignContactModal = ({ entityId, venueId, alreadyClaimed }) => {
       },
       onError: () => {
         toast({
-          id: createUuid(),
+          id: uuid(),
           title: t('common.error'),
           description: t('common.error_claiming_obj'),
           status: 'error',

src/components/Tables/ContactTable/CreateContactModal/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useToast, SimpleGrid } from '@chakra-ui/react';
 import { Formik, Form } from 'formik';
 import { CreateContactSchema } from 'constants/formSchemas';
@@ -26,7 +26,7 @@ const propTypes = {
 const CreateContactForm = ({ isOpen, onClose, refresh, formRef, parent }) => {
   const { t } = useTranslation();
   const toast = useToast();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const { data: entities } = useGetEntities({ t, toast });
   const { data: venues } = useGetVenues({ t, toast });
   const queryClient = useQueryClient();
@@ -34,7 +34,7 @@ const CreateContactForm = ({ isOpen, onClose, refresh, formRef, parent }) => {
   const create = useCreateContact();
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [isOpen]);
 
   return (
@@ -122,7 +122,7 @@ const CreateContactForm = ({ isOpen, onClose, refresh, formRef, parent }) => {
             },
             onError: (e) => {
               toast({
-                id: createUuid(),
+                id: uuid(),
                 title: t('common.error'),
                 description: t('crud.error_create_obj', {
                   obj: t('contacts.one'),

src/components/Tables/ContactTable/EditContactModal/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useToast, Tabs, TabList, TabPanels, TabPanel, Tab, SimpleGrid } from '@chakra-ui/react';
 import { Formik, Field, Form } from 'formik';
 import NotesTable from 'components/NotesTable';
@@ -26,12 +26,12 @@ const propTypes = {
 const EditContactForm = ({ editing, isOpen, onClose, refresh, contact, formRef }) => {
   const { t } = useTranslation();
   const toast = useToast();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const { data: entities } = useGetEntities({ t, toast });
   const updateContact = useUpdateContact({ id: contact.id });
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [isOpen]);
 
   return (
@@ -100,7 +100,7 @@ const EditContactForm = ({ editing, isOpen, onClose, refresh, contact, formRef }
             },
             onError: (e) => {
               toast({
-                id: createUuid(),
+                id: uuid(),
                 title: t('common.error'),
                 description: t('crud.error_update_obj', {
                   obj: t('contacts.one'),

src/components/Tables/ContactTable/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import DataTable from 'components/DataTable';
 import { useTranslation } from 'react-i18next';
 import { useToast } from '@chakra-ui/react';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import FormattedDate from 'components/FormattedDate';
 import { useGetSelectContacts } from 'hooks/Network/Contacts';
 
@@ -27,7 +27,7 @@ const ContactTable = ({ actions, select, ignoredColumns, refreshId, disabledIds
   const { data: venues, isFetching, refetch } = useGetSelectContacts({ t, toast, select });
 
   const memoizedDate = useCallback(
-    (cell, key) => <FormattedDate date={cell.row.values[key]} key={createUuid()} />,
+    (cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
     [],
   );
 

src/components/Tables/EntityTable/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import DataTable from 'components/DataTable';
 import { useTranslation } from 'react-i18next';
 import { useToast } from '@chakra-ui/react';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import FormattedDate from 'components/FormattedDate';
 import { useGetSelectEntities } from 'hooks/Network/Entity';
 
@@ -18,7 +18,7 @@ const EntityTable = ({ actions, select }) => {
   const { data: entities, isFetching } = useGetSelectEntities({ t, toast, select });
 
   const dateCell = useCallback(
-    (cell, key) => <FormattedDate date={cell.row.values[key]} key={createUuid()} />,
+    (cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
     [],
   );
 

src/components/Tables/InventoryTable/AssignTagModal/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import {
   Button,
   useDisclosure,
@@ -77,7 +77,7 @@ const AssignTagModal = ({ entityId, alreadyClaimedDevices }) => {
       onSuccess: ({ claimErrors, unassignErrors }) => {
         if (unassignErrors.length > 0) {
           toast({
-            id: createUuid(),
+            id: uuid(),
             title: t('common.error'),
             description: t('subscribers.error_removing_claim', {
               serials: unassignErrors.join(','),
@@ -89,7 +89,7 @@ const AssignTagModal = ({ entityId, alreadyClaimedDevices }) => {
           });
         } else if (claimErrors.length > 0) {
           toast({
-            id: createUuid(),
+            id: uuid(),
             title: t('common.error'),
             description: t('subscribers.error_claiming', {
               serials: claimErrors.join(','),
@@ -121,7 +121,7 @@ const AssignTagModal = ({ entityId, alreadyClaimedDevices }) => {
       },
       onError: () => {
         toast({
-          id: createUuid(),
+          id: uuid(),
           title: t('common.error'),
           description: t('subscribers.error_claiming', {
             serials: serialNumbers.join(','),

src/components/Tables/InventoryTable/CreateTagModal/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useToast, SimpleGrid } from '@chakra-ui/react';
 import { Formik, Form } from 'formik';
 import { CreateTagSchema } from 'constants/formSchemas';
@@ -43,7 +43,7 @@ const CreateTagForm = ({
 }) => {
   const { t } = useTranslation();
   const toast = useToast();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const { data: entities } = useGetEntities({ t, toast });
   const { data: venues } = useGetVenues({ t, toast });
 
@@ -77,7 +77,7 @@ const CreateTagForm = ({
   });
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [isOpen]);
 
   return (
@@ -126,7 +126,7 @@ const CreateTagForm = ({
           },
           onError: (e) => {
             toast({
-              id: createUuid(),
+              id: uuid(),
               title: t('common.error'),
               description: t('crud.error_create_obj', {
                 obj: t('certificates.device'),

src/components/Tables/InventoryTable/EditTagModal/ComputedConfigurationDisplay.js

@@ -13,7 +13,7 @@ import {
   AccordionPanel,
   Center,
 } from '@chakra-ui/react';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 
 const propTypes = {
   computedConfig: PropTypes.shape({
@@ -48,7 +48,7 @@ const ComputedConfigurationDisplay = ({ computedConfig }) => {
       <Box border="1px" borderRadius="5px" h="calc(30vh)" overflowY="auto">
         <Accordion allowMultiple>
           {computedConfig.explanation?.map((exp) => (
-            <AccordionItem key={createUuid()}>
+            <AccordionItem key={uuid()}>
               <AccordionButton
                 bg={
                   exp.action === 'added'

src/components/Tables/InventoryTable/EditTagModal/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import {
   useToast,
   Tabs,
@@ -57,7 +57,7 @@ const EditTagForm = ({
 }) => {
   const { t } = useTranslation();
   const toast = useToast();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const { data: entities } = useGetEntities({ t, toast });
   const { data: venues } = useGetVenues({ t, toast });
   const updateConfiguration = useUpdateConfiguration({ id: tag.deviceConfiguration });
@@ -70,7 +70,7 @@ const EditTagForm = ({
   };
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [isOpen]);
 
   return (
@@ -130,7 +130,7 @@ const EditTagForm = ({
               },
               onError: (e) => {
                 toast({
-                  id: createUuid(),
+                  id: uuid(),
                   title: t('common.error'),
                   description: t('crud.error_update_obj', {
                     obj: t('configurations.one'),
@@ -169,7 +169,7 @@ const EditTagForm = ({
             },
             onError: (e) => {
               toast({
-                id: createUuid(),
+                id: uuid(),
                 title: t('common.error'),
                 description: t('crud.error_update_obj', {
                   obj: t('inventory.tag_one'),

src/components/Tables/InventoryTable/EditTagModal/SpecialConfigurationManager/SpecialConfigurationForm.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { Formik } from 'formik';
 import { SimpleGrid } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
@@ -22,10 +22,10 @@ const defaultProps = {
 
 const SpecialConfigurationForm = ({ editing, configuration, formRef }) => {
   const { t } = useTranslation();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [editing]);
 
   return (

src/components/Tables/InventoryTable/ImportDeviceCsvModal/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import {
   useDisclosure,
   Modal,
@@ -37,7 +37,7 @@ const defaultProps = {
 const ImportDeviceCsvModal = ({ refresh, deviceClass, parent }) => {
   const { t } = useTranslation();
   const breakpoint = useBreakpoint();
-  const [refreshId, setRefreshId] = useState(createUuid());
+  const [refreshId, setRefreshId] = useState(uuid());
   // 0: explanation, file import and file analysis
   // 1: testing the serial number list with the API
   // 2: do the POSTs and PUTs necessary, show the results
@@ -84,7 +84,7 @@ const ImportDeviceCsvModal = ({ refresh, deviceClass, parent }) => {
 
   const openModal = () => {
     setPhase(0);
-    setRefreshId(createUuid());
+    setRefreshId(uuid());
     setIsCloseable(true);
     setDevicesToTest([]);
     setDevicesToImport([]);

src/components/Tables/LocationTable/AssignLocationModal/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import {
   Button,
   useDisclosure,
@@ -77,7 +77,7 @@ const AssignLocationModal = ({ entityId, alreadyClaimed }) => {
       onSuccess: ({ claimErrors }) => {
         if (claimErrors.length > 0) {
           toast({
-            id: createUuid(),
+            id: uuid(),
             title: t('common.error'),
             description: t('common.error_claiming_obj'),
             status: 'error',
@@ -104,7 +104,7 @@ const AssignLocationModal = ({ entityId, alreadyClaimed }) => {
       },
       onError: () => {
         toast({
-          id: createUuid(),
+          id: uuid(),
           title: t('common.error'),
           description: t('common.error_claiming_obj'),
           status: 'error',

src/components/Tables/LocationTable/CreateLocationModal/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useToast, SimpleGrid } from '@chakra-ui/react';
 import { Formik, Form } from 'formik';
 import { CreateLocationSchema } from 'constants/formSchemas';
@@ -30,14 +30,14 @@ const defaultProps = {
 const CreateLocationForm = ({ isOpen, onClose, refresh, formRef, entityId }) => {
   const { t } = useTranslation();
   const toast = useToast();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const { data: entities } = useGetEntities({ t, toast });
   const queryClient = useQueryClient();
 
   const create = useCreateLocation();
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [isOpen]);
 
   return (
@@ -123,7 +123,7 @@ const CreateLocationForm = ({ isOpen, onClose, refresh, formRef, entityId }) =>
             },
             onError: (e) => {
               toast({
-                id: createUuid(),
+                id: uuid(),
                 title: t('common.error'),
                 description: t('crud.error_create_obj', {
                   obj: t('locations.one'),

src/components/Tables/LocationTable/EditLocationModal/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useToast, Tabs, TabList, TabPanels, TabPanel, Tab, SimpleGrid } from '@chakra-ui/react';
 import { Formik, Field, Form } from 'formik';
 import NotesTable from 'components/NotesTable';
@@ -28,12 +28,12 @@ const propTypes = {
 const EditLocationForm = ({ editing, isOpen, onClose, refresh, location, formRef }) => {
   const { t } = useTranslation();
   const toast = useToast();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const { data: entities } = useGetEntities({ t, toast });
   const updateLocation = useUpdateLocation({ id: location.id });
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [isOpen]);
 
   return (
@@ -105,7 +105,7 @@ const EditLocationForm = ({ editing, isOpen, onClose, refresh, location, formRef
             },
             onError: (e) => {
               toast({
-                id: createUuid(),
+                id: uuid(),
                 title: t('common.error'),
                 description: t('crud.error_update_obj', {
                   obj: t('locations.one'),

src/components/Tables/LocationTable/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import DataTable from 'components/DataTable';
 import { useTranslation } from 'react-i18next';
 import { useToast } from '@chakra-ui/react';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import FormattedDate from 'components/FormattedDate';
 import { useGetSelectLocations } from 'hooks/Network/Locations';
 
@@ -26,7 +26,7 @@ const LocationTable = ({ actions, select, refreshId, ignoredColumns, disabledIds
   const { data: venues, isFetching, refetch } = useGetSelectLocations({ t, toast, select });
 
   const memoizedDate = useCallback(
-    (cell, key) => <FormattedDate date={cell.row.values[key]} key={createUuid()} />,
+    (cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
     [],
   );
 

src/components/Tables/VenueTable/CreateVenueModal/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useToast, SimpleGrid } from '@chakra-ui/react';
 import { Formik, Form } from 'formik';
 import { EntitySchema } from 'constants/formSchemas';
@@ -25,7 +25,7 @@ const CreateVenueForm = ({ isOpen, onClose, formRef, parentId, entityId }) => {
   const toast = useToast();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const create = useCreateVenue();
 
   const createParameters = ({ name, description, note, rrm, location }) => ({
@@ -39,7 +39,7 @@ const CreateVenueForm = ({ isOpen, onClose, formRef, parentId, entityId }) => {
   });
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [isOpen]);
 
   return (
@@ -88,7 +88,7 @@ const CreateVenueForm = ({ isOpen, onClose, formRef, parentId, entityId }) => {
             },
             onError: (e) => {
               toast({
-                id: createUuid(),
+                id: uuid(),
                 title: t('common.error'),
                 description: t('crud.error_create_obj', {
                   obj: t('venues.one'),

src/components/Tables/VenueTable/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import DataTable from 'components/DataTable';
 import { useTranslation } from 'react-i18next';
 import { useToast } from '@chakra-ui/react';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import FormattedDate from 'components/FormattedDate';
 import { useGetSelectVenues } from 'hooks/Network/Venues';
 
@@ -18,7 +18,7 @@ const VenueTable = ({ actions, select }) => {
   const { data: venues, isFetching } = useGetSelectVenues({ t, toast, select });
 
   const memoizedDate = useCallback(
-    (cell, key) => <FormattedDate date={cell.row.values[key]} key={createUuid()} />,
+    (cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
     [],
   );
 

src/layout/Sidebar/CreateLinks.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import EntityNavButton from './EntityNavButton';
 import NavLinkButton from './NavLinkButton';
 
@@ -7,14 +7,14 @@ const createLinks = (routes, activeRoute, role, toggleSidebar = () => {}) =>
   routes.map((route) =>
     route.isEntity ? (
       <EntityNavButton
-        key={createUuid()}
+        key={uuid()}
         activeRoute={activeRoute}
         role={role}
         route={route}
         toggleSidebar={toggleSidebar}
       />
     ) : (
-      <NavLinkButton key={createUuid()} activeRoute={activeRoute} role={role} route={route} />
+      <NavLinkButton key={uuid()} activeRoute={activeRoute} role={role} route={route} />
     ),
   );
 

src/layout/Sidebar/EntityPopover.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
@@ -57,7 +57,7 @@ const renderList = (tree, depth, goTo) => {
     }
     return (
       <UnorderedList ml={depth}>
-        <ListItem key={createUuid()}>{tree.name}</ListItem>
+        <ListItem key={uuid()}>{tree.name}</ListItem>
       </UnorderedList>
     );
   }
@@ -68,7 +68,7 @@ const renderList = (tree, depth, goTo) => {
 
       if (childrenLength === 0)
         return (
-          <ListItem key={createUuid()}>
+          <ListItem key={uuid()}>
             <Button
               colorScheme="blue"
               variant="link"
@@ -83,7 +83,7 @@ const renderList = (tree, depth, goTo) => {
         );
 
       return (
-        <ListItem key={createUuid()}>
+        <ListItem key={uuid()}>
           <Button
             colorScheme="blue"
             variant="link"
@@ -106,7 +106,7 @@ const renderList = (tree, depth, goTo) => {
 
     if (childrenLength === 0 && venuesLength === 0)
       return (
-        <ListItem key={createUuid()}>
+        <ListItem key={uuid()}>
           <Button
             colorScheme="blue"
             variant="link"
@@ -119,7 +119,7 @@ const renderList = (tree, depth, goTo) => {
       );
 
     return (
-      <ListItem key={createUuid()}>
+      <ListItem key={uuid()}>
         <Button
           colorScheme="blue"
           variant="link"

src/layout/Sidebar/NavLinkButton.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useTranslation } from 'react-i18next';
 import { NavLink } from 'react-router-dom';
 import { Button, Flex, Text, useColorModeValue } from '@chakra-ui/react';
@@ -28,7 +28,7 @@ const NavLinkButton = ({ activeRoute, route, role }) => {
   const inactiveIconColor = useColorModeValue('gray.100', 'gray.600');
 
   return (
-    <NavLink to={route.path} key={createUuid()}>
+    <NavLink to={route.path} key={uuid()}>
       {activeRoute(route.path, route.isCustom) === 'active' ? (
         <Button
           hidden={route.hidden || !route.authorized.includes(role)}

src/layout/index.js

@@ -1,7 +1,7 @@
 import React, { Suspense } from 'react';
 import { Flex, Portal, Spinner, useBoolean, useBreakpoint } from '@chakra-ui/react';
 import { Route, Routes } from 'react-router-dom';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import routes from 'router/routes';
 import MainPanel from './MainPanel';
 import Navbar from './Navbar';
@@ -53,7 +53,7 @@ const Layout = () => {
     return activeNavbar;
   };
   const getRoutes = (r) =>
-    r.map((route) => <Route path={route.path} element={<route.component />} key={createUuid()} />);
+    r.map((route) => <Route path={route.path} element={<route.component />} key={uuid()} />);
 
   return (
     <>

src/pages/AccountPage/AccountCard/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import parsePhoneNumber from 'libphonenumber-js';
 import {
   Box,
@@ -59,7 +59,7 @@ const UpdateAccountForm = ({
   const { isOpen: showVerify, onOpen: openVerify, onClose: closeVerify } = useDisclosure();
   const toast = useToast();
   const { user } = useAuth();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
 
   const toggleVerifyNumber = (params) => {
     setVerifNumber(params.userTypeProprietaryInfo.mobiles[0].number);
@@ -79,7 +79,7 @@ const UpdateAccountForm = ({
   useEffect(() => {
     setCurrentAvatarLink(savedAvatar ?? '');
     setCurrentAvatarFile(null);
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [editing, savedAvatar]);
 
   return (
@@ -154,7 +154,7 @@ const UpdateAccountForm = ({
                 toggleVerifyNumber(params, onSuccess);
               } else {
                 toast({
-                  id: createUuid(),
+                  id: uuid(),
                   title: t('common.error'),
                   description: t('crud.error_update_obj', {
                     obj: t('account.account'),
@@ -225,16 +225,16 @@ const UpdateAccountForm = ({
                                     {t('user.role')}
                                   </FormLabel>
                                   <Select {...field} borderRadius="15px" fontSize="sm">
-                                    <option key={createUuid()} value="root">
+                                    <option key={uuid()} value="root">
                                       Root
                                     </option>
-                                    <option key={createUuid()} value="partner">
+                                    <option key={uuid()} value="partner">
                                       Partner
                                     </option>
-                                    <option key={createUuid()} value="admin">
+                                    <option key={uuid()} value="admin">
                                       Admin
                                     </option>
-                                    <option key={createUuid()} value="csr">
+                                    <option key={uuid()} value="csr">
                                       CSR
                                     </option>
                                   </Select>

src/pages/AccountPage/AccountCard/MfaSelectField/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormControl, FormErrorMessage, FormLabel, Select, useDisclosure } from '@chakra-ui/react';
 import { Field } from 'formik';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useTranslation } from 'react-i18next';
 import GoogleAuthenticatorModal from '../GoogleAuthenticatorModal';
 
@@ -64,16 +64,16 @@ const MfaSelectField = ({
               {label}
             </FormLabel>
             <Select value={field.value} onChange={onChange} borderRadius="15px" fontSize="sm">
-              <option key={createUuid()} value="">
+              <option key={uuid()} value="">
                 {t('common.none')}
               </option>
-              <option key={createUuid()} value="email">
+              <option key={uuid()} value="email">
                 {t('common.email')}
               </option>
-              <option key={createUuid()} value="sms">
+              <option key={uuid()} value="sms">
                 {t('account.sms')}
               </option>
-              <option key={createUuid()} value="authenticator">
+              <option key={uuid()} value="authenticator">
                 {t('account.google_authenticator')}
               </option>
             </Select>

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/GlobalsSection/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { ConfigurationSectionShape } from 'constants/propShapes';
 import { Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
@@ -20,7 +20,7 @@ const propTypes = {
 
 const GlobalsSection = ({ editing, setSection, sectionInformation, removeSub }) => {
   const { t } = useTranslation();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const sectionRef = useCallback(
     (node) => {
       if (node !== null) {
@@ -47,7 +47,7 @@ const GlobalsSection = ({ editing, setSection, sectionInformation, removeSub })
 
   useEffect(() => {
     if (!editing) {
-      setFormKey(createUuid());
+      setFormKey(uuid());
     }
   }, [editing]);
 

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/ImportConfigurationButton/Modal.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { uppercaseFirstLetter } from 'utils/stringHelper';
 import {
   Alert,
@@ -98,12 +98,12 @@ const ImportConfigurationModal = ({ isOpen, onClose, setValue }) => {
 
   const onChange = (e) => {
     if (e.target.files?.length > 0) parseFile(e.target.files[0]);
-    setRefreshId(createUuid());
+    setRefreshId(uuid());
   };
 
   useEffect(() => {
     if (!isOpen) {
-      setRefreshId(createUuid());
+      setRefreshId(uuid());
       setTempValue('');
     }
   }, [isOpen]);

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { ConfigurationSectionShape } from 'constants/propShapes';
 import { FieldArray, Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
@@ -21,7 +21,7 @@ const propTypes = {
 
 const InterfaceSection = ({ editing, setSection, sectionInformation, removeSub }) => {
   const { t } = useTranslation();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const sectionRef = useCallback(
     (node) => {
       if (node !== null) {
@@ -48,7 +48,7 @@ const InterfaceSection = ({ editing, setSection, sectionInformation, removeSub }
 
   useEffect(() => {
     if (!editing) {
-      setFormKey(createUuid());
+      setFormKey(uuid());
     }
   }, [editing]);
 

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/MetricsSection/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { ConfigurationSectionShape } from 'constants/propShapes';
 import { Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
@@ -25,7 +25,7 @@ const propTypes = {
 
 const MetricsSection = ({ editing, setSection, sectionInformation, removeSub }) => {
   const { t } = useTranslation();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
 
   const sectionRef = useCallback(
     (node) => {
@@ -82,7 +82,7 @@ const MetricsSection = ({ editing, setSection, sectionInformation, removeSub })
 
   useEffect(() => {
     if (!editing) {
-      setFormKey(createUuid());
+      setFormKey(uuid());
     }
   }, [editing]);
 

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/RadiosSection/ChannelPicker.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { Field, useFormikContext } from 'formik';
 import { FormControl, FormErrorMessage, FormLabel, Select } from '@chakra-ui/react';
 import ConfigurationFieldExplanation from 'components/FormFields/ConfigurationFieldExplanation';
@@ -179,7 +179,7 @@ const ChannelPicker = ({ index, isDisabled }) => {
             isDisabled={isDisabled}
           >
             {channelOptions.map((option) => (
-              <option value={option.value} key={createUuid()}>
+              <option value={option.value} key={uuid()}>
                 {option.label}
               </option>
             ))}

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/RadiosSection/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { ConfigurationSectionShape } from 'constants/propShapes';
 import { FieldArray, Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
@@ -20,7 +20,7 @@ const propTypes = {
 
 const RadiosSection = ({ editing, setSection, sectionInformation, removeSub }) => {
   const { t } = useTranslation();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const sectionRef = useCallback(
     (node) => {
       if (node !== null) {
@@ -47,7 +47,7 @@ const RadiosSection = ({ editing, setSection, sectionInformation, removeSub }) =
 
   useEffect(() => {
     if (!editing) {
-      setFormKey(createUuid());
+      setFormKey(uuid());
     }
   }, [editing]);
 

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/ServicesSection/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { ConfigurationSectionShape } from 'constants/propShapes';
 import { Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
@@ -38,7 +38,7 @@ const propTypes = {
 
 const ServicesSection = ({ editing, setSection, sectionInformation, removeSub }) => {
   const { t } = useTranslation();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
 
   const sectionRef = useCallback(
     (node) => {
@@ -94,7 +94,7 @@ const ServicesSection = ({ editing, setSection, sectionInformation, removeSub })
   const removeUnit = () => removeSub('services');
 
   useEffect(() => {
-    if (!editing) setFormKey(createUuid());
+    if (!editing) setFormKey(uuid());
   }, [editing]);
 
   return (

src/pages/ConfigurationPage/ConfigurationCard/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import {
   useToast,
   Tabs,
@@ -39,7 +39,7 @@ const propTypes = {
 const EditConfigurationForm = ({ editing, configuration, formRef }) => {
   const { t } = useTranslation();
   const toast = useToast();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { data: entities } = useGetEntities({ t, toast });
   const { data: venues } = useGetVenues({ t, toast });
@@ -58,7 +58,7 @@ const EditConfigurationForm = ({ editing, configuration, formRef }) => {
   };
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [editing]);
 
   return (

src/pages/ConfigurationPage/ConfigurationCard/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from 'react-query';
 import {
@@ -97,7 +97,7 @@ const ConfigurationCard = ({ id }) => {
         },
         onError: (e) => {
           toast({
-            id: createUuid(),
+            id: uuid(),
             title: t('common.error'),
             description: t('crud.error_update_obj', {
               obj: t('configurations.one'),

src/pages/ConfigurationsPage/Table/Actions.js

@@ -22,7 +22,7 @@ import {
 import { ListChecks, ListDashes, MagnifyingGlass, Trash } from 'phosphor-react';
 import { useMutation } from 'react-query';
 import { axiosProv } from 'utils/axiosInstances';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useNavigate } from 'react-router-dom';
 
 const deleteApi = async (configId) =>
@@ -56,7 +56,7 @@ const Actions = ({
       onClose();
       refreshTable();
       toast({
-        id: `configuration-delete-success${createUuid()}`,
+        id: `configuration-delete-success${uuid()}`,
         title: t('common.success'),
         description: t('crud.success_delete_obj', {
           obj: configuration.name,

src/pages/ConfigurationsPage/Table/index.js

@@ -7,7 +7,7 @@ import CardBody from 'components/Card/CardBody';
 import { useTranslation } from 'react-i18next';
 import { Box, Button, Flex, Heading, useDisclosure, useToast } from '@chakra-ui/react';
 import { useGetConfigurations } from 'hooks/Network/Configurations';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import FormattedDate from 'components/FormattedDate';
 import { ArrowsClockwise } from 'phosphor-react';
 import ColumnPicker from 'components/ColumnPicker';
@@ -47,7 +47,7 @@ const ConfigurationsTable = ({ title }) => {
       <Actions
         cell={cell.row}
         refreshTable={refresh}
-        key={createUuid()}
+        key={uuid()}
         openInUseModal={openInUseModal}
         openAffectedModal={openAffectedModal}
       />
@@ -55,7 +55,7 @@ const ConfigurationsTable = ({ title }) => {
     [],
   );
   const memoizedDate = useCallback(
-    (cell, key) => <FormattedDate date={cell.row.values[key]} key={createUuid()} />,
+    (cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
     [],
   );
   const memoizedTypes = useCallback((cell) => cell.row.values.deviceTypes.join(', '), []);

src/pages/ContactsPage/Table/Actions.js

@@ -22,7 +22,7 @@ import {
 import { MagnifyingGlass, Trash } from 'phosphor-react';
 import { useMutation } from 'react-query';
 import { axiosProv } from 'utils/axiosInstances';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 
 const deleteApi = async (id) => axiosProv.delete(`/contact/${id}`).then(() => true);
 
@@ -46,7 +46,7 @@ const Actions = ({ cell: { original: contact }, refreshTable, openEditModal }) =
       onClose();
       refreshTable();
       toast({
-        id: `contact-delete-success${createUuid()}`,
+        id: `contact-delete-success${uuid()}`,
         title: t('common.success'),
         description: t('crud.success_delete_obj', {
           obj: contact.name,

src/pages/ContactsPage/Table/index.js

@@ -6,7 +6,7 @@ import CardHeader from 'components/Card/CardHeader';
 import CardBody from 'components/Card/CardBody';
 import { useTranslation } from 'react-i18next';
 import { Box, Button, Flex, Heading, useDisclosure, useToast } from '@chakra-ui/react';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import FormattedDate from 'components/FormattedDate';
 import { ArrowsClockwise } from 'phosphor-react';
 import ColumnPicker from 'components/ColumnPicker';
@@ -62,14 +62,14 @@ const ContactsTable = ({ title }) => {
       <Actions
         cell={cell.row}
         refreshTable={refetchCount}
-        key={createUuid()}
+        key={uuid()}
         openEditModal={openEditModal}
       />
     ),
     [],
   );
   const memoizedDate = useCallback(
-    (cell, key) => <FormattedDate date={cell.row.values[key]} key={createUuid()} />,
+    (cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
     [],
   );
 

src/pages/EntityPage/CreateEntityModal/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useToast, SimpleGrid } from '@chakra-ui/react';
 import { Formik, Form } from 'formik';
 import { EntitySchema } from 'constants/formSchemas';
@@ -23,7 +23,7 @@ const CreateEntityForm = ({ isOpen, onClose, formRef, parentId }) => {
   const toast = useToast();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const create = useCreateEntity();
 
   const createParameters = ({ name, description, note, rrm }) => ({
@@ -35,7 +35,7 @@ const CreateEntityForm = ({ isOpen, onClose, formRef, parentId }) => {
   });
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [isOpen]);
 
   return (
@@ -71,7 +71,7 @@ const CreateEntityForm = ({ isOpen, onClose, formRef, parentId }) => {
           },
           onError: (e) => {
             toast({
-              id: createUuid(),
+              id: uuid(),
               title: t('common.error'),
               description: t('crud.error_create_obj', {
                 obj: t('entities.one'),

src/pages/EntityPage/EntityCard/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import {
   useToast,
   Tabs,
@@ -33,12 +33,12 @@ const propTypes = {
 const EditEntityForm = ({ editing, entity, formRef, stopEditing }) => {
   const { t } = useTranslation();
   const toast = useToast();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const queryClient = useQueryClient();
   const updateEntity = useUpdateEntity({ id: entity.id });
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [editing]);
 
   return (
@@ -78,7 +78,7 @@ const EditEntityForm = ({ editing, entity, formRef, stopEditing }) => {
             },
             onError: (e) => {
               toast({
-                id: createUuid(),
+                id: uuid(),
                 title: t('common.error'),
                 description: t('crud.error_update_obj', {
                   obj: t('entities.one'),

src/pages/EntityPage/EntityChildrenCard/EntityChildrenTableWrapper/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { EntityShape } from 'constants/propShapes';
 import { Box } from '@chakra-ui/react';
 import EntityTable from 'components/Tables/EntityTable';
@@ -12,7 +12,7 @@ const propTypes = {
 };
 
 const EntityChildrenTableWrapper = ({ entity }) => {
-  const actions = useCallback((cell) => <Actions key={createUuid()} cell={cell.row} />, []);
+  const actions = useCallback((cell) => <Actions key={uuid()} cell={cell.row} />, []);
 
   return (
     <>

src/pages/EntityPage/EntityChildrenCard/EntityConfigurationsTableWrapper/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { EntityShape } from 'constants/propShapes';
 import { Box, useDisclosure } from '@chakra-ui/react';
 import { useQueryClient } from 'react-query';
@@ -31,7 +31,7 @@ const EntityConfigurationsTableWrapper = ({ entity }) => {
   const actions = useCallback(
     (cell) => (
       <Actions
-        key={createUuid()}
+        key={uuid()}
         cell={cell.row}
         openInUseModal={openInUseModal}
         openAffectedModal={openAffectedModal}

src/pages/EntityPage/EntityChildrenCard/EntityContactTableWrapper /Actions.js

@@ -22,7 +22,7 @@ import {
 import { MagnifyingGlass, Trash } from 'phosphor-react';
 import { useMutation } from 'react-query';
 import { axiosProv } from 'utils/axiosInstances';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 
 const deleteApi = async (id) => axiosProv.delete(`/contact/${id}`).then(() => true);
 
@@ -47,7 +47,7 @@ const Actions = ({ cell: { original: contact }, refreshEntity, openEditModal })
       onClose();
       refreshEntity();
       toast({
-        id: `contact-delete-success${createUuid()}`,
+        id: `contact-delete-success${uuid()}`,
         title: t('common.success'),
         description: t('crud.success_delete_obj', {
           obj: contact.name,

src/pages/EntityPage/EntityChildrenCard/EntityContactTableWrapper /index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { EntityShape } from 'constants/propShapes';
 import { Box, useDisclosure } from '@chakra-ui/react';
 import { useQueryClient } from 'react-query';
@@ -34,7 +34,7 @@ const EntityContactTableWrapper = ({ entity }) => {
   const actions = useCallback(
     (cell) => (
       <Actions
-        key={createUuid()}
+        key={uuid()}
         cell={cell.row}
         refreshEntity={refreshEntity}
         openEditModal={openEditModal}

src/pages/EntityPage/EntityChildrenCard/EntityDeviceTableWrapper/Actions.js

@@ -22,7 +22,7 @@ import {
 import { ArrowSquareOut, MagnifyingGlass, Minus, Trash } from 'phosphor-react';
 import { useMutation, useQueryClient } from 'react-query';
 import { axiosProv } from 'utils/axiosInstances';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useGetGatewayUi } from 'hooks/Network/Endpoints';
 import { useRemoveClaim } from 'hooks/Network/Inventory';
 
@@ -53,7 +53,7 @@ const Actions = ({ cell: { original: tag }, refreshEntity, openEditModal }) => {
       onClose();
       refreshEntity();
       toast({
-        id: `tag-delete-success${createUuid()}`,
+        id: `tag-delete-success${uuid()}`,
         title: t('common.success'),
         description: t('crud.success_delete_obj', {
           obj: tag.name,
@@ -84,7 +84,7 @@ const Actions = ({ cell: { original: tag }, refreshEntity, openEditModal }) => {
     removeClaim.mutateAsync(tag.serialNumber, {
       onSuccess: () => {
         toast({
-          id: `tag-unclaim-success${createUuid()}`,
+          id: `tag-unclaim-success${uuid()}`,
           title: t('common.success'),
           description: t('inventory.success_remove_claim', {
             serial: tag.serialNumber,

src/pages/EntityPage/EntityChildrenCard/EntityDeviceTableWrapper/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { EntityShape } from 'constants/propShapes';
 import InventoryTable from 'components/Tables/InventoryTable';
 import { Box, useDisclosure, useToast } from '@chakra-ui/react';
@@ -39,7 +39,7 @@ const EntityDeviceTableWrapper = ({ entity }) => {
   const actions = useCallback(
     (cell) => (
       <Actions
-        key={createUuid()}
+        key={uuid()}
         cell={cell.row}
         refreshEntity={refreshEntity}
         openEditModal={openEditModal}

src/pages/EntityPage/EntityChildrenCard/EntityLocationTableWrapper /Actions.js

@@ -22,7 +22,7 @@ import {
 import { MagnifyingGlass, Trash } from 'phosphor-react';
 import { useMutation } from 'react-query';
 import { axiosProv } from 'utils/axiosInstances';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 
 const deleteApi = async (id) => axiosProv.delete(`/location/${id}`).then(() => true);
 
@@ -47,7 +47,7 @@ const Actions = ({ cell: { original: location }, refreshEntity, openEditModal })
       onClose();
       refreshEntity();
       toast({
-        id: `tag-delete-success${createUuid()}`,
+        id: `tag-delete-success${uuid()}`,
         title: t('common.success'),
         description: t('crud.success_delete_obj', {
           obj: location.name,

src/pages/EntityPage/EntityChildrenCard/EntityLocationTableWrapper /index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { EntityShape } from 'constants/propShapes';
 import { Box, useDisclosure } from '@chakra-ui/react';
 import { useQueryClient } from 'react-query';
@@ -34,7 +34,7 @@ const EntityLocationTableWrapper = ({ entity }) => {
   const actions = useCallback(
     (cell) => (
       <Actions
-        key={createUuid()}
+        key={uuid()}
         cell={cell.row}
         refreshEntity={refreshEntity}
         openEditModal={openEditModal}

src/pages/EntityPage/EntityChildrenCard/EntityVenueTableWrapper/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { EntityShape } from 'constants/propShapes';
 import { Box } from '@chakra-ui/react';
 import VenueTable from 'components/Tables/VenueTable';
@@ -12,7 +12,7 @@ const propTypes = {
 };
 
 const EntityVenueTableWrapper = ({ entity }) => {
-  const actions = useCallback((cell) => <Actions key={createUuid()} cell={cell.row} />, []);
+  const actions = useCallback((cell) => <Actions key={uuid()} cell={cell.row} />, []);
 
   return (
     <>

src/pages/InventoryPage/Table/Actions.js

@@ -22,7 +22,7 @@ import {
 import { ArrowSquareOut, MagnifyingGlass, Trash } from 'phosphor-react';
 import { useMutation } from 'react-query';
 import { axiosProv } from 'utils/axiosInstances';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useGetGatewayUi } from 'hooks/Network/Endpoints';
 
 const deleteApi = async (id) => axiosProv.delete(`/inventory/${id}`).then(() => true);
@@ -49,7 +49,7 @@ const Actions = ({ cell: { original: tag }, refreshTable, openEditModal }) => {
       onClose();
       refreshTable();
       toast({
-        id: `tag-delete-success${createUuid()}`,
+        id: `tag-delete-success${uuid()}`,
         title: t('common.success'),
         description: t('crud.success_delete_obj', {
           obj: tag.name,

src/pages/InventoryPage/Table/index.js

@@ -17,7 +17,7 @@ import {
   useToast,
 } from '@chakra-ui/react';
 import { useGetInventoryCount, useGetInventoryTags, usePushConfig } from 'hooks/Network/Inventory';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import FormattedDate from 'components/FormattedDate';
 import ColumnPicker from 'components/ColumnPicker';
 import EditTagModal from 'components/Tables/InventoryTable/EditTagModal';
@@ -77,14 +77,14 @@ const InventoryTable = ({ title }) => {
       <Actions
         cell={cell.row}
         refreshTable={refetchCount}
-        key={createUuid()}
+        key={uuid()}
         openEditModal={openEditModal}
       />
     ),
     [],
   );
   const memoizedDate = useCallback(
-    (cell, key) => <FormattedDate date={cell.row.values[key]} key={createUuid()} />,
+    (cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
     [],
   );
 

src/pages/LocationsPage/Table/Actions.js

@@ -22,7 +22,7 @@ import {
 import { MagnifyingGlass, Trash } from 'phosphor-react';
 import { useMutation } from 'react-query';
 import { axiosProv } from 'utils/axiosInstances';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 
 const deleteApi = async (id) => axiosProv.delete(`/location/${id}`).then(() => true);
 
@@ -46,7 +46,7 @@ const Actions = ({ cell: { original: location }, refreshTable, openEditModal })
       onClose();
       refreshTable();
       toast({
-        id: `location-delete-success${createUuid()}`,
+        id: `location-delete-success${uuid()}`,
         title: t('common.success'),
         description: t('crud.success_delete_obj', {
           obj: location.name,

src/pages/LocationsPage/Table/index.js

@@ -6,7 +6,7 @@ import CardHeader from 'components/Card/CardHeader';
 import CardBody from 'components/Card/CardBody';
 import { useTranslation } from 'react-i18next';
 import { Box, Button, Flex, Heading, useDisclosure, useToast } from '@chakra-ui/react';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import FormattedDate from 'components/FormattedDate';
 import { ArrowsClockwise } from 'phosphor-react';
 import ColumnPicker from 'components/ColumnPicker';
@@ -61,14 +61,14 @@ const LocationsTable = ({ title }) => {
       <Actions
         cell={cell.row}
         refreshTable={refetchCount}
-        key={createUuid()}
+        key={uuid()}
         openEditModal={openEditModal}
       />
     ),
     [],
   );
   const memoizedDate = useCallback(
-    (cell, key) => <FormattedDate date={cell.row.values[key]} key={createUuid()} />,
+    (cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
     [],
   );
   const entityCell = useCallback(

src/pages/MapPage/MapCard/MapDisplayCard/CreateMapButton/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useToast, SimpleGrid } from '@chakra-ui/react';
 import { Formik, Form } from 'formik';
 import { CreateMapSchema } from 'constants/formSchemas';
@@ -29,7 +29,7 @@ const propTypes = {
 const CreateMapForm = ({ isOpen, onClose, create, formRef, setMapId, currentMapInformation }) => {
   const { t } = useTranslation();
   const toast = useToast();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const { data: entities } = useGetEntities({ t, toast });
   const { data: venues } = useGetVenues({ t, toast });
   const queryClient = useQueryClient();
@@ -43,7 +43,7 @@ const CreateMapForm = ({ isOpen, onClose, create, formRef, setMapId, currentMapI
   });
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [isOpen]);
 
   return (
@@ -80,7 +80,7 @@ const CreateMapForm = ({ isOpen, onClose, create, formRef, setMapId, currentMapI
           },
           onError: (e) => {
             toast({
-              id: createUuid(),
+              id: uuid(),
               title: t('common.error'),
               description: t('crud.error_create_obj', {
                 obj: t('map.title'),

src/pages/MapPage/MapCard/MapDisplayCard/Map/DeviceNode/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { Handle } from 'react-flow-renderer';
 import {
   Box,
@@ -84,7 +84,7 @@ const DeviceNode = ({ data, isConnectable }) => {
         <PopoverTrigger>
           <Box width="200px" bgColor={bgColor} p="4px" borderRadius={4} pointerEvents="all">
             <Center>
-              <Heading size="md" id={createUuid()}>
+              <Heading size="md" id={uuid()}>
                 {data.label}
               </Heading>
             </Center>

src/pages/MapPage/MapCard/MapDisplayCard/Map/EntityNode.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { Handle } from 'react-flow-renderer';
 import {
   Box,
@@ -38,7 +38,7 @@ const EntityNode = ({ data, isConnectable }) => {
       <>
         <Box width="200px" bgColor="black" p="4px" borderRadius={4} textColor="white">
           <Center>
-            <Heading size="md" id={createUuid()}>
+            <Heading size="md" id={uuid()}>
               {data.label}
             </Heading>
           </Center>
@@ -87,7 +87,7 @@ const EntityNode = ({ data, isConnectable }) => {
             id="testotest"
           >
             <Center>
-              <Heading size="md" id={createUuid()}>
+              <Heading size="md" id={uuid()}>
                 {data.label}
               </Heading>
             </Center>

src/pages/MapPage/MapCard/MapDisplayCard/Map/VenueNode.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { Handle } from 'react-flow-renderer';
 import {
   Box,
@@ -53,7 +53,7 @@ const VenueNode = ({ data, isConnectable }) => {
             <Center>
               <Heading
                 size="md"
-                id={createUuid()}
+                id={uuid()}
                 textOverflow="ellipsis"
                 overflow="hidden"
                 whiteSpace="nowrap"

src/pages/ResourcesPage/Table/Actions.js

@@ -20,7 +20,7 @@ import {
   useToast,
 } from '@chakra-ui/react';
 import { MagnifyingGlass, Trash } from 'phosphor-react';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useDeleteResource } from 'hooks/Network/Resources';
 
 const propTypes = {
@@ -46,7 +46,7 @@ const Actions = ({ cell: { original: resource }, refreshTable, openEditModal })
         onClose();
         refreshTable();
         toast({
-          id: `resource-delete-success${createUuid()}`,
+          id: `resource-delete-success${uuid()}`,
           title: t('common.success'),
           description: t('crud.success_delete_obj', {
             obj: resource.name,

src/pages/ResourcesPage/Table/CreateResourceModal/InterfaceSsidRadius/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { SimpleGrid, useToast } from '@chakra-ui/react';
 import { Formik } from 'formik';
 import { useCreateResource } from 'hooks/Network/Resources';
@@ -24,12 +24,12 @@ const propTypes = {
 const InterfaceSsidRadius = ({ isOpen, onClose, refresh, formRef, parent }) => {
   const { t } = useTranslation();
   const toast = useToast();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
 
   const create = useCreateResource();
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [isOpen]);
 
   return (
@@ -80,7 +80,7 @@ const InterfaceSsidRadius = ({ isOpen, onClose, refresh, formRef, parent }) => {
             },
             onError: (e) => {
               toast({
-                id: createUuid(),
+                id: uuid(),
                 title: t('common.error'),
                 description: t('crud.error_create_obj', {
                   obj: t('user.title'),

src/pages/ResourcesPage/Table/EditResourceModal/InterfaceSsidRadius/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { SimpleGrid, Tab, TabList, TabPanel, TabPanels, Tabs, useToast } from '@chakra-ui/react';
 import { Field, Formik } from 'formik';
 import { useUpdateResource } from 'hooks/Network/Resources';
@@ -27,12 +27,12 @@ const InterfaceSsidRadius = ({ isOpen, onClose, refresh, formRef, resource, edit
   const toast = useToast();
   const { data: entities } = useGetEntities({ t, toast });
   const { data: venues } = useGetVenues({ t, toast });
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
 
   const update = useUpdateResource(resource.id);
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [isOpen]);
 
   return (
@@ -97,7 +97,7 @@ const InterfaceSsidRadius = ({ isOpen, onClose, refresh, formRef, resource, edit
             },
             onError: (e) => {
               toast({
-                id: createUuid(),
+                id: uuid(),
                 title: t('common.error'),
                 description: t('crud.error_create_obj', {
                   obj: t('resources.configuration_resource'),

src/pages/ResourcesPage/Table/index.js

@@ -6,7 +6,7 @@ import CardHeader from 'components/Card/CardHeader';
 import CardBody from 'components/Card/CardBody';
 import { useTranslation } from 'react-i18next';
 import { Box, Button, Flex, Heading, useDisclosure, useToast } from '@chakra-ui/react';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import FormattedDate from 'components/FormattedDate';
 import { ArrowsClockwise } from 'phosphor-react';
 import ColumnPicker from 'components/ColumnPicker';
@@ -53,17 +53,12 @@ const ResourcesTable = ({ title }) => {
 
   const actionCell = useCallback(
     (cell) => (
-      <Actions
+      <Actions cell={cell.row} refreshTable={refresh} key={uuid()} openEditModal={openEditModal} />
-        cell={cell.row}
-        refreshTable={refresh}
-        key={createUuid()}
-        openEditModal={openEditModal}
-      />
     ),
     [],
   );
   const dateCell = useCallback(
-    (cell, key) => <FormattedDate date={cell.row.values[key]} key={createUuid()} />,
+    (cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
     [],
   );
   const prefixCell = useCallback((cell) => cell.row.values.variables[0]?.prefix ?? '-', []);

src/pages/SubscriberPage/SubscriberCard/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useToast, Tabs, TabList, TabPanels, TabPanel, Tab, SimpleGrid } from '@chakra-ui/react';
 import { Formik, Field, Form } from 'formik';
 import NotesTable from 'components/NotesTable';
@@ -24,14 +24,14 @@ const EditSubscriberForm = ({ editing, subscriber, formRef, stopEditing }) => {
   const { t } = useTranslation();
   const toast = useToast();
   const { data: entities } = useGetEntities({ t, toast });
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const queryClient = useQueryClient();
   const updateSubscriber = useMutation((subInfo) =>
     axiosSec.put(`subuser/${subscriber?.id}`, subInfo),
   );
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [editing]);
 
   return (
@@ -76,7 +76,7 @@ const EditSubscriberForm = ({ editing, subscriber, formRef, stopEditing }) => {
             },
             onError: (e) => {
               toast({
-                id: createUuid(),
+                id: uuid(),
                 title: t('common.error'),
                 description: t('crud.error_update_obj', {
                   obj: t('subscribers.one'),

src/pages/SubscriberPage/SubscriberChildrenCard/SubscriberDeviceTableWrapper/Actions.js

@@ -22,7 +22,7 @@ import {
 import { ArrowSquareOut, MagnifyingGlass, Minus, Trash } from 'phosphor-react';
 import { useMutation, useQueryClient } from 'react-query';
 import { axiosProv } from 'utils/axiosInstances';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useGetGatewayUi } from 'hooks/Network/Endpoints';
 import { useRemoveClaim } from 'hooks/Network/Inventory';
 
@@ -54,7 +54,7 @@ const Actions = ({ cell: { original: tag }, refreshEntity, openEditModal }) => {
       onClose();
       refreshEntity();
       toast({
-        id: `tag-delete-success${createUuid()}`,
+        id: `tag-delete-success${uuid()}`,
         title: t('common.success'),
         description: t('crud.success_delete_obj', {
           obj: tag.name,
@@ -85,7 +85,7 @@ const Actions = ({ cell: { original: tag }, refreshEntity, openEditModal }) => {
     removeClaim.mutateAsync(tag.serialNumber, {
       onSuccess: () => {
         toast({
-          id: `tag-unclaim-success${createUuid()}`,
+          id: `tag-unclaim-success${uuid()}`,
           title: t('common.success'),
           description: t('inventory.success_remove_claim', {
             obj: tag.serialNumber,

src/pages/SubscriberPage/SubscriberChildrenCard/SubscriberDeviceTableWrapper/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { SubscriberShape } from 'constants/propShapes';
 import InventoryTable from 'components/Tables/InventoryTable';
 import { Flex, Heading, Spacer, useDisclosure, useToast } from '@chakra-ui/react';
@@ -45,7 +45,7 @@ const SubscriberDeviceTableWrapper = ({ subscriber }) => {
   const actions = useCallback(
     (cell) => (
       <Actions
-        key={createUuid()}
+        key={uuid()}
         cell={cell.row}
         refreshEntity={refreshEntity}
         openEditModal={openEditModal}

src/pages/SubscribersPage/Table/Actions.js

@@ -22,7 +22,7 @@ import {
 import { MagnifyingGlass, Trash } from 'phosphor-react';
 import { useMutation } from 'react-query';
 import { axiosSec } from 'utils/axiosInstances';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useNavigate } from 'react-router-dom';
 
 const deleteApi = async (subId) => axiosSec.delete(`/subuser/${subId}`).then(() => true);
@@ -47,7 +47,7 @@ const Actions = ({ cell: { original: subscriber }, refreshTable }) => {
       onClose();
       refreshTable();
       toast({
-        id: `subscriber-delete-success${createUuid()}`,
+        id: `subscriber-delete-success${uuid()}`,
         title: t('common.success'),
         description: t('crud.success_delete_obj', {
           obj: subscriber.name,

src/pages/SubscribersPage/Table/CreateSubscriberModal/Form.js

@@ -2,7 +2,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import {
   Box,
   Flex,
@@ -42,7 +42,7 @@ const defaultProps = {
 const CreateSubscriberForm = ({ isOpen, onClose, create, requirements, refresh, formRef }) => {
   const { t } = useTranslation();
   const toast = useToast();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const textColor = useColorModeValue('gray.400', 'white');
   const { data: entities } = useGetEntities({ t, toast });
   const [deviceSerials, setDeviceSerials] = useState([]);
@@ -64,7 +64,7 @@ const CreateSubscriberForm = ({ isOpen, onClose, create, requirements, refresh,
   );
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [isOpen]);
 
   const claimDevices = async (devices, userId) => {
@@ -132,7 +132,7 @@ const CreateSubscriberForm = ({ isOpen, onClose, create, requirements, refresh,
                 const addResults = await claimDevices(deviceSerials, data.id);
                 if (addResults.length > 0) {
                   toast({
-                    id: createUuid(),
+                    id: uuid(),
                     title: t('common.error'),
                     description: t('subscribers.error_claiming', {
                       serials: addResults.join(', '),
@@ -148,7 +148,7 @@ const CreateSubscriberForm = ({ isOpen, onClose, create, requirements, refresh,
               },
               onError: (e) => {
                 toast({
-                  id: createUuid(),
+                  id: uuid(),
                   title: t('common.error'),
                   description: t('crud.error_create_obj', {
                     obj: t('user.title'),
@@ -188,7 +188,7 @@ const CreateSubscriberForm = ({ isOpen, onClose, create, requirements, refresh,
         </Form>
       </Formik>
       <Accordion allowMultiple mt={4}>
-        <AccordionItem key={createUuid()}>
+        <AccordionItem key={uuid()}>
           <AccordionButton>
             <Box flex="1" textAlign="left">
               {t('subscribers.devices_to_claim', { count: deviceSerials.length })}

src/pages/SubscribersPage/Table/EditSubscriberModal/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import {
   Box,
   Flex,
@@ -61,12 +61,12 @@ const EditSubscriberForm = ({
 }) => {
   const { t } = useTranslation();
   const toast = useToast();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const { data: entities } = useGetEntities({ t, toast });
   const textColor = useColorModeValue('gray.400', 'white');
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [isOpen]);
 
   return (
@@ -108,7 +108,7 @@ const EditSubscriberForm = ({
               const results = await claimDevices();
               if (results[0].length > 0) {
                 toast({
-                  id: createUuid(),
+                  id: uuid(),
                   title: t('common.error'),
                   description: t('subscribers.error_removing_claim', {
                     serials: results[0].join(', '),
@@ -120,7 +120,7 @@ const EditSubscriberForm = ({
                 });
               } else if (results[1].length > 0) {
                 toast({
-                  id: createUuid(),
+                  id: uuid(),
                   title: t('common.error'),
                   description: t('subscribers.error_claiming', {
                     serials: results[1].join(', '),
@@ -137,7 +137,7 @@ const EditSubscriberForm = ({
             },
             onError: (e) => {
               toast({
-                id: createUuid(),
+                id: uuid(),
                 title: t('common.error'),
                 description: t('crud.error_update_obj', {
                   obj: t('subscribers.one'),

src/pages/SubscribersPage/Table/index.js

@@ -6,7 +6,7 @@ import CardHeader from 'components/Card/CardHeader';
 import CardBody from 'components/Card/CardBody';
 import { useTranslation } from 'react-i18next';
 import { Box, Button, Flex, Heading, useToast } from '@chakra-ui/react';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import FormattedDate from 'components/FormattedDate';
 import { ArrowsClockwise } from 'phosphor-react';
 import ColumnPicker from 'components/ColumnPicker';
@@ -31,11 +31,11 @@ const SubscribersTable = ({ title }) => {
   const { data: subscribers, refetch: refresh, isFetching } = useGetSubscribers({ t, toast });
 
   const memoizedActions = useCallback(
-    (cell) => <Actions cell={cell.row} refreshTable={refresh} key={createUuid()} />,
+    (cell) => <Actions cell={cell.row} refreshTable={refresh} key={uuid()} />,
     [],
   );
   const memoizedDate = useCallback(
-    (cell, key) => <FormattedDate date={cell.row.values[key]} key={createUuid()} />,
+    (cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
     [],
   );
 

src/pages/UsersPage/Table/CreateUserModal/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { Box, Flex, useColorModeValue, Link, useToast, SimpleGrid } from '@chakra-ui/react';
 import { ExternalLinkIcon } from '@chakra-ui/icons';
 import { Formik, Form } from 'formik';
@@ -32,7 +32,7 @@ const CreateUserForm = ({ isOpen, onClose, createUser, requirements, refreshUser
   const { t } = useTranslation();
   const toast = useToast();
   const { user } = useAuth();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const textColor = useColorModeValue('gray.400', 'white');
 
   const createParameters = ({ name, description, email, currentPassword, note, userRole }) => {
@@ -57,7 +57,7 @@ const CreateUserForm = ({ isOpen, onClose, createUser, requirements, refreshUser
   };
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [isOpen]);
 
   return (
@@ -94,7 +94,7 @@ const CreateUserForm = ({ isOpen, onClose, createUser, requirements, refreshUser
           },
           onError: (e) => {
             toast({
-              id: createUuid(),
+              id: uuid(),
               title: t('common.error'),
               description: t('crud.error_create_obj', {
                 obj: t('user.title'),

src/pages/UsersPage/Table/EditUserModal/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import {
   Box,
   Flex,
@@ -69,7 +69,7 @@ const UpdateUserForm = ({
   const { t } = useTranslation();
   const toast = useToast();
   const { user } = useAuth();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const textColor = useColorModeValue('gray.400', 'white');
 
   const formIsDisabled = () => {
@@ -84,7 +84,7 @@ const UpdateUserForm = ({
   };
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [isOpen]);
 
   return (
@@ -126,7 +126,7 @@ const UpdateUserForm = ({
             },
             onError: (e) => {
               toast({
-                id: createUuid(),
+                id: uuid(),
                 title: t('common.error'),
                 description: t('crud.error_update_obj', {
                   obj: t('user.title'),

src/pages/UsersPage/Table/UserActions.js

@@ -22,7 +22,7 @@ import {
 import { MagnifyingGlass, Trash } from 'phosphor-react';
 import { useMutation } from 'react-query';
 import { axiosSec } from 'utils/axiosInstances';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 
 const deleteUserApi = async (userId) => axiosSec.delete(`/user/${userId}`).then(() => true);
 
@@ -46,7 +46,7 @@ const UserActions = ({ cell: { original: user }, refreshTable, openEdit }) => {
       onClose();
       refreshTable();
       toast({
-        id: `user-delete-success${createUuid()}`,
+        id: `user-delete-success${uuid()}`,
         title: t('common.success'),
         description: t('crud.success_delete_obj', {
           obj: user.name,

src/pages/UsersPage/Table/index.js

@@ -6,7 +6,7 @@ import CardHeader from 'components/Card/CardHeader';
 import CardBody from 'components/Card/CardBody';
 import { useTranslation } from 'react-i18next';
 import { Avatar, Box, Button, Flex, Heading, useDisclosure, useToast } from '@chakra-ui/react';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import FormattedDate from 'components/FormattedDate';
 import { ArrowsClockwise } from 'phosphor-react';
 import { useAuth } from 'contexts/AuthProvider';
@@ -50,14 +50,14 @@ const UserTable = ({ title }) => {
       <UserActions
         cell={cell.row}
         refreshTable={refreshUsers}
-        key={createUuid()}
+        key={uuid()}
         openEdit={openEditModal}
       />
     ),
     [],
   );
   const memoizedDate = useCallback(
-    (cell) => <FormattedDate date={cell.row.values.lastLogin} key={createUuid()} />,
+    (cell) => <FormattedDate date={cell.row.values.lastLogin} key={uuid()} />,
     [],
   );
 

src/pages/VenuePage/VenueCard/Form.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import {
   useToast,
   Tabs,
@@ -34,12 +34,12 @@ const propTypes = {
 const EditVenueForm = ({ editing, venue, formRef, stopEditing }) => {
   const { t } = useTranslation();
   const toast = useToast();
-  const [formKey, setFormKey] = useState(createUuid());
+  const [formKey, setFormKey] = useState(uuid());
   const queryClient = useQueryClient();
   const updateVenue = useUpdateVenue({ id: venue.id });
 
   useEffect(() => {
-    setFormKey(createUuid());
+    setFormKey(uuid());
   }, [editing]);
 
   return (
@@ -89,7 +89,7 @@ const EditVenueForm = ({ editing, venue, formRef, stopEditing }) => {
             },
             onError: (e) => {
               toast({
-                id: createUuid(),
+                id: uuid(),
                 title: t('common.error'),
                 description: t('crud.error_update_obj', {
                   obj: t('venue.one'),

src/pages/VenuePage/VenueChildrenCard/VenueChildrenTableWrapper/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { EntityShape } from 'constants/propShapes';
 import { Box } from '@chakra-ui/react';
 import VenueTable from 'components/Tables/VenueTable';
@@ -12,7 +12,7 @@ const propTypes = {
 };
 
 const VenueChildrenTableWrapper = ({ venue }) => {
-  const actions = useCallback((cell) => <Actions key={createUuid()} cell={cell.row} />, []);
+  const actions = useCallback((cell) => <Actions key={uuid()} cell={cell.row} />, []);
 
   return (
     <>

src/pages/VenuePage/VenueChildrenCard/VenueConfigurationsTableWrapper/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { EntityShape } from 'constants/propShapes';
 import { Box, useDisclosure } from '@chakra-ui/react';
 import ConfigurationsTable from 'components/Tables/ConfigurationTable';
@@ -31,7 +31,7 @@ const VenueConfigurationsTableWrapper = ({ venue }) => {
   const actions = useCallback(
     (cell) => (
       <Actions
-        key={createUuid()}
+        key={uuid()}
         cell={cell.row}
         openInUseModal={openInUseModal}
         openAffectedModal={openAffectedModal}

src/pages/VenuePage/VenueChildrenCard/VenueContactTableWrapper/Actions.js

@@ -22,7 +22,7 @@ import {
 import { MagnifyingGlass, Trash } from 'phosphor-react';
 import { useMutation } from 'react-query';
 import { axiosProv } from 'utils/axiosInstances';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 
 const deleteApi = async (id) => axiosProv.delete(`/contact/${id}`).then(() => true);
 
@@ -46,7 +46,7 @@ const Actions = ({ cell: { original: contact }, refreshEntity, openEditModal })
       onClose();
       refreshEntity();
       toast({
-        id: `contact-delete-success${createUuid()}`,
+        id: `contact-delete-success${uuid()}`,
         title: t('common.success'),
         description: t('crud.success_delete_obj', {
           obj: contact.name,

src/pages/VenuePage/VenueChildrenCard/VenueContactTableWrapper/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { EntityShape } from 'constants/propShapes';
 import { Box, useDisclosure } from '@chakra-ui/react';
 import { useQueryClient } from 'react-query';
@@ -34,7 +34,7 @@ const VenueContactTableWrapper = ({ venue }) => {
   const actions = useCallback(
     (cell) => (
       <Actions
-        key={createUuid()}
+        key={uuid()}
         cell={cell.row}
         refreshEntity={refreshEntity}
         openEditModal={openEditModal}

src/pages/VenuePage/VenueChildrenCard/VenueDeviceTableWrapper/Actions.js

@@ -22,7 +22,7 @@ import {
 import { ArrowSquareOut, MagnifyingGlass, Minus, Trash } from 'phosphor-react';
 import { useMutation, useQueryClient } from 'react-query';
 import { axiosProv } from 'utils/axiosInstances';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useGetGatewayUi } from 'hooks/Network/Endpoints';
 import { useRemoveClaim } from 'hooks/Network/Inventory';
 
@@ -54,7 +54,7 @@ const Actions = ({ cell: { original: tag }, refreshEntity, openEditModal }) => {
       onClose();
       refreshEntity();
       toast({
-        id: `tag-delete-success${createUuid()}`,
+        id: `tag-delete-success${uuid()}`,
         title: t('common.success'),
         description: t('crud.success_delete_obj', {
           obj: tag.name,
@@ -85,7 +85,7 @@ const Actions = ({ cell: { original: tag }, refreshEntity, openEditModal }) => {
     removeClaim.mutateAsync(tag.serialNumber, {
       onSuccess: () => {
         toast({
-          id: `tag-unclaim-success${createUuid()}`,
+          id: `tag-unclaim-success${uuid()}`,
           title: t('common.success'),
           description: t('inventory.success_remove_claim', {
             obj: tag.serialNumber,

src/pages/VenuePage/VenueChildrenCard/VenueDeviceTableWrapper/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { EntityShape } from 'constants/propShapes';
 import InventoryTable from 'components/Tables/InventoryTable';
 import { Flex, Heading, Spacer, useDisclosure, useToast } from '@chakra-ui/react';
@@ -39,7 +39,7 @@ const VenueDeviceTableWrapper = ({ venue }) => {
   const actions = useCallback(
     (cell) => (
       <Actions
-        key={createUuid()}
+        key={uuid()}
         cell={cell.row}
         refreshEntity={refreshEntity}
         openEditModal={openEditModal}

src/utils/toastHelper.js

@@ -1,6 +1,6 @@
-import { v4 as createUuid } from 'uuid';
+import { v4 as uuid } from 'uuid';
 
-export const errorToast = ({ t, description, id = createUuid() }) => ({
+export const errorToast = ({ t, description, id = uuid() }) => ({
   id,
   title: t('common.error'),
   description,
@@ -10,7 +10,7 @@ export const errorToast = ({ t, description, id = createUuid() }) => ({
   position: 'top-right',
 });
 
-export const successToast = ({ t, description, id = createUuid() }) => ({
+export const successToast = ({ t, description, id = uuid() }) => ({
   id,
   title: t('common.success'),
   description,