From b59b9e2c18b543cc49919f33b6dc6fa574044fb1 Mon Sep 17 00:00:00 2001 From: Abhishek-90 Date: Thu, 28 Apr 2022 12:10:51 +0530 Subject: [PATCH 01/19] Created Hooks in Action & added Readme file --- src/meta/play-meta.js | 15 ++++++++- src/plays/hooks-in-action/HooksInAction.jsx | 35 +++++++++++++++++++++ src/plays/hooks-in-action/Readme.md | 7 +++++ src/plays/index.js | 1 + 4 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 src/plays/hooks-in-action/HooksInAction.jsx create mode 100644 src/plays/hooks-in-action/Readme.md diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js index b9a201b95e..52f6d2a6a8 100644 --- a/src/meta/play-meta.js +++ b/src/meta/play-meta.js @@ -8,7 +8,8 @@ import { SocialCard, RandomMemeGenerator, ReactTodoApp, - //import play here + HooksInAction, +//import play here } from "plays"; export const plays = [ @@ -125,6 +126,18 @@ export const plays = [ cover: 'https://res.cloudinary.com/atapas/image/upload/v1650866465/demos/cover_y20bzk.png', blog: '', video: '' + }, { + id: 'pl-hooks-in-action', + name: 'Hooks in Action', + description: 'This play sees implementation of various hooks to play around with a random quote generator which fetches quotes from an API', + component: () => {return }, + path: '/plays/hooks-in-action', + level: 'Intermediate', + tags: 'Hooks,Async/Await', + github: 'Abhishek-90', + cover: 'https://devdotcode.com/wp-content/uploads/2020/12/REACT-HOOKS-1-1024x576.png', + blog: '', + video: '' }, //replace new play item here ]; diff --git a/src/plays/hooks-in-action/HooksInAction.jsx b/src/plays/hooks-in-action/HooksInAction.jsx new file mode 100644 index 0000000000..00c0efa9e6 --- /dev/null +++ b/src/plays/hooks-in-action/HooksInAction.jsx @@ -0,0 +1,35 @@ +import { getPlayById } from 'meta/play-meta-util'; + +import PlayHeader from 'common/playlists/PlayHeader'; + +function HooksInAction(props) { + // Do not remove the below lines. + // The following code is to fetch the current play from the URL + const { id } = props; + const play = getPlayById(id); + + // Your Code Start below. + + return ( + <> +
+ +
+ {/* Your Code Starts Here */} +
+

Play Details - Hooks in Action

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Pellentesque euismod, urna eu tincidunt consectetur, + nisi nunc ultricies nisi, eget consectetur nunc nisi + euismod nunc. +

+
+ {/* Your Code Ends Here */} +
+
+ + ); +} + +export default HooksInAction; \ No newline at end of file diff --git a/src/plays/hooks-in-action/Readme.md b/src/plays/hooks-in-action/Readme.md new file mode 100644 index 0000000000..640a14e7e6 --- /dev/null +++ b/src/plays/hooks-in-action/Readme.md @@ -0,0 +1,7 @@ +# Hooks in Action + +This play revolves around Random Quote generations, saving them and being able to traverse between different that has been fetched. Under the hood, this uses different hooks like, useEffect, useState etc. + +On loading this play, a random quote will be displayed which is stored using useState hook. User can fetch more quotes with the help of Generate Quote Button. + +User can use previous and Next button to traverse between various quotes stored with the help of useState hook. diff --git a/src/plays/index.js b/src/plays/index.js index 0cda94fb07..df7573e2a7 100644 --- a/src/plays/index.js +++ b/src/plays/index.js @@ -10,4 +10,5 @@ export { default as States } from 'plays/states/States'; export { default as SocialCard } from 'plays/social-card/SocialCard'; export { default as RandomMemeGenerator } from 'plays/random-meme-generator/RandomMemeGenerator'; export { default as ReactTodoApp } from 'plays/react-todo-app/ReactTodoApp'; +export { default as HooksInAction } from 'plays/hooks-in-action/HooksInAction'; //add export here From ba152d6e8fb1588c34d33b1b9be2e9abba14a891 Mon Sep 17 00:00:00 2001 From: Abhishek-90 Date: Thu, 28 Apr 2022 12:49:45 +0530 Subject: [PATCH 02/19] Replaced HooksinAction with Quote generator --- src/meta/play-meta.js | 13 +++++++++++++ src/plays/hooks-in-action/Readme.md | 7 ------- src/plays/index.js | 1 + .../QuoteGenerator.jsx} | 6 +++--- src/plays/quote-generator/Readme.md | 1 + 5 files changed, 18 insertions(+), 10 deletions(-) delete mode 100644 src/plays/hooks-in-action/Readme.md rename src/plays/{hooks-in-action/HooksInAction.jsx => quote-generator/QuoteGenerator.jsx} (87%) create mode 100644 src/plays/quote-generator/Readme.md diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js index 52f6d2a6a8..0b65506865 100644 --- a/src/meta/play-meta.js +++ b/src/meta/play-meta.js @@ -9,6 +9,7 @@ import { RandomMemeGenerator, ReactTodoApp, HooksInAction, +QuoteGenerator, //import play here } from "plays"; @@ -138,6 +139,18 @@ export const plays = [ cover: 'https://devdotcode.com/wp-content/uploads/2020/12/REACT-HOOKS-1-1024x576.png', blog: '', video: '' + }, { + id: 'pl-quote-generator', + name: 'Quote Generator', + description: 'Randomly Generate quotes from 3rd Party API', + component: () => {return }, + path: '/plays/quote-generator', + level: 'Intermediate', + tags: 'Hooks,API,Async/Await', + github: 'Abhishek-90', + cover: 'https://i0.wp.com/dariusforoux.com/wp-content/uploads/2015/08/motivational-quotes.png?fit=2048%2C1536&ssl=1', + blog: '', + video: '' }, //replace new play item here ]; diff --git a/src/plays/hooks-in-action/Readme.md b/src/plays/hooks-in-action/Readme.md deleted file mode 100644 index 640a14e7e6..0000000000 --- a/src/plays/hooks-in-action/Readme.md +++ /dev/null @@ -1,7 +0,0 @@ -# Hooks in Action - -This play revolves around Random Quote generations, saving them and being able to traverse between different that has been fetched. Under the hood, this uses different hooks like, useEffect, useState etc. - -On loading this play, a random quote will be displayed which is stored using useState hook. User can fetch more quotes with the help of Generate Quote Button. - -User can use previous and Next button to traverse between various quotes stored with the help of useState hook. diff --git a/src/plays/index.js b/src/plays/index.js index df7573e2a7..bf11c48d81 100644 --- a/src/plays/index.js +++ b/src/plays/index.js @@ -11,4 +11,5 @@ export { default as SocialCard } from 'plays/social-card/SocialCard'; export { default as RandomMemeGenerator } from 'plays/random-meme-generator/RandomMemeGenerator'; export { default as ReactTodoApp } from 'plays/react-todo-app/ReactTodoApp'; export { default as HooksInAction } from 'plays/hooks-in-action/HooksInAction'; +export { default as QuoteGenerator } from 'plays/quote-generator/QuoteGenerator'; //add export here diff --git a/src/plays/hooks-in-action/HooksInAction.jsx b/src/plays/quote-generator/QuoteGenerator.jsx similarity index 87% rename from src/plays/hooks-in-action/HooksInAction.jsx rename to src/plays/quote-generator/QuoteGenerator.jsx index 00c0efa9e6..ff955feec3 100644 --- a/src/plays/hooks-in-action/HooksInAction.jsx +++ b/src/plays/quote-generator/QuoteGenerator.jsx @@ -2,7 +2,7 @@ import { getPlayById } from 'meta/play-meta-util'; import PlayHeader from 'common/playlists/PlayHeader'; -function HooksInAction(props) { +function QuoteGenerator(props) { // Do not remove the below lines. // The following code is to fetch the current play from the URL const { id } = props; @@ -17,7 +17,7 @@ function HooksInAction(props) {
{/* Your Code Starts Here */}
-

Play Details - Hooks in Action

+

Play Details - Quote Generator

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, urna eu tincidunt consectetur, @@ -32,4 +32,4 @@ function HooksInAction(props) { ); } -export default HooksInAction; \ No newline at end of file +export default QuoteGenerator; \ No newline at end of file diff --git a/src/plays/quote-generator/Readme.md b/src/plays/quote-generator/Readme.md new file mode 100644 index 0000000000..97933f8078 --- /dev/null +++ b/src/plays/quote-generator/Readme.md @@ -0,0 +1 @@ +# Quote Generator \ No newline at end of file From febcc1cfc9480d80d7a7c83995760e57b6cc9bfb Mon Sep 17 00:00:00 2001 From: Abhishek-90 Date: Thu, 28 Apr 2022 12:50:14 +0530 Subject: [PATCH 03/19] Added Readme for Quote Generator --- src/plays/quote-generator/Readme.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/plays/quote-generator/Readme.md b/src/plays/quote-generator/Readme.md index 97933f8078..e1e0ef9bf8 100644 --- a/src/plays/quote-generator/Readme.md +++ b/src/plays/quote-generator/Readme.md @@ -1 +1,7 @@ -# Quote Generator \ No newline at end of file +# Quote Generator + +This play revolves around Random Quote generations, saving them and being able to traverse between different that has been fetched. Under the hood, this uses different hooks like, useEffect, useState etc. + +On loading this play, a random quote will be displayed which is stored using useState hook. User can fetch more quotes with the help of Generate Quote Button. + +User can use previous and Next button to traverse between various quotes stored with the help of useState hook. \ No newline at end of file From e0e59690f075eb587a96dd4fb2e105d7c4ab52ef Mon Sep 17 00:00:00 2001 From: Abhishek-90 Date: Thu, 28 Apr 2022 15:41:14 +0530 Subject: [PATCH 04/19] Added Necessary buttons --- src/meta/play-meta.js | 14 +--- src/plays/index.js | 1 - src/plays/quote-generator/QuoteGenerator.jsx | 67 ++++++++++++++++---- src/plays/quote-generator/quoteGenerator.css | 27 ++++++++ 4 files changed, 83 insertions(+), 26 deletions(-) create mode 100644 src/plays/quote-generator/quoteGenerator.css diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js index 0b65506865..9f30e12040 100644 --- a/src/meta/play-meta.js +++ b/src/meta/play-meta.js @@ -127,19 +127,7 @@ export const plays = [ cover: 'https://res.cloudinary.com/atapas/image/upload/v1650866465/demos/cover_y20bzk.png', blog: '', video: '' - }, { - id: 'pl-hooks-in-action', - name: 'Hooks in Action', - description: 'This play sees implementation of various hooks to play around with a random quote generator which fetches quotes from an API', - component: () => {return }, - path: '/plays/hooks-in-action', - level: 'Intermediate', - tags: 'Hooks,Async/Await', - github: 'Abhishek-90', - cover: 'https://devdotcode.com/wp-content/uploads/2020/12/REACT-HOOKS-1-1024x576.png', - blog: '', - video: '' - }, { + },{ id: 'pl-quote-generator', name: 'Quote Generator', description: 'Randomly Generate quotes from 3rd Party API', diff --git a/src/plays/index.js b/src/plays/index.js index bf11c48d81..df5f885cdf 100644 --- a/src/plays/index.js +++ b/src/plays/index.js @@ -10,6 +10,5 @@ export { default as States } from 'plays/states/States'; export { default as SocialCard } from 'plays/social-card/SocialCard'; export { default as RandomMemeGenerator } from 'plays/random-meme-generator/RandomMemeGenerator'; export { default as ReactTodoApp } from 'plays/react-todo-app/ReactTodoApp'; -export { default as HooksInAction } from 'plays/hooks-in-action/HooksInAction'; export { default as QuoteGenerator } from 'plays/quote-generator/QuoteGenerator'; //add export here diff --git a/src/plays/quote-generator/QuoteGenerator.jsx b/src/plays/quote-generator/QuoteGenerator.jsx index ff955feec3..80e0e66225 100644 --- a/src/plays/quote-generator/QuoteGenerator.jsx +++ b/src/plays/quote-generator/QuoteGenerator.jsx @@ -1,9 +1,9 @@ -import { getPlayById } from 'meta/play-meta-util'; - -import PlayHeader from 'common/playlists/PlayHeader'; +import { getPlayById } from "meta/play-meta-util"; +import PlayHeader from "common/playlists/PlayHeader"; +import "./quoteGenerator.css"; function QuoteGenerator(props) { - // Do not remove the below lines. + // Do not remove the below lines. // The following code is to fetch the current play from the URL const { id } = props; const play = getPlayById(id); @@ -15,21 +15,64 @@ function QuoteGenerator(props) {

- {/* Your Code Starts Here */} + {/* Your Code Starts Here */}
-

Play Details - Quote Generator

+

Quote Generator - Get Motivated Randomly.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Pellentesque euismod, urna eu tincidunt consectetur, - nisi nunc ultricies nisi, eget consectetur nunc nisi - euismod nunc. + Random Quote Generator for you to get motivated, inspired and also + learn the applications of various hooks in React.

- {/* Your Code Ends Here */} +
+
+
+
+ +
+
+ +
+
+ +
+
+
+ {/* Your Code Ends Here */}
); } -export default QuoteGenerator; \ No newline at end of file +export default QuoteGenerator; diff --git a/src/plays/quote-generator/quoteGenerator.css b/src/plays/quote-generator/quoteGenerator.css new file mode 100644 index 0000000000..a5f8f09ff3 --- /dev/null +++ b/src/plays/quote-generator/quoteGenerator.css @@ -0,0 +1,27 @@ +.button-area { + display: flex; + flex-direction: row; + justify-content: space-between; + border: none; +} + +.change-btn { + width: 4rem; + background: transparent; + display: flex; + align-content: center; + border:none; +} + +.quote-generate { + display: flex; + align-content: center; +} + +.quote-generate-btn { + width: 8rem; + border: none; + background: #00F2FE; + font-size: 1.12rem; + border-radius: 3rem; +} \ No newline at end of file From 9d6ff4ff3ea35d2ffbe1d5061c8a665c9bb9d15e Mon Sep 17 00:00:00 2001 From: Abhishek-90 Date: Thu, 28 Apr 2022 17:06:58 +0530 Subject: [PATCH 05/19] Created function to fetch quote --- src/plays/quote-generator/QuoteGenerator.jsx | 19 ++++++++++++++++++- src/plays/quote-generator/quoteGenerator.css | 10 ++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/src/plays/quote-generator/QuoteGenerator.jsx b/src/plays/quote-generator/QuoteGenerator.jsx index 80e0e66225..84a9031729 100644 --- a/src/plays/quote-generator/QuoteGenerator.jsx +++ b/src/plays/quote-generator/QuoteGenerator.jsx @@ -1,6 +1,12 @@ import { getPlayById } from "meta/play-meta-util"; import PlayHeader from "common/playlists/PlayHeader"; import "./quoteGenerator.css"; +import { useEffect } from "react"; + +const fetchQuote = async () => { + const response = await (await fetch('https://api.quotable.io/random')).json(); + return response; +} function QuoteGenerator(props) { // Do not remove the below lines. @@ -10,6 +16,15 @@ function QuoteGenerator(props) { // Your Code Start below. + useEffect(()=>{ + const fetcher = async () => { + const response = await fetchQuote() + console.log(response) + } + + fetcher() + },[]) + return ( <>
@@ -24,7 +39,9 @@ function QuoteGenerator(props) {

-
+
+ +
+
+ +
-

- {/* {(quoteArray[quoteArray.length-1]).content} */} -

+ {quoteArray.length > 0 && ( +

{quoteArray[quoteArray.length - 1][0]}

+ )} + + {quoteArray.length > 0 && ( +

+ - {quoteArray[quoteArray.length - 1][1]} +

+ )} +
-
-
- -
-
- -
-
- -
+
+
{/* Your Code Ends Here */} diff --git a/src/plays/quote-generator/quoteGenerator.css b/src/plays/quote-generator/quoteGenerator.css index 0c4b9498e8..7fe8ba1320 100644 --- a/src/plays/quote-generator/quoteGenerator.css +++ b/src/plays/quote-generator/quoteGenerator.css @@ -1,6 +1,8 @@ .play-area { /* background: antiquewhite; */ border: none; + display: flex; + flex-direction: row; } .quote-area { @@ -11,10 +13,16 @@ } .quote{ - /* background: brown; */ height: 100%; width: 45%; - /* color:azure; */ + font-size: 2rem; + display: flex; + flex-direction: column; + justify-items: center; +} + +.author { + float: right } .button-area { @@ -26,12 +34,18 @@ .change-btn { width: 4rem; + height: 100%; background: transparent; display: flex; - align-content: center; + align-items: center; + justify-content: center; border:none; } +.change-btn:hover { + background-color: rgb(193, 192, 192); +} + .quote-generate { display: flex; align-content: center; From 8e0253df1da6baedcc8c2176e723b20b441691ce Mon Sep 17 00:00:00 2001 From: Abhishek-90 Date: Mon, 2 May 2022 16:09:26 +0530 Subject: [PATCH 07/19] Next/Prev button working --- src/plays/quote-generator/QuoteGenerator.jsx | 36 ++++++++++++++------ 1 file changed, 26 insertions(+), 10 deletions(-) diff --git a/src/plays/quote-generator/QuoteGenerator.jsx b/src/plays/quote-generator/QuoteGenerator.jsx index 1c2dd85f39..414ba0fb8d 100644 --- a/src/plays/quote-generator/QuoteGenerator.jsx +++ b/src/plays/quote-generator/QuoteGenerator.jsx @@ -16,18 +16,37 @@ function QuoteGenerator(props) { // Your Code Start below. const [quoteArray, setQuoteArray] = useState([]); + const [current, setCurrent] = useState(0); - const updateQuoteArray = (newState, stateUpdator) => { + const updateState = (newState, stateUpdator) => { return new Promise((resolve) => { return stateUpdator(newState, resolve()); }); }; + const previousQuote = async () => { + console.log("Changing"); + await updateState(current-1, setCurrent); + return ; + } + + const nextQuote = async () => { + if(current < quoteArray.length-1) { + await updateState(current+1,setCurrent); + return ; + } + + const response = await (await fetchQuote()).json(); + await updateState([...quoteArray,[response.content, response.author]],setQuoteArray) + await updateState(current+1,setCurrent); + return ; + } + useEffect(() => { const fetcher = async () => { const response = await (await fetchQuote()).json(); console.log(response); - await updateQuoteArray( + await updateState( [...quoteArray, [response.content, response.author]], setQuoteArray ); @@ -44,14 +63,11 @@ function QuoteGenerator(props) { {/* Your Code Starts Here */}

Quote Generator - Get Motivated Randomly.

-

- Random Quote Generator for you to get motivated, inspired and also - learn the applications of various hooks in React. -

+
-
-