Added loading button to all places I could

src/components/LoadingButton.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { CButton, CSpinner } from '@coreui/react';
 
-const LoadingButton = ({ isLoading, label, isLoadingLabel, action, color, variant}) => (
+const LoadingButton = ({ isLoading, label, isLoadingLabel, action, color, variant, block, disabled}) => (
-  <CButton variant={variant} disabled={isLoading} color={color} onClick={() => action()} block>
+  <CButton variant={variant} color={color} onClick={() => action()} block={block} disabled={isLoading || disabled}>
     {isLoading ? isLoadingLabel : label}
     <CSpinner hidden={!isLoading} component="span" size="sm" />
   </CButton>
@@ -11,6 +11,8 @@ const LoadingButton = ({ isLoading, label, isLoadingLabel, action, color, varian
 
 LoadingButton.propTypes = {
   isLoading: PropTypes.bool.isRequired,
+  block: PropTypes.bool,
+  disabled: PropTypes.bool,
   label: PropTypes.string.isRequired,
   isLoadingLabel: PropTypes.string.isRequired,
   action: PropTypes.func.isRequired,
@@ -20,7 +22,9 @@ LoadingButton.propTypes = {
 
 LoadingButton.defaultProps = {
   color: "primary",
-  variant: ""
+  variant: "",
+  block: true,
+  disabled: false
 }
 
 export default LoadingButton;

src/components/SuccessfulActionModalBody.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CButton, CModalBody, CModalFooter } from '@coreui/react';
+
+const SuccessfulActionModalBody = ({ toggleModal }) => (
+    <div>
+        <CModalBody>
+            <h6>Command submitted succesfuly</h6>
+        </CModalBody>
+        <CModalFooter>
+            <CButton
+                onClick={() => toggleModal()}
+                block
+            >
+                Dismiss
+            </CButton>
+        </CModalFooter>
+    </div>
+);
+
+SuccessfulActionModalBody.propTypes = {
+    toggleModal: PropTypes.func.isRequired
+};
+
+export default SuccessfulActionModalBody;
+  

src/pages/DevicePage/ActionModal.js

@@ -19,6 +19,8 @@ import 'react-widgets/styles.css';
 import { getToken } from '../../utils/authHelper';
 import axiosInstance from '../../utils/axiosInstance';
 import eventBus from '../../utils/EventBus';
+import LoadingButton from '../../components/LoadingButton';
+import SuccessfulActionModalBody from '../../components/SuccessfulActionModalBody';
 
 const ActionModal = ({ show, toggleModal, title, directions, action }) => {
   const [hadSuccess, setHadSuccess] = useState(false);
@@ -28,17 +30,8 @@ const ActionModal = ({ show, toggleModal, title, directions, action }) => {
   const [chosenDate, setChosenDate] = useState(new Date().toString());
   const [doingNow, setDoingNow] = useState(false);
   const [responseBody, setResponseBody] = useState('');
-  const [checkingIfSure, setCheckingIfSure] = useState(false);
   const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
 
-  const formValidation = () => {
-    if (chosenDate === '') {
-      setValidDate(false);
-      return false;
-    }
-    return true;
-  };
-
   const setDateToLate = () => {
     const date = convertDateToUtc(new Date());
     if (date.getHours() >= 3) {
@@ -56,11 +49,8 @@ const ActionModal = ({ show, toggleModal, title, directions, action }) => {
     }
   };
 
-  const confirmingIfSure = () => {
-    setCheckingIfSure(true);
-  };
-
   useEffect(() => {
+    if(show) {
       setHadSuccess(false);
       setHadFailure(false);
       setWaiting(false);
@@ -68,11 +58,11 @@ const ActionModal = ({ show, toggleModal, title, directions, action }) => {
       setChosenDate(new Date().toString());
       setResponseBody('');
       setValidDate(true);
-    setCheckingIfSure(false);
+    }
   }, [show]);
 
   const doAction = (isNow) => {
-    setDoingNow(isNow);
+    if(isNow !== undefined) setDoingNow(isNow);
     setHadFailure(false);
     setHadSuccess(false);
     setWaiting(true);
@@ -103,7 +93,6 @@ const ActionModal = ({ show, toggleModal, title, directions, action }) => {
       })
       .finally(() => {
         setDoingNow(false);
-        setCheckingIfSure(false);
         setWaiting(false);
         eventBus.dispatch('actionCompleted', { message: 'An action has been completed' });
       });
@@ -114,6 +103,10 @@ const ActionModal = ({ show, toggleModal, title, directions, action }) => {
       <CModalHeader closeButton>
         <CModalTitle>{title}</CModalTitle>
       </CModalHeader>
+      {hadSuccess ? 
+        <SuccessfulActionModalBody toggleModal={toggleModal} /> 
+        :
+        <div>
           <CModalBody>
             <h6>{directions}</h6>
             <CRow style={{ marginTop: '20px' }}>
@@ -155,28 +148,20 @@ const ActionModal = ({ show, toggleModal, title, directions, action }) => {
             </div>
           </CModalBody>
           <CModalFooter>
-        <div hidden={!checkingIfSure}>Are you sure?</div>
+            <LoadingButton
-        <CButton
+              label="Schedule"
-          hidden={checkingIfSure}
+              isLoadingLabel="Loading..."
+              isLoading={waiting}
+              action={doAction}
+              variant="outline"
+              block={false}
               disabled={waiting}
-          color="primary"
+            />
-          onClick={() => (formValidation() ? confirmingIfSure() : null)}
-        >
-          Schedule
-        </CButton>
-        <CButton
-          hidden={!checkingIfSure}
-          disabled={waiting}
-          color="primary"
-          onClick={() => (formValidation() ? doAction(false) : null)}
-        >
-          {waiting && !doingNow ? 'Loading...' : 'Yes'} {'   '}
-          <CSpinner hidden={!waiting || doingNow} component="span" size="sm" />
-        </CButton>
             <CButton color="secondary" onClick={toggleModal}>
               Cancel
             </CButton>
           </CModalFooter>
+        </div>}
     </CModal>
   );
 };

src/pages/DevicePage/BlinkModal.js

@@ -22,6 +22,8 @@ import 'react-widgets/styles.css';
 import { getToken } from '../../utils/authHelper';
 import axiosInstance from '../../utils/axiosInstance';
 import eventBus from '../../utils/EventBus';
+import SuccessfulActionModalBody from '../../components/SuccessfulActionModalBody';
+import LoadingButton from '../../components/LoadingButton';
 
 const BlinkModal = ({ show, toggleModal }) => {
   const [hadSuccess, setHadSuccess] = useState(false);
@@ -31,7 +33,6 @@ const BlinkModal = ({ show, toggleModal }) => {
   const [chosenDate, setChosenDate] = useState(new Date().toString());
   const [chosenPattern, setPattern] = useState('on');
   const [responseBody, setResponseBody] = useState('');
-  const [checkingIfSure, setCheckingIfSure] = useState(false);
   const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
 
   const setDateToLate = () => {
@@ -51,23 +52,20 @@ const BlinkModal = ({ show, toggleModal }) => {
     }
   };
 
-  const confirmingIfSure = () => {
-    setCheckingIfSure(true);
-  };
-
   useEffect(() => {
-    setHadSuccess(false);
+    if(show){
-    setHadFailure(false);
       setWaiting(false);
       setChosenDate(new Date().toString());
       setResponseBody('');
       setPattern('on');
-    setCheckingIfSure(false);
       setDoingNow(false);
+      setHadSuccess(false);
+      setHadFailure(false);
+    }
   }, [show]);
 
   const doAction = (isNow) => {
-    setDoingNow(isNow);
+    if(isNow !== undefined) setDoingNow(isNow);
     setHadFailure(false);
     setHadSuccess(false);
     setWaiting(true);
@@ -100,7 +98,6 @@ const BlinkModal = ({ show, toggleModal }) => {
       })
       .finally(() => {
         setDoingNow(false);
-        setCheckingIfSure(false);
         setWaiting(false);
         eventBus.dispatch('actionCompleted', { message: 'An action has been completed' });
       });
@@ -111,6 +108,10 @@ const BlinkModal = ({ show, toggleModal }) => {
       <CModalHeader closeButton>
         <CModalTitle>LEDs of Device</CModalTitle>
       </CModalHeader>
+      {hadSuccess ? 
+        <SuccessfulActionModalBody toggleModal={toggleModal} /> 
+        :
+        <div>
           <CModalBody>
           <h6>When would you like make the LEDs of this device blink?</h6>
           <CRow style={{ marginTop: '20px' }}>
@@ -189,28 +190,20 @@ const BlinkModal = ({ show, toggleModal }) => {
           </div>
         </CModalBody>
         <CModalFooter>
-        <div hidden={!checkingIfSure}>Are you sure?</div>
+          <LoadingButton
-        <CButton
+            label="Schedule"
+            isLoadingLabel="Loading..."
+            isLoading={waiting && !doingNow}
+            action={doAction}
+            variant="outline"
+            block={false}
             disabled={waiting}
-          hidden={checkingIfSure}
+          />
-          color="primary"
-          onClick={() => confirmingIfSure()}
-        >
-          Schedule
-        </CButton>
-        <CButton
-          hidden={!checkingIfSure}
-          disabled={waiting}
-          color="primary"
-          onClick={() => doAction(false)}
-        >
-          {waiting && !doingNow ? 'Loading...' : 'Yes'} {'   '}
-          <CSpinner hidden={!waiting || doingNow} component="span" size="sm" />
-        </CButton>
           <CButton color="secondary" onClick={toggleModal}>
             Cancel
           </CButton>
         </CModalFooter>
+      </div>}
     </CModal>
   );
 };

src/pages/DevicePage/TraceModal.js

@@ -5,8 +5,6 @@ import {
   CModalTitle,
   CModalBody,
   CModalFooter,
-  CSpinner,
-  CBadge,
   CCol,
   CRow,
   CInvalidFeedback,
@@ -21,6 +19,7 @@ import 'react-widgets/styles.css';
 import { getToken } from '../../utils/authHelper';
 import axiosInstance from '../../utils/axiosInstance';
 import eventBus from '../../utils/EventBus';
+import LoadingButton from '../../components/LoadingButton';
 
 const TraceModal = ({ show, toggleModal }) => {
   const [hadSuccess, setHadSuccess] = useState(false);
@@ -31,7 +30,6 @@ const TraceModal = ({ show, toggleModal }) => {
   const [packets, setPackets] = useState(100);
   const [chosenDate, setChosenDate] = useState(new Date().toString());
   const [responseBody, setResponseBody] = useState('');
-  const [checkingIfSure, setCheckingIfSure] = useState(false);
   const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
 
   const setDate = (date) => {
@@ -40,17 +38,12 @@ const TraceModal = ({ show, toggleModal }) => {
     }
   };
 
-  const confirmingIfSure = () => {
-    setCheckingIfSure(true);
-  };
-
   useEffect(() => {
     setHadSuccess(false);
     setHadFailure(false);
     setWaiting(false);
     setChosenDate(new Date().toString());
     setResponseBody('');
-    setCheckingIfSure(false);
     setDuration(20);
     setPackets(100);
   }, [show]);
@@ -99,7 +92,6 @@ const TraceModal = ({ show, toggleModal }) => {
         setHadFailure(true);
       })
       .finally(() => {
-        setCheckingIfSure(false);
         setWaiting(false);
         eventBus.dispatch('actionCompleted', { message: 'An action has been completed' });
       });
@@ -199,25 +191,15 @@ const TraceModal = ({ show, toggleModal }) => {
         </div>
       </CModalBody>
       <CModalFooter>
-        <div hidden={!checkingIfSure}>Are you sure?</div>
+        <LoadingButton
-        <CButton hidden={checkingIfSure} color="primary" onClick={() => confirmingIfSure()}>
+          label="Schedule"
-          Schedule
+          isLoadingLabel="Loading..."
-        </CButton>
+          isLoading={waiting}
-        <CButton
+          action={doAction}
-          hidden={!checkingIfSure}
+          variant="outline"
+          block={false}
           disabled={waiting}
-          color="primary"
+        />
-          onClick={() => doAction()}
-        >
-          {waiting ? 'Loading...' : 'Yes'} {'   '}
-          <CSpinner hidden={!waiting} component="span" size="sm" />
-          <CBadge hidden={waiting || !hadSuccess} color="success" shape="pill">
-            Success
-          </CBadge>
-          <CBadge hidden={waiting || !hadFailure} color="danger" shape="pill">
-            Request Failed
-          </CBadge>
-        </CButton>
         <CButton color="secondary" onClick={toggleModal}>
           Cancel
         </CButton>

src/pages/DevicePage/WifiScanModal.js

@@ -5,7 +5,6 @@ import {
   CModalTitle,
   CModalBody,
   CModalFooter,
-  CSpinner,
   CRow,
   CForm,
   CSwitch,
@@ -18,6 +17,7 @@ import 'react-widgets/styles.css';
 import { getToken } from '../../utils/authHelper';
 import axiosInstance from '../../utils/axiosInstance';
 import eventBus from '../../utils/EventBus';
+import LoadingButton from '../../components/LoadingButton';
 
 const WifiScanModal = ({ show, toggleModal }) => {
   const [hadSuccess, setHadSuccess] = useState(false);
@@ -25,23 +25,17 @@ const WifiScanModal = ({ show, toggleModal }) => {
   const [waiting, setWaiting] = useState(false);
   const [choseVerbose, setVerbose] = useState(true);
   const [channelList, setChannelList] = useState([]);
-  const [checkingIfSure, setCheckingIfSure] = useState(false);
   const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
 
   const toggleVerbose = () => {
     setVerbose(!choseVerbose);
   };
 
-  const confirmingIfSure = () => {
-    setCheckingIfSure(true);
-  };
-
   useEffect(() => {
     setHadSuccess(false);
     setHadFailure(false);
     setWaiting(false);
     setChannelList([]);
-    setCheckingIfSure(false);
     setVerbose(true);
   }, [show]);
 
@@ -108,7 +102,6 @@ const WifiScanModal = ({ show, toggleModal }) => {
         setHadFailure(true);
       })
       .finally(() => {
-        setCheckingIfSure(false);
         setWaiting(false);
         eventBus.dispatch('actionCompleted', { message: 'An action has been completed' });
       });
@@ -138,19 +131,15 @@ const WifiScanModal = ({ show, toggleModal }) => {
         </div>
       </CModalBody>
       <CModalFooter>
-        <div hidden={!checkingIfSure}>Are you sure?</div>
+        <LoadingButton
-        <CButton hidden={checkingIfSure} color="primary" onClick={() => confirmingIfSure()}>
+          label="Schedule"
-          {hadSuccess || hadFailure ? 'Re-Scan' : 'Scan'}
+          isLoadingLabel="Loading..."
-        </CButton>
+          isLoading={waiting}
-        <CButton
+          action={doAction}
-          hidden={!checkingIfSure}
+          variant="outline"
+          block={false}
           disabled={waiting}
-          color="primary"
+        />
-          onClick={() => doAction()}
-        >
-          {waiting ? 'Loading...' : 'Yes'} {'   '}
-          <CSpinner hidden={!waiting} component="span" size="sm" />
-        </CButton>
         <CButton color="secondary" onClick={toggleModal}>
           Cancel
         </CButton>