From 5f87ac7d7c9b72b98198d86010d4c5145696671e Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Mon, 28 Feb 2022 11:57:23 +0530 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20Started=20the=20work=20to=20add?= =?UTF-8?q?=20social=20links?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/index.js | 4 +++- src/common/playlinks/index.js | 12 ++++++++++++ src/common/playlists/PlayList.js | 2 +- src/meta/play-meta.js | 5 +++++ src/plays/clock/CurrentTimer.js | 11 +++++++++++ 5 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 src/common/playlinks/index.js diff --git a/src/common/index.js b/src/common/index.js index e5dcc61e7a..ee153056b9 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -3,12 +3,14 @@ import Footer from './footer/Footer'; import Header from './header/Header'; import Home from './home/Home'; import Modal from './modal'; +import PlayLinks from './playlinks'; export { Header, Footer, Home, PageNotFound, - Modal + Modal, + PlayLinks }; diff --git a/src/common/playlinks/index.js b/src/common/playlinks/index.js new file mode 100644 index 0000000000..caf9bfb9cd --- /dev/null +++ b/src/common/playlinks/index.js @@ -0,0 +1,12 @@ +import { useEffect } from 'react'; + +const PlayLinks = ({play}) => { + console.log(play); + + return( +
+
+ ); +}; + +export default PlayLinks; \ No newline at end of file diff --git a/src/common/playlists/PlayList.js b/src/common/playlists/PlayList.js index f3aa3baa6b..9259a88766 100644 --- a/src/common/playlists/PlayList.js +++ b/src/common/playlists/PlayList.js @@ -8,7 +8,7 @@ const PlayList = () => { diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js index ba9c6f0cc7..7ebc827e70 100644 --- a/src/meta/play-meta.js +++ b/src/meta/play-meta.js @@ -65,6 +65,10 @@ const getAllPlays = () => { return plays; }; +const getPlayById = id => { + return plays.find(play => play.id === id); +}; + const getPlaysOnSearch = searchTerm => { return plays.filter(play => { return (play.name.toLowerCase().includes(searchTerm.toLowerCase()) @@ -116,6 +120,7 @@ const getAllLevels = () => { export { getAllPlays, + getPlayById, getPlaysOnSearch, getPlaysByLevel, getPlaysByTags, diff --git a/src/plays/clock/CurrentTimer.js b/src/plays/clock/CurrentTimer.js index 7470afe719..44bd4a47d9 100644 --- a/src/plays/clock/CurrentTimer.js +++ b/src/plays/clock/CurrentTimer.js @@ -1,7 +1,17 @@ import { useEffect, useState } from 'react'; +import { useLocation } from 'react-router-dom'; +import { getPlayById } from 'meta/play-meta'; +import { PlayLinks } from 'common'; const CurrentTimer = () => { + const location = useLocation(); + const [play, setPlay] = useState(); + const { id } = location.state; + useEffect(() => { + + setPlay(getPlayById(id)); + }, [id]); // Create a real-time date time counter const [date, setDate] = useState(new Date()); @@ -16,6 +26,7 @@ const CurrentTimer = () => { return(
+ Current Time:

{date.toLocaleTimeString()}

); From a932df7ef60dc7cab0fdeb977d50ccec0828f354 Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Tue, 8 Mar 2022 08:56:02 +0530 Subject: [PATCH 2/5] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Improved=20performance?= =?UTF-8?q?=20of=20playlinks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- plop-templates/play.hbs | 2 +- src/common/playlinks/index.js | 11 +++++++---- src/meta/play-meta.js | 12 ++++++------ src/plays/clock/CurrentTimer.js | 17 ++++++++--------- 4 files changed, 22 insertions(+), 20 deletions(-) diff --git a/plop-templates/play.hbs b/plop-templates/play.hbs index 761621c863..924ddf7d8a 100644 --- a/plop-templates/play.hbs +++ b/plop-templates/play.hbs @@ -6,7 +6,7 @@ path: '/plays/{{folder}}', level: '{{level}}', tags: '{{tags}}', - github: '{{github}}', + github: 'https://github.com/{{github}}', blog: '{{blog}}', video: '{{video}}' }, //replace new play item here \ No newline at end of file diff --git a/src/common/playlinks/index.js b/src/common/playlinks/index.js index caf9bfb9cd..84a3ab7462 100644 --- a/src/common/playlinks/index.js +++ b/src/common/playlinks/index.js @@ -1,12 +1,15 @@ -import { useEffect } from 'react'; +import React from 'react'; const PlayLinks = ({play}) => { console.log(play); return( -
-
+ ); }; -export default PlayLinks; \ No newline at end of file +export default React.memo(PlayLinks); \ No newline at end of file diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js index 05b93b797a..84ea0031eb 100644 --- a/src/meta/play-meta.js +++ b/src/meta/play-meta.js @@ -18,7 +18,7 @@ const plays = [ index: true, level: 'Beginner', tags: 'JSX', - github: 'atapas' + github: 'https://github.com/atapas' }, { id: 'pl-0002', @@ -28,7 +28,7 @@ const plays = [ path: '/plays/clock', level: 'Beginner', tags: 'JSX, Schedule', - github: 'atapas' + github: 'https://github.com/atapas' }, { id: 'pl-0003', @@ -38,7 +38,7 @@ const plays = [ path: '/plays/countdown', level: 'Intermediate', tags: 'Schedule, Component Structure, Hooks, Custom Hooks', - github: 'atapas' + github: 'https://github.com/atapas' }, { id: 'pl-0004', @@ -48,7 +48,7 @@ const plays = [ path: '/plays/movies', level: 'Intermediate', tags: 'Fetch Data, Hooks', - github: 'atapas' + github: 'https://github.com/atapas' }, { id: 'pl-0005', @@ -58,7 +58,7 @@ const plays = [ path: '/plays/basic-family-tree', level: 'Intermediate', tags: 'Recursion, Tree', - github: 'green-roots' + github: 'https://github.com/green-roots' }, { id: 'pl-counter', name: 'Counter', @@ -67,7 +67,7 @@ const plays = [ path: '/plays/Counter', level: 'Beginner', tags: 'JSX, State, Props', - github: 'murtuzaalisurti' + github: 'https://github.com/murtuzaalisurti' }, //replace new play item here ]; diff --git a/src/plays/clock/CurrentTimer.js b/src/plays/clock/CurrentTimer.js index 44bd4a47d9..ba8a3437d6 100644 --- a/src/plays/clock/CurrentTimer.js +++ b/src/plays/clock/CurrentTimer.js @@ -5,13 +5,10 @@ import { getPlayById } from 'meta/play-meta'; import { PlayLinks } from 'common'; const CurrentTimer = () => { + // The following code is to fetch the current play from the URL const location = useLocation(); - const [play, setPlay] = useState(); const { id } = location.state; - useEffect(() => { - - setPlay(getPlayById(id)); - }, [id]); + const play = getPlayById(id); // Create a real-time date time counter const [date, setDate] = useState(new Date()); @@ -24,11 +21,13 @@ const CurrentTimer = () => { }, []); return( - -
+ <> - Current Time:

{date.toLocaleTimeString()}

-
+
+ Current Time:

{date.toLocaleTimeString()}

+
+ + ); } From 1737ca28c94f7e64d038168b36bb2c2a99934672 Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Mon, 14 Mar 2022 18:17:18 +0530 Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8=20Added=20the=20social=20links=20?= =?UTF-8?q?and=20fixe=20few=20issues?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/playlinks/index.js | 30 +++++++++++++++++++++++++++--- src/meta/play-meta.js | 4 +++- src/plays/Counter/CounterApp.js | 4 ++-- src/plays/index.js | 2 +- 4 files changed, 33 insertions(+), 7 deletions(-) diff --git a/src/common/playlinks/index.js b/src/common/playlinks/index.js index 84a3ab7462..7e3f224215 100644 --- a/src/common/playlinks/index.js +++ b/src/common/playlinks/index.js @@ -5,9 +5,33 @@ const PlayLinks = ({play}) => { return( ); }; diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js index 84ea0031eb..00d74cd961 100644 --- a/src/meta/play-meta.js +++ b/src/meta/play-meta.js @@ -28,7 +28,9 @@ const plays = [ path: '/plays/clock', level: 'Beginner', tags: 'JSX, Schedule', - github: 'https://github.com/atapas' + github: 'https://github.com/atapas', + blog: 'https://blog.greenroots.info', + video: 'https://youtube.com/tapasadhikary' }, { id: 'pl-0003', diff --git a/src/plays/Counter/CounterApp.js b/src/plays/Counter/CounterApp.js index 1c24e27f93..49a86da047 100644 --- a/src/plays/Counter/CounterApp.js +++ b/src/plays/Counter/CounterApp.js @@ -11,10 +11,10 @@ function CounterApp() { setInput(""); } return ( -
+

Counter

A simple counter

-

Specify the limit and click the circle below to increment the value until the limit has been reached. After that it will reset to zero.

+

Specify the limit and click the circle below to increment the value until the limit has been reached. After that it will reset to zero.

setInput(e.target.value)} className="no_of_times" type="text" /> diff --git a/src/plays/index.js b/src/plays/index.js index 057ecf87c4..9c7f5a83ab 100644 --- a/src/plays/index.js +++ b/src/plays/index.js @@ -5,5 +5,5 @@ export { default as CdTimerComp } from 'plays/date-time-counter/CdTimerComp'; export { default as BasicTree } from 'plays/family-tree/BasicTree'; export { default as MovieContainer } from 'plays/movies/MovieContainer'; export { default as WhyReact } from 'plays/why-react/WhyReact'; -export { default as CounterApp } from 'plays/Counter/CounterApp'; +export { default as CounterApp } from 'plays/counter/CounterApp'; //add export here From c19475e26e44a5f65a5075c51c4b08da4fb73cfd Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Mon, 14 Mar 2022 18:26:16 +0530 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=90=9B=20Change=20the=20clock=20name?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/meta/play-meta.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js index 00d74cd961..0b5779c73e 100644 --- a/src/meta/play-meta.js +++ b/src/meta/play-meta.js @@ -22,7 +22,7 @@ const plays = [ }, { id: 'pl-0002', - name: 'Current Timer', + name: 'Clock', description: 'This application shows the current time and it increases every second', component: () => {return }, path: '/plays/clock', From 83f54da4683eaefd7ccd79502c6fab407391da94 Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Mon, 14 Mar 2022 18:48:02 +0530 Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=8E=A8=20Change=20folder=20of=20count?= =?UTF-8?q?er?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plays/Counter/counter.css | 66 -------------------- src/plays/{Counter => counter}/Counter.js | 0 src/plays/{Counter => counter}/CounterApp.js | 0 src/plays/counter/counter.css | 66 ++++++++++++++++++++ 4 files changed, 66 insertions(+), 66 deletions(-) delete mode 100644 src/plays/Counter/counter.css rename src/plays/{Counter => counter}/Counter.js (100%) rename src/plays/{Counter => counter}/CounterApp.js (100%) create mode 100644 src/plays/counter/counter.css diff --git a/src/plays/Counter/counter.css b/src/plays/Counter/counter.css deleted file mode 100644 index f91ff6a9ee..0000000000 --- a/src/plays/Counter/counter.css +++ /dev/null @@ -1,66 +0,0 @@ -.counter-container{ - display: flex; - flex-direction: column; - align-items: center; - width: 100vw; -} -.counter-desc{ - text-align: center; -} -button:hover{ - cursor: pointer; -} -.input_field { - display: flex; - justify-content: center; - margin-top: 1rem; - width: 90%; - margin: 0 1rem; -} -.input_field input { - width: 100%; - max-width: 15rem; - outline: none; - border: 3px solid rgb(220, 182, 255); - border-radius: 0.6rem; - padding: 0.5rem; - text-align: center; -} -.input_field button, -.reset_btn { - background-color: rgb(111, 78, 138); - margin-left: 1rem; - outline: none; - color: white; - border: none; - border-radius: 0.5rem; - padding: 0 0.5rem; -} -.reset_btn { - margin: 0; - padding: 0.5rem 1rem; -} -.counter { - margin-top: 2.5rem; - display: flex; - flex-direction: column; - align-items: center; -} -.reset_btn { - margin-top: 0.5rem; -} -.counter_btn { - height: 7rem; - width: 7rem; - background-color: rgb(199, 139, 255); - border-radius: 50%; - border: none; - font-size: 2.5rem; - transition: border 0.01s ease-in; -} -.counter_btn:active { - border: 3px solid rgb(73, 0, 141); -} -.counter_btn::selection { - background-color: transparent; -} diff --git a/src/plays/Counter/Counter.js b/src/plays/counter/Counter.js similarity index 100% rename from src/plays/Counter/Counter.js rename to src/plays/counter/Counter.js diff --git a/src/plays/Counter/CounterApp.js b/src/plays/counter/CounterApp.js similarity index 100% rename from src/plays/Counter/CounterApp.js rename to src/plays/counter/CounterApp.js diff --git a/src/plays/counter/counter.css b/src/plays/counter/counter.css new file mode 100644 index 0000000000..6072573d2d --- /dev/null +++ b/src/plays/counter/counter.css @@ -0,0 +1,66 @@ +.counter-container{ + display: flex; + flex-direction: column; + align-items: center; + width: 100vw; +} +.counter-desc{ + text-align: center; +} +button:hover{ + cursor: pointer; +} +.input_field { + display: flex; + justify-content: center; + margin-top: 1rem; + width: 90%; + margin: 0 1rem; +} +.input_field input { + width: 100%; + max-width: 15rem; + outline: none; + border: 3px solid rgb(220, 182, 255); + border-radius: 0.6rem; + padding: 0.5rem; + text-align: center; +} +.input_field button, +.reset_btn { + background-color: rgb(111, 78, 138); + margin-left: 1rem; + outline: none; + color: white; + border: none; + border-radius: 0.5rem; + padding: 0 0.5rem; +} +.reset_btn { + margin: 0; + padding: 0.5rem 1rem; +} +.counter { + margin-top: 2.5rem; + display: flex; + flex-direction: column; + align-items: center; +} +.reset_btn { + margin-top: 0.5rem; +} +.counter_btn { + height: 7rem; + width: 7rem; + background-color: rgb(199, 139, 255); + border-radius: 50%; + border: none; + font-size: 2.5rem; + transition: border 0.01s ease-in; +} +.counter_btn:active { + border: 3px solid rgb(73, 0, 141); +} +.counter_btn::selection { + background-color: transparent; +}