From fc4687db01d9e3f67a67b301de19cf029cd20e3c Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Thu, 20 Jan 2022 20:00:39 +0530 Subject: [PATCH 1/7] =?UTF-8?q?=E2=9C=A8=20Introduced=20react-router@6=20a?= =?UTF-8?q?nd=20implemented=20basic=20routing?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/App.js | 12 +++++++----- src/index.js | 34 +++++++++++++++++++++++++++------- yarn.lock | 24 +++++++++++++++++++++++- 4 files changed, 58 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 4ac5ccfe82..fb9a4925ef 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^13.2.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-router-dom": "6", "react-scripts": "5.0.0", "web-vitals": "^2.1.0" }, diff --git a/src/App.js b/src/App.js index c008feb41d..2556542a33 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,15 @@ +import { Link, Outlet } from 'react-router-dom'; import './App.css'; -import { CountDownTimer, CurrentTimer } from './date-time-counter/index.js'; -import MovieContainer from './movies/MovieContainer'; function App() { return (
- - - + +
); } diff --git a/src/index.js b/src/index.js index ef2edf8ea3..1583803422 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,34 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom"; +import { BrowserRouter, Route, Routes } from "react-router-dom"; +import App from "./App"; +import { CountDownTimer, CurrentTimer } from './date-time-counter'; +import "./index.css"; +import Movie from './movies/MovieContainer'; +import reportWebVitals from "./reportWebVitals"; + ReactDOM.render( - + + + }> + } /> + } /> + } /> + +

There's nothing here!

+ + } + /> + + + , - document.getElementById('root') + document.getElementById("root") ); // If you want to start measuring performance in your app, pass a function diff --git a/yarn.lock b/yarn.lock index 990622aa10..2016bf0d71 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1215,7 +1215,7 @@ core-js-pure "^3.19.0" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.9.2": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa" integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ== @@ -4779,6 +4779,13 @@ he@^1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== +history@^5.2.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/history/-/history-5.2.0.tgz#7cdd31cf9bac3c5d31f09c231c9928fad0007b7c" + integrity sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig== + dependencies: + "@babel/runtime" "^7.7.6" + hoopy@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d" @@ -7474,6 +7481,21 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== +react-router-dom@6: + version "6.2.1" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.2.1.tgz#32ec81829152fbb8a7b045bf593a22eadf019bec" + integrity sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA== + dependencies: + history "^5.2.0" + react-router "6.2.1" + +react-router@6.2.1: + version "6.2.1" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.2.1.tgz#be2a97a6006ce1d9123c28934e604faef51448a3" + integrity sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg== + dependencies: + history "^5.2.0" + react-scripts@5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.0.tgz#6547a6d7f8b64364ef95273767466cc577cb4b60" From fa6b2456d9928bdb11c85d6dfc37b0ec5c67c444 Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Thu, 20 Jan 2022 21:43:24 +0530 Subject: [PATCH 2/7] =?UTF-8?q?=F0=9F=92=84=20Added=20styling?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 6 +++++- src/App.css | 36 +++++------------------------------- src/App.js | 18 ++++++++++++++---- src/index.css | 30 +++++++++++++++++++++++++++--- src/index.js | 11 +++++++++++ src/movies/movies.css | 2 ++ 6 files changed, 64 insertions(+), 39 deletions(-) diff --git a/public/index.html b/public/index.html index aa069f27cb..8969d616bf 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,11 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + + + + + React Play diff --git a/src/App.css b/src/App.css index 74b5e05345..5729d52a30 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,12 @@ .App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; } -.App-link { - color: #61dafb; +.left-nav { + flex: 1; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.plays { + flex: 5; + padding: 1rem; } diff --git a/src/App.js b/src/App.js index 2556542a33..782b5f4ed6 100644 --- a/src/App.js +++ b/src/App.js @@ -5,11 +5,21 @@ function App() { return (
- +
+ +
); } diff --git a/src/index.css b/src/index.css index ec2585e8c0..5695eaa19a 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,37 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + height: 100%; + font-family: 'Quicksand', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + scroll-behavior: smooth; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +.app-header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #000; + color: #fff; + padding: 0.5rem; +} + +.app-header > span { + font-size: 2.5rem; + font-weight: bold; +} + +.header-links { + display: flex; + align-items: center; +} + +.header-links > li > a { + color: #fff; + margin-left: 1rem; +} diff --git a/src/index.js b/src/index.js index 1583803422..4373916d1f 100644 --- a/src/index.js +++ b/src/index.js @@ -10,6 +10,17 @@ import reportWebVitals from "./reportWebVitals"; ReactDOM.render( +
+ React Play + +
}> diff --git a/src/movies/movies.css b/src/movies/movies.css index 70e539b38c..a0494786df 100644 --- a/src/movies/movies.css +++ b/src/movies/movies.css @@ -13,6 +13,8 @@ li { flex-wrap: wrap; align-content: center; justify-content: center; + padding: 0px; + margin: 0px; } .movie { From b4bfced3fc05c9272d27d0d3433ff1f46827ddab Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Thu, 20 Jan 2022 21:59:04 +0530 Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=8E=A8=20Added=20comon=20header=20and?= =?UTF-8?q?=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/Footer.js | 15 +++++++++++++++ src/common/Header.js | 21 +++++++++++++++++++++ src/common/header.css | 23 +++++++++++++++++++++++ src/common/index.js | 8 ++++++++ src/index.css | 26 +------------------------- src/index.js | 14 +++----------- 6 files changed, 71 insertions(+), 36 deletions(-) create mode 100644 src/common/Footer.js create mode 100644 src/common/Header.js create mode 100644 src/common/header.css create mode 100644 src/common/index.js diff --git a/src/common/Footer.js b/src/common/Footer.js new file mode 100644 index 0000000000..7830c3d803 --- /dev/null +++ b/src/common/Footer.js @@ -0,0 +1,15 @@ + + +const Footer = () => { + + return ( + + ); +}; + +export default Footer; \ No newline at end of file diff --git a/src/common/Header.js b/src/common/Header.js new file mode 100644 index 0000000000..4b9c1c7224 --- /dev/null +++ b/src/common/Header.js @@ -0,0 +1,21 @@ + +import './header.css'; + +const Header = () => { + + return ( +
+ React Play + +
+ ); +}; + +export default Header; \ No newline at end of file diff --git a/src/common/header.css b/src/common/header.css new file mode 100644 index 0000000000..b86e66b377 --- /dev/null +++ b/src/common/header.css @@ -0,0 +1,23 @@ +.app-header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #000; + color: #fff; + padding: 0.5rem; +} + +.app-header > span { + font-size: 2.5rem; + font-weight: bold; +} + +.header-links { + display: flex; + align-items: center; +} + +.header-links > li > a { + color: #fff; + margin-left: 1rem; +} diff --git a/src/common/index.js b/src/common/index.js new file mode 100644 index 0000000000..23bd655d6b --- /dev/null +++ b/src/common/index.js @@ -0,0 +1,8 @@ +import Footer from './Footer'; +import Header from './Header'; + +export { + Header, + Footer +}; + diff --git a/src/index.css b/src/index.css index 5695eaa19a..78bbdfbeee 100644 --- a/src/index.css +++ b/src/index.css @@ -10,28 +10,4 @@ body { code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; -} - -.app-header { - display: flex; - justify-content: space-between; - align-items: center; - background-color: #000; - color: #fff; - padding: 0.5rem; -} - -.app-header > span { - font-size: 2.5rem; - font-weight: bold; -} - -.header-links { - display: flex; - align-items: center; -} - -.header-links > li > a { - color: #fff; - margin-left: 1rem; -} +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 4373916d1f..736e2743fa 100644 --- a/src/index.js +++ b/src/index.js @@ -2,6 +2,7 @@ import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import App from "./App"; +import { Footer, Header } from './common'; import { CountDownTimer, CurrentTimer } from './date-time-counter'; import "./index.css"; import Movie from './movies/MovieContainer'; @@ -10,17 +11,7 @@ import reportWebVitals from "./reportWebVitals"; ReactDOM.render( -
- React Play - -
+
}> @@ -38,6 +29,7 @@ ReactDOM.render( +
, document.getElementById("root") ); From 6fe1f3c2bd89efe601a58fa6220aa8d671cecc5c Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Thu, 20 Jan 2022 22:40:21 +0530 Subject: [PATCH 4/7] =?UTF-8?q?=E2=9C=A8=20Now=20we=20have=20a=20index=20h?= =?UTF-8?q?ome=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 6 +++--- src/common/Header.js | 2 +- src/home/Home.js | 15 +++++++++++++++ src/home/home.css | 0 src/home/index.js | 3 +++ src/index.js | 2 ++ 6 files changed, 24 insertions(+), 4 deletions(-) create mode 100644 src/home/Home.js create mode 100644 src/home/home.css create mode 100644 src/home/index.js diff --git a/src/App.js b/src/App.js index 782b5f4ed6..3ae1930696 100644 --- a/src/App.js +++ b/src/App.js @@ -6,12 +6,12 @@ function App() {
diff --git a/src/home/Home.js b/src/home/Home.js new file mode 100644 index 0000000000..e3f7815e0d --- /dev/null +++ b/src/home/Home.js @@ -0,0 +1,15 @@ + +import './home.css'; + +const Home = () => { + return ( +
+

Home

+

+ This is the home page. +

+
+ ); +}; + +export default Home; \ No newline at end of file diff --git a/src/home/home.css b/src/home/home.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/home/index.js b/src/home/index.js new file mode 100644 index 0000000000..d213ecf91f --- /dev/null +++ b/src/home/index.js @@ -0,0 +1,3 @@ +import Home from './Home'; + +export { Home }; diff --git a/src/index.js b/src/index.js index 736e2743fa..1d343c5498 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom"; import App from "./App"; import { Footer, Header } from './common'; import { CountDownTimer, CurrentTimer } from './date-time-counter'; +import { Home } from './home'; import "./index.css"; import Movie from './movies/MovieContainer'; import reportWebVitals from "./reportWebVitals"; @@ -15,6 +16,7 @@ ReactDOM.render( }> + } /> } /> } /> } /> From aa9398b37977dfac648c36a2dc682c5505bca04f Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Thu, 20 Jan 2022 23:25:12 +0530 Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=8E=A8=20Now=20all=20the=20plays=20un?= =?UTF-8?q?der=20the=20plays=20folder?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/date-time-counter/index.js | 9 --------- src/home/index.js | 3 --- src/index.js | 11 +++++++---- .../clock}/CurrentTimer.js | 0 src/{ => plays}/date-time-counter/CountDownTimer.js | 0 src/{ => plays}/date-time-counter/DateTimeDisplay.js | 0 src/{ => plays}/date-time-counter/datetime.css | 0 .../date-time-counter/hooks/useCountDown.js | 0 src/{ => plays}/home/Home.js | 0 src/{ => plays}/home/home.css | 0 src/plays/home/index.js | 2 ++ src/plays/index.js | 5 +++++ src/{ => plays}/movies/Movie.js | 0 src/{ => plays}/movies/MovieContainer.js | 2 +- src/{ => plays}/movies/movies.css | 0 15 files changed, 15 insertions(+), 17 deletions(-) delete mode 100644 src/date-time-counter/index.js delete mode 100644 src/home/index.js rename src/{date-time-counter => plays/clock}/CurrentTimer.js (100%) rename src/{ => plays}/date-time-counter/CountDownTimer.js (100%) rename src/{ => plays}/date-time-counter/DateTimeDisplay.js (100%) rename src/{ => plays}/date-time-counter/datetime.css (100%) rename src/{ => plays}/date-time-counter/hooks/useCountDown.js (100%) rename src/{ => plays}/home/Home.js (100%) rename src/{ => plays}/home/home.css (100%) create mode 100644 src/plays/home/index.js create mode 100644 src/plays/index.js rename src/{ => plays}/movies/Movie.js (100%) rename src/{ => plays}/movies/MovieContainer.js (93%) rename src/{ => plays}/movies/movies.css (100%) diff --git a/src/date-time-counter/index.js b/src/date-time-counter/index.js deleted file mode 100644 index 65684673bf..0000000000 --- a/src/date-time-counter/index.js +++ /dev/null @@ -1,9 +0,0 @@ - -import CountDownTimer from './CountDownTimer'; -import CurrentTimer from './CurrentTimer'; - -export { - CurrentTimer, - CountDownTimer -}; - diff --git a/src/home/index.js b/src/home/index.js deleted file mode 100644 index d213ecf91f..0000000000 --- a/src/home/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Home from './Home'; - -export { Home }; diff --git a/src/index.js b/src/index.js index 1d343c5498..9fbd00d7d6 100644 --- a/src/index.js +++ b/src/index.js @@ -3,10 +3,13 @@ import ReactDOM from "react-dom"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import App from "./App"; import { Footer, Header } from './common'; -import { CountDownTimer, CurrentTimer } from './date-time-counter'; -import { Home } from './home'; import "./index.css"; -import Movie from './movies/MovieContainer'; +import { + CountDownTimer, + CurrentTimer, + Home, + MovieContainer +} from './plays'; import reportWebVitals from "./reportWebVitals"; @@ -17,7 +20,7 @@ ReactDOM.render( }> } /> - } /> + } /> } /> } /> Date: Fri, 21 Jan 2022 00:01:51 +0530 Subject: [PATCH 6/7] =?UTF-8?q?=E2=9C=A8=20Made=20the=20routes=20dynamic?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 59 ++++++++++++++++------------------- src/meta/play-meta.js | 44 ++++++++++++++++++++++++++ src/plays/404/PageNotFound.js | 10 ++++++ src/plays/index.js | 1 + 4 files changed, 82 insertions(+), 32 deletions(-) create mode 100644 src/meta/play-meta.js create mode 100644 src/plays/404/PageNotFound.js diff --git a/src/index.js b/src/index.js index 9fbd00d7d6..5d424fd21b 100644 --- a/src/index.js +++ b/src/index.js @@ -2,42 +2,37 @@ import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import App from "./App"; -import { Footer, Header } from './common'; +import { Footer, Header } from "./common"; import "./index.css"; -import { - CountDownTimer, - CurrentTimer, - Home, - MovieContainer -} from './plays'; +import { getPlays } from './meta/play-meta'; import reportWebVitals from "./reportWebVitals"; - -ReactDOM.render( - -
- - - }> - } /> - } /> - } /> - } /> - -

There's nothing here!

- +const Index = () => { + const plays = getPlays(); + return ( + +
+ + + }> + { + plays.map((play, index) => ( + + )) } - /> - - - -