Amalesh - Taking Over 'Create Refresh Button for Disconnected Timer'

src/components/Timer/Countdown.module.css

@@ -324,4 +324,17 @@ input[type='number']::-webkit-inner-spin-button {
     opacity, transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 300ms;
+}
+
+.refreshIcon {
+  position: absolute;
+  top: 0.55rem;
+  right: 2.2rem;
+  cursor: pointer;
+  font-size: 1.2rem;
+  opacity: 0.9;
+}
+
+.refreshIcon:hover {
+  color: #ed688a;
 }

src/components/Timer/Timer.jsx

@@ -4,7 +4,7 @@
 import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Progress } from 'reactstrap';
 import useWebSocket, { ReadyState } from 'react-use-websocket';
-import { BsAlarmFill } from 'react-icons/bs';
+import { BsAlarmFill, BsArrowClockwise } from 'react-icons/bs';
 import {
   FaPlusCircle,
   FaMinusCircle,
@@ -239,6 +239,10 @@
     [timerState],
   );
 
+  const handleRefreshTimer = useCallback(() => {
+    window.location.reload();
+  }, []);
+
   // Initialize session ID on component mount
   useEffect(() => {
     // Use cryptographically secure random values for session ID generation
@@ -886,6 +890,7 @@
               readyState={customReadyState}
               message={message}
               toggleTimer={() => window.close()}
+              handleRefreshTimer={handleRefreshTimer}
             />
           )}
         </div>
@@ -912,6 +917,7 @@
           <BsAlarmFill fontSize="2rem" title="Open timer dropdown" />
         </div>
       </button>
+
       <div className={css.previewContainer} title="Open timer dropdown">
         <Progress multi style={{ height: '6px' }}>
           <Progress bar value={100 * (1 - remaining / goal)} color="success" animated={running} />
@@ -928,7 +934,18 @@
             {previewTimeDisplay}
           </button>
         ) : (
-          <div className={css.disconnected}>Disconnected</div>
+          <div className={css.disconnected}>
+            <span>Disconnected</span>
+            <button
+              type="button"
+              onClick={handleRefreshTimer}
+              className={css.disconnectedRefreshBtn}
+              aria-label="Reload timer"
+              title="Reload timer"
+            >
+              <BsArrowClockwise />
+            </button>
+          </div>
         )}
       </div>
       {customReadyState === ReadyState.OPEN && (
@@ -1081,6 +1098,7 @@
                 readyState={customReadyState}
                 message={message}
                 toggleTimer={toggleTimer}
+                handleRefreshTimer={handleRefreshTimer}
               />
             )}
           </div>

src/components/Timer/Timer.module.css

@@ -44,13 +44,36 @@
 }
 
 .disconnected {
-  font-size: 1.2rem;
-  font-weight: bold;
-  width: fit-content;
+  width: 140px;
+  min-height: 42px;
   background-color: rgb(82 92 102 / 100%);
   color: rgb(238 10 10);
   border-radius: 0 0 0.5rem 0.5rem;
-  padding: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  font-size: 1rem;
+  font-weight: bold;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+
+.disconnectedRefreshBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: white;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+}
+
+.disconnectedRefreshBtn:hover {
+  color: #ed688a;
 }
 
 .preview {

src/components/Timer/TimerStatus.jsx

@@ -1,9 +1,9 @@
 import { ReadyState } from 'react-use-websocket';
-import { BsXLg } from 'react-icons/bs';
+import { BsXLg, BsArrowClockwise } from 'react-icons/bs';
 import cs from 'classnames';
 import css from './Countdown.module.css';
 
-export default function TimerStatus({ readyState, toggleTimer }) {
+export default function TimerStatus({ readyState, toggleTimer, handleRefreshTimer }) {
   /*
   This is the status of the connection with the timer service
   We just use the readyState of the websocket connection to show the status
@@ -16,6 +16,8 @@
     [ReadyState.UNINSTANTIATED]: 'Uninstantiated',
   }[readyState];
 
+  const showRefreshButton = readyState === ReadyState.CLOSED;
+
   /*
   Here is the component to show the timer status
   If the connection is not open we show the connection status
@@ -27,6 +29,13 @@
   return (
     <>
       <BsXLg className={cs(css.transitionColor, css.crossIcon)} onClick={toggleTimer} />
+      {showRefreshButton && (
+        <BsArrowClockwise
+          className={cs(css.transitionColor, css.refreshIcon)}
+          onClick={handleRefreshTimer}
+        />
+      )}
+
       <div className={css.timerStatus}>{connectionStatus}</div>
     </>
   );