From ea08982ee29354f6cbe68c6035f6454a88ee6dbe Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Tue, 18 Jan 2022 18:46:19 +0530 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20Introduced=20a=20couple=20of=20?= =?UTF-8?q?timers?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 4 +- src/date-time-counter/CountDownTimer.js | 64 ++++++++++++++++++++++++ src/date-time-counter/CurrentTimer.js | 24 +++++++++ src/date-time-counter/DateTimeDisplay.js | 10 ++++ src/date-time-counter/datetime.css | 37 ++++++++++++++ src/date-time-counter/index.js | 9 ++++ 6 files changed, 147 insertions(+), 1 deletion(-) create mode 100644 src/date-time-counter/CountDownTimer.js create mode 100644 src/date-time-counter/CurrentTimer.js create mode 100644 src/date-time-counter/DateTimeDisplay.js create mode 100644 src/date-time-counter/datetime.css create mode 100644 src/date-time-counter/index.js diff --git a/src/App.js b/src/App.js index be9a98fb15..c008feb41d 100644 --- a/src/App.js +++ b/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 (
+ +
); diff --git a/src/date-time-counter/CountDownTimer.js b/src/date-time-counter/CountDownTimer.js new file mode 100644 index 0000000000..e7a2a0fecf --- /dev/null +++ b/src/date-time-counter/CountDownTimer.js @@ -0,0 +1,64 @@ +import { useEffect, useState } from "react"; +import "./datetime.css"; +import DateTimeDisplay from "./DateTimeDisplay"; + +const CountDownTimer = ({ 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]); + + // 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 ( +
+ + +

:

+ +

:

+ +

:

+ + +
+ ); +}; + +export default CountDownTimer; diff --git a/src/date-time-counter/CurrentTimer.js b/src/date-time-counter/CurrentTimer.js new file mode 100644 index 0000000000..7470afe719 --- /dev/null +++ b/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( + +
+ Current Time:

{date.toLocaleTimeString()}

+
+ ); +} + +export default CurrentTimer; \ No newline at end of file diff --git a/src/date-time-counter/DateTimeDisplay.js b/src/date-time-counter/DateTimeDisplay.js new file mode 100644 index 0000000000..1312c65ff4 --- /dev/null +++ b/src/date-time-counter/DateTimeDisplay.js @@ -0,0 +1,10 @@ +const DateTimeDisplay = ({value, type, isDanger}) => { + return ( +
+

{value}

+ {type} +
+ ); +}; + +export default DateTimeDisplay; diff --git a/src/date-time-counter/datetime.css b/src/date-time-counter/datetime.css new file mode 100644 index 0000000000..4aafe77a4b --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/date-time-counter/index.js b/src/date-time-counter/index.js new file mode 100644 index 0000000000..65684673bf --- /dev/null +++ b/src/date-time-counter/index.js @@ -0,0 +1,9 @@ + +import CountDownTimer from './CountDownTimer'; +import CurrentTimer from './CurrentTimer'; + +export { + CurrentTimer, + CountDownTimer +}; + From 4969fc3bdb7085197e5e42ae9d07446b531772bf Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Tue, 18 Jan 2022 22:10:02 +0530 Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20Now=20Introduced=20a=20Custom?= =?UTF-8?q?=20Hook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/date-time-counter/CountDownTimer.js | 29 ++++--------------- src/date-time-counter/hooks/useCountDown.js | 31 +++++++++++++++++++++ 2 files changed, 36 insertions(+), 24 deletions(-) create mode 100644 src/date-time-counter/hooks/useCountDown.js diff --git a/src/date-time-counter/CountDownTimer.js b/src/date-time-counter/CountDownTimer.js index e7a2a0fecf..b5027598df 100644 --- a/src/date-time-counter/CountDownTimer.js +++ b/src/date-time-counter/CountDownTimer.js @@ -1,29 +1,10 @@ -import { useEffect, useState } from "react"; import "./datetime.css"; import DateTimeDisplay from "./DateTimeDisplay"; +import useCountDown from "./hooks/useCountDown"; const CountDownTimer = ({ 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]); - - // 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); + + const [days, hours, minutes, seconds] = useCountDown(targetDate); return (
@@ -36,7 +17,7 @@ const CountDownTimer = ({ targetDate }) => {

:

{
diff --git a/src/date-time-counter/hooks/useCountDown.js b/src/date-time-counter/hooks/useCountDown.js new file mode 100644 index 0000000000..e057bf7325 --- /dev/null +++ b/src/date-time-counter/hooks/useCountDown.js @@ -0,0 +1,31 @@ + +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]); + + // 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; \ No newline at end of file From b20284aacfd137c19abd8014b3180e7024ec25e0 Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Tue, 18 Jan 2022 22:18:03 +0530 Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=93=9D=20Readme=20update=20for=20ciun?= =?UTF-8?q?tdown=20hook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 1ba5cc6a11..01c9ce55b6 100644 --- a/README.md +++ b/README.md @@ -11,9 +11,10 @@ The `react-play` is a React project to deomonstrate the well-known React pattern - [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 From c4878ed05847933c34c08aff606e4e3f2cfc9793 Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Tue, 18 Jan 2022 22:20:49 +0530 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20a=20typo=20in=20read?= =?UTF-8?q?me?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 01c9ce55b6..cc6a2267cf 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ react-play

-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)) From d2d80405315e4f3a133b08e2c04ad74d7ffa62c6 Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Thu, 20 Jan 2022 19:06:58 +0530 Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=8E=A8=20Improve=20the=20code=20a=20b?= =?UTF-8?q?it?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/date-time-counter/hooks/useCountDown.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/date-time-counter/hooks/useCountDown.js b/src/date-time-counter/hooks/useCountDown.js index e057bf7325..f47d8a8609 100644 --- a/src/date-time-counter/hooks/useCountDown.js +++ b/src/date-time-counter/hooks/useCountDown.js @@ -17,6 +17,10 @@ const useCountDown = (targetDate) => { 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(