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}) => (
-  <CButton variant={variant} disabled={isLoading} color={color} onClick={() => action()} block>
+const LoadingButton = ({ isLoading, label, isLoadingLabel, action, color, variant, block, disabled}) => (
+  <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,23 +49,20 @@ const ActionModal = ({ show, toggleModal, title, directions, action }) => {
     }
   };
 
-  const confirmingIfSure = () => {
-    setCheckingIfSure(true);
-  };
-
   useEffect(() => {
-    setHadSuccess(false);
-    setHadFailure(false);
-    setWaiting(false);
-    setDoingNow(false);
-    setChosenDate(new Date().toString());
-    setResponseBody('');
-    setValidDate(true);
-    setCheckingIfSure(false);
+    if(show) {
+      setHadSuccess(false);
+      setHadFailure(false);
+      setWaiting(false);
+      setDoingNow(false);
+      setChosenDate(new Date().toString());
+      setResponseBody('');
+      setValidDate(true);
+    }
   }, [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,69 +103,65 @@ const ActionModal = ({ show, toggleModal, title, directions, action }) => {
       <CModalHeader closeButton>
         <CModalTitle>{title}</CModalTitle>
       </CModalHeader>
-      <CModalBody>
-        <h6>{directions}</h6>
-        <CRow style={{ marginTop: '20px' }}>
-          <CCol>
-            <CButton onClick={() => doAction(true)} disabled={waiting} block color="primary">
-              {waiting && doingNow ? 'Loading...' : 'Do Now!'}
-              <CSpinner hidden={!waiting || !doingNow} component="span" size="sm" />
-            </CButton>
-          </CCol>
-          <CCol>
-            <CButton disabled={waiting} block color="primary" onClick={() => setDateToLate()}>
-              Later tonight
-            </CButton>
-          </CCol>
-        </CRow>
-        <CRow style={{ marginTop: '20px' }}>
-          <CCol md="4" style={{ marginTop: '7px' }}>
-            <p>Date:</p>
-          </CCol>
-          <CCol xs="12" md="8">
-            <DatePicker
-              selected={new Date(chosenDate)}
-              includeTime
-              className={('form-control', { 'is-invalid': !validDate })}
-              value={new Date(chosenDate)}
-              placeholder="Select custom date"
-              disabled={waiting}
-              onChange={(date) => setDate(date)}
-              min={convertDateToUtc(new Date())}
-            />
-          </CCol>
-        </CRow>
-        <CInvalidFeedback>You need a date...</CInvalidFeedback>
+      {hadSuccess ? 
+        <SuccessfulActionModalBody toggleModal={toggleModal} /> 
+        :
+        <div>
+          <CModalBody>
+            <h6>{directions}</h6>
+            <CRow style={{ marginTop: '20px' }}>
+              <CCol>
+                <CButton onClick={() => doAction(true)} disabled={waiting} block color="primary">
+                  {waiting && doingNow ? 'Loading...' : 'Do Now!'}
+                  <CSpinner hidden={!waiting || !doingNow} component="span" size="sm" />
+                </CButton>
+              </CCol>
+              <CCol>
+                <CButton disabled={waiting} block color="primary" onClick={() => setDateToLate()}>
+                  Later tonight
+                </CButton>
+              </CCol>
+            </CRow>
+            <CRow style={{ marginTop: '20px' }}>
+              <CCol md="4" style={{ marginTop: '7px' }}>
+                <p>Date:</p>
+              </CCol>
+              <CCol xs="12" md="8">
+                <DatePicker
+                  selected={new Date(chosenDate)}
+                  includeTime
+                  className={('form-control', { 'is-invalid': !validDate })}
+                  value={new Date(chosenDate)}
+                  placeholder="Select custom date"
+                  disabled={waiting}
+                  onChange={(date) => setDate(date)}
+                  min={convertDateToUtc(new Date())}
+                />
+              </CCol>
+            </CRow>
+            <CInvalidFeedback>You need a date...</CInvalidFeedback>
 
-        <div hidden={!hadSuccess && !hadFailure}>
-          <div>
-            <pre className="ignore">{responseBody}</pre>
-          </div>
-        </div>
-      </CModalBody>
-      <CModalFooter>
-        <div hidden={!checkingIfSure}>Are you sure?</div>
-        <CButton
-          hidden={checkingIfSure}
-          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 hidden={!hadSuccess && !hadFailure}>
+              <div>
+                <pre className="ignore">{responseBody}</pre>
+              </div>
+            </div>
+          </CModalBody>
+          <CModalFooter>
+            <LoadingButton
+              label="Schedule"
+              isLoadingLabel="Loading..."
+              isLoading={waiting}
+              action={doAction}
+              variant="outline"
+              block={false}
+              disabled={waiting}
+            />
+            <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);
-    setHadFailure(false);
-    setWaiting(false);
-    setChosenDate(new Date().toString());
-    setResponseBody('');
-    setPattern('on');
-    setCheckingIfSure(false);
-    setDoingNow(false);
+    if(show){
+      setWaiting(false);
+      setChosenDate(new Date().toString());
+      setResponseBody('');
+      setPattern('on');
+      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,106 +108,102 @@ const BlinkModal = ({ show, toggleModal }) => {
       <CModalHeader closeButton>
         <CModalTitle>LEDs of Device</CModalTitle>
       </CModalHeader>
-      <CModalBody>
-        <h6>When would you like make the LEDs of this device blink?</h6>
-        <CRow style={{ marginTop: '20px' }}>
-          <CCol>
-            <CButton onClick={() => doAction(true)} disabled={waiting} block color="primary">
-              {waiting && doingNow ? 'Loading...' : 'Do Now!'}
-              <CSpinner hidden={!waiting || !doingNow} component="span" size="sm" />
-            </CButton>
-          </CCol>
-          <CCol>
-            <CButton disabled={waiting} block color="primary" onClick={() => setDateToLate()}>
-              Later tonight
-            </CButton>
-          </CCol>
-        </CRow>
-        <CRow style={{ marginTop: '20px' }}>
-          <CCol md="4" style={{ marginTop: '7px' }}>
-            <p>Date:</p>
-          </CCol>
-          <CCol xs="12" md="8">
-            <DatePicker
-              selected={new Date(chosenDate)}
-              includeTime
-              value={new Date(chosenDate)}
-              placeholder="Select custom date"
-              disabled={waiting}
-              onChange={(date) => setDate(date)}
-              min={convertDateToUtc(new Date())}
-            />
-          </CCol>
-        </CRow>
-        <CRow style={{ marginTop: '20px' }}>
-          <CCol md="7">Choose a pattern you would like to use:</CCol>
-          <CCol>
-            <CForm>
-              <CFormGroup variant="checkbox" onClick={() => setPattern('on')}>
-                <CInputRadio
-                  defaultChecked={chosenPattern === 'on'}
-                  id="radio1"
-                  name="radios"
-                  value="option1"
-                />
-                <CLabel variant="checkbox" htmlFor="radio1">
-                  On
-                </CLabel>
-              </CFormGroup>
-              <CFormGroup variant="checkbox" onClick={() => setPattern('off')}>
-                <CInputRadio
-                  defaultChecked={chosenPattern === 'off'}
-                  id="radio2"
-                  name="radios"
-                  value="option2"
-                />
-                <CLabel variant="checkbox" htmlFor="radio2">
-                  Off
-                </CLabel>
-              </CFormGroup>
-              <CFormGroup variant="checkbox" onClick={() => setPattern('blink')}>
-                <CInputRadio
-                  defaultChecked={chosenPattern === 'blink'}
-                  id="radio2"
-                  name="radios"
-                  value="option2"
-                />
-                <CLabel variant="checkbox" htmlFor="radio2">
-                  Blink
-                </CLabel>
-              </CFormGroup>
-            </CForm>
-          </CCol>
-        </CRow>
-        <div hidden={!hadSuccess && !hadFailure}>
-          <div>
-            <pre className="ignore">{responseBody}</pre>
+      {hadSuccess ? 
+        <SuccessfulActionModalBody toggleModal={toggleModal} /> 
+        :
+        <div>
+          <CModalBody>
+          <h6>When would you like make the LEDs of this device blink?</h6>
+          <CRow style={{ marginTop: '20px' }}>
+            <CCol>
+              <CButton onClick={() => doAction(true)} disabled={waiting} block color="primary">
+                {waiting && doingNow ? 'Loading...' : 'Do Now!'}
+                <CSpinner hidden={!waiting || !doingNow} component="span" size="sm" />
+              </CButton>
+            </CCol>
+            <CCol>
+              <CButton disabled={waiting} block color="primary" onClick={() => setDateToLate()}>
+                Later tonight
+              </CButton>
+            </CCol>
+          </CRow>
+          <CRow style={{ marginTop: '20px' }}>
+            <CCol md="4" style={{ marginTop: '7px' }}>
+              <p>Date:</p>
+            </CCol>
+            <CCol xs="12" md="8">
+              <DatePicker
+                selected={new Date(chosenDate)}
+                includeTime
+                value={new Date(chosenDate)}
+                placeholder="Select custom date"
+                disabled={waiting}
+                onChange={(date) => setDate(date)}
+                min={convertDateToUtc(new Date())}
+              />
+            </CCol>
+          </CRow>
+          <CRow style={{ marginTop: '20px' }}>
+            <CCol md="7">Choose a pattern you would like to use:</CCol>
+            <CCol>
+              <CForm>
+                <CFormGroup variant="checkbox" onClick={() => setPattern('on')}>
+                  <CInputRadio
+                    defaultChecked={chosenPattern === 'on'}
+                    id="radio1"
+                    name="radios"
+                    value="option1"
+                  />
+                  <CLabel variant="checkbox" htmlFor="radio1">
+                    On
+                  </CLabel>
+                </CFormGroup>
+                <CFormGroup variant="checkbox" onClick={() => setPattern('off')}>
+                  <CInputRadio
+                    defaultChecked={chosenPattern === 'off'}
+                    id="radio2"
+                    name="radios"
+                    value="option2"
+                  />
+                  <CLabel variant="checkbox" htmlFor="radio2">
+                    Off
+                  </CLabel>
+                </CFormGroup>
+                <CFormGroup variant="checkbox" onClick={() => setPattern('blink')}>
+                  <CInputRadio
+                    defaultChecked={chosenPattern === 'blink'}
+                    id="radio2"
+                    name="radios"
+                    value="option2"
+                  />
+                  <CLabel variant="checkbox" htmlFor="radio2">
+                    Blink
+                  </CLabel>
+                </CFormGroup>
+              </CForm>
+            </CCol>
+          </CRow>
+          <div hidden={!hadSuccess && !hadFailure}>
+            <div>
+              <pre className="ignore">{responseBody}</pre>
+            </div>
           </div>
-        </div>
-      </CModalBody>
-      <CModalFooter>
-        <div hidden={!checkingIfSure}>Are you sure?</div>
-        <CButton
-          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>
+        </CModalBody>
+        <CModalFooter>
+          <LoadingButton
+            label="Schedule"
+            isLoadingLabel="Loading..."
+            isLoading={waiting && !doingNow}
+            action={doAction}
+            variant="outline"
+            block={false}
+            disabled={waiting}
+          />
+          <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>
-        <CButton hidden={checkingIfSure} color="primary" onClick={() => confirmingIfSure()}>
-          Schedule
-        </CButton>
-        <CButton
-          hidden={!checkingIfSure}
+        <LoadingButton
+          label="Schedule"
+          isLoadingLabel="Loading..."
+          isLoading={waiting}
+          action={doAction}
+          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>
-        <CButton hidden={checkingIfSure} color="primary" onClick={() => confirmingIfSure()}>
-          {hadSuccess || hadFailure ? 'Re-Scan' : 'Scan'}
-        </CButton>
-        <CButton
-          hidden={!checkingIfSure}
+        <LoadingButton
+          label="Schedule"
+          isLoadingLabel="Loading..."
+          isLoading={waiting}
+          action={doAction}
+          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>