Local data experiment

src/components/DiceButton.js

@@ -0,0 +1,19 @@
+import Button from "./Button";
+
+const DiceButton = ({ clickHandler }) => {
+  return (
+    <>
+      <Button
+        buttonImage={
+          <img
+            src={require("../images/dice.png")}
+            className="absolute -top-5 laptop:top-10 13tum:top-20 right-2 laptop:right-10 13tum:right-20 standingiPad:p-2 standingiPad:bg-mustard standingiPad:border-2 border-darkblue h-12 standingiPad:h-20 w-12 standingiPad:w-20 laptop:hover:drop-shadow-block-right"
+          />
+        }
+        clickHandler={clickHandler}
+      />
+    </>
+  );
+};
+
+export default DiceButton;

src/components/Dropdown.js

@@ -6,13 +6,12 @@ function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 
-const Dropdown = ({ themes, handleSetTheme }) => {
-
+const Dropdown = ({ themes, storedThemes, handleSetTheme }) => {
   return (
     <Menu as="div" className="relative">
       <div>
-        <Menu.Button className="justify-between inline-flex text-left w-full bg-mustard p-2 border-2 border-darkblue hover:drop-shadow-block-right">
-          Pick new theme
+        <Menu.Button className="justify-between inline-flex text-left w-full bg-mustard p-2 border-2 border-darkblue laptop:hover:drop-shadow-block-right">
+          Pick a new theme &nbsp;
           <div id="chevrondownicon">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -45,12 +44,17 @@ const Dropdown = ({ themes, handleSetTheme }) => {
           <div>
             {themes.map((theTheme) => {
               return (
-                <Menu.Item onClick={() => handleSetTheme(theTheme.theme)} key={theTheme.theme}>
+                <Menu.Item
+                  onClick={() => handleSetTheme(theTheme)}
+                  key={theTheme.theme}
+                >
                   {({ active }) => (
                     <a
                       href="#"
                       className={classNames(
-                        active ? "bg-mustard text-darkblue" : "bg-almostwhite",
+                        active
+                          ? "bg-mustard text-darkblue"
+                          : "bg-almostwhite text-darkblue",
                         "block px-4 py-2 text-base"
                       )}
                     >
@@ -60,6 +64,17 @@ const Dropdown = ({ themes, handleSetTheme }) => {
                 </Menu.Item>
               );
             })}
+            {storedThemes.map((storedTheme) => {
+              return (
+                <Menu.Item key={storedTheme}>
+                  {
+                    <p className="bg-chinesesilver text-gray block px-4 py-2 text-base">
+                      {storedTheme}
+                    </p>
+                  }
+                </Menu.Item>
+              );
+            })}
           </div>
         </Menu.Items>
       </Transition>

src/components/Image.js

@@ -0,0 +1,13 @@
+const Image = ({ clickHandler, name }) => {
+  return (
+    <>
+      <img
+        className="rounded-lg"
+        onClick={clickHandler}
+        src={require(`../images/${name === "?" ? "unknown" : name}.png`)}
+      />
+    </>
+  );
+};
+
+export default Image;

src/components/Name.js

@@ -0,0 +1,11 @@
+const Name = ({ name }) => {
+  return (
+    <>
+      <h1 className="border-2 p-2 rounded-md bg-almostwhite text-md standingiPad:text-2xl">
+        {name}
+      </h1>
+    </>
+  );
+};
+
+export default Name;

src/components/Person.js

@@ -1,40 +1,47 @@
-import { useState, useLayoutEffect } from "react";
-import Button from "./Button";
+import { useState } from "react";
+import Image from "./Image";
 import Quote from "./Quote";
+import Name from "./Name";
+
+function makeRandom(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min) + min);
+}
 
 //fetching the name and quote of the employee that is sent as a props from app.js
-const Person = ({ name, quote }) => {
+const Person = ({ name }) => {
   //defining what should be targeted when state changes?
   const [showQuote, setShowQuote] = useState(false);
+  const [quote, setQuote] = useState("");
+  const [author, setAuthor] = useState("");
 
-  //listens to whether showQuote is true or false, and makes the quote disappear from the screen after 3 seconds through changing the showQuote to false after 3 seconds when it has become true.
-  useLayoutEffect(() => {
+  async function handleShowQuote() {
+    await fetch("https://type.fit/api/quotes")
+      .then(function (response) {
+        return response.json();
+      })
+      .then(function (data) {
+        let quoteObj = data[makeRandom(0, data.length)];
+        setQuote(`"${quoteObj.text}"`);
+        if (quoteObj.author !== null) {
+          setAuthor(`-${quoteObj.author}`);
+        }
+      });
+    name !== "?" ? setShowQuote(true) : setShowQuote(false);
     setTimeout(() => {
       setShowQuote(false);
     }, 5500);
-  }, [showQuote]);
-
-  //defining the image to be sent off to button through quote
-  const buttonImage = (
-    <img
-      className="rounded-lg"
-      src={require(`../images/${name === "?" ? "unknown" : name}.png`)}
-    />
-  );
+  }
 
   //calling the button with my quote component and displaying the employee name
   return (
-    <div>
-      {showQuote && <Quote quote={quote} />}
-      <div id="image-container" className="p-10">
-        <Button
-          buttonImage={buttonImage}
-          clickHandler={() => setShowQuote(true)}
-        />
+    <div className="tiltedPhone:p-8">
+      {showQuote && <Quote quote={quote} author={author} />}
+      <div id="image-container" className="pb-5">
+        <Image name={name} clickHandler={handleShowQuote} />
       </div>
-      <h1 className="border-2 p-2 rounded-md bg-almostwhite text-2xl">
-        {name}
-      </h1>
+      <Name name={name} />
     </div>
   );
 };

src/components/Quote.js

@@ -1,13 +1,19 @@
 //defining the quoteValue to employees.quote from person.js
-const Quote = ({ quote }) => {
-
+const Quote = ({ quote, author }) => {
   //the button component is called and when the button is clicked showQuote turns true, which makes the quote appears on screen.
   return (
-      <div className="">
-          <div className="absolute right-48 top-0 left-2 border-2 border-darkblue bg-almostwhite rounded-br-none rounded-lg">
-            <p className="p-2">{quote}</p>
+    <div className="absolute flex-wrap h-40 standingiPad:h-36 laptop:h-32 right-2 standingiPad:right-28 laptop:right-40 -top-44 standingiPad:-top-20 laptop:-top-2 left-2 border-2 text-sm iPad:text-xs 13tum:text-lg border-darkblue bg-almostwhite standingiPad:rounded-br-none rounded-lg">
+      <div className="flex items-center flex-wrap h-full">
+        <div className="justify-center">
+          <div className="p-2 pb-4">
+            <p>{quote}</p>
           </div>
+        </div>
+        <div className="absolute pb-2 bottom-0 right-2">
+          <p>{author}</p>
+        </div>
       </div>
+    </div>
   );
 };
 

src/components/Theme.js

@@ -1,26 +1,7 @@
-import { useState, useEffect } from "react";
-
-//fetching the true/false value from randomise, and the theme that is picked randomly.
-const Theme = ({ randomise, theme }) => {
-
-  //initiating the state and statehandler.
-  const [showTheme, setShowTheme] = useState(false);
-
-  //listening to when the randomise value changes and if it changes to true then I call the statehandler to change the showTheme value to true
-  useEffect(() => {
-    if (randomise) {
-      setShowTheme(true);
-    }
-  }, [randomise]);
-
-  //show the theme in text when showTheme is true
+const Theme = ({ theme }) => {
   return (
     <>
-      {showTheme ? (
-        <>
-          <h1 className="pb-5">{theme}</h1>
-        </>
-      ) : null}
+      <h1 className="pb-5 overflow-auto">{theme.theme}</h1>
     </>
   );
 };

src/data/employees.json

@@ -1,12 +1,4 @@
 [
-  {
-    "name": "?",
-    "quote": "?"
-  },
-  {
-    "name": "loading...",
-    "quote": "loading"
-  },
   {
     "name": "Jenny Andersson",
     "quote": "Be yourself; everyone else is already taken. - Oscar Wilde"