Release/custom hook date counter

README.md

@@ -5,15 +5,16 @@
   <img src="screens/data-load-style.gif" alt="react-play" />
 </p>  
 
-The `react-play` is a React project to deomonstrate the well-known React patterns like,
+The `react-play` is a React project to demonstrate the well-known React patterns like,
 
 
 - [X] [Container Component Pattern](https://github.com/atapas/react-play/tree/release/openreplay-cc-pattern) ([Tutorial](https://blog.openreplay.com/understanding-the-container-component-pattern-with-react-hooks))
 - [ ] Higher-Order Component Pattern
 - [ ] Render prop
-- [ ] Custom Hooks
+- [X] Custom Hooks
+  - [X] [CountDown Timer](https://github.com/atapas/react-play/tree/release/custom-hook-date-counter/src/date-time-counter)
 - [ ] Conditional Rendering
-- [ ] Layout Coponent
+- [ ] Layout Component
 - [ ] Controlled Components   
 
 ... many more

src/App.js

@@ -1,10 +1,12 @@
 import './App.css';
+import { CountDownTimer, CurrentTimer } from './date-time-counter/index.js';
 import MovieContainer from './movies/MovieContainer';
 
-
 function App() {
   return (
     <div className="App">
+      <CurrentTimer />
+      <CountDownTimer targetDate = {'Jan 25, 2022 15:37:25'}/>
       <MovieContainer />
     </div>
   );

src/date-time-counter/CountDownTimer.js

@@ -0,0 +1,45 @@
+import "./datetime.css";
+import DateTimeDisplay from "./DateTimeDisplay";
+import useCountDown from "./hooks/useCountDown";
+
+const CountDownTimer = ({ targetDate }) => {
+
+  const [days, hours, minutes, seconds] = useCountDown(targetDate);
+
+  return (
+    <div className="countdown-container">
+      <a
+        href="https://tapasadhikary.com"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="countdown-link"
+      >
+        <DateTimeDisplay
+          value={days}
+          type={"Days"}
+          isDanger={days <= 3}
+        />
+        <p>:</p>
+        <DateTimeDisplay
+          value={hours}
+          type={"Hours"}
+          isDanger={false}
+        />
+        <p>:</p>
+        <DateTimeDisplay
+          value={minutes}
+          type={"Mins"}
+          isDanger={false}
+        />
+        <p>:</p>
+        <DateTimeDisplay
+          value={seconds}
+          type={"Seconds"}
+          isDanger={false}
+        />
+      </a>
+    </div>
+  );
+};
+
+export default CountDownTimer;

src/date-time-counter/CurrentTimer.js

@@ -0,0 +1,24 @@
+
+import { useEffect, useState } from 'react';
+
+const CurrentTimer = () => {
+  // Create a real-time date time counter
+  const [date, setDate] = useState(new Date());
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDate(new Date());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return(
+
+    <div className="counter">
+      Current Time: <h1>{date.toLocaleTimeString()}</h1>
+    </div>
+  );
+}
+
+export default CurrentTimer;

src/date-time-counter/DateTimeDisplay.js

@@ -0,0 +1,10 @@
+const DateTimeDisplay = ({value, type, isDanger}) => {
+  return (
+    <div className={isDanger ? 'countdown danger' : 'countdown'}>
+      <p>{value}</p>
+      <span>{type}</span>
+    </div>
+  );
+};
+
+export default DateTimeDisplay;

src/date-time-counter/datetime.css

@@ -0,0 +1,37 @@
+
+.countdown-link {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-weight: 700;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  padding: 0.5rem;
+  border: 1px solid #ebebeb;
+  border-radius: 0.25rem;
+  text-decoration: none;
+  color: #000;
+}
+
+.countdown {
+  line-height: 1.25rem;
+  padding: 0 0.75rem 0 0.75rem;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.countdown.danger {
+  color: #ff0000;
+}
+
+.countdown > p {
+  margin: 0;
+}
+
+.countdown > span {
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}

src/date-time-counter/hooks/useCountDown.js

@@ -0,0 +1,35 @@
+
+import { useEffect, useState } from "react";
+
+
+const useCountDown = (targetDate) => {
+  const countDownDate = new Date(targetDate).getTime();
+
+  const [countDown, setCountDown] = useState(
+    countDownDate - new Date().getTime()
+  );
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCountDown(countDownDate - new Date().getTime());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [countDownDate]);
+
+  return getReturnValues(countDown);
+};
+
+const getReturnValues = (countDown) => {
+  // calculate time left
+  const days = Math.floor(countDown / (1000 * 60 * 60 * 24));
+  const hours = Math.floor(
+    (countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+  );
+  const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60));
+  const seconds = Math.floor((countDown % (1000 * 60)) / 1000);
+
+  return [days, hours, minutes, seconds];
+};
+
+export default useCountDown;

src/date-time-counter/index.js

@@ -0,0 +1,9 @@
+
+import CountDownTimer from './CountDownTimer';
+import CurrentTimer from './CurrentTimer';
+
+export {
+  CurrentTimer,
+  CountDownTimer
+};
+