Hooks in Action Complete

src/meta/play-meta.js

@@ -10,6 +10,7 @@ import {
   RandomMemeGenerator,
   Keeper,
   ReactTodoApp,
+QuoteGenerator,
   ExpandingCards,
   AnalogClock,
   PasswordGenerator,
@@ -129,6 +130,31 @@ export const plays = [
     blog: '',
     video: ''
   }, {
+    id: 'pl-react-todo-app',
+    name: 'React Todo App',
+    description: 'It is a simple Todo App which keeps track of your regular work',
+    component: () => { return <ReactTodoApp /> },
+    path: '/plays/react-todo-app',
+    level: 'Beginner',
+    tags: 'ReactHooks, JavaScript, Css, React State',
+    github: 'nirban256',
+    cover: 'https://res.cloudinary.com/atapas/image/upload/v1650866465/demos/cover_y20bzk.png',
+    blog: '',
+    video: ''
+  },{
+    id: 'pl-quote-generator', 
+    name: 'Random Quote Generator', 
+    description: 'Randomly Generate quotes from 3rd Party API',
+    component: () => {return <QuoteGenerator />},
+    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&#x3D;2048%2C1536&amp;ssl&#x3D;1',
+    blog: '',
+    video: ''
+  },
+  {
     id: 'pl-keeper', 
     name: 'Keeper', 
     description: 'Keeper is the clone of google keep where we can save and delete our notes',
@@ -140,22 +166,6 @@ export const plays = [
     cover: 'https://res.cloudinary.com/dbjmy6wdu/image/upload/v1651678725/keepicon_jsn5bh.png',
     blog: '',
     video: ''
-  }, {
-    id: "pl-react-todo-app",
-    name: "React Todo App",
-    description:
-      "It is a simple Todo App which keeps track of your regular work",
-    component: () => {
-      return <ReactTodoApp />;
-    },
-    path: "/plays/react-todo-app",
-    level: "Beginner",
-    tags: "ReactHooks, JavaScript, Css, React State",
-    github: "nirban256",
-    cover:
-      "https://res.cloudinary.com/atapas/image/upload/v1650866465/demos/cover_y20bzk.png",
-    blog: "",
-    video: "",
   }, {
     id: "pl-expanding-cards",
     name: "Expanding-Cards",

src/plays/index.js

@@ -11,6 +11,7 @@ export { default as SocialCard } from 'plays/social-card/SocialCard';
 export { default as RandomMemeGenerator } from 'plays/random-meme-generator/RandomMemeGenerator';
 export { default as Keeper } from 'plays/keeper/Keeper';
 export { default as ReactTodoApp } from 'plays/react-todo-app/ReactTodoApp';
+export { default as QuoteGenerator } from 'plays/quote-generator/QuoteGenerator';
 export { default as ExpandingCards } from 'plays/expanding-cards/ExpandingCards';
 export { default as AnalogClock } from 'plays/analog-clock/AnalogClock';
 

src/plays/quote-generator/QuoteGenerator.jsx

@@ -0,0 +1,138 @@
+import { getPlayById } from "meta/play-meta-util";
+import PlayHeader from "common/playlists/PlayHeader";
+import "./quoteGenerator.css";
+import { useEffect, useState } from "react";
+
+const fetchQuote = () => {
+  const response = fetch("https://api.quotable.io/random");
+  return response;
+};
+
+function QuoteGenerator(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.
+  const [quoteArray, setQuoteArray] = useState([]);
+  const [current, setCurrent] = useState(0);
+
+  const updateState = (newState, stateUpdator) => {
+    return new Promise((resolve) => {
+      return stateUpdator(newState, resolve());
+    });
+  };
+
+  const previousQuote = async () => {
+    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();
+      await updateState(
+        [...quoteArray, [response.content, response.author]],
+        setQuoteArray
+      );
+    };
+    fetcher();
+  }, []);
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={play} />
+        <div className="play-details-body rand-quote-gen">
+          {/* Your Code Starts Here */}
+          <div>
+            <h1>Quote Generator - Get Motivated Randomly.</h1>
+          </div>
+          <div className="play-area">
+            <div className="prev-btn">
+              <button
+                className="change-btn"
+                disabled={current === 0}
+                onClick={previousQuote}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={1.3}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M15 19l-7-7 7-7"
+                  />
+                </svg>
+              </button>
+            </div>
+            <div className="quote-area">
+              <div className="quote">
+                {quoteArray.length > 0 && <p>{quoteArray[current][0]}</p>}
+              </div>
+              <div className="page-author">
+                {quoteArray.length > 0 && 
+                <span className="page">
+                  <p>
+                    {current + 1}/{quoteArray.length}
+                  </p>
+                </span>}
+                <span className="quote-author">
+                  {quoteArray.length > 0 && (
+                    <p className="author">- {quoteArray[current][1]}</p>
+                  )}
+                </span>
+              </div>
+            </div>
+            <div className="next-btn">
+              <button
+                className="change-btn"
+                onClick={nextQuote}
+                labels="next-button"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={1.3}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default QuoteGenerator;

src/plays/quote-generator/Readme.md

@@ -0,0 +1,7 @@
+# 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.

src/plays/quote-generator/quoteGenerator.css

@@ -0,0 +1,99 @@
+.rand-quote-gen .play-area {
+  border: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  height: fit-content;
+}
+
+.rand-quote-gen .play-area .quote-area {
+  min-height: 15rem;
+  height: fit-content;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.rand-quote-gen .play-area .quote-area .quote{
+  height: 100%;
+  width: 55%;
+  font-size: 2rem;
+  justify-items: center;
+  margin-left: 25%;
+}
+
+.rand-quote-gen .play-area .quote-area .page-author {
+  width: 45%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.rand-quote-gen .play-area .quote-area .page-author{
+  margin-left: 30%;
+}
+
+.rand-quote-gen .play-area .quote-area .page-author quote-author .author {
+  float: right;
+}
+
+.rand-quote-gen .play-area .change-btn {
+  width: 5rem;
+  height: 100%;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border:none;
+}
+
+.rand-quote-gen .play-area .change-btn:hover:enabled {
+  background-color: rgb(193, 192, 192);
+}
+
+@media only screen and (max-width: 760px) {
+  .rand-quote-gen .play-area .quote-area .quote {
+    font-size: 1rem;
+    width: 100%;
+    margin-left: 0;
+    padding: 0 10px 0 10px;
+  }
+
+  .rand-quote-gen .play-area .change-btn {
+    width: 3rem;
+    height: 100%;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border:none;
+  }
+
+  .rand-quote-gen .play-area .quote-area {
+    min-height: 10rem;
+    height: fit-content;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .rand-qutote-gen .play-area {
+    border: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: fit-content;
+    width: 100%;
+  }
+
+  .rand-quote-gen .play-area .quote-area .page-author{
+    margin-left: 0;
+    width: 100%;
+    padding: 0 10px 0 10px; 
+  }
+
+  .rand-quote-gen .play-area .change-btn:hover {
+    background-color: rgb(193, 192, 192);
+  }
+}