2.6.57: prettierrrc now has printWidth of 120 instead of 100

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "printWidth": 100,
+  "printWidth": 120,
   "trailingComma": "all",
   "tabWidth": 2,
   "semi": true,

package-lock.json

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

package.json

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

src/App.js

@@ -16,8 +16,7 @@ const queryClient = new QueryClient({
 });
 
 const App = () => {
-  const storageToken =
+  const storageToken = localStorage.getItem('access_token') ?? sessionStorage.getItem('access_token');
-    localStorage.getItem('access_token') ?? sessionStorage.getItem('access_token');
 
   return (
     <QueryClientProvider client={queryClient}>

src/components/Buttons/FileInputButton/index.js

@@ -18,15 +18,7 @@ const defaultProps = {
   isStringFile: false,
 };
 
-const FileInputButton = ({
+const FileInputButton = ({ value, setValue, setFileName, refreshId, accept, isHidden, isStringFile }) => {
-  value,
-  setValue,
-  setFileName,
-  refreshId,
-  accept,
-  isHidden,
-  isStringFile,
-}) => {
   const [fileKey, setFileKey] = useState(uuid());
   let fileReader;
 

src/components/Buttons/SaveButton/index.js

@@ -22,15 +22,7 @@ const defaultProps = {
   dirtyCheck: false,
 };
 
-const SaveButton = ({
+const SaveButton = ({ onClick, isDisabled, isLoading, isCompact, isDirty, dirtyCheck, ...props }) => {
-  onClick,
-  isDisabled,
-  isLoading,
-  isCompact,
-  isDirty,
-  dirtyCheck,
-  ...props
-}) => {
   const { t } = useTranslation();
   const breakpoint = useBreakpoint();
 

src/components/Buttons/ToggleEditButton/index.js

@@ -21,15 +21,7 @@ const defaultProps = {
   isDirty: false,
 };
 
-const ToggleEditButton = ({
+const ToggleEditButton = ({ toggleEdit, isEditing, isDirty, isDisabled, isLoading, isCompact, ...props }) => {
-  toggleEdit,
-  isEditing,
-  isDirty,
-  isDisabled,
-  isLoading,
-  isCompact,
-  ...props
-}) => {
   const { t } = useTranslation();
   const breakpoint = useBreakpoint();
   const { isOpen: showConfirm, onOpen: openConfirm, onClose: closeConfirm } = useDisclosure();
@@ -61,11 +53,7 @@ const ToggleEditButton = ({
         >
           {isEditing ? t('common.stop_editing') : t('common.edit')}
         </Button>
-        <ConfirmCloseAlert
+        <ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
-          isOpen={showConfirm}
-          confirm={closeCancelAndForm}
-          cancel={closeConfirm}
-        />
       </>
     );
   }

src/components/ColumnPicker/index.js

@@ -2,16 +2,7 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { useTranslation } from 'react-i18next';
-import {
+import { Button, Checkbox, IconButton, Menu, MenuButton, MenuItem, MenuList, useBreakpoint } from '@chakra-ui/react';
-  Button,
-  Checkbox,
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  useBreakpoint,
-} from '@chakra-ui/react';
 import { useAuth } from 'contexts/AuthProvider';
 import { FunnelSimple } from 'phosphor-react';
 
@@ -34,8 +25,7 @@ const ColumnPicker = ({ preference, columns, hiddenColumns, setHiddenColumns })
 
   const handleColumnClick = (id) => {
     let newHidden = [];
-    if (hiddenColumns.find((hidden) => hidden === id))
+    if (hiddenColumns.find((hidden) => hidden === id)) newHidden = [...hiddenColumns.filter((hidden) => hidden !== id)];
-      newHidden = [...hiddenColumns.filter((hidden) => hidden !== id)];
     else newHidden = [...hiddenColumns, id];
     setPref({ preference, value: newHidden.join(',') });
     setHiddenColumns(newHidden);
@@ -52,11 +42,7 @@ const ColumnPicker = ({ preference, columns, hiddenColumns, setHiddenColumns })
         <MenuButton as={IconButton} icon={<FunnelSimple />} />
         <MenuList>
           {columns.map((column) => (
-            <MenuItem
+            <MenuItem key={uuid()} isDisabled={column.alwaysShow} onClick={() => handleColumnClick(column.id)}>
-              key={uuid()}
-              isDisabled={column.alwaysShow}
-              onClick={() => handleColumnClick(column.id)}
-            >
               <Checkbox
                 defaultChecked={!hiddenColumns.find((hidden) => hidden === column.id)}
                 isDisabled={column.alwaysShow}
@@ -77,11 +63,7 @@ const ColumnPicker = ({ preference, columns, hiddenColumns, setHiddenColumns })
       </MenuButton>
       <MenuList>
         {columns.map((column) => (
-          <MenuItem
+          <MenuItem key={uuid()} isDisabled={column.alwaysShow} onClick={() => handleColumnClick(column.id)}>
-            key={uuid()}
-            isDisabled={column.alwaysShow}
-            onClick={() => handleColumnClick(column.id)}
-          >
             <Checkbox
               defaultChecked={!hiddenColumns.find((hidden) => hidden === column.id)}
               isDisabled={column.alwaysShow}

src/components/CreateObjectsForms/LocationPickerCreator/Form.js

@@ -33,39 +33,18 @@ const Form = ({ name }) => {
             { label: 'CORPORATE', value: 'CORPORATE' },
           ]}
         />
-        <CreatableSelectField
+        <CreatableSelectField name={`${name}.phones`} label={t('contacts.phones')} placeholder="+1(202)555-0103" />
-          name={`${name}.phones`}
+        <CreatableSelectField name={`${name}.mobiles`} label={t('contacts.mobiles')} placeholder="+1(202)555-0103" />
-          label={t('contacts.phones')}
-          placeholder="+1(202)555-0103"
-        />
-        <CreatableSelectField
-          name={`${name}.mobiles`}
-          label={t('contacts.mobiles')}
-          placeholder="+1(202)555-0103"
-        />
       </SimpleGrid>
 
-      <AddressSearchField
+      <AddressSearchField placeholder={t('common.address_search_autofill')} namePrefix={name} maxWidth="600px" mb={2} />
-        placeholder={t('common.address_search_autofill')}
-        namePrefix={name}
-        maxWidth="600px"
-        mb={2}
-      />
       <SimpleGrid minChildWidth="300px" spacing="20px" mb={8}>
-        <StringField
+        <StringField name={`${name}.addressLineOne`} label={t('locations.address_line_one')} isRequired />
-          name={`${name}.addressLineOne`}
-          label={t('locations.address_line_one')}
-          isRequired
-        />
         <StringField name={`${name}.addressLineTwo`} label={t('locations.address_line_two')} />
         <StringField name={`${name}.city`} label={t('locations.city')} isRequired />
         <StringField name={`${name}.state`} label={t('locations.state')} isRequired />
         <StringField name={`${name}.postal`} label={t('locations.postal')} isRequired />
-        <SelectField
+        <SelectField name={`${name}.country`} label={t('locations.country')} options={COUNTRY_LIST} />
-          name={`${name}.country`}
-          label={t('locations.country')}
-          options={COUNTRY_LIST}
-        />
         <StringField name={`${name}.buildingName`} label={t('locations.building_name')} />
         <StringField name={`${name}.geoCode`} label={t('locations.geocode')} />
       </SimpleGrid>

src/components/CreateObjectsForms/LocationPickerCreator/Modal.js

@@ -1,14 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import {
+import { CloseButton, Modal, ModalBody, ModalContent, ModalOverlay, SimpleGrid, useDisclosure } from '@chakra-ui/react';
-  CloseButton,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalOverlay,
-  SimpleGrid,
-  useDisclosure,
-} from '@chakra-ui/react';
 import ModalHeader from 'components/ModalHeader';
 import SaveButton from 'components/Buttons/SaveButton';
 import ConfirmCloseAlert from 'components/ConfirmCloseAlert';
@@ -154,29 +146,13 @@ const LocationPickerCreatorModal = ({ setLocation, reset }) => {
                     { label: 'CORPORATE', value: 'CORPORATE' },
                   ]}
                 />
-                <CreatableSelectField
+                <CreatableSelectField name="phones" label={t('contacts.phones')} placeholder="+1(202)555-0103" />
-                  name="phones"
+                <CreatableSelectField name="mobiles" label={t('contacts.mobiles')} placeholder="+1(202)555-0103" />
-                  label={t('contacts.phones')}
-                  placeholder="+1(202)555-0103"
-                />
-                <CreatableSelectField
-                  name="mobiles"
-                  label={t('contacts.mobiles')}
-                  placeholder="+1(202)555-0103"
-                />
               </SimpleGrid>
 
-              <AddressSearchField
+              <AddressSearchField placeholder={t('common.address_search_autofill')} maxWidth="600px" mb={2} />
-                placeholder={t('common.address_search_autofill')}
-                maxWidth="600px"
-                mb={2}
-              />
               <SimpleGrid minChildWidth="300px" spacing="20px" mb={8}>
-                <StringField
+                <StringField name="addressLineOne" label={t('locations.address_line_one')} isRequired />
-                  name="addressLineOne"
-                  label={t('locations.address_line_one')}
-                  isRequired
-                />
                 <StringField name="addressLineTwo" label={t('locations.address_line_two')} />
                 <StringField name="city" label={t('locations.city')} isRequired />
                 <StringField name="state" label={t('locations.state')} isRequired />

src/components/CreateObjectsForms/LocationPickerCreator/index.js

@@ -24,14 +24,7 @@ const defaultProps = {
   venueId: null,
 };
 
-const LocationPickerCreator = ({
+const LocationPickerCreator = ({ locationName, createLocationName, editing, isModal, entityId, venueId }) => {
-  locationName,
-  createLocationName,
-  editing,
-  isModal,
-  entityId,
-  venueId,
-}) => {
   const { t } = useTranslation();
   const toast = useToast();
   const [{ value: location }, , { setValue: setLocation }] = useField(locationName);

src/components/CustomFields/CustomNumberAsStringField/FastNumberInput.js

@@ -33,17 +33,7 @@ const defaultProps = {
   isDisabled: false,
 };
 
-const FastNumberInput = ({
+const FastNumberInput = ({ label, value, unit, onChange, onBlur, error, touched, isRequired, isDisabled }) => (
-  label,
-  value,
-  unit,
-  onChange,
-  onBlur,
-  error,
-  touched,
-  isRequired,
-  isDisabled,
-}) => (
   <FormControl isInvalid={error && touched} isRequired={isRequired} isDisabled={isDisabled}>
     <FormLabel ms="4px" fontSize="md" fontWeight="normal">
       {label}

src/components/CustomFields/DeviceConfigurationsModalField/Modal.js

@@ -39,15 +39,7 @@ const defaultProps = {
   isDisabled: false,
 };
 
-const DeviceConfigurationsModal = ({
+const DeviceConfigurationsModal = ({ name, initialValue, setValue, errors, isDisabled, isRequired, label }) => {
-  name,
-  initialValue,
-  setValue,
-  errors,
-  isDisabled,
-  isRequired,
-  label,
-}) => {
   const { t } = useTranslation();
   const toast = useToast();
   const [localValue, setLocalValue] = useState([]);
@@ -86,10 +78,7 @@ const DeviceConfigurationsModal = ({
     const { length } = initialValue;
     if (length === 0) return t('entities.add_configurations');
     if (length === 1 && configurations)
-      return (
+      return configurations.find((conf) => conf.id === initialValue[0])?.name ?? `1 ${t('configurations.one')}`;
-        configurations.find((conf) => conf.id === initialValue[0])?.name ??
-        `1 ${t('configurations.one')}`
-      );
     return `${length} ${t('configurations.title')}`;
   }, [initialValue, configurations]);
 
@@ -221,22 +210,14 @@ const DeviceConfigurationsModal = ({
           <ModalBody overflowX="auto">
             <DataTable
               columns={columns(true)}
-              data={
+              data={configurations ? localValue.map((id) => configurations.find((config) => config.id === id)) : []}
-                configurations
-                  ? localValue.map((id) => configurations.find((config) => config.id === id))
-                  : []
-              }
               isLoading={isFetching}
               obj={t('configurations.title')}
             />
             <Box h="100px" />
             <DataTable
               columns={columns(false)}
-              data={
+              data={configurations?.filter((config) => !localValue.find((local) => local === config.id)) ?? []}
-                configurations?.filter(
-                  (config) => !localValue.find((local) => local === config.id),
-                ) ?? []
-              }
               isLoading={isFetching}
               obj={t('configurations.title')}
             />

src/components/CustomFields/DeviceConfigurationsModalField/index.js

@@ -17,14 +17,7 @@ const defaultProps = {
   isDisabled: false,
 };
 
-const DeviceConfigurationsModalField = ({
+const DeviceConfigurationsModalField = ({ name, label, setFieldValue, errors, isDisabled, isRequired }) => {
-  name,
-  label,
-  setFieldValue,
-  errors,
-  isDisabled,
-  isRequired,
-}) => {
   const setValue = (value) => setFieldValue(name, value);
 
   return (

src/components/CustomFields/MultiPhoneNumberField/MultiPhoneNumberFieldInput.js

@@ -55,10 +55,7 @@ const MultiPhoneNumberFieldInput = ({
   definitionKey,
 }) => {
   const { t } = useTranslation();
-  const NoOptionsMessage = useCallback(
+  const NoOptionsMessage = useCallback(() => <h6 className="text-center pt-2">{t('common.type_for_options')}</h6>, []);
-    () => <h6 className="text-center pt-2">{t('common.type_for_options')}</h6>,
-    [],
-  );
 
   return (
     <FormControl isInvalid={error && touched} isRequired={isRequired} hidden={isHidden}>

src/components/DataTable/SortIcon.js

@@ -16,11 +16,7 @@ const defaultProps = {
 const SortIcon = ({ isSorted, isSortedDesc, canSort }) => {
   if (canSort) {
     if (isSorted) {
-      return isSortedDesc ? (
+      return isSortedDesc ? <Icon pt={2} h={5} w={5} as={ArrowDown} /> : <Icon pt={2} h={5} w={5} as={ArrowUp} />;
-        <Icon pt={2} h={5} w={5} as={ArrowDown} />
-      ) : (
-        <Icon pt={2} h={5} w={5} as={ArrowUp} />
-      );
     }
     return <Icon pt={2} h={5} w={5} as={Circle} />;
   }

src/components/DataTable/index.js

@@ -119,8 +119,7 @@ const DataTable = ({
   );
 
   useEffect(() => {
-    if (setPageInfo && pageIndex !== undefined)
+    if (setPageInfo && pageIndex !== undefined) setPageInfo({ index: pageIndex, limit: queryPageSize });
-      setPageInfo({ index: pageIndex, limit: queryPageSize });
   }, [queryPageSize, pageIndex]);
 
   useEffect(() => {
@@ -133,13 +132,7 @@ const DataTable = ({
 
   // If this is a manual DataTable, with a page index that is higher than 0 and higher than the max possible page, we send to index 0
   useEffect(() => {
-    if (
+    if (isManual && data && isManual && pageIndex > 0 && Math.ceil(count / queryPageSize) - 1 < pageIndex) {
-      isManual &&
-      data &&
-      isManual &&
-      pageIndex > 0 &&
-      Math.ceil(count / queryPageSize) - 1 < pageIndex
-    ) {
       gotoPage(0);
       setPageInfo({ index: 0, limit: queryPageSize });
     }
@@ -239,11 +232,7 @@ const DataTable = ({
               />
             </Tooltip>
             <Tooltip label={t('table.previous_page')}>
-              <IconButton
+              <IconButton onClick={previousPage} isDisabled={!canPreviousPage} icon={<ChevronLeftIcon h={6} w={6} />} />
-                onClick={previousPage}
-                isDisabled={!canPreviousPage}
-                icon={<ChevronLeftIcon h={6} w={6} />}
-              />
             </Tooltip>
           </Flex>
 
@@ -298,11 +287,7 @@ const DataTable = ({
 
           <Flex>
             <Tooltip label={t('table.next_page')}>
-              <IconButton
+              <IconButton onClick={nextPage} isDisabled={!canNextPage} icon={<ChevronRightIcon h={6} w={6} />} />
-                onClick={nextPage}
-                isDisabled={!canNextPage}
-                icon={<ChevronRightIcon h={6} w={6} />}
-              />
             </Tooltip>
             <Tooltip label={t('table.last_page')}>
               <IconButton

src/components/DisplayFields/DisplayStringField.js

@@ -1,14 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
+import { Button, FormControl, FormLabel, Input, InputGroup, InputRightElement, useBoolean } from '@chakra-ui/react';
-  Button,
-  FormControl,
-  FormLabel,
-  Input,
-  InputGroup,
-  InputRightElement,
-  useBoolean,
-} from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 
 const propTypes = {
@@ -44,12 +36,7 @@ const DisplayStringField = ({ label, value, isRequired, hideButton }) => {
         />
         {hideButton && (
           <InputRightElement width="4.5rem">
-            <Button
+            <Button h="1.75rem" size="sm" onClick={setShow.toggle} _disabled={{ opacity: 0.8, cursor: 'not-allowed' }}>
-              h="1.75rem"
-              size="sm"
-              onClick={setShow.toggle}
-              _disabled={{ opacity: 0.8, cursor: 'not-allowed' }}
-            >
               {show ? t('common.hide') : t('common.show')}
             </Button>
           </InputRightElement>

src/components/EntityTable/index.js

@@ -9,17 +9,11 @@ import { Plus, Trash } from 'phosphor-react';
 
 const getEntitiesApi = async (pageInfo) => {
   if (Array.isArray(pageInfo)) {
-    return axiosProv
+    return axiosProv.get(`entity?withExtendedInfo=true&select=${pageInfo}`).then(({ data }) => data);
-      .get(`entity?withExtendedInfo=true&select=${pageInfo}`)
-      .then(({ data }) => data);
   }
 
   return axiosProv
-    .get(
+    .get(`entity?withExtendedInfo=true&limit=${pageInfo.limit}&offset=${pageInfo.limit * pageInfo.index}`)
-      `entity?withExtendedInfo=true&limit=${pageInfo.limit}&offset=${
-        pageInfo.limit * pageInfo.index
-      }`,
-    )
     .then(({ data }) => data);
 };
 const getCountApi = async () => axiosProv.get(`entity?countOnly=true`).then(({ data }) => data);

src/components/FileInput/index.js

@@ -150,15 +150,7 @@ const FileInput = ({ setValue, refreshId, errors }) => {
         {t('certificates.device_macs')}
       </FormLabel>
       <InputGroup>
-        <Input
+        <Input borderRadius="15px" pt={1} fontSize="sm" type="file" onChange={changeFile} key={fileKey} accept=".csv" />
-          borderRadius="15px"
-          pt={1}
-          fontSize="sm"
-          type="file"
-          onChange={changeFile}
-          key={fileKey}
-          accept=".csv"
-        />
         <InputRightElement hidden={!result}>
           {' '}
           <IconButton icon={<CloseIcon />} onClick={resetFile} />

src/components/FormFields/AddressSearchField/index.js

@@ -22,19 +22,14 @@ const AddressSearchField = ({ namePrefix, isDisabled, placeholder, isHidden, ...
 
   const onSelect = (v) => {
     const city =
-      v.locality.long_name ??
+      v.locality.long_name ?? v.administrative_area_level_3.long_name ?? v.administrative_area_level_2.long_name;
-      v.administrative_area_level_3.long_name ??
-      v.administrative_area_level_2.long_name;
 
     setFieldValue(
       `${namePrefix ? `${namePrefix}.` : ''}addressLineOne`,
       `${v.street_number.long_name} ${v.route.long_name}`,
     );
     setFieldValue(`${namePrefix ? `${namePrefix}.` : ''}city`, city);
-    setFieldValue(
+    setFieldValue(`${namePrefix ? `${namePrefix}.` : ''}state`, v.administrative_area_level_1.long_name);
-      `${namePrefix ? `${namePrefix}.` : ''}state`,
-      v.administrative_area_level_1.long_name,
-    );
     setFieldValue(`${namePrefix ? `${namePrefix}.` : ''}postal`, v.postal_code.long_name);
     setFieldValue(`${namePrefix ? `${namePrefix}.` : ''}country`, v.country.short_name);
     setFieldValue(`${namePrefix ? `${namePrefix}.` : ''}geoCode`, JSON.stringify(v.geoCode));

src/components/FormFields/ConfigurationFieldExplanation/index.js

@@ -11,10 +11,7 @@ const findDefinition = (definitionKey, CONFIGURATION_DESCRIPTIONS) => {
   if (length < 2) return null;
   const start = split.slice(0, length - 1);
   const end = split[length - 1];
-  return (
+  return CONFIGURATION_DESCRIPTIONS[start.slice(0, length - 1).join('.')]?.properties[end]?.description ?? null;
-    CONFIGURATION_DESCRIPTIONS[start.slice(0, length - 1).join('.')]?.properties[end]
-      ?.description ?? null
-  );
 };
 
 const propTypes = {

src/components/FormFields/CreatableSelectField/FastCreatableSelectInput.js

@@ -44,10 +44,7 @@ const FastCreatableSelectInput = ({
   placeholder,
 }) => {
   const { t } = useTranslation();
-  const NoOptionsMessage = useCallback(
+  const NoOptionsMessage = useCallback(() => <h6 className="text-center pt-2">{t('common.type_for_options')}</h6>, []);
-    () => <h6 className="text-center pt-2">{t('common.type_for_options')}</h6>,
-    [],
-  );
 
   return (
     <FormControl isInvalid={error && touched} isRequired={isRequired} hidden={isHidden}>

src/components/FormFields/FileInputFieldModal/FileInputModal.js

@@ -95,12 +95,7 @@ const FileInputModal = ({
 
   return (
     <>
-      <FormControl
+      <FormControl isInvalid={error && touched} isRequired={isRequired} isDisabled={isDisabled} hidden={isHidden}>
-        isInvalid={error && touched}
-        isRequired={isRequired}
-        isDisabled={isDisabled}
-        hidden={isHidden}
-      >
         <FormLabel ms="4px" fontSize="md" fontWeight="normal">
           {label}
           <ConfigurationFieldExplanation definitionKey={definitionKey} />
@@ -126,10 +121,7 @@ const FileInputModal = ({
             title={label}
             right={
               <>
-                <SaveButton
+                <SaveButton onClick={saveValue} isDisabled={tempValue.length === 0 || !test(tempValue)} />
-                  onClick={saveValue}
-                  isDisabled={tempValue.length === 0 || !test(tempValue)}
-                />
                 <CloseButton ml={2} onClick={onClose} />
               </>
             }

src/components/FormFields/ListInputModalField/index.js

@@ -130,11 +130,7 @@ const ListInputModalField = ({
                   h="1.75rem"
                   size="sm"
                   onClick={addEntry}
-                  isDisabled={
+                  isDisabled={entry.length === 0 || !validation(entry) || localValue.find((val) => val === entry)}
-                    entry.length === 0 ||
-                    !validation(entry) ||
-                    localValue.find((val) => val === entry)
-                  }
                 >
                   {t('crud.add')}
                 </Button>

src/components/FormFields/ObjectArrayFieldModal/index.js

@@ -43,17 +43,7 @@ const defaultProps = {
   isHidden: false,
 };
 
-const ObjectArrayFieldModal = ({
+const ObjectArrayFieldModal = ({ name, label, fields, schema, columns, editing, isDisabled, isRequired, isHidden }) => {
-  name,
-  label,
-  fields,
-  schema,
-  columns,
-  editing,
-  isDisabled,
-  isRequired,
-  isHidden,
-}) => {
   const { t } = useTranslation();
   const [tempValue, setTempValue] = useState([]);
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -96,12 +86,7 @@ const ObjectArrayFieldModal = ({
     <Field name={name}>
       {({ field, meta: { touched, error } }) => (
         <>
-          <FormControl
+          <FormControl isInvalid={error && touched} isRequired={isRequired} isDisabled={isDisabled} hidden={isHidden}>
-            isInvalid={error && touched}
-            isRequired={isRequired}
-            isDisabled={isDisabled}
-            hidden={isHidden}
-          >
             <FormLabel ms="4px" fontSize="md" fontWeight="normal">
               {label}
             </FormLabel>
@@ -119,11 +104,7 @@ const ObjectArrayFieldModal = ({
                 title={name}
                 right={
                   <>
-                    <SaveButton
+                    <SaveButton onClick={onChange} hidden={!editing} isDisabled={tempValue.length === 0} />
-                      onClick={onChange}
-                      hidden={!editing}
-                      isDisabled={tempValue.length === 0}
-                    />
                     <CloseButton ml={2} onClick={onClose} />
                   </>
                 }
@@ -150,12 +131,7 @@ const ObjectArrayFieldModal = ({
                           <Button colorScheme="blue" isDisabled={!isValid} onClick={submitForm}>
                             {t('crud.add')}
                           </Button>
-                          <Button
+                          <Button colorScheme="gray" isDisabled={!isDirty} ml={2} onClick={resetForm}>
-                            colorScheme="gray"
-                            isDisabled={!isDirty}
-                            ml={2}
-                            onClick={resetForm}
-                          >
                             {t('common.reset')}
                           </Button>
                         </Box>

src/components/FormFields/SelectField/FastSelectInput.js

@@ -50,12 +50,7 @@ const FastSelectInput = ({
   w,
   definitionKey,
 }) => (
-  <FormControl
+  <FormControl isInvalid={error && touched} isRequired={isRequired} isDisabled={isDisabled} hidden={isHidden}>
-    isInvalid={error && touched}
-    isRequired={isRequired}
-    isDisabled={isDisabled}
-    hidden={isHidden}
-  >
     <FormLabel ms="4px" fontSize="md" fontWeight="normal" _disabled={{ opacity: 0.8 }}>
       {label} <ConfigurationFieldExplanation definitionKey={definitionKey} />
     </FormLabel>

src/components/FormFields/SelectWithSearchField/index.js

@@ -23,15 +23,7 @@ const defaultProps = {
   isHidden: false,
 };
 
-const SelectWithSearchField = ({
+const SelectWithSearchField = ({ options, name, isDisabled, label, isRequired, isHidden, isPortal }) => {
-  options,
-  name,
-  isDisabled,
-  label,
-  isRequired,
-  isHidden,
-  isPortal,
-}) => {
   const { errors, touched, setFieldValue } = useFormikContext();
   const onChange = (ent) => {
     setFieldValue(name, ent.value);

src/components/FormFields/ToggleField/index.js

@@ -21,15 +21,7 @@ const defaultProps = {
   definitionKey: null,
 };
 
-const ToggleField = ({
+const ToggleField = ({ name, isDisabled, label, isRequired, element, falseIsUndefined, definitionKey }) => {
-  name,
-  isDisabled,
-  label,
-  isRequired,
-  element,
-  falseIsUndefined,
-  definitionKey,
-}) => {
   const [{ value }, { touched, error }, { setValue, setTouched }] = useField(name);
 
   const onChange = useCallback((e) => {

src/components/LoadingOverlay/index.js

@@ -16,8 +16,7 @@ const LoadingOverlay = ({ isLoading, children }) => {
     position: 'absolute',
     width: '100%',
     height: '100%',
-    backgroundColor:
+    backgroundColor: colorMode === 'light' ? 'var(--chakra-colors-gray-200)' : 'var(--chakra-colors-gray-900)',
-      colorMode === 'light' ? 'var(--chakra-colors-gray-200)' : 'var(--chakra-colors-gray-900)',
     zIndex: '1100',
     opacity: '0.4',
     filter: 'alpha(opacity=40)',

src/components/NotesTable/index.js

@@ -38,10 +38,7 @@ const NotesTable = ({ notes, setNotes, isDisabled }) => {
     setNewNote('');
   };
 
-  const memoizedDate = useCallback(
+  const memoizedDate = useCallback((cell) => <FormattedDate date={cell.row.values.created} key={uuid()} />, []);
-    (cell) => <FormattedDate date={cell.row.values.created} key={uuid()} />,
-    [],
-  );
 
   const columns = useMemo(
     () => [

src/components/PhoneInput/index.js

@@ -7,9 +7,7 @@ const propTypes = {
   field: PropTypes.instanceOf(Object).isRequired,
 };
 
-const PhoneInput = ({ editing, field }) => (
+const PhoneInput = ({ editing, field }) => <Input borderRadius="15px" type="string" isDisabled={!editing} {...field} />;
-  <Input borderRadius="15px" type="string" isDisabled={!editing} {...field} />
-);
 
 PhoneInput.propTypes = propTypes;
 

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

@@ -50,15 +50,7 @@ const CreateConfigurationForm = ({
     return `ven:${splitEntity[1]}`;
   };
 
-  const createParameters = ({
+  const createParameters = ({ name, description, note, deviceTypes, entity, rrm, __CREATE_CONFIG }) => ({
-    name,
-    description,
-    note,
-    deviceTypes,
-    entity,
-    rrm,
-    __CREATE_CONFIG,
-  }) => ({
     name,
     rrm,
     deviceTypes,
@@ -127,13 +119,7 @@ const CreateConfigurationForm = ({
       {({ errors, touched, setFieldValue }) => (
         <>
           <SimpleGrid minChildWidth="300px" spacing="20px" mb={6}>
-            <StringField
+            <StringField name="name" label={t('common.name')} errors={errors} touched={touched} isRequired />
-              name="name"
-              label={t('common.name')}
-              errors={errors}
-              touched={touched}
-              isRequired
-            />
             <MultiSelectField
               name="deviceTypes"
               label={t('configurations.device_types')}
@@ -189,20 +175,10 @@ const CreateConfigurationForm = ({
               isRequired
               w={28}
             />
-            <StringField
+            <StringField name="description" label={t('common.description')} errors={errors} touched={touched} />
-              name="description"
-              label={t('common.description')}
-              errors={errors}
-              touched={touched}
-            />
             <StringField name="note" label={t('common.note')} errors={errors} touched={touched} />
           </SimpleGrid>
-          <SpecialConfigurationManager
+          <SpecialConfigurationManager editing isEnabledByDefault isOnlySections onChange={onConfigurationChange} />
-            editing
-            isEnabledByDefault
-            isOnlySections
-            onChange={onConfigurationChange}
-          />
         </>
       )}
     </Formik>

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

@@ -1,14 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import {
+import { Button, useDisclosure, Modal, ModalOverlay, ModalContent, ModalBody, toast } from '@chakra-ui/react';
-  Button,
-  useDisclosure,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalBody,
-  toast,
-} from '@chakra-ui/react';
 import { AddIcon } from '@chakra-ui/icons';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
@@ -64,8 +56,7 @@ const CreateConfigurationModal = ({ refresh, entityId }) => {
     setConfiguration(null);
     onOpen();
   };
-  const closeModal = () =>
+  const closeModal = () => (form.dirty || configuration?.__form?.isDirty ? openConfirm() : onClose());
-    form.dirty || configuration?.__form?.isDirty ? openConfirm() : onClose();
   const closeCancelAndForm = () => {
     closeConfirm();
     onClose();
@@ -73,13 +64,7 @@ const CreateConfigurationModal = ({ refresh, entityId }) => {
 
   return (
     <>
-      <Button
+      <Button alignItems="center" colorScheme="blue" rightIcon={<AddIcon />} onClick={openModal} ml={2}>
-        alignItems="center"
-        colorScheme="blue"
-        rightIcon={<AddIcon />}
-        onClick={openModal}
-        ml={2}
-      >
         {t('crud.create')}
       </Button>
       <Modal onClose={closeModal} isOpen={isOpen} size="xl" scrollBehavior="inside">
@@ -92,11 +77,7 @@ const CreateConfigurationModal = ({ refresh, entityId }) => {
                 <SaveButton
                   onClick={form.submitForm}
                   isLoading={form.isSubmitting}
-                  isDisabled={
+                  isDisabled={!form.isValid || !form.dirty || (configuration !== null && !configuration.__form.isValid)}
-                    !form.isValid ||
-                    !form.dirty ||
-                    (configuration !== null && !configuration.__form.isValid)
-                  }
                 />
                 <CloseButton ml={2} onClick={closeModal} />
               </>
@@ -115,11 +96,7 @@ const CreateConfigurationModal = ({ refresh, entityId }) => {
             />
           </ModalBody>
         </ModalContent>
-        <ConfirmCloseAlert
+        <ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
-          isOpen={showConfirm}
-          confirm={closeCancelAndForm}
-          cancel={closeConfirm}
-        />
       </Modal>
     </>
   );

src/components/Tables/ConfigurationTable/index.js

@@ -17,10 +17,7 @@ const ConfigurationsTable = ({ select, actions }) => {
   const toast = useToast();
   const { data: configurations, isFetching } = useGetSelectConfigurations({ t, toast, select });
 
-  const dateCell = useCallback(
+  const dateCell = useCallback((cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />, []);
-    (cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
-    [],
-  );
   const typesCell = useCallback((cell) => cell.row.values.deviceTypes.join(', '), []);
 
   // Columns array. This array contains your table headings and accessors which maps keys from data array

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

@@ -210,11 +210,7 @@ const AssignContactModal = ({ entityId, venueId, alreadyClaimed }) => {
             </Box>
           </ModalBody>
         </ModalContent>
-        <ConfirmCloseAlert
+        <ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
-          isOpen={showConfirm}
-          confirm={closeCancelAndForm}
-          cancel={closeConfirm}
-        />
       </Modal>
     </>
   );

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

@@ -94,10 +94,8 @@ const CreateContactForm = ({ isOpen, onClose, refresh, formRef, parent }) => {
             phones,
             description,
             accessPIN,
-            entity:
+            entity: entity === '' || entity.split(':')[0] !== 'ent' ? undefined : entity.split(':')[1],
-              entity === '' || entity.split(':')[0] !== 'ent' ? undefined : entity.split(':')[1],
+            venue: entity === '' || entity.split(':')[0] !== 'ven' ? undefined : entity.split(':')[1],
-            venue:
-              entity === '' || entity.split(':')[0] !== 'ven' ? undefined : entity.split(':')[1],
             notes: note.length > 0 ? [{ note }] : undefined,
           },
           {
@@ -142,13 +140,7 @@ const CreateContactForm = ({ isOpen, onClose, refresh, formRef, parent }) => {
       {({ errors, touched, setFieldValue }) => (
         <Form>
           <SimpleGrid minChildWidth="300px" spacing="20px" mb={8}>
-            <StringField
+            <StringField name="name" label={t('contacts.visual')} errors={errors} touched={touched} isRequired />
-              name="name"
-              label={t('contacts.visual')}
-              errors={errors}
-              touched={touched}
-              isRequired
-            />
             <SelectField
               name="type"
               label={t('common.type')}
@@ -207,12 +199,7 @@ const CreateContactForm = ({ isOpen, onClose, refresh, formRef, parent }) => {
                 { value: 'Dr.', label: 'Dr.' },
               ]}
             />
-            <StringField
+            <StringField name="title" label={t('contacts.title')} errors={errors} touched={touched} />
-              name="title"
-              label={t('contacts.title')}
-              errors={errors}
-              touched={touched}
-            />
             <StringField
               name="firstname"
               label={t('contacts.first_name')}
@@ -220,24 +207,9 @@ const CreateContactForm = ({ isOpen, onClose, refresh, formRef, parent }) => {
               touched={touched}
               isRequired
             />
-            <StringField
+            <StringField name="lastname" label={t('contacts.last_name')} errors={errors} touched={touched} />
-              name="lastname"
+            <StringField name="initials" label={t('contacts.initials')} errors={errors} touched={touched} />
-              label={t('contacts.last_name')}
+            <StringField name="description" label={t('common.description')} errors={errors} touched={touched} />
-              errors={errors}
-              touched={touched}
-            />
-            <StringField
-              name="initials"
-              label={t('contacts.initials')}
-              errors={errors}
-              touched={touched}
-            />
-            <StringField
-              name="description"
-              label={t('common.description')}
-              errors={errors}
-              touched={touched}
-            />
             <StringField
               name="primaryEmail"
               label={t('contacts.primary_email')}
@@ -267,12 +239,7 @@ const CreateContactForm = ({ isOpen, onClose, refresh, formRef, parent }) => {
               placeholder="+1(202)555-0103"
               setFieldValue={setFieldValue}
             />
-            <StringField
+            <StringField name="accessPIN" label={t('contacts.access_pin')} errors={errors} touched={touched} />
-              name="accessPIN"
-              label={t('contacts.access_pin')}
-              errors={errors}
-              touched={touched}
-            />
             <StringField name="note" label={t('common.note')} errors={errors} touched={touched} />
           </SimpleGrid>
         </Form>

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

@@ -1,13 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import {
+import { Button, useDisclosure, Modal, ModalOverlay, ModalContent, ModalBody } from '@chakra-ui/react';
-  Button,
-  useDisclosure,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalBody,
-} from '@chakra-ui/react';
 import { AddIcon } from '@chakra-ui/icons';
 import { useTranslation } from 'react-i18next';
 import ConfirmCloseAlert from 'components/ConfirmCloseAlert';
@@ -101,11 +94,7 @@ const CreateContactModal = ({ refresh, entityId, isVenue }) => {
             />
           </ModalBody>
         </ModalContent>
-        <ConfirmCloseAlert
+        <ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
-          isOpen={showConfirm}
-          confirm={closeCancelAndForm}
-          cancel={closeConfirm}
-        />
       </Modal>
     </>
   );

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

@@ -269,9 +269,7 @@ const EditContactForm = ({ editing, isOpen, onClose, refresh, contact, formRef }
             </TabPanel>
             <TabPanel>
               <Field name="notes">
-                {({ field }) => (
+                {({ field }) => <NotesTable notes={field.value} setNotes={setFieldValue} isDisabled={!editing} />}
-                  <NotesTable notes={field.value} setNotes={setFieldValue} isDisabled={!editing} />
-                )}
               </Field>
             </TabPanel>
           </TabPanels>

src/components/Tables/ContactTable/index.js

@@ -26,10 +26,7 @@ const ContactTable = ({ actions, select, ignoredColumns, refreshId, disabledIds
   const toast = useToast();
   const { data: venues, isFetching, refetch } = useGetSelectContacts({ t, toast, select });
 
-  const memoizedDate = useCallback(
+  const memoizedDate = useCallback((cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />, []);
-    (cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
-    [],
-  );
 
   // Columns array. This array contains your table headings and accessors which maps keys from data array
   const columns = React.useMemo(() => {

src/components/Tables/EntityTable/index.js

@@ -17,10 +17,7 @@ const EntityTable = ({ actions, select }) => {
   const toast = useToast();
   const { data: entities, isFetching } = useGetSelectEntities({ t, toast, select });
 
-  const dateCell = useCallback(
+  const dateCell = useCallback((cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />, []);
-    (cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
-    [],
-  );
 
   // Columns array. This array contains your table headings and accessors which maps keys from data array
   const columns = useMemo(() => {

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

@@ -136,13 +136,7 @@ const AssignTagModal = ({ entityId, alreadyClaimedDevices }) => {
 
   return (
     <>
-      <Button
+      <Button alignItems="center" colorScheme="blue" rightIcon={<Lock size={20} />} onClick={openModal} ml={2}>
-        alignItems="center"
-        colorScheme="blue"
-        rightIcon={<Lock size={20} />}
-        onClick={openModal}
-        ml={2}
-      >
         {t('common.claim')}
       </Button>
       <Modal onClose={closeModal} isOpen={isOpen} size="xl">
@@ -184,11 +178,7 @@ const AssignTagModal = ({ entityId, alreadyClaimedDevices }) => {
             </Box>
           </ModalBody>
         </ModalContent>
-        <ConfirmCloseAlert
+        <ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
-          isOpen={showConfirm}
-          confirm={closeCancelAndForm}
-          cancel={closeConfirm}
-        />
       </Modal>
     </>
   );

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

@@ -1,15 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
+import { Modal, ModalOverlay, ModalContent, ModalBody, Alert, AlertIcon, Heading, Box } from '@chakra-ui/react';
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalBody,
-  Alert,
-  AlertIcon,
-  Heading,
-  Box,
-} from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import CloseButton from 'components/Buttons/CloseButton';
 import ModalHeader from 'components/ModalHeader';

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

@@ -54,16 +54,7 @@ const CreateTagForm = ({
     return `ven:${splitEntity[1]}`;
   };
 
-  const createParameters = ({
+  const createParameters = ({ serialNumber, name, description, note, deviceType, devClass, rrm, entity }) => ({
-    serialNumber,
-    name,
-    description,
-    note,
-    deviceType,
-    devClass,
-    rrm,
-    entity,
-  }) => ({
     serialNumber,
     name,
     rrm,
@@ -152,13 +143,7 @@ const CreateTagForm = ({
               touched={touched}
               isRequired
             />
-            <StringField
+            <StringField name="name" label={t('common.name')} errors={errors} touched={touched} isRequired />
-              name="name"
-              label={t('common.name')}
-              errors={errors}
-              touched={touched}
-              isRequired
-            />
             <SelectField
               name="deviceType"
               label={t('inventory.device_type')}
@@ -223,12 +208,7 @@ const CreateTagForm = ({
               ]}
               isRequired
             />
-            <StringField
+            <StringField name="description" label={t('common.description')} errors={errors} touched={touched} />
-              name="description"
-              label={t('common.description')}
-              errors={errors}
-              touched={touched}
-            />
             <StringField name="note" label={t('common.note')} errors={errors} touched={touched} />
           </SimpleGrid>
           <SpecialConfigurationManager editing onChange={onConfigurationChange} />

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

@@ -64,8 +64,7 @@ const CreateTagModal = ({ refresh, entityId, subId }) => {
     setConfiguration(null);
     onOpen();
   };
-  const closeModal = () =>
+  const closeModal = () => (form.dirty || configuration?.__form?.isDirty ? openConfirm() : onClose());
-    form.dirty || configuration?.__form?.isDirty ? openConfirm() : onClose();
   const closeCancelAndForm = () => {
     closeConfirm();
     onClose();
@@ -84,11 +83,7 @@ const CreateTagModal = ({ refresh, entityId, subId }) => {
                 <SaveButton
                   onClick={form.submitForm}
                   isLoading={form.isSubmitting}
-                  isDisabled={
+                  isDisabled={!form.isValid || !form.dirty || (configuration !== null && !configuration.__form.isValid)}
-                    !form.isValid ||
-                    !form.dirty ||
-                    (configuration !== null && !configuration.__form.isValid)
-                  }
                 />
                 <CloseButton ml={2} onClick={closeModal} />
               </>
@@ -109,11 +104,7 @@ const CreateTagModal = ({ refresh, entityId, subId }) => {
             />
           </ModalBody>
         </ModalContent>
-        <ConfirmCloseAlert
+        <ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
-          isOpen={showConfirm}
-          confirm={closeCancelAndForm}
-          cancel={closeConfirm}
-        />
       </Modal>
     </>
   );

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

@@ -50,16 +50,9 @@ const ComputedConfigurationDisplay = ({ computedConfig }) => {
           {computedConfig.explanation?.map((exp) => (
             <AccordionItem key={uuid()}>
               <AccordionButton
-                bg={
+                bg={exp.action === 'added' ? 'var(--chakra-colors-green-500)' : 'var(--chakra-colors-red-500)'}
-                  exp.action === 'added'
-                    ? 'var(--chakra-colors-green-500)'
-                    : 'var(--chakra-colors-red-500)'
-                }
                 _hover={{
-                  bg:
+                  bg: exp.action === 'added' ? 'var(--chakra-colors-green-700)' : 'var(--chakra-colors-red-700)',
-                    exp.action === 'added'
-                      ? 'var(--chakra-colors-green-700)'
-                      : 'var(--chakra-colors-red-700)',
                 }}
               >
                 <Center>

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

@@ -45,9 +45,7 @@ const ConfigurationPicker = ({ tagId, name, isDisabled }) => {
         classNamePrefix="chakra-react-select"
         menuPortalTarget={document.body}
         options={[{ value: '', label: t('common.none') }, ...options]}
-        value={[{ value: '', label: t('common.none') }, ...options].find(
+        value={[{ value: '', label: t('common.none') }, ...options].find((opt) => opt.value === value)}
-          (opt) => opt.value === value,
-        )}
         onChange={onChange}
         onBlur={onBlur}
       />

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

@@ -2,16 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
-import {
+import { useToast, Tabs, TabList, TabPanels, TabPanel, Tab, SimpleGrid, Textarea } from '@chakra-ui/react';
-  useToast,
-  Tabs,
-  TabList,
-  TabPanels,
-  TabPanel,
-  Tab,
-  SimpleGrid,
-  Textarea,
-} from '@chakra-ui/react';
 import { Formik, Field, Form } from 'formik';
 import NotesTable from 'components/NotesTable';
 import StringField from 'components/FormFields/StringField';
@@ -199,23 +190,9 @@ const EditTagForm = ({
             <TabPanel>
               <Form>
                 <SimpleGrid minChildWidth="300px" spacing="20px">
-                  <StringField
+                  <StringField name="serialNumber" label={t('inventory.serial_number')} isDisabled isRequired />
-                    name="serialNumber"
+                  <StringField name="name" label={t('common.name')} isDisabled={!editing} isRequired />
-                    label={t('inventory.serial_number')}
+                  <StringField name="description" label={t('common.description')} isDisabled={!editing} />
-                    isDisabled
-                    isRequired
-                  />
-                  <StringField
-                    name="name"
-                    label={t('common.name')}
-                    isDisabled={!editing}
-                    isRequired
-                  />
-                  <StringField
-                    name="description"
-                    label={t('common.description')}
-                    isDisabled={!editing}
-                  />
                   <SelectField
                     name="deviceType"
                     label={t('inventory.device_type')}
@@ -289,15 +266,11 @@ const EditTagForm = ({
             </TabPanel>
             <TabPanel>
               <Field name="notes">
-                {({ field }) => (
+                {({ field }) => <NotesTable notes={field.value} setNotes={setFieldValue} isDisabled={!editing} />}
-                  <NotesTable notes={field.value} setNotes={setFieldValue} isDisabled={!editing} />
-                )}
               </Field>
             </TabPanel>
             <TabPanel>
-              <Field name="state">
+              <Field name="state">{({ field }) => <Textarea {...field} isDisabled={!editing} />}</Field>
-                {({ field }) => <Textarea {...field} isDisabled={!editing} />}
-              </Field>
             </TabPanel>
           </TabPanels>
         </Tabs>

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

@@ -71,11 +71,7 @@ const SpecialConfigurationForm = ({ editing, configuration, formRef }) => {
           isDisabled={!editing}
           w={36}
         />
-        <ToggleField
+        <ToggleField name="firmwareRCOnly" label={t('configurations.rc_only')} isDisabled={!editing} />
-          name="firmwareRCOnly"
-          label={t('configurations.rc_only')}
-          isDisabled={!editing}
-        />
       </SimpleGrid>
     </Formik>
   );

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

@@ -45,13 +45,7 @@ const defaultProps = {
   isOnlySections: false,
 };
 
-const SpecialConfigurationManager = ({
+const SpecialConfigurationManager = ({ editing, configId, onChange, isEnabledByDefault, isOnlySections }) => {
-  editing,
-  configId,
-  onChange,
-  isEnabledByDefault,
-  isOnlySections,
-}) => {
   const { t } = useTranslation();
   const toast = useToast();
   const [sections, setSections] = useState(isEnabledByDefault ? BASE_SECTIONS : null);
@@ -120,11 +114,7 @@ const SpecialConfigurationManager = ({
             <Spacer />
             <DeleteButton onClick={handleDeleteClick} isDisabled={!editing} />
           </Heading>
-          <SpecialConfigurationForm
+          <SpecialConfigurationForm editing={editing} formRef={formRef} configuration={configuration} />
-            editing={editing}
-            formRef={formRef}
-            configuration={configuration}
-          />
         </>
       )}
       <ConfigurationSectionsCard

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

@@ -88,8 +88,7 @@ const EditTagModal = ({ isOpen, onClose, tag, refresh, pushConfig }) => {
 
   const onConfigurationChange = useCallback((conf) => setConfiguration(conf), []);
 
-  const closeModal = () =>
+  const closeModal = () => (form.dirty || configuration?.__form?.isDirty ? openConfirm() : onClose());
-    form.dirty || configuration?.__form?.isDirty ? openConfirm() : onClose();
   const closeCancelAndForm = () => {
     closeConfirm();
     onClose();
@@ -115,11 +114,7 @@ const EditTagModal = ({ isOpen, onClose, tag, refresh, pushConfig }) => {
               <SaveButton
                 onClick={form.submitForm}
                 isLoading={form.isSubmitting}
-                isDisabled={
+                isDisabled={!editing || !form.isValid || (configuration !== null && !configuration.__form.isValid)}
-                  !editing ||
-                  !form.isValid ||
-                  (configuration !== null && !configuration.__form.isValid)
-                }
               />
               <Tooltip hasArrow label={t('configurations.push_configuration')} placement="top">
                 <IconButton

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

@@ -52,11 +52,7 @@ const ImportDeviceTests = ({ devicesToTest, setPhase, setDevicesToImport }) => {
     return axios
       .get(`${axiosProv.defaults.baseURL}/inventory/${device.SerialNumber}`, options)
       .then((response) => {
-        if (
+        if (response.data.venue !== '' || response.data.entity !== '' || response.data.subscriber !== '')
-          response.data.venue !== '' ||
-          response.data.entity !== '' ||
-          response.data.subscriber !== ''
-        )
           deviceResult.alreadyAssigned = true;
         else deviceResult.foundUnassigned = true;
         return deviceResult;
@@ -68,14 +64,9 @@ const ImportDeviceTests = ({ devicesToTest, setPhase, setDevicesToImport }) => {
   };
 
   const testDevice = (device, alreadyTested) => {
-    if (
+    if (device.SerialNumber === '' || device.SerialNumber.length !== 12 || !device.SerialNumber.match('^[a-fA-F0-9]+$'))
-      device.SerialNumber === '' ||
-      device.SerialNumber.length !== 12 ||
-      !device.SerialNumber.match('^[a-fA-F0-9]+$')
-    )
       return t('devices.invalid_serial_number');
-    if (!deviceTypes.find((devType) => devType === device.DeviceType))
+    if (!deviceTypes.find((devType) => devType === device.DeviceType)) return t('devices.device_type_not_found');
-      return t('devices.device_type_not_found');
     if (alreadyTested.find((testedDevice) => device.SerialNumber === testedDevice))
       return t('devices.duplicate_serial');
     return null;
@@ -127,11 +118,7 @@ const ImportDeviceTests = ({ devicesToTest, setPhase, setDevicesToImport }) => {
     const newLength = testResult?.newDevices?.length ?? -1;
     const unassignedLength = testResult?.foundNotAssigned?.length ?? -1;
     const assignedLength = testResult?.foundAssigned?.length ?? -1;
-    return (
+    return newLength > 0 || (unassignedLength > 0 && assignUnassigned) || (assignedLength > 0 && reassign);
-      newLength > 0 ||
-      (unassignedLength > 0 && assignUnassigned) ||
-      (assignedLength > 0 && reassign)
-    );
   };
 
   const startImport = () => {

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

@@ -94,12 +94,7 @@ const ImportDeviceCsvModal = ({ refresh, deviceClass, parent }) => {
   const getButton = () => {
     if (breakpoint !== 'base' && breakpoint !== 'sm') {
       return (
-        <Button
+        <Button ml={2} colorScheme="blue" onClick={openModal} rightIcon={<UploadSimple size={20} />}>
-          ml={2}
-          colorScheme="blue"
-          onClick={openModal}
-          rightIcon={<UploadSimple size={20} />}
-        >
           {t('devices.import_batch_tags')}
         </Button>
       );
@@ -107,12 +102,7 @@ const ImportDeviceCsvModal = ({ refresh, deviceClass, parent }) => {
 
     return (
       <Tooltip label={t('devices.import_batch_tags')}>
-        <IconButton
+        <IconButton ml={2} colorScheme="blue" onClick={openModal} icon={<UploadSimple size={20} />} />
-          ml={2}
-          colorScheme="blue"
-          onClick={openModal}
-          icon={<UploadSimple size={20} />}
-        />
       </Tooltip>
     );
   };
@@ -130,17 +120,10 @@ const ImportDeviceCsvModal = ({ refresh, deviceClass, parent }) => {
       <Modal onClose={closeModal} isOpen={isOpen} size="xl">
         <ModalOverlay />
         <ModalContent maxWidth={{ sm: '600px', md: '700px', lg: '800px', xl: '50%' }}>
-          <ModalHeader
+          <ModalHeader title={t('devices.import_batch_tags')} right={<CloseButton ml={2} onClick={closeModal} />} />
-            title={t('devices.import_batch_tags')}
-            right={<CloseButton ml={2} onClick={closeModal} />}
-          />
           <ModalBody>{getPhase()}</ModalBody>
         </ModalContent>
-        <ConfirmCloseAlert
+        <ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
-          isOpen={showConfirm}
-          confirm={closeCancelAndForm}
-          cancel={closeConfirm}
-        />
       </Modal>
     </>
   );

src/components/Tables/InventoryTable/index.js

@@ -57,10 +57,7 @@ const InventoryTable = ({
     pageInfo,
     tagSelect,
     owner,
-    enabled:
+    enabled: (!isManual && pageInfo !== null) || (isManual && tagSelect?.length > 0) || (isManual && owner !== null),
-      (!isManual && pageInfo !== null) ||
-      (isManual && tagSelect?.length > 0) ||
-      (isManual && owner !== null),
   });
 
   const deviceActions = useCallback(
@@ -77,8 +74,7 @@ const InventoryTable = ({
                 icon={<Plus size={20} />}
                 size="sm"
                 isDisabled={serialsToDisable.find(
-                  (serial) =>
+                  (serial) => serial === cell.row.values.serialNumber || serial === cell.row.original.id,
-                    serial === cell.row.values.serialNumber || serial === cell.row.original.id,
                 )}
                 onClick={() => addAction(cell.row.values.serialNumber)}
               />
@@ -91,9 +87,7 @@ const InventoryTable = ({
                 colorScheme="blue"
                 icon={<Trash size={20} />}
                 size="sm"
-                isDisabled={serialsToDisable.find(
+                isDisabled={serialsToDisable.find((serial) => serial === cell.row.values.serialNumber)}
-                  (serial) => serial === cell.row.values.serialNumber,
-                )}
                 onClick={() => removeAction(cell.row.values.serialNumber)}
               />
             </Tooltip>

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

@@ -208,11 +208,7 @@ const AssignLocationModal = ({ entityId, alreadyClaimed }) => {
             </Box>
           </ModalBody>
         </ModalContent>
-        <ConfirmCloseAlert
+        <ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
-          isOpen={showConfirm}
-          confirm={closeCancelAndForm}
-          cancel={closeConfirm}
-        />
       </Modal>
     </>
   );

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

@@ -143,19 +143,8 @@ const CreateLocationForm = ({ isOpen, onClose, refresh, formRef, entityId }) =>
       {({ errors, touched, setFieldValue }) => (
         <Form>
           <SimpleGrid minChildWidth="300px" spacing="20px" mb={8}>
-            <StringField
+            <StringField name="name" label={t('common.name')} errors={errors} touched={touched} isRequired />
-              name="name"
+            <StringField name="description" label={t('common.description')} errors={errors} touched={touched} />
-              label={t('common.name')}
-              errors={errors}
-              touched={touched}
-              isRequired
-            />
-            <StringField
-              name="description"
-              label={t('common.description')}
-              errors={errors}
-              touched={touched}
-            />
             <SelectWithSearchField
               name="entity"
               label={t('inventory.parent')}
@@ -204,11 +193,7 @@ const CreateLocationForm = ({ isOpen, onClose, refresh, formRef, entityId }) =>
             />
           </SimpleGrid>
 
-          <AddressSearchField
+          <AddressSearchField placeholder={t('common.address_search_autofill')} maxWidth="600px" mb={2} />
-            placeholder={t('common.address_search_autofill')}
-            maxWidth="600px"
-            mb={2}
-          />
           <SimpleGrid minChildWidth="300px" spacing="20px" mb={8}>
             <StringField
               name="addressLineOne"
@@ -223,27 +208,9 @@ const CreateLocationForm = ({ isOpen, onClose, refresh, formRef, entityId }) =>
               errors={errors}
               touched={touched}
             />
-            <StringField
+            <StringField name="city" label={t('locations.city')} errors={errors} touched={touched} isRequired />
-              name="city"
+            <StringField name="state" label={t('locations.state')} errors={errors} touched={touched} isRequired />
-              label={t('locations.city')}
+            <StringField name="postal" label={t('locations.postal')} errors={errors} touched={touched} isRequired />
-              errors={errors}
-              touched={touched}
-              isRequired
-            />
-            <StringField
-              name="state"
-              label={t('locations.state')}
-              errors={errors}
-              touched={touched}
-              isRequired
-            />
-            <StringField
-              name="postal"
-              label={t('locations.postal')}
-              errors={errors}
-              touched={touched}
-              isRequired
-            />
             <SelectField
               name="country"
               label={t('locations.country')}
@@ -251,18 +218,8 @@ const CreateLocationForm = ({ isOpen, onClose, refresh, formRef, entityId }) =>
               touched={touched}
               options={COUNTRY_LIST}
             />
-            <StringField
+            <StringField name="buildingName" label={t('locations.building_name')} errors={errors} touched={touched} />
-              name="buildingName"
+            <StringField name="geoCode" label={t('locations.geocode')} errors={errors} touched={touched} />
-              label={t('locations.building_name')}
-              errors={errors}
-              touched={touched}
-            />
-            <StringField
-              name="geoCode"
-              label={t('locations.geocode')}
-              errors={errors}
-              touched={touched}
-            />
             <StringField name="note" label={t('common.note')} errors={errors} touched={touched} />
           </SimpleGrid>
         </Form>

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

@@ -1,13 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import {
+import { Button, useDisclosure, Modal, ModalOverlay, ModalContent, ModalBody } from '@chakra-ui/react';
-  Button,
-  useDisclosure,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalBody,
-} from '@chakra-ui/react';
 import { AddIcon } from '@chakra-ui/icons';
 import { useTranslation } from 'react-i18next';
 import ConfirmCloseAlert from 'components/ConfirmCloseAlert';
@@ -92,11 +85,7 @@ const CreateLocationModal = ({ refresh, entityId }) => {
             />
           </ModalBody>
         </ModalContent>
-        <ConfirmCloseAlert
+        <ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
-          isOpen={showConfirm}
-          confirm={closeCancelAndForm}
-          cancel={closeConfirm}
-        />
       </Modal>
     </>
   );

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

@@ -132,17 +132,8 @@ const EditLocationForm = ({ editing, isOpen, onClose, refresh, location, formRef
             <TabPanel>
               <Form>
                 <SimpleGrid minChildWidth="300px" spacing="20px" mb={8}>
-                  <StringField
+                  <StringField name="name" label={t('common.name')} isRequired isDisabled={!editing} />
-                    name="name"
+                  <StringField name="description" label={t('common.description')} isDisabled={!editing} />
-                    label={t('common.name')}
-                    isRequired
-                    isDisabled={!editing}
-                  />
-                  <StringField
-                    name="description"
-                    label={t('common.description')}
-                    isDisabled={!editing}
-                  />
                   <SelectWithSearchField
                     name="entity"
                     label={t('inventory.parent')}
@@ -196,53 +187,24 @@ const EditLocationForm = ({ editing, isOpen, onClose, refresh, location, formRef
                     isRequired
                     isDisabled={!editing}
                   />
-                  <StringField
+                  <StringField name="addressLineTwo" label={t('locations.address_line_two')} isDisabled={!editing} />
-                    name="addressLineTwo"
+                  <StringField name="city" label={t('locations.city')} isRequired isDisabled={!editing} />
-                    label={t('locations.address_line_two')}
+                  <StringField name="state" label={t('locations.state')} isRequired isDisabled={!editing} />
-                    isDisabled={!editing}
+                  <StringField name="postal" label={t('locations.postal')} isRequired isDisabled={!editing} />
-                  />
-                  <StringField
-                    name="city"
-                    label={t('locations.city')}
-                    isRequired
-                    isDisabled={!editing}
-                  />
-                  <StringField
-                    name="state"
-                    label={t('locations.state')}
-                    isRequired
-                    isDisabled={!editing}
-                  />
-                  <StringField
-                    name="postal"
-                    label={t('locations.postal')}
-                    isRequired
-                    isDisabled={!editing}
-                  />
                   <SelectField
                     name="country"
                     label={t('locations.country')}
                     options={COUNTRY_LIST}
                     isDisabled={!editing}
                   />
-                  <StringField
+                  <StringField name="buildingName" label={t('locations.building_name')} isDisabled={!editing} />
-                    name="buildingName"
+                  <StringField name="geoCode" label={t('locations.geocode')} isDisabled={!editing} />
-                    label={t('locations.building_name')}
-                    isDisabled={!editing}
-                  />
-                  <StringField
-                    name="geoCode"
-                    label={t('locations.geocode')}
-                    isDisabled={!editing}
-                  />
                 </SimpleGrid>
               </Form>
             </TabPanel>
             <TabPanel>
               <Field name="notes">
-                {({ field }) => (
+                {({ field }) => <NotesTable notes={field.value} setNotes={setFieldValue} isDisabled={!editing} />}
-                  <NotesTable notes={field.value} setNotes={setFieldValue} isDisabled={!editing} />
-                )}
               </Field>
             </TabPanel>
           </TabPanels>

src/components/Tables/LocationTable/index.js

@@ -25,10 +25,7 @@ const LocationTable = ({ actions, select, refreshId, ignoredColumns, disabledIds
   const toast = useToast();
   const { data: venues, isFetching, refetch } = useGetSelectLocations({ t, toast, select });
 
-  const memoizedDate = useCallback(
+  const memoizedDate = useCallback((cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />, []);
-    (cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
-    [],
-  );
 
   // Columns array. This array contains your table headings and accessors which maps keys from data array
   const columns = React.useMemo(() => {

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

@@ -77,11 +77,7 @@ const CreateVenueModal = ({ parentId, entityId, isDisabled }) => {
             />
           </ModalBody>
         </ModalContent>
-        <ConfirmCloseAlert
+        <ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
-          isOpen={showConfirm}
-          confirm={closeCancelAndForm}
-          cancel={closeConfirm}
-        />
       </Modal>
     </>
   );

src/components/Tables/VenueTable/index.js

@@ -17,10 +17,7 @@ const VenueTable = ({ actions, select }) => {
   const toast = useToast();
   const { data: venues, isFetching } = useGetSelectVenues({ t, toast, select });
 
-  const memoizedDate = useCallback(
+  const memoizedDate = useCallback((cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />, []);
-    (cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
-    [],
-  );
 
   // Columns array. This array contains your table headings and accessors which maps keys from data array
   const columns = React.useMemo(() => {

src/components/VerifyNumberModal/index.js

@@ -121,11 +121,7 @@ const VerifyNumberModal = ({ isOpen, cancel, phoneNumber }) => {
             <Button ref={cancelRef} onClick={cancel} mr={4}>
               {t('common.cancel')}
             </Button>
-            <Button
+            <Button colorScheme="blue" isLoading={sendPhoneTest.isLoading} onClick={handleSendClick}>
-              colorScheme="blue"
-              isLoading={sendPhoneTest.isLoading}
-              onClick={handleSendClick}
-            >
               {t('account.resend')}
             </Button>
           </AlertDialogFooter>

src/constants/formSchemas.js

@@ -95,8 +95,7 @@ export const CreateCertificateSchema = (t) =>
 
               const splitPort = v.split(':');
 
-              if ((splitPort.length === 2 && splitPort[1] < 1) || splitPort[1] > 65535)
+              if ((splitPort.length === 2 && splitPort[1] < 1) || splitPort[1] > 65535) return false;
-                return false;
             }
             return true;
           }),
@@ -175,10 +174,7 @@ export const BatchSchema = (t) =>
     redirector: Yup.string().required(t('form.required')),
     manufacturer: Yup.string().required(t('form.required')),
     model: Yup.string().required(t('form.required')),
-    commonNames: Yup.array()
+    commonNames: Yup.array().of(Yup.string()).required(t('form.required')).min(1, t('batch.need_devices')),
-      .of(Yup.string())
-      .required(t('form.required'))
-      .min(1, t('batch.need_devices')),
     note: Yup.string(),
   });
 
@@ -204,10 +200,7 @@ export const CreateConfigurationSchema = (t) =>
   Yup.object().shape({
     name: Yup.string().required(t('form.required')),
     rrm: Yup.string().required(t('form.required')),
-    deviceTypes: Yup.array()
+    deviceTypes: Yup.array().of(Yup.string()).required(t('form.required')).min(1, t('form.required')),
-      .of(Yup.string())
-      .required(t('form.required'))
-      .min(1, t('form.required')),
     description: Yup.string(),
     entity: Yup.string().required(t('form.required')),
     note: Yup.string(),

src/contexts/AuthProvider/index.js

@@ -1,15 +1,7 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
-import {
+import { axiosAnalytics, axiosFms, axiosGw, axiosOwls, axiosProv, axiosSec, axiosSub } from 'utils/axiosInstances';
-  axiosAnalytics,
-  axiosFms,
-  axiosGw,
-  axiosOwls,
-  axiosProv,
-  axiosSec,
-  axiosSub,
-} from 'utils/axiosInstances';
 import { useToast } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { useGetEndpoints } from 'hooks/Network/Endpoints';
@@ -23,13 +15,10 @@ const deleteToken = async (currentToken) =>
     .then(() => true)
     .catch(() => false);
 
-const getAvatar = async (id, cache) =>
+const getAvatar = async (id, cache) => axiosSec.get(`avatar/${id}?cache=${cache}`, { responseType: 'arraybuffer' });
-  axiosSec.get(`avatar/${id}?cache=${cache}`, { responseType: 'arraybuffer' });
 
 const getConfigDescriptions = async (baseUrl) =>
-  axios
+  axios.get(`${baseUrl.split('/api')[0]}/wwwassets/ucentral.schema.pretty.json`).then(({ data }) => data.$defs);
-    .get(`${baseUrl.split('/api')[0]}/wwwassets/ucentral.schema.pretty.json`)
-    .then(({ data }) => data.$defs);
 const getUser = async () => axiosSec.get('oauth2?me=true').then(({ data }) => data);
 
 const getPreferences = async () => axiosSec.get('preferences').then(({ data }) => data);
@@ -105,13 +94,9 @@ export const AuthProvider = ({ token, children }) => {
       enabled: !!userId,
     },
   );
-  const { data: avatar } = useQuery(
+  const { data: avatar } = useQuery(['get-user-avatar', userId, userAvatar], () => getAvatar(userId, userAvatar), {
-    ['get-user-avatar', userId, userAvatar],
+    enabled: userAvatar !== '' && userAvatar !== '0',
-    () => getAvatar(userId, userAvatar),
+  });
-    {
-      enabled: userAvatar !== '' && userAvatar !== '0',
-    },
-  );
   const updatePreferences = useMutation((newPrefs) => putPreferences(newPrefs), {
     onSuccess: (data) => {
       queryClient.setQueryData(['get-preferences', userId], data.data);
@@ -181,10 +166,7 @@ export const AuthProvider = ({ token, children }) => {
     () => ({
       avatar: avatar?.data
         ? `data:;base64,${btoa(
-            new Uint8Array(avatar.data).reduce(
+            new Uint8Array(avatar.data).reduce((data, byte) => data + String.fromCharCode(byte), ''),
-              (data, byte) => data + String.fromCharCode(byte),
-              '',
-            ),
           )}`
         : '',
       refetchUser,

src/hooks/Network/Configurations.js

@@ -5,9 +5,7 @@ export const useGetConfigurations = ({ t, toast }) =>
   useQuery(
     ['get-configurations'],
     () =>
-      axiosProv
+      axiosProv.get('configurations?withExtendedInfo=true&offset=0, limit=500').then(({ data }) => data.configurations),
-        .get('configurations?withExtendedInfo=true&offset=0, limit=500')
-        .then(({ data }) => data.configurations),
     {
       staleTime: 200 * 1000,
       onError: (e) => {
@@ -131,10 +129,7 @@ export const useGetConfigurationInUse = ({ t, toast, id, enabled }) =>
 export const useGetConfigurationAffected = ({ t, toast, id, enabled }) =>
   useQuery(
     ['get-config-affected', id],
-    () =>
+    () => axiosProv.get(`/configurations/${id}?computedAffected=true`).then(({ data }) => data.affectedDevices),
-      axiosProv
-        .get(`/configurations/${id}?computedAffected=true`)
-        .then(({ data }) => data.affectedDevices),
     {
       enabled,
       onError: (e) => {
@@ -154,8 +149,7 @@ export const useGetConfigurationAffected = ({ t, toast, id, enabled }) =>
     },
   );
 
-export const useDeleteConfiguration = () =>
+export const useDeleteConfiguration = () => useMutation((id) => axiosProv.delete(`configurations/${id}`));
-  useMutation((id) => axiosProv.delete(`configurations/${id}`));
 
 export const useUpdateConfiguration = ({ id }) =>
   useMutation((newConf) => axiosProv.put(`configurations/${id}`, newConf));

src/hooks/Network/Contacts.js

@@ -2,40 +2,32 @@ import { useMutation, useQuery } from 'react-query';
 import { axiosProv } from 'utils/axiosInstances';
 
 export const useGetContactCount = ({ t, toast, enabled }) =>
-  useQuery(
+  useQuery(['get-contact-count'], () => axiosProv.get('contact?countOnly=true').then(({ data }) => data.count), {
-    ['get-contact-count'],
+    enabled,
-    () => axiosProv.get('contact?countOnly=true').then(({ data }) => data.count),
+    staleTime: 30000,
-    {
+    onError: (e) => {
-      enabled,
+      if (!toast.isActive('contact-count-fetching-error'))
-      staleTime: 30000,
+        toast({
-      onError: (e) => {
+          id: 'contact-count-fetching-error',
-        if (!toast.isActive('contact-count-fetching-error'))
+          title: t('common.error'),
-          toast({
+          description: t('crud.error_fetching_obj', {
-            id: 'contact-count-fetching-error',
+            obj: t('contacts.other'),
-            title: t('common.error'),
+            e: e?.response?.data?.ErrorDescription,
-            description: t('crud.error_fetching_obj', {
+          }),
-              obj: t('contacts.other'),
+          status: 'error',
-              e: e?.response?.data?.ErrorDescription,
+          duration: 5000,
-            }),
+          isClosable: true,
-            status: 'error',
+          position: 'top-right',
-            duration: 5000,
+        });
-            isClosable: true,
-            position: 'top-right',
-          });
-      },
     },
-  );
+  });
 
 export const useGetContacts = ({ t, toast, pageInfo, enabled, count }) =>
   useQuery(
     ['get-contacts-with-pagination', pageInfo, count],
     () =>
       axiosProv
-        .get(
+        .get(`contact?withExtendedInfo=true&limit=${pageInfo.limit}&offset=${pageInfo.limit * pageInfo.index}`)
-          `contact?withExtendedInfo=true&limit=${pageInfo.limit}&offset=${
-            pageInfo.limit * pageInfo.index
-          }`,
-        )
         .then(({ data }) => data.contacts),
     {
       keepPreviousData: true,
@@ -65,9 +57,7 @@ export const useGetSelectContacts = ({ t, toast, select }) =>
     () =>
       select.length === 0
         ? []
-        : axiosProv
+        : axiosProv.get(`contact?withExtendedInfo=true&select=${select}`).then(({ data }) => data.contacts),
-            .get(`contact?withExtendedInfo=true&select=${select}`)
-            .then(({ data }) => data.contacts),
     {
       staleTime: 100 * 1000,
       onError: (e) => {
@@ -91,10 +81,7 @@ export const useGetSelectContacts = ({ t, toast, select }) =>
 export const useGetAllContacts = ({ t, toast }) =>
   useQuery(
     ['get-all-contacts'],
-    () =>
+    () => axiosProv.get(`contact?withExtendedInfo=true&limit=500&offset=0`).then(({ data }) => data.contacts),
-      axiosProv
-        .get(`contact?withExtendedInfo=true&limit=500&offset=0`)
-        .then(({ data }) => data.contacts),
     {
       staleTime: 1000 * 1000,
       onError: (e) => {
@@ -135,11 +122,9 @@ export const useGetContact = ({ t, toast, enabled, id }) =>
     },
   });
 
-export const useCreateContact = () =>
+export const useCreateContact = () => useMutation((newContact) => axiosProv.post('contact/0', newContact));
-  useMutation((newContact) => axiosProv.post('contact/0', newContact));
 
-export const useUpdateContact = ({ id }) =>
+export const useUpdateContact = ({ id }) => useMutation((newContact) => axiosProv.put(`contact/${id}`, newContact));
-  useMutation((newContact) => axiosProv.put(`contact/${id}`, newContact));
 
 const claimContacts = async (contactIds, entity, venue) => {
   const addPromises = contactIds.map(async (id) =>

src/hooks/Network/DeviceTypes.js

@@ -2,12 +2,8 @@ import { useQuery } from 'react-query';
 import { axiosFms } from 'utils/axiosInstances';
 
 const useGetDeviceTypes = () =>
-  useQuery(
+  useQuery(['get-device-types'], () => axiosFms.get('/firmwares?deviceSet=true').then(({ data }) => data.deviceTypes), {
-    ['get-device-types'],
+    staleTime: Infinity,
-    () => axiosFms.get('/firmwares?deviceSet=true').then(({ data }) => data.deviceTypes),
+  });
-    {
-      staleTime: Infinity,
-    },
-  );
 
 export default useGetDeviceTypes;

src/hooks/Network/Endpoints.js

@@ -2,27 +2,23 @@ import { useQuery } from 'react-query';
 import { axiosGw, axiosSec } from 'utils/axiosInstances';
 
 export const useGetEndpoints = ({ t, toast, onSuccess }) =>
-  useQuery(
+  useQuery(['get-endpoints'], () => axiosSec.get('systemEndpoints').then(({ data }) => data.endpoints), {
-    ['get-endpoints'],
+    enabled: false,
-    () => axiosSec.get('systemEndpoints').then(({ data }) => data.endpoints),
+    staleTime: Infinity,
-    {
+    onSuccess,
-      enabled: false,
+    onError: (e) => {
-      staleTime: Infinity,
+      if (!toast.isActive('endpoints-fetching-error'))
-      onSuccess,
+        toast({
-      onError: (e) => {
+          id: 'user-fetching-error',
-        if (!toast.isActive('endpoints-fetching-error'))
+          title: t('common.error'),
-          toast({
+          description: t('user.error_fetching', { e: e?.response?.data?.ErrorDescription }),
-            id: 'user-fetching-error',
+          status: 'error',
-            title: t('common.error'),
+          duration: 5000,
-            description: t('user.error_fetching', { e: e?.response?.data?.ErrorDescription }),
+          isClosable: true,
-            status: 'error',
+          position: 'top-right',
-            duration: 5000,
+        });
-            isClosable: true,
-            position: 'top-right',
-          });
-      },
     },
-  );
+  });
 
 export const useGetGatewayUi = () =>
   useQuery(['get-gw-ui'], () => axiosGw.get('system?command=info').then(({ data }) => data.UI), {

src/hooks/Network/Entity.js

@@ -4,10 +4,7 @@ import { axiosProv } from 'utils/axiosInstances';
 export const useGetEntities = ({ t, toast }) =>
   useQuery(
     ['get-entities'],
-    () =>
+    () => axiosProv.get('entity?withExtendedInfo=true&offset=0&limit=500').then(({ data }) => data.entities),
-      axiosProv
-        .get('entity?withExtendedInfo=true&offset=0&limit=500')
-        .then(({ data }) => data.entities),
     {
       staleTime: 30000,
       onError: (e) => {
@@ -34,9 +31,7 @@ export const useGetSelectEntities = ({ t, toast, select }) =>
     () =>
       select.length === 0
         ? []
-        : axiosProv
+        : axiosProv.get(`entity?withExtendedInfo=true&select=${select}`).then(({ data }) => data.entities),
-            .get(`entity?withExtendedInfo=true&select=${select}`)
-            .then(({ data }) => data.entities),
     {
       staleTime: 100 * 1000,
       onError: (e) => {
@@ -58,32 +53,27 @@ export const useGetSelectEntities = ({ t, toast, select }) =>
   );
 
 export const useGetEntity = ({ t, toast, id = null }) =>
-  useQuery(
+  useQuery(['get-entity', id], () => axiosProv.get(`entity/${id}?withExtendedInfo=true`).then(({ data }) => data), {
-    ['get-entity', id],
+    enabled: id !== null,
-    () => axiosProv.get(`entity/${id}?withExtendedInfo=true`).then(({ data }) => data),
+    onError: (e) => {
-    {
+      if (!toast.isActive('entity-fetching-error'))
-      enabled: id !== null,
+        toast({
-      onError: (e) => {
+          id: 'subscribers-fetching-error',
-        if (!toast.isActive('entity-fetching-error'))
+          title: t('common.error'),
-          toast({
+          description: t('crud.error_fetching_obj', {
-            id: 'subscribers-fetching-error',
+            obj: t('entities.one'),
-            title: t('common.error'),
+            e: e?.response?.data?.ErrorDescription,
-            description: t('crud.error_fetching_obj', {
+          }),
-              obj: t('entities.one'),
+          status: 'error',
-              e: e?.response?.data?.ErrorDescription,
+          duration: 5000,
-            }),
+          isClosable: true,
-            status: 'error',
+          position: 'top-right',
-            duration: 5000,
+        });
-            isClosable: true,
-            position: 'top-right',
-          });
-      },
     },
-  );
+  });
 
 export const useCreateEntity = () => useMutation((newEnt) => axiosProv.post('entity/0', newEnt));
 
-export const useUpdateEntity = ({ id }) =>
+export const useUpdateEntity = ({ id }) => useMutation((newEnt) => axiosProv.put(`entity/${id}`, newEnt));
-  useMutation((newEnt) => axiosProv.put(`entity/${id}`, newEnt));
 
 export const useDeleteEntity = () => useMutation((id) => axiosProv.delete(`entity/${id}`));

src/hooks/Network/EntityTree.js

@@ -2,26 +2,22 @@ import { useQuery } from 'react-query';
 import { axiosProv, axiosSec } from 'utils/axiosInstances';
 
 export default ({ t, toast }) =>
-  useQuery(
+  useQuery(['get-entity-tree'], () => axiosProv.get('entity?getTree=true').then(({ data }) => data), {
-    ['get-entity-tree'],
+    enabled: axiosProv.defaults.baseURL !== axiosSec.defaults.baseURL,
-    () => axiosProv.get('entity?getTree=true').then(({ data }) => data),
+    staleTime: 3600 * 1000,
-    {
+    onError: (e) => {
-      enabled: axiosProv.defaults.baseURL !== axiosSec.defaults.baseURL,
+      if (!toast.isActive('entity-tree-fetching-error'))
-      staleTime: 3600 * 1000,
+        toast({
-      onError: (e) => {
+          id: 'subscribers-fetching-error',
-        if (!toast.isActive('entity-tree-fetching-error'))
+          title: t('common.error'),
-          toast({
+          description: t('crud.error_fetching_obj', {
-            id: 'subscribers-fetching-error',
+            obj: t('entities.tree'),
-            title: t('common.error'),
+            e: e?.response?.data?.ErrorDescription,
-            description: t('crud.error_fetching_obj', {
+          }),
-              obj: t('entities.tree'),
+          status: 'error',
-              e: e?.response?.data?.ErrorDescription,
+          duration: 5000,
-            }),
+          isClosable: true,
-            status: 'error',
+          position: 'top-right',
-            duration: 5000,
+        });
-            isClosable: true,
-            position: 'top-right',
-          });
-      },
     },
-  );
+  });

src/hooks/Network/Inventory.js

@@ -44,9 +44,7 @@ export const useGetInventoryTags = ({
       ['get-inventory-with-select', tagSelect],
       () =>
         tagSelect.length > 0
-          ? axiosProv
+          ? axiosProv.get(`inventory?withExtendedInfo=true&select=${tagSelect}`).then(({ data }) => data.taglist)
-              .get(`inventory?withExtendedInfo=true&select=${tagSelect}`)
-              .then(({ data }) => data.taglist)
           : [],
       {
         enabled,
@@ -73,10 +71,7 @@ export const useGetInventoryTags = ({
   if (owner !== undefined && owner !== null) {
     return useQuery(
       ['get-inventory-with-owner', owner],
-      () =>
+      () => axiosProv.get(`inventory?serialOnly=true&subscriber=${owner}`).then(({ data }) => data.serialNumbers),
-        axiosProv
-          .get(`inventory?serialOnly=true&subscriber=${owner}`)
-          .then(({ data }) => data.serialNumbers),
       {
         enabled,
         onError: (e) => {
@@ -158,8 +153,7 @@ export const useGetTag = ({ t, toast, enabled, serialNumber }) =>
 export const useGetComputedConfiguration = ({ t, toast, enabled, serialNumber }) =>
   useQuery(
     ['get-tag-computed-configuration', serialNumber],
-    () =>
+    () => axiosProv.get(`inventory/${serialNumber}?config=true&explain=true`).then(({ data }) => data),
-      axiosProv.get(`inventory/${serialNumber}?config=true&explain=true`).then(({ data }) => data),
     {
       enabled,
       onError: (e) => {
@@ -183,8 +177,7 @@ export const useGetComputedConfiguration = ({ t, toast, enabled, serialNumber })
 export const usePushConfig = ({ t, toast, onSuccess }) =>
   useMutation(
     ['apply-tag-configuration'],
-    (serialNumber) =>
+    (serialNumber) => axiosProv.get(`inventory/${serialNumber}?applyConfiguration=true`).then(({ data }) => data),
-      axiosProv.get(`inventory/${serialNumber}?applyConfiguration=true`).then(({ data }) => data),
     {
       onSuccess,
       onError: (e) => {
@@ -227,9 +220,7 @@ const claimDevices = async (serialNumbers, entity, isVenue) => {
   );
 
   const unassignResults = await Promise.all(unassignPromises);
-  const unassignErrors = await unassignResults
+  const unassignErrors = await unassignResults.filter((res) => res.error).map((res) => res.serialNumber);
-    .filter((res) => res.error)
-    .map((res) => res.serialNumber);
 
   const claimResults = await Promise.all(addPromises);
   const claimErrors = claimResults.filter((res) => res.error).map((res) => res.serialNumber);

src/hooks/Network/Locations.js

@@ -2,40 +2,32 @@ import { useMutation, useQuery } from 'react-query';
 import { axiosProv } from 'utils/axiosInstances';
 
 export const useGetLocationCount = ({ t, toast, enabled }) =>
-  useQuery(
+  useQuery(['get-location-count'], () => axiosProv.get('location?countOnly=true').then(({ data }) => data.count), {
-    ['get-location-count'],
+    enabled,
-    () => axiosProv.get('location?countOnly=true').then(({ data }) => data.count),
+    staleTime: 30000,
-    {
+    onError: (e) => {
-      enabled,
+      if (!toast.isActive('location-count-fetching-error'))
-      staleTime: 30000,
+        toast({
-      onError: (e) => {
+          id: 'location-count-fetching-error',
-        if (!toast.isActive('location-count-fetching-error'))
+          title: t('common.error'),
-          toast({
+          description: t('crud.error_fetching_obj', {
-            id: 'location-count-fetching-error',
+            obj: t('locations.other'),
-            title: t('common.error'),
+            e: e?.response?.data?.ErrorDescription,
-            description: t('crud.error_fetching_obj', {
+          }),
-              obj: t('locations.other'),
+          status: 'error',
-              e: e?.response?.data?.ErrorDescription,
+          duration: 5000,
-            }),
+          isClosable: true,
-            status: 'error',
+          position: 'top-right',
-            duration: 5000,
+        });
-            isClosable: true,
-            position: 'top-right',
-          });
-      },
     },
-  );
+  });
 
 export const useGetLocations = ({ t, toast, pageInfo, enabled, count }) =>
   useQuery(
     ['get-locations-with-pagination', pageInfo, count],
     () =>
       axiosProv
-        .get(
+        .get(`location?withExtendedInfo=true&limit=${pageInfo.limit}&offset=${pageInfo.limit * pageInfo.index}`)
-          `location?withExtendedInfo=true&limit=${pageInfo.limit}&offset=${
-            pageInfo.limit * pageInfo.index
-          }`,
-        )
         .then(({ data }) => data.locations),
     {
       keepPreviousData: true,
@@ -65,9 +57,7 @@ export const useGetSelectLocations = ({ t, toast, select, enabled = true }) =>
     () =>
       select.length === 0
         ? []
-        : axiosProv
+        : axiosProv.get(`location?withExtendedInfo=true&select=${select}`).then(({ data }) => data.locations),
-            .get(`location?withExtendedInfo=true&select=${select}`)
-            .then(({ data }) => data.locations),
     {
       enabled,
       staleTime: 100 * 1000,
@@ -94,13 +84,7 @@ export const useGetAllLocations = ({ t, toast, venueId }) =>
     ['get-all-locations', venueId],
     () =>
       axiosProv
-        .get(
+        .get(`${venueId ? `venue?locationsForVenue=${venueId}` : 'location?withExtendedInfo=true&limit=500&offset=0'}`)
-          `${
-            venueId
-              ? `venue?locationsForVenue=${venueId}`
-              : 'location?withExtendedInfo=true&limit=500&offset=0'
-          }`,
-        )
         .then(({ data }) => data.locations),
     {
       staleTime: 1000 * 1000,
@@ -142,11 +126,9 @@ export const useGetLocation = ({ t, toast, enabled, id }) =>
     },
   });
 
-export const useCreateLocation = () =>
+export const useCreateLocation = () => useMutation((newLocation) => axiosProv.post('location/0', newLocation));
-  useMutation((newLocation) => axiosProv.post('location/0', newLocation));
 
-export const useUpdateLocation = ({ id }) =>
+export const useUpdateLocation = ({ id }) => useMutation((newLocation) => axiosProv.put(`location/${id}`, newLocation));
-  useMutation((newLocation) => axiosProv.put(`location/${id}`, newLocation));
 
 const claimLocations = async (locationIds, entity) => {
   const addPromises = locationIds.map(async (id) =>
@@ -166,5 +148,4 @@ const claimLocations = async (locationIds, entity) => {
   return { claimErrors };
 };
 
-export const useClaimLocations = ({ entityId }) =>
+export const useClaimLocations = ({ entityId }) => useMutation((locationIds) => claimLocations(locationIds, entityId));
-  useMutation((locationIds) => claimLocations(locationIds, entityId));

src/hooks/Network/Requirements.js

@@ -2,12 +2,8 @@ import { useQuery } from 'react-query';
 import { axiosSec } from 'utils/axiosInstances';
 
 const useGetRequirements = () =>
-  useQuery(
+  useQuery(['get-requirements'], () => axiosSec.post('oauth2?requirements=true', {}).then(({ data }) => data), {
-    ['get-requirements'],
+    staleTime: Infinity,
-    () => axiosSec.post('oauth2?requirements=true', {}).then(({ data }) => data),
+  });
-    {
-      staleTime: Infinity,
-    },
-  );
 
 export default useGetRequirements;

src/hooks/Network/Resources.js

@@ -2,52 +2,44 @@ import { useMutation, useQuery } from 'react-query';
 import { axiosProv } from 'utils/axiosInstances';
 
 export const useGetResourcesCount = ({ t, toast }) =>
-  useQuery(
+  useQuery(['get-resources-count'], () => axiosProv.get(`variables?countOnly=true`).then(({ data }) => data.count), {
-    ['get-resources-count'],
+    staleTime: 30000,
-    () => axiosProv.get(`variables?countOnly=true`).then(({ data }) => data.count),
+    onError: (e) => {
-    {
+      if (!toast.isActive('variables-fetching-error'))
-      staleTime: 30000,
+        toast({
-      onError: (e) => {
+          id: 'variables-fetching-error',
-        if (!toast.isActive('variables-fetching-error'))
+          title: t('common.error'),
-          toast({
+          description: t('crud.error_fetching_obj', {
-            id: 'variables-fetching-error',
+            obj: t('resources.title'),
-            title: t('common.error'),
+            e: e?.response?.data?.ErrorDescription,
-            description: t('crud.error_fetching_obj', {
+          }),
-              obj: t('resources.title'),
+          status: 'error',
-              e: e?.response?.data?.ErrorDescription,
+          duration: 5000,
-            }),
+          isClosable: true,
-            status: 'error',
+          position: 'top-right',
-            duration: 5000,
+        });
-            isClosable: true,
-            position: 'top-right',
-          });
-      },
     },
-  );
+  });
 
 export const useGetAllResources = ({ t, toast }) =>
-  useQuery(
+  useQuery(['get-all-resources'], () => axiosProv.get(`variables?limit=500`).then(({ data }) => data.variableBlocks), {
-    ['get-all-resources'],
+    staleTime: 1000 * 1000,
-    () => axiosProv.get(`variables?limit=500`).then(({ data }) => data.variableBlocks),
+    onError: (e) => {
-    {
+      if (!toast.isActive('resource-fetching-error'))
-      staleTime: 1000 * 1000,
+        toast({
-      onError: (e) => {
+          id: 'resource-fetching-error',
-        if (!toast.isActive('resource-fetching-error'))
+          title: t('common.error'),
-          toast({
+          description: t('crud.error_fetching_obj', {
-            id: 'resource-fetching-error',
+            obj: t('resources.configuration_resource'),
-            title: t('common.error'),
+            e: e?.response?.data?.ErrorDescription,
-            description: t('crud.error_fetching_obj', {
+          }),
-              obj: t('resources.configuration_resource'),
+          status: 'error',
-              e: e?.response?.data?.ErrorDescription,
+          duration: 5000,
-            }),
+          isClosable: true,
-            status: 'error',
+          position: 'top-right',
-            duration: 5000,
+        });
-            isClosable: true,
-            position: 'top-right',
-          });
-      },
     },
-  );
+  });
 
 export const useGetResources = ({ t, toast, pageInfo, select, count }) => {
   if (select !== undefined && select !== null) {
@@ -55,9 +47,7 @@ export const useGetResources = ({ t, toast, pageInfo, select, count }) => {
       ['get-resources-with-select', select],
       () =>
         select.length > 0
-          ? axiosProv
+          ? axiosProv.get(`variables?withExtendedInfo=true&select=${select}`).then(({ data }) => data.variableBlocks)
-              .get(`variables?withExtendedInfo=true&select=${select}`)
-              .then(({ data }) => data.variableBlocks)
           : [],
       {
         keepPreviousData: true,
@@ -136,8 +126,6 @@ export const useGetResource = ({ t, toast, id, enabled }) =>
     },
   );
 
-export const useCreateResource = () =>
+export const useCreateResource = () => useMutation((newResource) => axiosProv.post('variables/0', newResource));
-  useMutation((newResource) => axiosProv.post('variables/0', newResource));
+export const useUpdateResource = (id) => useMutation((resource) => axiosProv.put(`variables/${id}`, resource));
-export const useUpdateResource = (id) =>
-  useMutation((resource) => axiosProv.put(`variables/${id}`, resource));
 export const useDeleteResource = () => useMutation((id) => axiosProv.delete(`variables/${id}`, {}));

src/hooks/Network/Subscribers.js

@@ -22,25 +22,21 @@ export const useGetSubscribers = ({ t, toast }) =>
   });
 
 export const useGetSubscriber = ({ t, toast, id, enabled }) =>
-  useQuery(
+  useQuery(['get-subscriber', id], () => axiosSec.get(`subuser/${id}?withExtendedInfo=true`).then(({ data }) => data), {
-    ['get-subscriber', id],
+    enabled,
-    () => axiosSec.get(`subuser/${id}?withExtendedInfo=true`).then(({ data }) => data),
+    onError: (e) => {
-    {
+      if (!toast.isActive('subscriber-fetching-error'))
-      enabled,
+        toast({
-      onError: (e) => {
+          id: 'subscriber-fetching-error',
-        if (!toast.isActive('subscriber-fetching-error'))
+          title: t('common.error'),
-          toast({
+          description: t('crud.error_fetching_obj', {
-            id: 'subscriber-fetching-error',
+            obj: t('subscribers.one'),
-            title: t('common.error'),
+            e: e?.response?.data?.ErrorDescription,
-            description: t('crud.error_fetching_obj', {
+          }),
-              obj: t('subscribers.one'),
+          status: 'error',
-              e: e?.response?.data?.ErrorDescription,
+          duration: 5000,
-            }),
+          isClosable: true,
-            status: 'error',
+          position: 'top-right',
-            duration: 5000,
+        });
-            isClosable: true,
-            position: 'top-right',
-          });
-      },
     },
-  );
+  });

src/hooks/Network/System.js

@@ -1,28 +1,24 @@
 import { useQuery } from 'react-query';
 
 export const useGetSystemInfo = ({ t, toast, axiosInstance, name }) =>
-  useQuery(
+  useQuery(['get-system-info', name], () => axiosInstance.get('/system?command=info').then(({ data }) => data), {
-    ['get-system-info', name],
+    staleTime: 60000,
-    () => axiosInstance.get('/system?command=info').then(({ data }) => data),
+    onError: (e) => {
-    {
+      if (!toast.isActive('system-fetching-error'))
-      staleTime: 60000,
+        toast({
-      onError: (e) => {
+          id: 'system-fetching-error',
-        if (!toast.isActive('system-fetching-error'))
+          title: t('common.error'),
-          toast({
+          description: t('crud.error_fetching_obj', {
-            id: 'system-fetching-error',
+            obj: t('system.title'),
-            title: t('common.error'),
+            e: e?.response?.data?.ErrorDescription,
-            description: t('crud.error_fetching_obj', {
+          }),
-              obj: t('system.title'),
+          status: 'error',
-              e: e?.response?.data?.ErrorDescription,
+          duration: 5000,
-            }),
+          isClosable: true,
-            status: 'error',
+          position: 'top-right',
-            duration: 5000,
+        });
-            isClosable: true,
-            position: 'top-right',
-          });
-      },
     },
-  );
+  });
 
 export const useGetSubsystems = ({ t, toast, enabled, axiosInstance, name }) =>
   useQuery(

src/hooks/Network/Users.js

@@ -21,10 +21,7 @@ export const useGetUsers = ({ t, toast, setUsersWithAvatars }) =>
         results.map((response) => {
           if (response.status === 'fulfilled' && response?.value !== '') {
             const base64 = btoa(
-              new Uint8Array(response.value.data).reduce(
+              new Uint8Array(response.value.data).reduce((respData, byte) => respData + String.fromCharCode(byte), ''),
-                (respData, byte) => respData + String.fromCharCode(byte),
-                '',
-              ),
             );
             return `data:;base64,${base64}`;
           }
@@ -53,25 +50,21 @@ export const useGetUsers = ({ t, toast, setUsersWithAvatars }) =>
   });
 
 export const useGetUser = ({ t, toast, id, enabled }) =>
-  useQuery(
+  useQuery(['get-user', id], () => axiosSec.get(`user/${id}?withExtendedInfo=true`).then(({ data }) => data), {
-    ['get-user', id],
+    enabled,
-    () => axiosSec.get(`user/${id}?withExtendedInfo=true`).then(({ data }) => data),
+    onError: (e) => {
-    {
+      if (!toast.isActive('user-fetching-error'))
-      enabled,
+        toast({
-      onError: (e) => {
+          id: 'user-fetching-error',
-        if (!toast.isActive('user-fetching-error'))
+          title: t('common.error'),
-          toast({
+          description: t('crud.error_fetching_obj', {
-            id: 'user-fetching-error',
+            obj: t('users.one'),
-            title: t('common.error'),
+            e: e?.response?.data?.ErrorDescription,
-            description: t('crud.error_fetching_obj', {
+          }),
-              obj: t('users.one'),
+          status: 'error',
-              e: e?.response?.data?.ErrorDescription,
+          duration: 5000,
-            }),
+          isClosable: true,
-            status: 'error',
+          position: 'top-right',
-            duration: 5000,
+        });
-            isClosable: true,
-            position: 'top-right',
-          });
-      },
     },
-  );
+  });

src/hooks/Network/Venues.js

@@ -4,10 +4,7 @@ import { axiosProv } from 'utils/axiosInstances';
 export const useGetVenues = ({ t, toast }) =>
   useQuery(
     ['get-venues'],
-    () =>
+    () => axiosProv.get('venue?withExtendedInfo=true&offset=0&limit=500').then(({ data }) => data.venues),
-      axiosProv
-        .get('venue?withExtendedInfo=true&offset=0&limit=500')
-        .then(({ data }) => data.venues),
     {
       staleTime: 30000,
       onError: (e) => {
@@ -34,9 +31,7 @@ export const useGetSelectVenues = ({ t, toast, select }) =>
     () =>
       select.length === 0
         ? []
-        : axiosProv
+        : axiosProv.get(`venue?withExtendedInfo=true&select=${select}`).then(({ data }) => data.venues),
-            .get(`venue?withExtendedInfo=true&select=${select}`)
-            .then(({ data }) => data.venues),
     {
       staleTime: 100 * 1000,
       onError: (e) => {
@@ -58,42 +53,32 @@ export const useGetSelectVenues = ({ t, toast, select }) =>
   );
 
 export const useGetVenue = ({ t, toast, id }) =>
-  useQuery(
+  useQuery(['get-venue', id], () => axiosProv.get(`venue/${id}?withExtendedInfo=true`).then(({ data }) => data), {
-    ['get-venue', id],
+    onError: (e) => {
-    () => axiosProv.get(`venue/${id}?withExtendedInfo=true`).then(({ data }) => data),
+      if (!toast.isActive('venue-fetching-error'))
-    {
+        toast({
-      onError: (e) => {
+          id: 'subscribers-fetching-error',
-        if (!toast.isActive('venue-fetching-error'))
+          title: t('common.error'),
-          toast({
+          description: t('crud.error_fetching_obj', {
-            id: 'subscribers-fetching-error',
+            obj: t('venues.one'),
-            title: t('common.error'),
+            e: e?.response?.data?.ErrorDescription,
-            description: t('crud.error_fetching_obj', {
+          }),
-              obj: t('venues.one'),
+          status: 'error',
-              e: e?.response?.data?.ErrorDescription,
+          duration: 5000,
-            }),
+          isClosable: true,
-            status: 'error',
+          position: 'top-right',
-            duration: 5000,
+        });
-            isClosable: true,
-            position: 'top-right',
-          });
-      },
     },
-  );
+  });
 
 export const useCreateVenue = () =>
   useMutation(({ params, createObjects }) =>
-    axiosProv.post(
+    axiosProv.post(`venue/0${createObjects ? `?createObjects=${JSON.stringify(createObjects)}` : ''}`, params),
-      `venue/0${createObjects ? `?createObjects=${JSON.stringify(createObjects)}` : ''}`,
-      params,
-    ),
   );
 
 export const useUpdateVenue = ({ id }) =>
   useMutation(({ params, createObjects }) =>
-    axiosProv.put(
+    axiosProv.put(`venue/${id}${createObjects ? `?createObjects=${JSON.stringify(createObjects)}` : ''}`, params),
-      `venue/${id}${createObjects ? `?createObjects=${JSON.stringify(createObjects)}` : ''}`,
-      params,
-    ),
   );
 
 export const useDeleteVenue = () => useMutation((id) => axiosProv.delete(`venue/${id}`));

src/layout/Navbar/index.js

@@ -39,8 +39,7 @@ const Navbar = ({ secondary, toggleSidebar, isSidebarOpen }) => {
   const { logout, user, avatar } = useAuth();
   const getActiveRoute = () => {
     const route = routes.find(
-      (r) =>
+      (r) => r.path === location.pathname || location.pathname.split('/')[1] === r.path.split('/')[1],
-        r.path === location.pathname || location.pathname.split('/')[1] === r.path.split('/')[1],
     );
 
     if (route) return route.navName ?? route.name;
@@ -64,10 +63,7 @@ const Navbar = ({ secondary, toggleSidebar, isSidebarOpen }) => {
     'linear-gradient(112.83deg, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0) 110.84%)',
   );
   const scrolledNavbarBorder = useColorModeValue('#FFFFFF', 'rgba(255, 255, 255, 0.31)');
-  const scrolledNavbarFilter = useColorModeValue(
+  const scrolledNavbarFilter = useColorModeValue('none', 'drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))');
-    'none',
-    'drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))',
-  );
 
   if (scrolled === true) {
     navbarPosition = 'fixed';
@@ -148,12 +144,7 @@ const Navbar = ({ secondary, toggleSidebar, isSidebarOpen }) => {
                 <Menu>
                   <MenuButton py={2} transition="all 0.3s" _focus={{ boxShadow: 'none' }}>
                     <HStack>
-                      <VStack
+                      <VStack display={{ base: 'none', md: 'flex' }} alignItems="flex-start" spacing={0} height={12}>
-                        display={{ base: 'none', md: 'flex' }}
-                        alignItems="flex-start"
-                        spacing={0}
-                        height={12}
-                      >
                         <Text fontWeight="bold">{user?.name}</Text>
                         <Text fontSize="sm">{`${uppercaseFirstLetter(user?.userRole)}`}</Text>
                       </VStack>

src/layout/Sidebar/CreateLinks.js

@@ -6,13 +6,7 @@ import NavLinkButton from './NavLinkButton';
 const createLinks = (routes, activeRoute, role, toggleSidebar = () => {}) =>
   routes.map((route) =>
     route.isEntity ? (
-      <EntityNavButton
+      <EntityNavButton key={uuid()} activeRoute={activeRoute} role={role} route={route} toggleSidebar={toggleSidebar} />
-        key={uuid()}
-        activeRoute={activeRoute}
-        role={role}
-        route={route}
-        toggleSidebar={toggleSidebar}
-      />
     ) : (
       <NavLinkButton key={uuid()} activeRoute={activeRoute} role={role} route={route} />
     ),

src/layout/Sidebar/EntityNavButton.js

@@ -26,10 +26,7 @@ const EntityNavButton = ({ activeRoute, route, role, toggleSidebar }) => {
   const { t } = useTranslation();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const activeArrowColor = useColorModeValue('var(--chakra-colors-gray-700)', 'white');
-  const inactiveArrowColor = useColorModeValue(
+  const inactiveArrowColor = useColorModeValue('var(--chakra-colors-gray-600)', 'var(--chakra-colors-gray-200)');
-    'var(--chakra-colors-gray-600)',
-    'var(--chakra-colors-gray-200)',
-  );
   const activeTextColor = useColorModeValue('gray.700', 'white');
   const inactiveTextColor = useColorModeValue('gray.600', 'gray.200');
   const inactiveIconColor = useColorModeValue('gray.100', 'gray.600');
@@ -63,14 +60,7 @@ const EntityNavButton = ({ activeRoute, route, role, toggleSidebar }) => {
           rightIcon={<ArrowCircleRight size={24} color={activeArrowColor} />}
         >
           <Flex>
-            <IconBox
+            <IconBox bg="blue.300" color="white" h="42px" w="42px" me="12px" transition={variantChange}>
-              bg="blue.300"
-              color="white"
-              h="42px"
-              w="42px"
-              me="12px"
-              transition={variantChange}
-            >
               {route.icon(true)}
             </IconBox>
             <Text color={activeTextColor} my="auto" fontSize="lg">
@@ -103,14 +93,7 @@ const EntityNavButton = ({ activeRoute, route, role, toggleSidebar }) => {
           rightIcon={<ArrowCircleRight size={20} color={inactiveArrowColor} />}
         >
           <Flex>
-            <IconBox
+            <IconBox bg={inactiveIconColor} color="blue.300" h="34px" w="34px" me="12px" transition={variantChange}>
-              bg={inactiveIconColor}
-              color="blue.300"
-              h="34px"
-              w="34px"
-              me="12px"
-              transition={variantChange}
-            >
               {route.icon(false)}
             </IconBox>
             <Text color={inactiveTextColor} my="auto" fontSize="sm">

src/layout/Sidebar/EntityPopover.js

@@ -42,15 +42,11 @@ const renderList = (tree, depth, goTo) => {
               colorScheme="blue"
               variant="link"
               onClick={() => goTo(tree.uuid, tree.type)}
-              leftIcon={
+              leftIcon={tree.type === 'entity' ? <TreeStructure size={16} /> : <Buildings size={16} />}
-                tree.type === 'entity' ? <TreeStructure size={16} /> : <Buildings size={16} />
-              }
             >
               {tree.name}
             </Button>
-            <UnorderedList styleType="none">
+            <UnorderedList styleType="none">{renderList(tree.children, depth + 2, goTo)}</UnorderedList>
-              {renderList(tree.children, depth + 2, goTo)}
-            </UnorderedList>
           </ListItem>
         </UnorderedList>
       );
@@ -73,9 +69,7 @@ const renderList = (tree, depth, goTo) => {
               colorScheme="blue"
               variant="link"
               onClick={() => goTo(obj.uuid, obj.type)}
-              leftIcon={
+              leftIcon={obj.type === 'entity' ? <TreeStructure size={16} /> : <Buildings size={16} />}
-                obj.type === 'entity' ? <TreeStructure size={16} /> : <Buildings size={16} />
-              }
             >
               {obj.name}
             </Button>
@@ -181,13 +175,7 @@ const EntityPopover = ({ isOpen, onClose, children, toggleSidebar }) => {
           <PopoverHeader fontWeight="semibold" display="flex" alignItems="center">
             <Heading size="md">{t('entities.title')}</Heading>
             <Spacer />
-            <IconButton
+            <IconButton ref={initRef} colorScheme="gray" onClick={onClose} icon={<X size={20} />} ms="auto" />
-              ref={initRef}
-              colorScheme="gray"
-              onClick={onClose}
-              icon={<X size={20} />}
-              ms="auto"
-            />
           </PopoverHeader>
           <PopoverArrow />
           <PopoverBody overflowX="auto" overflowY="auto" maxH="80vh">
@@ -206,13 +194,7 @@ const EntityPopover = ({ isOpen, onClose, children, toggleSidebar }) => {
             <PopoverHeader fontWeight="semibold" display="flex" alignItems="center">
               <Heading size="md">{t('entities.title')}</Heading>
               <Spacer />
-              <IconButton
+              <IconButton ref={initRef} colorScheme="gray" onClick={onClose} icon={<X size={20} />} ms="auto" />
-                ref={initRef}
-                colorScheme="gray"
-                onClick={onClose}
-                icon={<X size={20} />}
-                ms="auto"
-              />
             </PopoverHeader>
             <PopoverArrow />
             <PopoverBody overflowY="auto" maxH="80vh">

src/layout/Sidebar/NavLinkButton.js

@@ -54,14 +54,7 @@ const NavLinkButton = ({ activeRoute, route, role }) => {
           }}
         >
           <Flex>
-            <IconBox
+            <IconBox bg="blue.300" color="white" h="42px" w="42px" me="12px" transition={variantChange}>
-              bg="blue.300"
-              color="white"
-              h="42px"
-              w="42px"
-              me="12px"
-              transition={variantChange}
-            >
               {route.icon(true)}
             </IconBox>
             <Text color={activeTextColor} my="auto" fontSize="lg">
@@ -92,14 +85,7 @@ const NavLinkButton = ({ activeRoute, route, role }) => {
           }}
         >
           <Flex>
-            <IconBox
+            <IconBox bg={inactiveIconColor} color="blue.300" h="34px" w="34px" me="12px" transition={variantChange}>
-              bg={inactiveIconColor}
-              color="blue.300"
-              h="34px"
-              w="34px"
-              me="12px"
-              transition={variantChange}
-            >
               {route.icon(false)}
             </IconBox>
             <Text color={inactiveTextColor} my="auto" fontSize="sm">

src/layout/Sidebar/index.js

@@ -62,12 +62,7 @@ const Sidebar = ({ routes, isOpen, toggle }) => {
         alignItems="center"
         fontSize="11px"
       >
-        <img
+        <img src={colorMode === 'light' ? lightLogo : darkLogo} alt="OpenWifi" width="180px" height="100px" />
-          src={colorMode === 'light' ? lightLogo : darkLogo}
-          alt="OpenWifi"
-          width="180px"
-          height="100px"
-        />
       </Link>
     </Box>
   );
@@ -92,9 +87,7 @@ const Sidebar = ({ routes, isOpen, toggle }) => {
             <Box maxW="100%" h="90vh">
               <Box>{brand}</Box>
               <Flex direction="column" mb="40px" h="calc(100vh - 200px)" alignItems="center">
-                <Box overflowY="auto">
+                <Box overflowY="auto">{createLinks(routes, activeRoute, user?.userRole ?? '', toggle)}</Box>
-                  {createLinks(routes, activeRoute, user?.userRole ?? '', toggle)}
-                </Box>
                 <Spacer />
                 <Box>
                   <Text color="gray.400">
@@ -132,9 +125,7 @@ const Sidebar = ({ routes, isOpen, toggle }) => {
         >
           <Box>{brand}</Box>
           <Flex direction="column" mb="40px" h="calc(100vh - 200px)" alignItems="center">
-            <Box overflowY="auto">
+            <Box overflowY="auto">{createLinks(routes, activeRoute, user?.userRole ?? '', toggle)}</Box>
-              {createLinks(routes, activeRoute, user?.userRole ?? '', toggle)}
-            </Box>
             <Spacer />
             <Box>
               <Text color="gray.400">

src/layout/index.js

@@ -11,9 +11,7 @@ import Sidebar from './Sidebar';
 
 const Layout = () => {
   const breakpoint = useBreakpoint();
-  const [isSidebarOpen, { toggle: toggleSidebar }] = useBoolean(
+  const [isSidebarOpen, { toggle: toggleSidebar }] = useBoolean(breakpoint !== 'base' && breakpoint !== 'sm');
-    breakpoint !== 'base' && breakpoint !== 'sm',
-  );
   document.documentElement.dir = 'ltr';
 
   const getActiveRoute = (r) => {
@@ -52,8 +50,7 @@ const Layout = () => {
     }
     return activeNavbar;
   };
-  const getRoutes = (r) =>
+  const getRoutes = (r) => r.map((route) => <Route path={route.path} element={<route.component />} key={uuid()} />);
-    r.map((route) => <Route path={route.path} element={<route.component />} key={uuid()} />);
 
   return (
     <>

src/pages/AccountPage/AccountCard/Form.js

@@ -43,14 +43,7 @@ const propTypes = {
   deleteAvatar: PropTypes.instanceOf(Object).isRequired,
 };
 
-const UpdateAccountForm = ({
+const UpdateAccountForm = ({ updateUser, deleteAvatar, updateAvatar, finishUpdate, editing, formRef }) => {
-  updateUser,
-  deleteAvatar,
-  updateAvatar,
-  finishUpdate,
-  editing,
-  formRef,
-}) => {
   const { t } = useTranslation();
   const [verifNumber, setVerifNumber] = useState('');
   const { avatar: savedAvatar } = useAuth();
@@ -90,19 +83,14 @@ const UpdateAccountForm = ({
         key={formKey}
         initialValues={{
           ...user,
-          mfa: user.userTypeProprietaryInfo.mfa.enabled
+          mfa: user.userTypeProprietaryInfo.mfa.enabled ? user.userTypeProprietaryInfo.mfa.method : '',
-            ? user.userTypeProprietaryInfo.mfa.method
-            : '',
           phoneNumber:
             user.userTypeProprietaryInfo.mobiles.length > 0
               ? user.userTypeProprietaryInfo.mobiles[0].number.replace('+', '')
               : '',
         }}
         validationSchema={UpdateUserSchema(t)}
-        onSubmit={(
+        onSubmit={({ description, name, currentPassword, phoneNumber, mfa, notes }, { setSubmitting }) => {
-          { description, name, currentPassword, phoneNumber, mfa, notes },
-          { setSubmitting },
-        ) => {
           const onSuccess = () => {
             finishUpdate();
             setSubmitting(false);
@@ -147,10 +135,7 @@ const UpdateAccountForm = ({
           updateUser.mutateAsync(params, {
             onSuccess,
             onError: (e) => {
-              if (
+              if (e?.response?.data?.ErrorDescription === 'You must provide at least one validated phone number.') {
-                e?.response?.data?.ErrorDescription ===
-                'You must provide at least one validated phone number.'
-              ) {
                 toggleVerifyNumber(params, onSuccess);
               } else {
                 toast({
@@ -216,11 +201,7 @@ const UpdateAccountForm = ({
                             </Field>
                             <Field name="userRole">
                               {({ field }) => (
-                                <FormControl
+                                <FormControl isInvalid={errors.userRole && touched.userRole} isRequired isDisabled>
-                                  isInvalid={errors.userRole && touched.userRole}
-                                  isRequired
-                                  isDisabled
-                                >
                                   <FormLabel ms="4px" fontSize="md" fontWeight="normal">
                                     {t('user.role')}
                                   </FormLabel>
@@ -309,13 +290,7 @@ const UpdateAccountForm = ({
                 </TabPanel>
                 <TabPanel>
                   <Field name="notes">
-                    {({ field }) => (
+                    {({ field }) => <NotesTable notes={field.value} setNotes={setFieldValue} isDisabled={!editing} />}
-                      <NotesTable
-                        notes={field.value}
-                        setNotes={setFieldValue}
-                        isDisabled={!editing}
-                      />
-                    )}
                   </Field>
                 </TabPanel>
               </TabPanels>

src/pages/AccountPage/AccountCard/GoogleAuthenticatorModal/GoogleAuthenticatorTests.js

@@ -1,17 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import {
+import { Alert, Button, Center, Heading, HStack, PinInput, PinInputField, Spinner, Text } from '@chakra-ui/react';
-  Alert,
-  Button,
-  Center,
-  Heading,
-  HStack,
-  PinInput,
-  PinInputField,
-  Spinner,
-  Text,
-} from '@chakra-ui/react';
 import { useVerifyAuthenticator } from 'hooks/Network/GoogleAuthenticator';
 import { ArrowRightIcon } from '@chakra-ui/icons';
 

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

@@ -1,14 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import {
+import { CloseButton, Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
-  CloseButton,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalOverlay,
-  useDisclosure,
-} from '@chakra-ui/react';
 import SaveButton from 'components/Buttons/SaveButton';
 import ConfirmCloseAlert from 'components/ConfirmCloseAlert';
 import ModalHeader from 'components/ModalHeader';
@@ -54,13 +47,9 @@ const GoogleAuthenticatorModal = ({ isOpen, onClose, onSuccess }) => {
         />
         <ModalBody>
           {currentStep === 'intro' && <GoogleAuthenticatorIntro setCurrentStep={setCurrentStep} />}
-          {currentStep === 'qr-code' && (
+          {currentStep === 'qr-code' && <GoogleAuthenticatorQrDisplay setCurrentStep={setCurrentStep} />}
-            <GoogleAuthenticatorQrDisplay setCurrentStep={setCurrentStep} />
-          )}
           {currentStep === 'tests' && <GoogleAuthenticatorTests setCurrentStep={setCurrentStep} />}
-          {currentStep === 'activated' && (
+          {currentStep === 'activated' && <GoogleAuthenticatorActivationSuccess onSuccess={onActivated} />}
-            <GoogleAuthenticatorActivationSuccess onSuccess={onActivated} />
-          )}
         </ModalBody>
       </ModalContent>
       <ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />

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

@@ -23,16 +23,7 @@ const defaultProps = {
   isHidden: false,
 };
 
-const MfaSelectField = ({
+const MfaSelectField = ({ name, errors, touched, isDisabled, label, isRequired, isHidden, setFieldValue }) => {
-  name,
-  errors,
-  touched,
-  isDisabled,
-  label,
-  isRequired,
-  isHidden,
-  setFieldValue,
-}) => {
   const { t } = useTranslation();
   const { isOpen, onOpen, onClose } = useDisclosure();
 

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/AddSubsectionModal.js

@@ -32,19 +32,11 @@ const AddSubsectionModal = ({ editing, activeSubs, addSub }) => {
 
   return (
     <>
-      <CreateButton
+      <CreateButton label={t('configurations.add_subsection')} onClick={onOpen} isDisabled={!editing} ml={2} />
-        label={t('configurations.add_subsection')}
-        onClick={onOpen}
-        isDisabled={!editing}
-        ml={2}
-      />
       <Modal onClose={onClose} isOpen={isOpen} size="sm" scrollBehavior="inside">
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader
+          <ModalHeader title={t('configurations.add_subsection')} right={<CloseButton ml={2} onClick={onClose} />} />
-            title={t('configurations.add_subsection')}
-            right={<CloseButton ml={2} onClick={onClose} />}
-          />
           <ModalBody>
             <SimpleGrid minChildWidth="200px" spacing={4}>
               <Center>
@@ -57,11 +49,7 @@ const AddSubsectionModal = ({ editing, activeSubs, addSub }) => {
                 </Button>
               </Center>
               <Center>
-                <Button
+                <Button colorScheme="blue" isDisabled={activeSubs.includes('unit')} onClick={() => addNewSub('unit')}>
-                  colorScheme="blue"
-                  isDisabled={activeSubs.includes('unit')}
-                  onClick={() => addNewSub('unit')}
-                >
                   {t('configurations.unit')}
                 </Button>
               </Center>

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

@@ -1,15 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'react-fast-compare';
-import {
+import { Button, useDisclosure, Modal, ModalBody, ModalContent, ModalOverlay, Box } from '@chakra-ui/react';
-  Button,
-  useDisclosure,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalOverlay,
-  Box,
-} from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { Plus } from 'phosphor-react';
 import ModalHeader from 'components/ModalHeader';
@@ -53,14 +45,7 @@ const CreateInterfaceButton = ({ editing, arrayHelpers: { push: pushInterface }
 
   return (
     <>
-      <Button
+      <Button colorScheme="blue" type="submit" onClick={onOpen} rightIcon={<Plus size={20} />} hidden={!editing} ml={2}>
-        colorScheme="blue"
-        type="submit"
-        onClick={onOpen}
-        rightIcon={<Plus size={20} />}
-        hidden={!editing}
-        ml={2}
-      >
         {t('configurations.add_interface')}
       </Button>
       <Modal onClose={onClose} isOpen={isOpen} size="sm" scrollBehavior="inside">

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

@@ -22,14 +22,7 @@ const InterfaceExpertModal = ({ editing }) => {
   return (
     <>
       <EditButton mt={2} label={t('configurations.expert_name')} onClick={onOpen} />
-      {isOpen && (
+      {isOpen && <InterfaceExpertForm config={value} onClose={onClose} setConfig={setConfig} editing={editing} />}
-        <InterfaceExpertForm
-          config={value}
-          onClose={onClose}
-          setConfig={setConfig}
-          editing={editing}
-        />
-      )}
     </>
   );
 };

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/Bridge/BridgeSection.js

@@ -14,12 +14,7 @@ const IpV4 = ({ editing, index, isEnabled }) => {
 
   return (
     <>
-      <NumberField
+      <NumberField name={`configuration[${index}].bridge.mtu`} label="bridge.mtu" isDisabled={!editing} isRequired />
-        name={`configuration[${index}].bridge.mtu`}
-        label="bridge.mtu"
-        isDisabled={!editing}
-        isRequired
-      />
       <NumberField
         name={`configuration[${index}].bridge.tx-queue-len`}
         label="bridge.tx-queue-len"

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/IpV4/DhcpIpV4.js

@@ -20,10 +20,7 @@ const DhcpIpV4 = ({ editing, index }) => {
 
   const onEnabledChange = (e) => {
     if (e.target.checked) {
-      setFieldValue(
+      setFieldValue(`configuration[${index}].ipv4.dhcp`, INTERFACE_IPV4_DHCP_SCHEMA(t, true).cast());
-        `configuration[${index}].ipv4.dhcp`,
-        INTERFACE_IPV4_DHCP_SCHEMA(t, true).cast(),
-      );
     } else {
       setFieldValue(`configuration[${index}].ipv4.dhcp`, undefined);
       setFieldValue(`configuration[${index}].ipv4.dhcp-lease`, undefined);
@@ -41,13 +38,7 @@ const DhcpIpV4 = ({ editing, index }) => {
         <FormLabel ms="4px" fontSize="md" fontWeight="normal">
           Enable DHCP
         </FormLabel>
-        <Switch
+        <Switch onChange={onEnabledChange} isChecked={isEnabled} borderRadius="15px" size="lg" isDisabled={!editing} />
-          onChange={onEnabledChange}
-          isChecked={isEnabled}
-          borderRadius="15px"
-          size="lg"
-          isDisabled={!editing}
-        />
       </FormControl>
       {isEnabled && (
         <>

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/IpV4/DhcpLeaseIpV4.js

@@ -20,10 +20,7 @@ const DhcpLeaseIpV4 = ({ editing, index }) => {
 
   const onEnabledChange = (e) => {
     if (e.target.checked) {
-      setFieldValue(
+      setFieldValue(`configuration[${index}].ipv4.dhcp-lease`, INTERFACE_IPV4_DHCP_LEASE_SCHEMA(t, true).cast());
-        `configuration[${index}].ipv4.dhcp-lease`,
-        INTERFACE_IPV4_DHCP_LEASE_SCHEMA(t, true).cast(),
-      );
     } else {
       setFieldValue(`configuration[${index}].ipv4.dhcp-lease`, undefined);
     }
@@ -40,13 +37,7 @@ const DhcpLeaseIpV4 = ({ editing, index }) => {
         <FormLabel ms="4px" fontSize="md" fontWeight="normal">
           Enable DHCP-LEASE
         </FormLabel>
-        <Switch
+        <Switch onChange={onEnabledChange} isChecked={isEnabled} borderRadius="15px" size="lg" isDisabled={!editing} />
-          onChange={onEnabledChange}
-          isChecked={isEnabled}
-          borderRadius="15px"
-          size="lg"
-          isDisabled={!editing}
-        />
       </FormControl>
       {isEnabled && (
         <>

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

@@ -24,8 +24,7 @@ const IpV4 = ({ editing, index }) => {
   const onIpv4Change = (e) => {
     if (e.target.value === '') {
       setFieldValue(`configuration[${index}].ipv4`, undefined);
-    } else if (e.target.value === 'dynamic')
+    } else if (e.target.value === 'dynamic') setFieldValue(`configuration[${index}].ipv4`, { addressing: 'dynamic' });
-      setFieldValue(`configuration[${index}].ipv4`, { addressing: 'dynamic' });
     else {
       setFieldValue(`configuration[${index}].ipv4`, {
         ...INTERFACE_IPV4_SCHEMA(t, true).cast(),
@@ -56,25 +55,13 @@ const IpV4 = ({ editing, index }) => {
           mx={2}
         />
         <FormControl isDisabled={!editing} hidden={getIpv4Value() === ''}>
-          <Select
+          <Select value={getIpv4Value()} onChange={onIpv4Change} borderRadius="15px" fontSize="sm" w="120px">
-            value={getIpv4Value()}
-            onChange={onIpv4Change}
-            borderRadius="15px"
-            fontSize="sm"
-            w="120px"
-          >
             <option value="dynamic">dynamic</option>
             <option value="static">static</option>
           </Select>
         </FormControl>
       </Heading>
-      <SimpleGrid
+      <SimpleGrid minChildWidth="300px" spacing="20px" mb={getIpv4Value() === 'static' ? 8 : undefined} mt={2} w="100%">
-        minChildWidth="300px"
-        spacing="20px"
-        mb={getIpv4Value() === 'static' ? 8 : undefined}
-        mt={2}
-        w="100%"
-      >
         <StaticIpV4 index={index} isEnabled={getIpv4Value() === 'static'} editing={editing} />
       </SimpleGrid>
     </>

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

@@ -43,13 +43,7 @@ const IpV6 = ({ editing, index }) => {
         mx={2}
       />
       <FormControl isDisabled hidden={getIpv6Value() === ''}>
-        <Select
+        <Select value={getIpv6Value()} onChange={onIpv6Change} borderRadius="15px" fontSize="sm" w="120px">
-          value={getIpv6Value()}
-          onChange={onIpv6Change}
-          borderRadius="15px"
-          fontSize="sm"
-          w="120px"
-        >
           <option value="dynamic">dynamic</option>
         </Select>
       </FormControl>

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption.js

@@ -26,15 +26,10 @@ const Encryption = ({ editing, namePrefix }) => {
     }
   };
 
-  const isEnabled = useMemo(
+  const isEnabled = useMemo(() => getIn(values, `${namePrefix}`) !== undefined, [getIn(values, `${namePrefix}`)]);
-    () => getIn(values, `${namePrefix}`) !== undefined,
-    [getIn(values, `${namePrefix}`)],
-  );
 
   const isKeyNeeded = useMemo(
-    () =>
+    () => getIn(values, `${namePrefix}`) !== undefined && keyProtos.includes(getIn(values, `${namePrefix}`).proto),
-      getIn(values, `${namePrefix}`) !== undefined &&
-      keyProtos.includes(getIn(values, `${namePrefix}`).proto),
     [getIn(values, `${namePrefix}`)],
   );
 

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Local.js

@@ -6,10 +6,7 @@ import StringField from 'components/FormFields/StringField';
 import { FormControl, FormLabel, SimpleGrid, Switch } from '@chakra-ui/react';
 import ObjectArrayFieldModal from 'components/FormFields/ObjectArrayFieldModal';
 import NumberField from 'components/FormFields/NumberField';
-import {
+import { INTERFACE_SSID_RADIUS_LOCAL_SCHEMA, INTERFACE_SSID_RADIUS_LOCAL_USER_SCHEMA } from '../../interfacesConstants';
-  INTERFACE_SSID_RADIUS_LOCAL_SCHEMA,
-  INTERFACE_SSID_RADIUS_LOCAL_USER_SCHEMA,
-} from '../../interfacesConstants';
 
 const propTypes = {
   editing: PropTypes.bool.isRequired,
@@ -28,10 +25,7 @@ const Local = ({ editing, namePrefix }) => {
     }
   };
 
-  const isEnabled = useMemo(
+  const isEnabled = useMemo(() => getIn(values, `${namePrefix}`) !== undefined, [getIn(values, `${namePrefix}`)]);
-    () => getIn(values, `${namePrefix}`) !== undefined,
-    [getIn(values, `${namePrefix}`)],
-  );
 
   return (
     <>
@@ -67,13 +61,7 @@ const Local = ({ editing, namePrefix }) => {
                 <StringField name="mac" label="mac" isRequired />
                 <StringField name="user-name" label="user-name" isRequired />
                 <StringField name="password" label="password" isRequired hideButton />
-                <NumberField
+                <NumberField name="vlan-id" label="vlan-id" isDisabled={!editing} isRequired w={24} />
-                  name="vlan-id"
-                  label="vlan-id"
-                  isDisabled={!editing}
-                  isRequired
-                  w={24}
-                />
               </>
             }
             columns={[

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Radius/LockedRadius.js

@@ -34,22 +34,9 @@ const LockedRadius = ({ variableBlockId }) => {
   return (
     <>
       <SimpleGrid minChildWidth="300px" spacing="20px">
-        <DisplayStringField
+        <DisplayStringField label="authentication.host" value={data.authentication.host} isRequired />
-          label="authentication.host"
+        <DisplayNumberField label="authentication.port" value={data.authentication.port} isRequired />
-          value={data.authentication.host}
+        <DisplayStringField label="authentication.secret" value={data.authentication.secret} isRequired hideButton />
-          isRequired
-        />
-        <DisplayNumberField
-          label="authentication.port"
-          value={data.authentication.port}
-          isRequired
-        />
-        <DisplayStringField
-          label="authentication.secret"
-          value={data.authentication.secret}
-          isRequired
-          hideButton
-        />
       </SimpleGrid>
       <FormControl isDisabled>
         <FormLabel ms="4px" fontSize="md" fontWeight="normal">
@@ -67,12 +54,7 @@ const LockedRadius = ({ variableBlockId }) => {
         <SimpleGrid minChildWidth="300px" spacing="20px">
           <DisplayStringField label="accounting.host" value={data.accounting?.host} isRequired />
           <DisplayNumberField label="accounting.port" value={data.accounting?.port} isRequired />
-          <DisplayStringField
+          <DisplayStringField label="accounting.secret" value={data.accounting?.secret} isRequired hideButton />
-            label="accounting.secret"
-            value={data.accounting?.secret}
-            isRequired
-            hideButton
-          />
         </SimpleGrid>
       )}
       <FormControl isDisabled>