Fixed proptypes warnings and set defaults

package-lock.json

@@ -25,6 +25,7 @@
         "bootstrap": "^4.6.0",
         "http": "^0.0.1-security",
         "https": "^1.0.0",
+        "prop-types": "^15.7.2",
         "react": "^17.0.2",
         "react-bootstrap": "^1.5.2",
         "react-dom": "^17.0.2",

package.json

@@ -21,6 +21,7 @@
     "bootstrap": "^4.6.0",
     "http": "^0.0.1-security",
     "https": "^1.0.0",
+    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",

src/containers/TheLayout.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
 import TheContent from './TheContent';
 import TheSidebar from './TheSidebar';
 import TheFooter from './TheFooter';
@@ -24,4 +25,12 @@ const TheLayout = (props) => {
   );
 };
 
+TheLayout.propTypes = {
+  children: PropTypes.instanceOf(Object),
+};
+
+TheLayout.defaultProps = {
+  children: {},
+};
+
 export default TheLayout;

src/pages/DeviceListPage/DeviceList.js

@@ -13,6 +13,7 @@ import {
 } from '@coreui/react';
 import ReactPaginate from 'react-paginate';
 import Select from 'react-select';
+import PropTypes from 'prop-types';
 import { cilSync, cilInfo, cilBadge, cilBan } from '@coreui/icons';
 import CIcon from '@coreui/icons-react';
 import { getToken } from '../../utils/authHelper';
@@ -393,4 +394,13 @@ const DeviceListDisplay = ({
   );
 };
 
+DeviceListDisplay.propTypes = {
+  devices: PropTypes.instanceOf(Array).isRequired,
+  updateDevicesPerPage: PropTypes.func.isRequired,
+  pageCount: PropTypes.number.isRequired,
+  updatePage: PropTypes.func.isRequired,
+  refreshDevice: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired,
+};
+
 export default DeviceList;

src/pages/DevicePage/ActionModalWidget.js

@@ -12,13 +12,14 @@ import {
 } from '@coreui/react';
 import React, { useState, useEffect } from 'react';
 import DatePicker from 'react-widgets/DatePicker';
+import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { convertDateToUtc, convertDateFromUtc } from '../../utils/helper';
 import 'react-widgets/styles.css';
 import { getToken } from '../../utils/authHelper';
 import axiosInstance from '../../utils/axiosInstance';
 
-const ActionModalWidget = ({ show, toggleModal, title, directions, action, extraParameters }) => {
+const ActionModalWidget = ({ show, toggleModal, title, directions, action }) => {
   const [hadSuccess, setHadSuccess] = useState(false);
   const [hadFailure, setHadFailure] = useState(false);
   const [waiting, setWaiting] = useState(false);
@@ -80,11 +81,8 @@ const ActionModalWidget = ({ show, toggleModal, title, directions, action, extra
     const utcDateString = utcDate.toISOString();
 
     const parameters = {
-      ...{
       serialNumber: selectedDeviceId,
       when: isNow ? '' : utcDateString,
-      },
-      ...extraParameters,
     };
 
     const headers = {
@@ -181,4 +179,12 @@ const ActionModalWidget = ({ show, toggleModal, title, directions, action, extra
   );
 };
 
+ActionModalWidget.propTypes = {
+  show: PropTypes.bool.isRequired,
+  toggleModal: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  directions: PropTypes.string.isRequired,
+  action: PropTypes.string.isRequired,
+};
+
 export default ActionModalWidget;

src/pages/DevicePage/BlinkModalWidget.js

@@ -15,6 +15,7 @@ import {
 } from '@coreui/react';
 import React, { useState, useEffect } from 'react';
 import DatePicker from 'react-widgets/DatePicker';
+import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { convertDateFromUtc, convertDateToUtc } from '../../utils/helper';
 import 'react-widgets/styles.css';
@@ -212,4 +213,9 @@ const BlinkModalWidget = ({ show, toggleModal }) => {
   );
 };
 
+BlinkModalWidget.propTypes = {
+  show: PropTypes.bool.isRequired,
+  toggleModal: PropTypes.func.isRequired,
+};
+
 export default BlinkModalWidget;

src/pages/DevicePage/DeviceCommands.js

@@ -13,6 +13,7 @@ import {
 import CIcon from '@coreui/icons-react';
 import DatePicker from 'react-widgets/DatePicker';
 import { cilSync } from '@coreui/icons';
+import PropTypes from 'prop-types';
 import { prettyDate, addDays } from '../../utils/helper';
 import axiosInstance from '../../utils/axiosInstance';
 import { getToken } from '../../utils/authHelper';
@@ -87,7 +88,6 @@ const DeviceCommands = ({ selectedDeviceId }) => {
     } else {
       setChosenWifiScan(item.results.status.scan.scan);
       setScanDate(item.completed);
-      console.log(scanDate);
       setShowModal(true);
     }
   };
@@ -240,4 +240,8 @@ const DeviceCommands = ({ selectedDeviceId }) => {
   );
 };
 
+DeviceCommands.propTypes = {
+  selectedDeviceId: PropTypes.string.isRequired,
+};
+
 export default DeviceCommands;

src/pages/DevicePage/DeviceConfiguration.js

@@ -13,6 +13,7 @@ import {
   CButton,
 } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
+import PropTypes from 'prop-types';
 import { cleanTimestamp } from '../../utils/helper';
 import axiosInstance from '../../utils/axiosInstance';
 import { getToken } from '../../utils/authHelper';
@@ -166,4 +167,8 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
   );
 };
 
+DeviceConfiguration.propTypes = {
+  selectedDeviceId: PropTypes.string.isRequired,
+};
+
 export default DeviceConfiguration;

src/pages/DevicePage/DeviceHealth.js

@@ -13,6 +13,7 @@ import {
 } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
 import DatePicker from 'react-widgets/DatePicker';
+import PropTypes from 'prop-types';
 import { prettyDate, addDays } from '../../utils/helper';
 import axiosInstance from '../../utils/axiosInstance';
 import { getToken } from '../../utils/authHelper';
@@ -200,4 +201,8 @@ const DeviceHealth = ({ selectedDeviceId }) => {
   );
 };
 
+DeviceHealth.propTypes = {
+  selectedDeviceId: PropTypes.string.isRequired,
+};
+
 export default DeviceHealth;

src/pages/DevicePage/DeviceLogs.js

@@ -12,6 +12,7 @@ import {
 } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
 import DatePicker from 'react-widgets/DatePicker';
+import PropTypes from 'prop-types';
 import { addDays, prettyDate } from '../../utils/helper';
 import axiosInstance from '../../utils/axiosInstance';
 import { getToken } from '../../utils/authHelper';
@@ -179,4 +180,8 @@ const DeviceLogs = ({ selectedDeviceId }) => {
   );
 };
 
+DeviceLogs.propTypes = {
+  selectedDeviceId: PropTypes.string.isRequired,
+};
+
 export default DeviceLogs;

src/pages/DevicePage/FirmwareUpgradeModal.js

@@ -13,6 +13,7 @@ import {
 } from '@coreui/react';
 import React, { useState, useEffect } from 'react';
 import DatePicker from 'react-widgets/DatePicker';
+import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { convertDateToUtc, convertDateFromUtc } from '../../utils/helper';
 import 'react-widgets/styles.css';
@@ -227,4 +228,9 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
   );
 };
 
+FirmwareUpgradeModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  toggleModal: PropTypes.func.isRequired,
+};
+
 export default FirmwareUpgradeModal;

src/pages/DevicePage/TraceModalWidget.js

@@ -14,6 +14,7 @@ import {
 } from '@coreui/react';
 import React, { useState, useEffect } from 'react';
 import DatePicker from 'react-widgets/DatePicker';
+import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { convertDateToUtc } from '../../utils/helper';
 import 'react-widgets/styles.css';
@@ -223,4 +224,9 @@ const TraceModalWidget = ({ show, toggleModal }) => {
   );
 };
 
+TraceModalWidget.propTypes = {
+  show: PropTypes.bool.isRequired,
+  toggleModal: PropTypes.func.isRequired,
+};
+
 export default TraceModalWidget;

src/pages/DevicePage/WifiChannelCard.js

@@ -1,5 +1,6 @@
 import { CCard, CCardTitle, CCardBody, CDataTable, CCardHeader } from '@coreui/react';
 import React from 'react';
+import PropTypes from 'prop-types';
 import 'react-widgets/styles.css';
 
 const WifiChannelCard = ({ channel }) => {
@@ -19,4 +20,8 @@ const WifiChannelCard = ({ channel }) => {
   );
 };
 
+WifiChannelCard.propTypes = {
+  channel: PropTypes.func.isRequired,
+};
+
 export default WifiChannelCard;

src/pages/DevicePage/WifiChannelTable.js

@@ -1,6 +1,7 @@
 import { CCol, CRow } from '@coreui/react';
 import React, { useEffect } from 'react';
 import { v4 as createUuid } from 'uuid';
+import PropTypes from 'prop-types';
 import WifiChannelCard from './WifiChannelCard';
 
 const WifiChannelTable = ({ channels }) => {
@@ -30,4 +31,12 @@ const WifiChannelTable = ({ channels }) => {
   );
 };
 
+WifiChannelTable.propTypes = {
+  channels: PropTypes.instanceOf(Array),
+};
+
+WifiChannelTable.defaultProps = {
+  channels: [],
+};
+
 export default WifiChannelTable;

src/pages/DevicePage/WifiScanModal.js

@@ -14,6 +14,7 @@ import {
 } from '@coreui/react';
 import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
 import WifiChannelTable from './WifiChannelTable';
 import 'react-widgets/styles.css';
 import { getToken } from '../../utils/authHelper';
@@ -168,4 +169,9 @@ const WifiScanModalWidget = ({ show, toggleModal }) => {
   );
 };
 
+WifiScanModalWidget.propTypes = {
+  show: PropTypes.bool.isRequired,
+  toggleModal: PropTypes.func.isRequired,
+};
+
 export default WifiScanModalWidget;

src/pages/DevicePage/WifiScanResultModal.js

@@ -8,6 +8,7 @@ import {
   CModalTitle,
   CModalFooter,
 } from '@coreui/react';
+import PropTypes from 'prop-types';
 import WifiChannelTable from './WifiChannelTable';
 import { prettyDate } from '../../utils/helper';
 
@@ -62,4 +63,16 @@ const WifiScanResultModalWidget = ({ show, toggle, scanResults, date }) => {
     </CModal>
   );
 };
+
+WifiScanResultModalWidget.propTypes = {
+  show: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+  scanResults: PropTypes.instanceOf(Array),
+  date: PropTypes.string.isRequired,
+};
+
+WifiScanResultModalWidget.defaultProps = {
+  scanResults: [],
+};
+
 export default WifiScanResultModalWidget;