From ca14b49f5a4575ed95655a7edcd810c5ac92730c Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Wed, 2 Sep 2020 15:29:02 -0700
Subject: [PATCH] fix: lint warnings in countdown container

---
 .../Countdown/CountdownContainer.js           | 56 +++++++++----------
 1 file changed, 26 insertions(+), 30 deletions(-)

diff --git a/src/components/Countdown/CountdownContainer.js b/src/components/Countdown/CountdownContainer.js
index 851e43829..e81ee8500 100644
--- a/src/components/Countdown/CountdownContainer.js
+++ b/src/components/Countdown/CountdownContainer.js
@@ -3,32 +3,44 @@ import Countdown from './Countdown';
 import PropTypes from 'prop-types';
 import styles from './CountdownContainer.module.scss';
 
+const getRemainingTime = (targetDate) => {
+  const countDownDate = new Date(targetDate).getTime();
+  const now = new Date().getTime();
+
+  const milliseconds = countDownDate - now;
+
+  const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24));
+  const hours = Math.floor(
+    (milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+  );
+  const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
+  const seconds = Math.floor((milliseconds % (1000 * 60)) / 1000);
+
+  return { days, hours, minutes, seconds, milliseconds };
+};
+
 const CountdownContainer = ({ targetDate, inactiveMessage }) => {
-  const [countdown, setCountdown] = React.useState(() => getRemainingTime());
-  let active = countdown.milliseconds > 0;
+  const [countdown, setCountdown] = React.useState(() =>
+    getRemainingTime(targetDate)
+  );
+  const active = countdown.milliseconds > 0;
 
   useEffect(() => {
     const hasRemainingTime = () => {
-      const { milliseconds } = getRemainingTime();
+      const { milliseconds } = getRemainingTime(targetDate);
       return milliseconds > 0;
     };
 
     if (!hasRemainingTime()) {
-      active = false;
       return;
     }
 
     const interval = setInterval(() => {
-      const {
-        days,
-        hours,
-        minutes,
-        seconds,
-        milliseconds,
-      } = getRemainingTime();
+      const { days, hours, minutes, seconds, milliseconds } = getRemainingTime(
+        targetDate
+      );
 
       if (milliseconds < 0) {
-        active = false;
         clearInterval(interval);
       } else {
         setCountdown({ days, hours, minutes, seconds, milliseconds });
@@ -36,27 +48,11 @@ const CountdownContainer = ({ targetDate, inactiveMessage }) => {
     }, 1000);
 
     return () => clearInterval(interval);
-  }, []);
-
-  function getRemainingTime() {
-    const countDownDate = new Date(targetDate).getTime();
-    const now = new Date().getTime();
-
-    const milliseconds = countDownDate - now;
-
-    const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24));
-    const hours = Math.floor(
-      (milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
-    );
-    const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
-    const seconds = Math.floor((milliseconds % (1000 * 60)) / 1000);
-
-    return { days, hours, minutes, seconds, milliseconds };
-  }
+  }, [targetDate]);
 
   return (
     <div className={styles.container}>
-      {active === true ? (
+      {active ? (
         <div className={styles.countdownContainer}>
           <Countdown countdown={countdown} />
         </div>