Disabling of buttons and doublecheck for actions

src/components/FirmwareUpgradeModal.js

@@ -24,23 +24,30 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
   const [hadSuccess, setHadSuccess] = useState(false);
   const [hadFailure, setHadFailure] = useState(false);
   const [waiting, setWaiting] = useState(false);
-  const [chosenDate, setChosenDate] = useState(null);
+  const [chosenDate, setChosenDate] = useState(new Date().toString());
   const [firmware, setFirmware] = useState('');
   const [validFirmware, setValidFirmware] = useState(true);
+  const [validDate, setValidDate] = useState(true);
   const [responseBody, setResponseBody] = useState('');
   const [checkingIfSure, setCheckingIfSure] = useState(false);
   const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
 
   const formValidation = () => {
+    let valid = true;
     if (firmware.trim() === '') {
       setValidFirmware(false);
-      return false;
+      valid = false;
     }
-    return chosenDate !== null;
+
+    if (chosenDate.trim() === ''){
+      setValidDate(false);
+      valid = false
+    }
+    return valid;
   };
 
   const setDateToNow = () => {
-    const now = new Date().toISOString();
+    const now = new Date().toString();
     setChosenDate(now);
   };
 
@@ -52,23 +59,24 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
     date.setHours(3);
     date.setMinutes(0);
 
-    setChosenDate(convertDateFromUtc(date).toISOString());
+    setChosenDate(convertDateFromUtc(date).toString());
   };
 
   const setDate = (date) => {
     if (date) {
-      setChosenDate(date.toISOString());
+      setChosenDate(date.toString());
     }
   };
 
   const confirmingIfSure = () => {
     setCheckingIfSure(true);
   };
+
   useEffect(() => {
     setHadSuccess(false);
     setHadFailure(false);
     setWaiting(false);
-    setChosenDate(null);
+    setChosenDate(new Date().toString());
     setFirmware('');
     setValidFirmware(true);
     setResponseBody('');
@@ -77,7 +85,8 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
 
   useEffect(() => {
     setValidFirmware(true);
-  }, [firmware]);
+    setValidDate(true);
+  }, [firmware, chosenDate]);
 
   const postUpgrade = () => {
     setHadFailure(false);
@@ -85,6 +94,8 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
     setWaiting(true);
 
     const token = getToken();
+    const utcDate = new Date(chosenDate);
+    const utcDateString = utcDate.toISOString();
 
     const headers = {
       Accept: 'application/json',
@@ -94,7 +105,7 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
 
     const parameters = {
       serialNumber: selectedDeviceId,
-      when: chosenDate,
+     when: utcDateString,
       uri: firmware,
     };
     axiosInstance
@@ -123,23 +134,25 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
         <h6>Choose a time and a firmware version for this device</h6>
         <CRow style={{ marginTop: '20px' }}>
           <CCol>
-            <CButton block color="primary" onClick={() => setDateToNow()}>
+            <CButton disabled={waiting} block color="primary" onClick={() => setDateToNow()}>
               Now
             </CButton>
           </CCol>
           <CCol>
-            <CButton block color="primary" onClick={() => setDateToLate()}>
+            <CButton disabled={waiting} block color="primary" onClick={() => setDateToLate()}>
               Later tonight
             </CButton>
           </CCol>
         </CRow>
         <CRow style={{ marginTop: '20px' }}>
           <CCol md="4" style={{ marginTop: '7px' }}>
-            <p>Local time:</p>
+            <p>Time of upgrade:</p>
           </CCol>
           <CCol xs="12" md="8">
             <DatePicker
-              selected={Date.parse(chosenDate)}
+              selected={chosenDate === '' ? new Date() : new Date(chosenDate)}
+              value={chosenDate === '' ? new Date() : new Date(chosenDate)}
+              className={('form-control', { 'is-invalid': !validDate })}
               includeTime
               selectTime
               placeholder="Select custom date in UTC"
@@ -147,13 +160,11 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
               onChange={(date) => setDate(date)}
               min={new Date()}
             />
+            <CInvalidFeedback>You need a date...</CInvalidFeedback>
           </CCol>
         </CRow>
-
-        <div style={{ marginTop: '25px' }}>
-          <p>
-            Device will upgrade at (UTC): <b>{chosenDate}</b>
-          </p>
+        <div>
+          Firmware URI:
         </div>
         <CInput
           disabled={waiting}
@@ -161,7 +172,7 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
           type="text"
           id="uri"
           name="uri-input"
-          placeholder="https://somelocation.com/file=newversion.bin"
+          placeholder="https://s3-us-west-2.amazonaws.com/ucentral.arilia.com/20210508-linksys_ea8300-uCentral-trunk-43e1a2d-upgrade.bin"
           autoComplete="firmware-uri"
           onChange={(event) => setFirmware(event.target.value)}
           value={firmware}