refract

memo

client/src/common/components/countdown/Countdown.jsx

@@ -1,19 +1,15 @@
-import { memo, useEffect, useState } from 'react';
+import { memo } from 'react';
 import { formatDisplay } from '../../dateConfig';
 import styles from './Countdown.module.css';
 
 const Countdown = ({ time, small, negative, hideZeroHours }) => {
-  const [clock, setClock] = useState(time);
   let display = '-- : -- : --';
 
-  useEffect(() => {
-    setClock(time);
-  }, [time]);
-
   // prepare display string
-  if (clock != null && !isNaN(clock))
+  if (time != null && !isNaN(time))
-    display = formatDisplay(Math.abs(clock), hideZeroHours);
+    display = formatDisplay(Math.abs(time), hideZeroHours);
   const colour = negative ? '#ff7597' : '#fffffa';
+
   return (
     <div
       className={small ? styles.countdownClockSmall : styles.countdownClock}

client/src/features/control/PlaybackControl.jsx

@@ -1,10 +1,8 @@
 import style from './PlaybackControl.module.css';
-import Countdown from '../../common/components/countdown/Countdown';
-import { stringFromMillis } from '../../common/dateConfig';
 import { useEffect, useState } from 'react';
 import { useSocket } from '../../app/context/socketContext';
-import { Button } from '@chakra-ui/button';
 import PlaybackButtons from './PlaybackButtons';
+import PlaybackTimer from './PlaybackTimer';
 
 export default function PlaybackControl() {
   const socket = useSocket();
@@ -12,7 +10,6 @@ export default function PlaybackControl() {
   const [timer, setTimer] = useState({
     clock: null,
     running: null,
-    currentSeconds: null,
     startedAt: null,
     expectedFinish: null,
   });
@@ -20,7 +17,7 @@ export default function PlaybackControl() {
 
   const resetTimer = () => {
     setTimer({
-      currentSeconds: null,
+      running: null,
       startedAt: null,
       expectedFinish: null,
     });
@@ -89,68 +86,12 @@ export default function PlaybackControl() {
     }
   };
 
-  const started = stringFromMillis(timer.startedAt, true);
-  const finish = stringFromMillis(timer.expectedFinish, true);
-  const isNegative = timer.running < 0;
-  const isDelayed = false;
-  const isRolling = false;
-
-  const incrementProps = {
-    size: 'sm',
-    width: '2.9em',
-    colorScheme: 'whiteAlpha',
-    variant: 'outline',
-    _focus: { boxShadow: 'none' },
-  };
-
   return (
     <div className={style.mainContainer}>
-      <div className={style.timeContainer}>
+      <PlaybackTimer
-        <div className={style.indicators}>
+        timer={timer}
-          <div className={style.indRoll} />
+        handleIncrement={(amount) => socket.emit('increment-timer', amount)}
-          <div
+      />
-            className={isNegative ? style.indNegativeActive : style.indNegative}
-          />
-          <div className={style.indDelay} />
-        </div>
-        <div className={style.timer}>
-          <Countdown time={timer?.running} small negative={isNegative} />
-        </div>
-        <div className={style.start}>
-          <span className={style.tag}>Started at </span>
-          <span className={style.time}>{started}</span>
-        </div>
-        <div className={style.finish}>
-          <span className={style.tag}>Finish at </span>
-          <span className={style.time}>{finish}</span>
-        </div>
-        <div className={style.btn}>
-          <Button
-            {...incrementProps}
-            onClick={() => socket.emit('increment-timer', -1)}
-          >
-            -1
-          </Button>
-          <Button
-            {...incrementProps}
-            onClick={() => socket.emit('increment-timer', 1)}
-          >
-            +1
-          </Button>
-          <Button
-            {...incrementProps}
-            onClick={() => socket.emit('increment-timer', -5)}
-          >
-            -5
-          </Button>
-          <Button
-            {...incrementProps}
-            onClick={() => socket.emit('increment-timer', 5)}
-          >
-            +5
-          </Button>
-        </div>
-      </div>
       <PlaybackButtons
         playback={playback}
         selectedId={selectedId}

client/src/features/control/PlaybackTimer.jsx

@@ -0,0 +1,70 @@
+import style from './PlaybackControl.module.css';
+import Countdown from '../../common/components/countdown/Countdown';
+import { stringFromMillis } from '../../common/dateConfig';
+import { Button } from '@chakra-ui/button';
+import { memo } from 'react';
+
+const areEqual = (prevProps, nextProps) => {
+  return (
+    prevProps.timer.running === nextProps.timer.running &&
+    prevProps.timer.expectedFinish === nextProps.timer.expectedFinish &&
+    prevProps.timer.startedAt === nextProps.timer.startedAt
+  );
+};
+
+const PlaybackTimer = ({ timer, handleIncrement }) => {
+  const started = stringFromMillis(timer.startedAt, true);
+  const finish = stringFromMillis(timer.expectedFinish, true);
+  const isNegative = timer.running < 0;
+  const isDelayed = false;
+  const isRolling = false;
+
+  const incrementProps = {
+    size: 'sm',
+    width: '2.9em',
+    colorScheme: 'whiteAlpha',
+    variant: 'outline',
+    _focus: { boxShadow: 'none' },
+  };
+
+  return (
+    <>
+      <div className={style.timeContainer}>
+        <div className={style.indicators}>
+          <div className={style.indRoll} />
+          <div
+            className={isNegative ? style.indNegativeActive : style.indNegative}
+          />
+          <div className={style.indDelay} />
+        </div>
+        <div className={style.timer}>
+          <Countdown time={timer?.running} small negative={isNegative} />
+        </div>
+        <div className={style.start}>
+          <span className={style.tag}>Started at </span>
+          <span className={style.time}>{started}</span>
+        </div>
+        <div className={style.finish}>
+          <span className={style.tag}>Finish at </span>
+          <span className={style.time}>{finish}</span>
+        </div>
+        <div className={style.btn}>
+          <Button {...incrementProps} onClick={() => handleIncrement(-1)}>
+            -1
+          </Button>
+          <Button {...incrementProps} onClick={() => handleIncrement(1)}>
+            +1
+          </Button>
+          <Button {...incrementProps} onClick={() => handleIncrement(-5)}>
+            -5
+          </Button>
+          <Button {...incrementProps} onClick={() => handleIncrement(5)}>
+            +5
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default memo(PlaybackTimer, areEqual);