From 4523892002ae75a13962448f6e772f3c35767a36 Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Tue, 6 Sep 2022 16:16:31 +0200 Subject: [PATCH 01/38] feat(local storage): now storing used themes very basically --- src/App.js | 43 +++++++++++++++++++++++++++---------------- 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/src/App.js b/src/App.js index 54d9b49..1e4ba1b 100644 --- a/src/App.js +++ b/src/App.js @@ -6,13 +6,17 @@ import Button from "./components/Button"; import Theme from "./components/Theme"; import Dropdown from "./components/Dropdown"; import themes from "./data/themes.json"; -import { useState, useLayoutEffect } from "react"; +import { useState, useLayoutEffect, useReducer, useEffect } from "react"; import isDuplicate from "./hooks/isDuplicate"; function classNames(...classes) { return classes.filter(Boolean).join(" "); } +/* function themeReducer(state, action) { + return state; +} */ + function App() { //initiating the state and statehandler. const [randomise, setRandomise] = useState(false); @@ -22,10 +26,14 @@ function App() { }); const [theme, setTheme] = useState(); - //const [themeButton, setThemeButton] = useState(false); const [themeIsLoading, setThemeIsLoading] = useState(false); const [gif, setGif] = useState(false); const [themeIsDoneLoading, setThemeIsDoneLoading] = useState(false); + const [usedThemes, setUsedThemes] = useState([]); + /* const [usedThemes, dispatch] = useReducer(themeReducer, [], () => { + const themeData = localStorage.getItem("used themes"); + return themeData ? JSON.parse(themeData) : []; + }); */ isDuplicate(); @@ -127,12 +135,6 @@ function App() { handleSetEmployee(); }; - //this useEffect listens to when the randomise new theme button has been pressed, and generates a new theme. - //maybe this could be removed if the randomisation of theme is written in another way?. - /* useLayoutEffect(() => { - handleSetTheme(); - }, [themeButton]); */ - //this useEffect checks whether the theme has been updated somehow and then triggers a confetti gif. useLayoutEffect(() => { randomise && handleSetGif(); @@ -145,18 +147,29 @@ function App() { }, 2500); }; + useEffect(() => { + if (theme) { + const usedThemes = JSON.parse( + localStorage.getItem("used themes") || "[]" + ); + usedThemes.push(theme); + localStorage.setItem("used themes", JSON.stringify(usedThemes)); + } + }, [theme]); + + useEffect(() => { + const usedThemes = JSON.parse(localStorage.getItem("used themes") || "[]"); + if (usedThemes) { + setUsedThemes(usedThemes); + } + }, []); + return (
- {/* {themeIsLoading && ( -
- -
- )} */} - {gif && (
@@ -180,8 +193,6 @@ function App() {
{/* replacing the button component with the theme component when the button is pushed */} - {/* bg-[url('./images/confetti.gif')] */} - {/*
*/}
{randomise ? ( <> From 679260d3cbc7deb3e9e74f709f3bd8484c1c0768 Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Wed, 7 Sep 2022 11:24:11 +0200 Subject: [PATCH 02/38] feat(localstorage): a wobbly version one of making sure that the same theme does not get selected or randomised when it has been selected or randomised once before. --- src/App.js | 93 ++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 59 insertions(+), 34 deletions(-) diff --git a/src/App.js b/src/App.js index 1e4ba1b..7fa6000 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ import Dropdown from "./components/Dropdown"; import themes from "./data/themes.json"; import { useState, useLayoutEffect, useReducer, useEffect } from "react"; import isDuplicate from "./hooks/isDuplicate"; +import { clear } from "@testing-library/user-event/dist/clear"; function classNames(...classes) { return classes.filter(Boolean).join(" "); @@ -17,6 +18,13 @@ function classNames(...classes) { return state; } */ +//a function that randomises a number to later apply this random number to the person component. I also use it to send a random number to the theme component to use to pick a random theme when the randomise button has been clicked. +function makeRandom(min, max) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min) + min); +} + function App() { //initiating the state and statehandler. const [randomise, setRandomise] = useState(false); @@ -24,29 +32,20 @@ function App() { person1: employees[0], person2: employees[0], }); - const [theme, setTheme] = useState(); const [themeIsLoading, setThemeIsLoading] = useState(false); const [gif, setGif] = useState(false); - const [themeIsDoneLoading, setThemeIsDoneLoading] = useState(false); + const [showThemeButtons, setShowThemeButtons] = useState(false); const [usedThemes, setUsedThemes] = useState([]); + //const [usedOfficeHosts, setUsedOfficeHosts] = useState([]); /* const [usedThemes, dispatch] = useReducer(themeReducer, [], () => { const themeData = localStorage.getItem("used themes"); return themeData ? JSON.parse(themeData) : []; }); */ - isDuplicate(); - //deciding the colors for the background to randomise between these two const colors = ["babyblue", "tulip"]; - //a function that randomises a number to later apply this random number to the person component. I also use it to send a random number to the theme component to use to pick a random theme when the randomise button has been clicked. - function makeRandom(min, max) { - min = Math.ceil(min); - max = Math.floor(max); - return Math.floor(Math.random() * (max - min) + min); - } - //randomising the background color let backgroundColor = colors[makeRandom(0, colors.length)]; @@ -54,7 +53,6 @@ function App() { const findUniqueAndRandomPerson = (otherPerson) => { let newEmployee = employees[makeRandom(2, employees.length)]; if (isDuplicate(newEmployee, otherPerson)) { - console.log(isDuplicate); newEmployee = findUniqueAndRandomPerson(otherPerson); } else { return newEmployee; @@ -111,7 +109,7 @@ function App() { setTheme(specificTheme); return; } else { - setThemeIsDoneLoading(false); + setShowThemeButtons(false); setThemeIsLoading(true); setTimeout(() => { const theme = themes[makeRandom(0, themes.length)].theme; @@ -119,26 +117,15 @@ function App() { setThemeIsLoading(false); }, 8000); setTimeout(() => { - setThemeIsDoneLoading(true); + setShowThemeButtons(true); }, 10500); } }; - const handleSetRandomise = () => { + /* const handleSetRandomise = () => { setRandomise(true); handleSetTheme(); - }; - - //this state handler is triggered when the first button is pressed, to randomise both theme and office hosts at the same time. When randomise is true elements that are hidden in the first screen shows up. - const handleSetRandomiseAll = () => { - handleSetRandomise(); - handleSetEmployee(); - }; - - //this useEffect checks whether the theme has been updated somehow and then triggers a confetti gif. - useLayoutEffect(() => { - randomise && handleSetGif(); - }, [theme]); + }; */ const handleSetGif = () => { setGif(true); @@ -147,22 +134,60 @@ function App() { }, 2500); }; + //this useEffect checks whether the theme has been updated somehow and then triggers a confetti gif. It also pushes the randomised or selected theme into an array in local storage called used themes. useEffect(() => { + randomise && handleSetGif(); if (theme) { const usedThemes = JSON.parse( localStorage.getItem("used themes") || "[]" ); - usedThemes.push(theme); + usedThemes.push({ theme: theme }); localStorage.setItem("used themes", JSON.stringify(usedThemes)); + setUsedThemes(usedThemes); } }, [theme]); - useEffect(() => { - const usedThemes = JSON.parse(localStorage.getItem("used themes") || "[]"); - if (usedThemes) { - setUsedThemes(usedThemes); + //everytime a theme is randomised or selected it gets removed from the themes array. Problem is that this won't get remembered if the browser is reloaded, which the locally storaged usedThemes array gets. + for (let i = 0; i < themes.length; i++) { + if (themes[i].theme === theme) { + themes.splice(i, 1); } - }, []); + } + + //if all themes become randomised or selected the themes array starts over through being replaced with the usedThemes array, that is stored in the local storage. + if (themes.length === 0) { + themes = [...usedThemes]; + } + + /* for (let i = 0; i < themes.length; i++) { + for (let j = 0; j < usedThemes.length; j++) { + if (themes[i].theme == usedThemes[j]) { + themes.splice(i, 1); + } + } + } + + if (themes.length === 0) { + themes.push(...usedThemes); + localStorage.clear(); + } + + console.log(themes); */ + + //if the usedThemes array includes a theme from the themes array I want that theme removed from the themes array. + /* if(themes.includes(usedThemes)) { + const unusedThemes = + } */ + + //this console log checks if the usedThemes array includes the new theme that is being pushed in. + //console.log(usedThemes.includes(theme)); + + //this state handler is triggered when the first button is pressed, to randomise both theme and office hosts at the same time. When randomise is true elements that are hidden in the first screen shows up. + const handleSetRandomiseAll = () => { + handleSetEmployee(); + setRandomise(true); + handleSetTheme(); + }; return (
)} - {themeIsDoneLoading && ( + {showThemeButtons && (
- +
)} diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js index 5766317..d7fed45 100644 --- a/src/components/Dropdown.js +++ b/src/components/Dropdown.js @@ -6,8 +6,7 @@ function classNames(...classes) { return classes.filter(Boolean).join(" "); } -const Dropdown = ({ themes, handleSetTheme }) => { - +const Dropdown = ({ themes, usedThemes, handleSetTheme }) => { return (
@@ -45,12 +44,17 @@ const Dropdown = ({ themes, handleSetTheme }) => {
{themes.map((theTheme) => { return ( - handleSetTheme(theTheme.theme)} key={theTheme.theme}> + handleSetTheme(theTheme.theme)} + key={theTheme.theme} + > {({ active }) => ( @@ -60,6 +64,17 @@ const Dropdown = ({ themes, handleSetTheme }) => { ); })} + {usedThemes.map((usedTheme) => { + return ( + + { +

+ {usedTheme.theme} +

+ } + + ); + })}
diff --git a/src/components/Theme.js b/src/components/Theme.js index 924bb6e..0223ee6 100644 --- a/src/components/Theme.js +++ b/src/components/Theme.js @@ -2,7 +2,6 @@ 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); diff --git a/src/index.css b/src/index.css index 01f9aa4..cd1eb4b 100644 --- a/src/index.css +++ b/src/index.css @@ -25,5 +25,6 @@ code { --color-chinese-silver: 220 220 220; --color-mustard: 255 210 93; --color-almost-white: 248 251 255; + --color-gray: 168 168 168; } } \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 7ba719d..3579237 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,24 +1,25 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ['./src/**/*.{js,jsx,ts,tsx}'], + content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, fontFamily: { - raleway: ["Raleway", "sans-serif"] + raleway: ["Raleway", "sans-serif"], }, dropShadow: { - 'block-right': '15px 15px 0px', - 'block-left': '-15px 15px 0px' + "block-right": "15px 15px 0px", + "block-left": "-15px 15px 0px", }, colors: { // Using modern `rgb` - darkblue: 'rgb(var(--color-dark-blue) / )', - babyblue: 'rgb(var(--color-baby-blue) / )', - tulip: 'rgb(var(--color-tulip) / )', - chinesesilver: 'rgb(var(--color-chinese-silver) / )', - mustard: 'rgb(var(--color-mustard) / )', - almostwhite: 'rgb(var(--color-almost-white) / )', - } + darkblue: "rgb(var(--color-dark-blue) / )", + babyblue: "rgb(var(--color-baby-blue) / )", + tulip: "rgb(var(--color-tulip) / )", + chinesesilver: "rgb(var(--color-chinese-silver) / )", + mustard: "rgb(var(--color-mustard) / )", + almostwhite: "rgb(var(--color-almost-white) / )", + gray: "rgb(var(--color-gray) / )", + }, }, plugins: [], -}; \ No newline at end of file +}; From 4f4b0c915f2c3fba23313edf0efb02315d06454c Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Thu, 8 Sep 2022 09:25:36 +0200 Subject: [PATCH 05/38] style(effects): hid the dice buttons when they shouldn't be active --- src/App.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index 28cb226..512c4ff 100644 --- a/src/App.js +++ b/src/App.js @@ -50,7 +50,7 @@ function App() { let backgroundColor = colors[makeRandom(0, colors.length)]; //this function takes in the person object that should be compared to a new randomised person created when this function is called, it then compares the existing person object with the newly created person, and if it is the same then it re-runs the function. Otherwise it returns the newEmployee that was created through randomisation, which is then set to the person object. - const findUniqueAndRandomPerson = (otherPerson) => { + /* const findUniqueAndRandomPerson = (otherPerson) => { let newEmployee = employees[makeRandom(2, employees.length)]; if (isDuplicate(newEmployee, otherPerson)) { newEmployee = findUniqueAndRandomPerson(otherPerson); @@ -58,7 +58,7 @@ function App() { return newEmployee; } return newEmployee; - }; + }; */ //this is a state handler that executes when handleSetRandomiseAll() is called and when a number is passed into setEmployee(). It sets a random value to the employee array and stores this in person1 and person2 objects containing the whole object carried from the employees array. //maybe this could be re-written as a switch-case? @@ -71,7 +71,7 @@ function App() { setTimeout(() => { setEmployee({ ...employee, - person1: findUniqueAndRandomPerson(employee.person2), + person1: employees[makeRandom(2, employees.length)], }); }, 1500); } else if (number === 2) { @@ -82,7 +82,7 @@ function App() { setTimeout(() => { setEmployee({ ...employee, - person2: findUniqueAndRandomPerson(employee.person1), + person2: employees[makeRandom(2, employees.length)], }); }, 1500); } else { @@ -90,14 +90,14 @@ function App() { setTimeout(() => { setEmployee((state) => ({ ...state, - person1: findUniqueAndRandomPerson(employee.person2), + person1: employees[makeRandom(2, employees.length)], })); }, 2500); setEmployee((state) => ({ ...state, person2: employees[1] })); setTimeout(() => { setEmployee((state) => ({ ...state, - person2: findUniqueAndRandomPerson(employee.person1), + person2: employees[makeRandom(2, employees.length)], })); }, 5000); } @@ -207,7 +207,7 @@ function App() { {/* defining the employee from the employees array with a random number created through clicking the randomise button */}
- {randomise && ( + {randomise && showThemeButtons && (
{/* replacing the button component with the theme component when the button is pushed */} -
+
{randomise ? ( <> -
+
{themeIsLoading ? (
) : ( -
+
)} {showThemeButtons && ( -
-
+
+
-
+
) : ( -
+
)}
-
+
{randomise && showThemeButtons && (
)} - {showThemeButtons && ( + {showActionButtons && (
- {randomise && showThemeButtons && ( + {randomise && showActionButtons && (
diff --git a/src/hooks/useLocalStorage.js b/src/hooks/useLocalStorage.js index b1d28fc..39f8cb8 100644 --- a/src/hooks/useLocalStorage.js +++ b/src/hooks/useLocalStorage.js @@ -8,6 +8,8 @@ export const useLocalStorage = () => { //defining the state and state setters of used themes and used employees. const [themes, setThemes] = useState([]); const [employees, setEmployees] = useState([]); + /* const [deSelectedThemeArray, setDeSelectedThemeArray] = useState([]); */ + /* let splicedTheme = {}; */ //calling the function that updates the storage. useEffect(() => { @@ -39,10 +41,14 @@ export const useLocalStorage = () => { const removeDeSelectedThemeFromLocalStorage = () => { for (let i = 0; i < themes.length; i++) { if (themes[i] === themes[themes.length - 1]) { + /* let splicedTheme = {theme: themes[i]}; */ + /* setDeSelectedThemeArray(themes[i]); */ themes.splice(i, 1); } } + /* console.log(deSelectedThemeArray); */ + localStorage.removeItem(themeKey); for (let i = 0; i < themes.length; i++) { @@ -71,7 +77,10 @@ export const useLocalStorage = () => { //console.log(secondToLastTheme); - console.log("this is the stored themes array:: ", themes); + /* console.log( + "this is the stored themes array from useLocalStorage.js:: ", + themes + ); */ //a function that adds employees to the local storage, first through getting the already stored employees and mapping out their names, puts the already stored employees in through a filtering method that searches for if the names of the stored employees are identical - if they are they won't be put in the variable, otherwise the correct stored employees will be put in a variable called employeesToAdd. const addUsedEmployees = (storedEmployees) => { From c943de791b9b3dc120694dd54e8fdecdf176ae0e Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Tue, 13 Sep 2022 11:10:43 +0200 Subject: [PATCH 15/38] feat(localStorage): the office host who is de-selected through a dice press is now removed from the local storage, yet to be added back into the employees array. --- src/App.js | 26 +++++++++++++++------- src/hooks/useLocalStorage.js | 43 +++++++++++++++++++++++++++--------- 2 files changed, 50 insertions(+), 19 deletions(-) diff --git a/src/App.js b/src/App.js index 330eb9b..f17349a 100644 --- a/src/App.js +++ b/src/App.js @@ -34,7 +34,9 @@ function App() { storedEmployees, addUsedTheme, addUsedEmployees, - removeDeSelectedThemeFromLocalStorage, + removeDeSelectedTheme, + removeDeSelectedPerson1, + removeDeSelectedPerson2, employeeKey, themeKey, } = useLocalStorage(); @@ -78,6 +80,7 @@ function App() { person1: findUniqueAndRandomPerson(employee.person2), }); }, 1500); + removeDeSelectedPerson1(); } else if (number === 2) { setEmployee({ ...employee, @@ -89,6 +92,7 @@ function App() { person2: findUniqueAndRandomPerson(employee.person1), }); }, 1500); + removeDeSelectedPerson2(); } else { setEmployee((state) => ({ ...state, person1: employees[1] })); setTimeout(() => { @@ -113,7 +117,7 @@ function App() { const handleSetTheme = (specificTheme) => { if (specificTheme) { setTheme(specificTheme); - removeDeSelectedThemeFromLocalStorage(); + removeDeSelectedTheme(); //pushing in themes[i] into original themes array. //clonedThemes = themes.slice(0); } else { @@ -181,15 +185,12 @@ function App() { } } - console.log("themes array:: ", themes); + /* console.log("themes array:: ", themes); console.log("storedThemes array:: ", storedThemes); - console.log("clonedThemes array:: ", clonedThemes); - - /* console.log("themes array from app.js:: ", themes); - console.log("stored themes array from app.js:: ", storedThemes); */ + console.log("clonedThemes array:: ", clonedThemes); */ //same as above but for office hosts. The if conditional is to remove the error of not being able to read 'name' that I suppose happens because there is no one in either the employees array or the storedEmployees array. - if (employees > 1 && storedEmployees > 1) { + /* if (employees > 1 && storedEmployees > 1) { for (let i = 2; i < employees.length; i++) { for (let j = 0; j < storedEmployees.length; j++) { if (employees[i].name === storedEmployees[j].name) { @@ -197,8 +198,17 @@ function App() { } } } + } */ + for (let i = 2; i < employees.length; i++) { + for (let j = 0; j < storedEmployees.length; j++) { + if (employees[i].name === storedEmployees[j].name) { + employees.splice(i, 1); + } + } } + console.log(employees); + //pushes the stored employees array into the original employees array. Removes the stored employees from local storage without touching the stored themes. if (employees.length <= 3) { employees = [...employees, ...storedEmployees]; diff --git a/src/hooks/useLocalStorage.js b/src/hooks/useLocalStorage.js index 39f8cb8..c1bf3db 100644 --- a/src/hooks/useLocalStorage.js +++ b/src/hooks/useLocalStorage.js @@ -38,11 +38,9 @@ export const useLocalStorage = () => { }; //I want to create a function that removes the secondly last theme object from the themes array because in this component the themes array is stored themes. I will call this function when a person selects a new theme from the dropdown menu. - const removeDeSelectedThemeFromLocalStorage = () => { + const removeDeSelectedTheme = () => { for (let i = 0; i < themes.length; i++) { if (themes[i] === themes[themes.length - 1]) { - /* let splicedTheme = {theme: themes[i]}; */ - /* setDeSelectedThemeArray(themes[i]); */ themes.splice(i, 1); } } @@ -75,13 +73,6 @@ export const useLocalStorage = () => { } */ }; - //console.log(secondToLastTheme); - - /* console.log( - "this is the stored themes array from useLocalStorage.js:: ", - themes - ); */ - //a function that adds employees to the local storage, first through getting the already stored employees and mapping out their names, puts the already stored employees in through a filtering method that searches for if the names of the stored employees are identical - if they are they won't be put in the variable, otherwise the correct stored employees will be put in a variable called employeesToAdd. const addUsedEmployees = (storedEmployees) => { const existingEmployees = getStoredItems(employeeKey).map( @@ -99,13 +90,43 @@ export const useLocalStorage = () => { return updateFromStorage(); }; + const removeDeSelectedPerson1 = () => { + for (let i = 0; i < employees.length; i++) { + if (employees[i] === employees[employees.length - 2]) { + employees.splice(i, 1); + } + } + + localStorage.removeItem(employeeKey); + + for (let i = 0; i < employees.length; i++) { + addUsedEmployees(employees[i]); + } + }; + + const removeDeSelectedPerson2 = () => { + for (let i = 0; i < employees.length; i++) { + if (employees[i] === employees[employees.length - 1]) { + employees.splice(i, 1); + } + } + + localStorage.removeItem(employeeKey); + + for (let i = 0; i < employees.length; i++) { + addUsedEmployees(employees[i]); + } + }; + //this returns the stored themes, the stored employees and the two functions that adds used themes and used employees to the local storage. This makes it able for me to access these values from app.js return { storedThemes: themes, storedEmployees: employees, addUsedTheme, addUsedEmployees, - removeDeSelectedThemeFromLocalStorage, + removeDeSelectedTheme, + removeDeSelectedPerson1, + removeDeSelectedPerson2, themeKey, employeeKey, }; From dd82ce4d72dd4b06e960d1efae18cf98f78bb993 Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Tue, 13 Sep 2022 13:02:40 +0200 Subject: [PATCH 16/38] refactor(localStorage): this app is now filled with bugs... the code that splices the clonedThemes that exist in storedThemes isn't waterproof, sometimes themes that do exist in storedThemes suddenly pop up in clonedThemes as well... one person can become both of the office hosts because the chosen employees don't get spliced out of the clonedEmployees array until both office hosts have been set. Even though an employee has become an office host and is set in storedEmployees they can still become office host once again, and I think it's because clonedEmployees takes in the whole employees array each render? --- src/App.js | 131 +++++++++++++++++++++++++++-------------------------- 1 file changed, 67 insertions(+), 64 deletions(-) diff --git a/src/App.js b/src/App.js index f17349a..2b2e8b9 100644 --- a/src/App.js +++ b/src/App.js @@ -18,11 +18,12 @@ function makeRandom(min, max) { } function App() { + let clonedEmployees = employees.slice(0); //initiating the state and statehandlers. const [randomise, setRandomise] = useState(false); const [employee, setEmployee] = useState({ - person1: employees[0], - person2: employees[0], + person1: clonedEmployees[0], + person2: clonedEmployees[0], }); const [theme, setTheme] = useState(); const [themeIsLoading, setThemeIsLoading] = useState(false); @@ -49,9 +50,65 @@ function App() { //randomising the background color and storing it in a backgroundColor variable later used in a className. let backgroundColor = colors[makeRandom(0, colors.length)]; + //this useEffect checks whether the theme has been updated somehow and then triggers a confetti gif. It also pushes the randomised or selected theme into an array in local storage by accessing a function declared in useLocalStorage.js. + useEffect(() => { + randomise && handleSetGif(); + if (theme) { + addUsedTheme({ theme: theme }); + //updateThemesArray(); + } + }, [theme]); + + //this useEffect stores the people who have been randomised as office hosts (i.e., not when employees.person 1 or 2 is "?" or "loading...") in an array in localStorage. + useEffect(() => { + if ( + employee.person1 !== clonedEmployees[0] && + employee.person1 !== clonedEmployees[1] && + employee.person2 !== clonedEmployees[0] && + employee.person2 !== clonedEmployees[1] + ) { + addUsedEmployees([employee.person1, employee.person2]); + } + }, [employee]); + + //when a theme gets used (and thus exists in the storedThemes array) it gets removed from the themes array, making it impossible to use again until the themes array is empty. Comparing the themes array with the storedThemes array makes it remember what themes has been used before even if the browser is reloaded, because storedThemes are stored in the local storage. I reload the original themes array into the clonedThemes array before this because I want to make sure that de-selected themes puts back into the themes array. + clonedThemes = themes.slice(0); + for (let i = 0; i < clonedThemes.length; i++) { + for (let j = 0; j < storedThemes.length; j++) { + if (clonedThemes[i].theme === storedThemes[j].theme) { + clonedThemes.splice(i, 1); + } + } + } + + /* console.log("themes array:: ", themes); + console.log("storedThemes array:: ", storedThemes); */ + console.log("clonedThemes array:: ", clonedThemes); + + //same as above but for office hosts. The if conditional is to remove the error of not being able to read 'name' that I suppose happens because there is no one in either the employees array or the storedEmployees array. + /* if (employees > 1 && storedEmployees > 1) { + for (let i = 2; i < employees.length; i++) { + for (let j = 0; j < storedEmployees.length; j++) { + if (employees[i].name === storedEmployees[j].name) { + employees.splice(i, 1); + } + } + } + } */ + clonedEmployees = employees.slice(0); + for (let i = 2; i < clonedEmployees.length; i++) { + for (let j = 0; j < storedEmployees.length; j++) { + if (clonedEmployees[i].name === storedEmployees[j].name) { + clonedEmployees.splice(i, 1); + } + } + } + + //console.log(clonedEmployees); + //this function takes in the person object that should be compared to a new randomised person created when this function is called, it then compares the existing person object with the newly created person, and if it is the same then it re-runs the function. Otherwise it returns the newEmployee that was created through randomisation, which is then set to the person object. It is still a bit unclear whether this does what I want it to or not. Office host 1 and 2 still manages to become the same person sometimes. const findUniqueAndRandomPerson = (otherPerson) => { - let newEmployee = employees[makeRandom(2, employees.length)]; + let newEmployee = clonedEmployees[makeRandom(2, clonedEmployees.length)]; if (isDuplicate(newEmployee, otherPerson)) { newEmployee = findUniqueAndRandomPerson(otherPerson); } else { @@ -72,7 +129,7 @@ function App() { if (number === 1) { setEmployee({ ...employee, - person1: employees[1], + person1: clonedEmployees[1], }); setTimeout(() => { setEmployee({ @@ -84,7 +141,7 @@ function App() { } else if (number === 2) { setEmployee({ ...employee, - person2: employees[1], + person2: clonedEmployees[1], }); setTimeout(() => { setEmployee({ @@ -94,14 +151,14 @@ function App() { }, 1500); removeDeSelectedPerson2(); } else { - setEmployee((state) => ({ ...state, person1: employees[1] })); + setEmployee((state) => ({ ...state, person1: clonedEmployees[1] })); setTimeout(() => { setEmployee((state) => ({ ...state, person1: findUniqueAndRandomPerson(employee.person2), })); }, 2500); - setEmployee((state) => ({ ...state, person2: employees[1] })); + setEmployee((state) => ({ ...state, person2: clonedEmployees[1] })); setTimeout(() => { setEmployee((state) => ({ ...state, @@ -154,64 +211,10 @@ function App() { } } */ - //this useEffect checks whether the theme has been updated somehow and then triggers a confetti gif. It also pushes the randomised or selected theme into an array in local storage by accessing a function declared in useLocalStorage.js. - useEffect(() => { - randomise && handleSetGif(); - if (theme) { - addUsedTheme({ theme: theme }); - //updateThemesArray(); - } - }, [theme]); - - //this useEffect stores the people who have been randomised as office hosts (i.e., not when employees.person 1 or 2 is "?" or "loading...") in an array in localStorage. - useEffect(() => { - if ( - employee.person1 !== employees[0] && - employee.person1 !== employees[1] && - employee.person2 !== employees[0] && - employee.person2 !== employees[1] - ) { - addUsedEmployees([employee.person1, employee.person2]); - } - }, [employee]); - - //when a theme gets used (and thus exists in the storedThemes array) it gets removed from the themes array, making it impossible to use again until the themes array is empty. Comparing the themes array with the storedThemes array makes it remember what themes has been used before even if the browser is reloaded, because storedThemes are stored in the local storage. I reload the original themes array into the clonedThemes array before this because I want to make sure that de-selected themes puts back into the themes array. - clonedThemes = themes.slice(0); - for (let i = 0; i < clonedThemes.length; i++) { - for (let j = 0; j < storedThemes.length; j++) { - if (clonedThemes[i].theme === storedThemes[j].theme) { - clonedThemes.splice(i, 1); - } - } - } - - /* console.log("themes array:: ", themes); - console.log("storedThemes array:: ", storedThemes); - console.log("clonedThemes array:: ", clonedThemes); */ - - //same as above but for office hosts. The if conditional is to remove the error of not being able to read 'name' that I suppose happens because there is no one in either the employees array or the storedEmployees array. - /* if (employees > 1 && storedEmployees > 1) { - for (let i = 2; i < employees.length; i++) { - for (let j = 0; j < storedEmployees.length; j++) { - if (employees[i].name === storedEmployees[j].name) { - employees.splice(i, 1); - } - } - } - } */ - for (let i = 2; i < employees.length; i++) { - for (let j = 0; j < storedEmployees.length; j++) { - if (employees[i].name === storedEmployees[j].name) { - employees.splice(i, 1); - } - } - } - - console.log(employees); - //pushes the stored employees array into the original employees array. Removes the stored employees from local storage without touching the stored themes. - if (employees.length <= 3) { - employees = [...employees, ...storedEmployees]; + if (clonedEmployees.length <= 3) { + clonedThemes = themes.slice(0); + //clonedEmployees = [...clonedEmployees, ...storedEmployees]; localStorage.removeItem(employeeKey); } From d2d5c04f7fce41502fb556008e71e2eb89500baa Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Tue, 13 Sep 2022 16:36:24 +0200 Subject: [PATCH 17/38] refactor(cleanerCode): made the if conditional of selecting random office hosts into a switch case. All the bugs are still there + I uncovered a new one: if there are office hosts stored in the local storage prior to when a user re-randomises an office host through a dice press the entire local storage of employees is replaced with the current office hosts. --- src/App.js | 51 ++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 48 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 2b2e8b9..417b73c 100644 --- a/src/App.js +++ b/src/App.js @@ -72,7 +72,7 @@ function App() { }, [employee]); //when a theme gets used (and thus exists in the storedThemes array) it gets removed from the themes array, making it impossible to use again until the themes array is empty. Comparing the themes array with the storedThemes array makes it remember what themes has been used before even if the browser is reloaded, because storedThemes are stored in the local storage. I reload the original themes array into the clonedThemes array before this because I want to make sure that de-selected themes puts back into the themes array. - clonedThemes = themes.slice(0); + //clonedThemes = themes.slice(0); for (let i = 0; i < clonedThemes.length; i++) { for (let j = 0; j < storedThemes.length; j++) { if (clonedThemes[i].theme === storedThemes[j].theme) { @@ -126,7 +126,52 @@ function App() { //this is a state handler that executes when handleSetRandomiseAll() is called and when a number is passed into setEmployee(). It sets a random value to the employee array and stores this in person1 and person2 objects containing the whole object carried from the employees array. //maybe this could be re-written as a switch-case? const handleSetEmployee = (number) => { - if (number === 1) { + switch (number) { + case 1: + setEmployee({ + ...employee, + person1: clonedEmployees[1], + }); + setTimeout(() => { + setEmployee({ + ...employee, + person1: findUniqueAndRandomPerson(employee.person2), + }); + }, 1500); + removeDeSelectedPerson1(); + break; + case 2: + setEmployee({ + ...employee, + person2: clonedEmployees[1], + }); + setTimeout(() => { + setEmployee({ + ...employee, + person2: findUniqueAndRandomPerson(employee.person1), + }); + }, 1500); + removeDeSelectedPerson2(); + break; + default: + setEmployee((state) => ({ ...state, person1: clonedEmployees[1] })); + setTimeout(() => { + setEmployee((state) => ({ + ...state, + person1: findUniqueAndRandomPerson(employee.person2), + })); + }, 2500); + setEmployee((state) => ({ ...state, person2: clonedEmployees[1] })); + setTimeout(() => { + setEmployee((state) => ({ + ...state, + person2: findUniqueAndRandomPerson(employee.person1), + })); + }, 5000); + break; + } + + /* if (number === 1) { setEmployee({ ...employee, person1: clonedEmployees[1], @@ -165,7 +210,7 @@ function App() { person2: findUniqueAndRandomPerson(employee.person1), })); }, 5000); - } + } */ }; //console.log("stored themes array:: ", storedThemes); From c79932c053e6ec79149fe7697744f6b6254804c0 Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Mon, 17 Oct 2022 09:50:06 +0200 Subject: [PATCH 18/38] feat(localStorage): the themes that has already been are now safely removed from the themes array from which the user can choose and randomise new themes from. --- src/App.js | 147 +++++++++++++++++++++-------------- src/hooks/isDuplicate.js | 13 ++-- src/hooks/useLocalStorage.js | 2 +- 3 files changed, 97 insertions(+), 65 deletions(-) diff --git a/src/App.js b/src/App.js index 417b73c..78354ac 100644 --- a/src/App.js +++ b/src/App.js @@ -18,17 +18,22 @@ function makeRandom(min, max) { } function App() { - let clonedEmployees = employees.slice(0); + //cloning the employees and themes array + /* let clonedEmployees = employees.slice(0); + let clonedThemes = themes.slice(0); */ //initiating the state and statehandlers. + const [employeesArray, setEmployeesArray] = useState([...employees]); + const [themesArray, setThemesArray] = useState([...themes]); const [randomise, setRandomise] = useState(false); const [employee, setEmployee] = useState({ - person1: clonedEmployees[0], - person2: clonedEmployees[0], + person1: employeesArray[0], + person2: employeesArray[0], }); const [theme, setTheme] = useState(); - const [themeIsLoading, setThemeIsLoading] = useState(false); + const [loadingStatus, setLoadingStatus] = useState("nothing"); + //const [themeIsLoading, setThemeIsLoading] = useState(false); const [gif, setGif] = useState(false); - const [showActionButtons, setShowActionButtons] = useState(false); + //const [showActionButtons, setShowActionButtons] = useState(false); //accessing the variables and functions through the useLocalStorage hook. const { storedThemes, @@ -44,46 +49,54 @@ function App() { //deciding the colors for the background to randomise between const colors = ["babyblue", "tulip"]; - //cloning the themes array - let clonedThemes = themes.slice(0); + const themeIsLoading = loadingStatus === "loading"; + const themeIsDoneLoading = loadingStatus === "done-loading"; + const themeReveal = loadingStatus === "theme-reveal"; + const personLoading = loadingStatus === "person-loading"; //randomising the background color and storing it in a backgroundColor variable later used in a className. let backgroundColor = colors[makeRandom(0, colors.length)]; //this useEffect checks whether the theme has been updated somehow and then triggers a confetti gif. It also pushes the randomised or selected theme into an array in local storage by accessing a function declared in useLocalStorage.js. + //make into a hook? useEffect(() => { randomise && handleSetGif(); if (theme) { addUsedTheme({ theme: theme }); //updateThemesArray(); + + /* + const updatedThemesArray = themesArray.filter() + + setThemesArray(updatedThemesArray) */ } }, [theme]); //this useEffect stores the people who have been randomised as office hosts (i.e., not when employees.person 1 or 2 is "?" or "loading...") in an array in localStorage. + //make into a hook? useEffect(() => { if ( - employee.person1 !== clonedEmployees[0] && - employee.person1 !== clonedEmployees[1] && - employee.person2 !== clonedEmployees[0] && - employee.person2 !== clonedEmployees[1] + employee.person1 !== employeesArray[0] && + employee.person1 !== employeesArray[1] && + employee.person2 !== employeesArray[0] && + employee.person2 !== employeesArray[1] ) { addUsedEmployees([employee.person1, employee.person2]); } }, [employee]); //when a theme gets used (and thus exists in the storedThemes array) it gets removed from the themes array, making it impossible to use again until the themes array is empty. Comparing the themes array with the storedThemes array makes it remember what themes has been used before even if the browser is reloaded, because storedThemes are stored in the local storage. I reload the original themes array into the clonedThemes array before this because I want to make sure that de-selected themes puts back into the themes array. - //clonedThemes = themes.slice(0); - for (let i = 0; i < clonedThemes.length; i++) { - for (let j = 0; j < storedThemes.length; j++) { - if (clonedThemes[i].theme === storedThemes[j].theme) { - clonedThemes.splice(i, 1); + //make into a hook? + /* useEffect(() => { + + for (let i = 0; i < clonedThemes.length; i++) { + for (let j = 0; j < storedThemes.length; j++) { + if (clonedThemes[i].theme === storedThemes[j].theme) { + return clonedThemes.splice(i, 1); + } } } - } - - /* console.log("themes array:: ", themes); - console.log("storedThemes array:: ", storedThemes); */ - console.log("clonedThemes array:: ", clonedThemes); + }, []); */ //same as above but for office hosts. The if conditional is to remove the error of not being able to read 'name' that I suppose happens because there is no one in either the employees array or the storedEmployees array. /* if (employees > 1 && storedEmployees > 1) { @@ -95,20 +108,28 @@ function App() { } } } */ - clonedEmployees = employees.slice(0); - for (let i = 2; i < clonedEmployees.length; i++) { - for (let j = 0; j < storedEmployees.length; j++) { - if (clonedEmployees[i].name === storedEmployees[j].name) { - clonedEmployees.splice(i, 1); + /* useEffect(() => { + + employeesArray.filter() + //clonedEmployees = employees.slice(0); + + if (storedEmployees.length >= 1) { + for (let i = 2; i < employeesArray.length; i++) { + for (let j = 0; j < storedEmployees.length; j++) { + if (employeesArray[i].name === storedEmployees[j].name) { + //employeesArray.splice(i, 1); + // employeesArray.filter(e => e.name !== ) + } + } } - } - } + } + }); */ //console.log(clonedEmployees); //this function takes in the person object that should be compared to a new randomised person created when this function is called, it then compares the existing person object with the newly created person, and if it is the same then it re-runs the function. Otherwise it returns the newEmployee that was created through randomisation, which is then set to the person object. It is still a bit unclear whether this does what I want it to or not. Office host 1 and 2 still manages to become the same person sometimes. const findUniqueAndRandomPerson = (otherPerson) => { - let newEmployee = clonedEmployees[makeRandom(2, clonedEmployees.length)]; + let newEmployee = employeesArray[makeRandom(2, employeesArray.length)]; if (isDuplicate(newEmployee, otherPerson)) { newEmployee = findUniqueAndRandomPerson(otherPerson); } else { @@ -126,42 +147,45 @@ function App() { //this is a state handler that executes when handleSetRandomiseAll() is called and when a number is passed into setEmployee(). It sets a random value to the employee array and stores this in person1 and person2 objects containing the whole object carried from the employees array. //maybe this could be re-written as a switch-case? const handleSetEmployee = (number) => { + setLoadingStatus("person-loading"); switch (number) { case 1: setEmployee({ ...employee, - person1: clonedEmployees[1], + person1: employeesArray[1], }); setTimeout(() => { setEmployee({ ...employee, person1: findUniqueAndRandomPerson(employee.person2), }); + setLoadingStatus("done-loading"); }, 1500); - removeDeSelectedPerson1(); + //removeDeSelectedPerson1(); break; case 2: setEmployee({ ...employee, - person2: clonedEmployees[1], + person2: employeesArray[1], }); setTimeout(() => { setEmployee({ ...employee, person2: findUniqueAndRandomPerson(employee.person1), }); + setLoadingStatus("done-loading"); }, 1500); - removeDeSelectedPerson2(); + //removeDeSelectedPerson2(); break; default: - setEmployee((state) => ({ ...state, person1: clonedEmployees[1] })); + setEmployee((state) => ({ ...state, person1: employeesArray[1] })); setTimeout(() => { setEmployee((state) => ({ ...state, person1: findUniqueAndRandomPerson(employee.person2), })); }, 2500); - setEmployee((state) => ({ ...state, person2: clonedEmployees[1] })); + setEmployee((state) => ({ ...state, person2: employeesArray[1] })); setTimeout(() => { setEmployee((state) => ({ ...state, @@ -219,24 +243,32 @@ function App() { const handleSetTheme = (specificTheme) => { if (specificTheme) { setTheme(specificTheme); - removeDeSelectedTheme(); + //removeDeSelectedTheme(); //pushing in themes[i] into original themes array. //clonedThemes = themes.slice(0); + //setThemesArray(themesArray.filter((t) => t.theme !== themes.theme)); + /* for (let j = 0; j < storedThemes.length; j++) { + if (storedThemes[j].theme === specificTheme) { + setThemesArray(themesArray.filter((t) => t !== specificTheme)); + } + } */ } else { - setShowActionButtons(false); - setThemeIsLoading(true); + setLoadingStatus("loading"); setTimeout(() => { - const theme = clonedThemes[makeRandom(0, clonedThemes.length)]; - const themeName = theme.theme; - setTheme(themeName); - setThemeIsLoading(false); + const theme = themesArray[makeRandom(0, themesArray.length)].theme; + //const themeName = theme.theme; + setTheme(theme); + setLoadingStatus("theme-reveal"); }, 8000); setTimeout(() => { - setShowActionButtons(true); + setLoadingStatus("done-loading"); }, 10500); } }; + console.log("storedThemes array:: ", storedThemes); + console.log("themes array:: ", themesArray); + //a statehandler that shows the gif for 2,5 seconds after a theme has been chosen/randomised. const handleSetGif = () => { setGif(true); @@ -245,30 +277,31 @@ function App() { }, 2500); }; - /* function updateThemesArray() { - //clonedThemes = themes.slice(0); - for (let i = 0; i < clonedThemes.length; i++) { + //this useEffect keeps track of which themes has already been, and removes them from the themesArray. + useEffect(() => { + for (let i = 0; i < themesArray.length; i++) { for (let j = 0; j < storedThemes.length; j++) { - if (clonedThemes[i].theme === storedThemes[j].theme) { - clonedThemes.splice(i, 1); + if (themesArray[i].theme === storedThemes[j].theme) { + //clonedThemes.splice(i, 1); + setThemesArray(themesArray.filter((t) => t !== themesArray[i])); } } } - } */ + }); //pushes the stored employees array into the original employees array. Removes the stored employees from local storage without touching the stored themes. - if (clonedEmployees.length <= 3) { + /* if (clonedEmployees.length <= 3) { clonedThemes = themes.slice(0); //clonedEmployees = [...clonedEmployees, ...storedEmployees]; localStorage.removeItem(employeeKey); - } + } */ //pushes the stored themes into the original themes array. Removes the stored themes from local storage without touching the stored employees. - if (clonedThemes.length === 0) { + /* if (clonedThemes.length === 0) { clonedThemes = themes.slice(0); //themes = [...storedThemes]; localStorage.removeItem(themeKey); - } + } */ //this state handler is triggered when the first button is pressed, to randomise both theme and office hosts at the same time. When randomise is true elements that are hidden in the first screen shows up. const handleSetRandomiseAll = () => { @@ -290,7 +323,7 @@ function App() { {/* defining the employee from the employees array with a random number created through clicking the randomise button */}
- {randomise && showActionButtons && ( + {themeIsDoneLoading && (
)} - {showActionButtons && ( + {themeIsDoneLoading && (
@@ -356,7 +389,7 @@ function App() {
- {randomise && showActionButtons && ( + {themeIsDoneLoading && (
) : (
- +
)} {themeIsDoneLoading && ( diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js index 5fdf96d..1009a1c 100644 --- a/src/components/Dropdown.js +++ b/src/components/Dropdown.js @@ -45,7 +45,7 @@ const Dropdown = ({ themes, storedThemes, handleSetTheme }) => { {themes.map((theTheme) => { return ( handleSetTheme(theTheme.theme)} + onClick={() => handleSetTheme(theTheme)} key={theTheme.theme} > {({ active }) => ( diff --git a/src/components/Theme.js b/src/components/Theme.js index 0223ee6..dd7b6bc 100644 --- a/src/components/Theme.js +++ b/src/components/Theme.js @@ -17,7 +17,7 @@ const Theme = ({ randomise, theme }) => { <> {showTheme ? ( <> -

{theme}

+

{theme.theme}

) : null} From 142619efae5d54dcfea542d3a6ff6da4f0070e69 Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Tue, 18 Oct 2022 16:59:16 +0200 Subject: [PATCH 27/38] refactor(gif): the confetti gif is now triggered by user actions, not by a useEffect. --- src/App.js | 31 +++++++------------------------ src/hooks/useUpdateArray.js | 13 ------------- 2 files changed, 7 insertions(+), 37 deletions(-) delete mode 100644 src/hooks/useUpdateArray.js diff --git a/src/App.js b/src/App.js index ff8bc07..2dc52d5 100644 --- a/src/App.js +++ b/src/App.js @@ -9,7 +9,6 @@ import themes from "./data/themes.json"; import { useState, useEffect } from "react"; import useLocalStorage from "./hooks/useLocalStorage"; import isDuplicate from "./hooks/isDuplicate"; -import { useUpdateArray } from "./hooks/useUpdateArray"; //a function that randomises a number. I use it to randomise office hosts, color of the background, and themes. function makeRandom(min, max) { @@ -18,26 +17,15 @@ function makeRandom(min, max) { return Math.floor(Math.random() * (max - min) + min); } -/* function filterArray(arr1, arr2) { - let newArr; - for (let i = 0; i < arr1.length; i++) { - for (let j = 0; j < arr2.length; j++) { - if (arr1[i].theme === arr2[j].theme) { - arr1.filter((a) => a !== arr1[i]); - } - } - } -} */ - function App() { - //cloning the employees and themes array - /* let clonedEmployees = employees.slice(0); - let clonedThemes = themes.slice(0); */ //initiating the state and statehandlers. + + //remove '?' and 'loading...' from employees JSON and figure out a new solution for this. const [employeesArray, setEmployeesArray] = useState( employees.slice(2, employees.length) ); const [themesArray, setThemesArray] = useState([...themes]); + //try deleting randomise and set this as a new value in 'loadingStatus'. To reduce contradicting state. const [randomise, setRandomise] = useState(false); const [employee, setEmployee] = useState({ person1: employees[0], @@ -45,9 +33,8 @@ function App() { }); const [theme, setTheme] = useState(); const [loadingStatus, setLoadingStatus] = useState("nothing"); - //const [themeIsLoading, setThemeIsLoading] = useState(false); const [gif, setGif] = useState(false); - //const [showActionButtons, setShowActionButtons] = useState(false); + //accessing the variables and functions through the useLocalStorage hook. const { storedThemes, @@ -62,6 +49,7 @@ function App() { //deciding the colors for the background to randomise between const colors = ["babyblue", "tulip"]; + //declaring the states for the loadingStatuses so I can check if they are 'true' or 'false'. const themeIsLoading = loadingStatus === "loading"; const themeIsDoneLoading = loadingStatus === "done-loading"; const themeReveal = loadingStatus === "theme-reveal"; @@ -73,15 +61,8 @@ function App() { //this useEffect checks whether the theme has been updated somehow and then triggers a confetti gif. It also pushes the randomised or selected theme into an array in local storage by accessing a function declared in useLocalStorage.js. //make into a hook? useEffect(() => { - randomise && handleSetGif(); if (theme) { addUsedTheme(theme); - //updateThemesArray(); - - /* - const updatedThemesArray = themesArray.filter() - - setThemesArray(updatedThemesArray) */ } }, [theme]); @@ -227,12 +208,14 @@ function App() { removeDeSelectedTheme(theme.theme); setThemesArray([...themesArray, theme]); setTheme(specificTheme); + handleSetGif(); } else { setLoadingStatus("loading"); setTimeout(() => { const theme = themesArray[makeRandom(0, themesArray.length)]; setTheme(theme); setLoadingStatus("theme-reveal"); + handleSetGif(); }, 8000); setTimeout(() => { setLoadingStatus("done-loading"); diff --git a/src/hooks/useUpdateArray.js b/src/hooks/useUpdateArray.js deleted file mode 100644 index 2b909bc..0000000 --- a/src/hooks/useUpdateArray.js +++ /dev/null @@ -1,13 +0,0 @@ -import { useEffect } from "react"; - -export const useUpdateArray = (arr1, arr2) => { - useEffect(() => { - for (let i = 0; i < arr1.length; i++) { - for (let j = 0; j < arr2.length; j++) { - if (arr1[i].theme === arr2[j].theme) { - const newArr = arr1.filter((a) => a !== arr1[i]); - } - } - } - }); -}; From dd218d0739f1a65e9b1653e04cb524675b5c6ad0 Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Wed, 19 Oct 2022 09:30:45 +0200 Subject: [PATCH 28/38] refactor(new components): split the code up into more smaller components --- src/App.js | 25 ++++++------------------- src/components/DiceButton.js | 19 +++++++++++++++++++ src/components/Image.js | 13 +++++++++++++ src/components/Name.js | 11 +++++++++++ src/components/Person.js | 28 ++++++++-------------------- src/components/Theme.js | 22 ++-------------------- 6 files changed, 59 insertions(+), 59 deletions(-) create mode 100644 src/components/DiceButton.js create mode 100644 src/components/Image.js create mode 100644 src/components/Name.js diff --git a/src/App.js b/src/App.js index 2dc52d5..10b8dd5 100644 --- a/src/App.js +++ b/src/App.js @@ -9,6 +9,7 @@ import themes from "./data/themes.json"; import { useState, useEffect } from "react"; import useLocalStorage from "./hooks/useLocalStorage"; import isDuplicate from "./hooks/isDuplicate"; +import DiceButton from "./components/DiceButton"; //a function that randomises a number. I use it to randomise office hosts, color of the background, and themes. function makeRandom(min, max) { @@ -231,7 +232,9 @@ function App() { //a statehandler that shows the gif for 2,5 seconds after a theme has been chosen/randomised. const handleSetGif = () => { setGif(true); + setLoadingStatus("theme-reveal"); setTimeout(() => { + setLoadingStatus("done-loading"); setGif(false); }, 2500); }; @@ -311,15 +314,7 @@ function App() {
{themeIsDoneLoading && ( -
@@ -337,7 +332,7 @@ function App() {
) : (
- +
)} {themeIsDoneLoading && ( @@ -377,15 +372,7 @@ function App() {
{themeIsDoneLoading && ( -
diff --git a/src/components/DiceButton.js b/src/components/DiceButton.js new file mode 100644 index 0000000..c52319c --- /dev/null +++ b/src/components/DiceButton.js @@ -0,0 +1,19 @@ +import Button from "./Button"; + +const DiceButton = ({ clickHandler }) => { + return ( + <> +
-

- {name} -

+
); }; diff --git a/src/components/Theme.js b/src/components/Theme.js index dd7b6bc..0009571 100644 --- a/src/components/Theme.js +++ b/src/components/Theme.js @@ -1,25 +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 ? ( - <> -

{theme.theme}

- - ) : null} +

{theme.theme}

); }; From 914fda3c265755e09922356109a5158fc815c220 Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Wed, 19 Oct 2022 09:59:05 +0200 Subject: [PATCH 29/38] refactor(comment cleanup): removed non-working outcommented code --- src/App.js | 84 ++++-------------------------------------------------- 1 file changed, 6 insertions(+), 78 deletions(-) diff --git a/src/App.js b/src/App.js index 10b8dd5..5af9141 100644 --- a/src/App.js +++ b/src/App.js @@ -60,7 +60,6 @@ function App() { let backgroundColor = colors[makeRandom(0, colors.length)]; //this useEffect checks whether the theme has been updated somehow and then triggers a confetti gif. It also pushes the randomised or selected theme into an array in local storage by accessing a function declared in useLocalStorage.js. - //make into a hook? useEffect(() => { if (theme) { addUsedTheme(theme); @@ -68,7 +67,6 @@ function App() { }, [theme]); //this useEffect stores the people who have been randomised as office hosts (i.e., not when employees.person 1 or 2 is "?" or "loading...") in an array in localStorage. - //make into a hook? useEffect(() => { if ( employee.person1 !== employees[0] && @@ -78,54 +76,8 @@ function App() { ) { addUsedEmployees([employee.person1, employee.person2]); } - /* console.log("the use effect added these:: ", [ - employee.person1, - employee.person2, - ]); */ }); - //when a theme gets used (and thus exists in the storedThemes array) it gets removed from the themes array, making it impossible to use again until the themes array is empty. Comparing the themes array with the storedThemes array makes it remember what themes has been used before even if the browser is reloaded, because storedThemes are stored in the local storage. I reload the original themes array into the clonedThemes array before this because I want to make sure that de-selected themes puts back into the themes array. - //make into a hook? - /* useEffect(() => { - - for (let i = 0; i < clonedThemes.length; i++) { - for (let j = 0; j < storedThemes.length; j++) { - if (clonedThemes[i].theme === storedThemes[j].theme) { - clonedThemes.splice(i, 1); - } - } - } - }, []); */ - - //same as above but for office hosts. The if conditional is to remove the error of not being able to read 'name' that I suppose happens because there is no one in either the employees array or the storedEmployees array. - /* if (employees > 1 && storedEmployees > 1) { - for (let i = 2; i < employees.length; i++) { - for (let j = 0; j < storedEmployees.length; j++) { - if (employees[i].name === storedEmployees[j].name) { - employees.splice(i, 1); - } - } - } - } */ - /* useEffect(() => { - - employeesArray.filter() - //clonedEmployees = employees.slice(0); - - if (storedEmployees.length >= 1) { - for (let i = 2; i < employeesArray.length; i++) { - for (let j = 0; j < storedEmployees.length; j++) { - if (employeesArray[i].name === storedEmployees[j].name) { - //employeesArray.splice(i, 1); - // employeesArray.filter(e => e.name !== ) - } - } - } - } - }); */ - - //console.log(clonedEmployees); - //this function takes in the person object that should be compared to a new randomised person created when this function is called, it then compares the existing person object with the newly created person, and if it is the same then it re-runs the function. Otherwise it returns the newEmployee that was created through randomisation, which is then set to the person object. It is still a bit unclear whether this does what I want it to or not. Office host 1 and 2 still manages to become the same person sometimes. const findUniqueAndRandomPerson = (otherPerson) => { let newEmployee = employeesArray[makeRandom(0, employeesArray.length)]; @@ -137,20 +89,15 @@ function App() { return newEmployee; }; - /* const popPush = () => { - const reSelectedTheme = storedThemes.pop(); - console.log("this is the popped theme:: ", reSelectedTheme); - themes.push(reSelectedTheme || "[]"); - }; */ - //this is a state handler that executes when handleSetRandomiseAll() is called and when a number is passed into setEmployee(). It sets a random value to the employee array and stores this in person1 and person2 objects containing the whole object carried from the employees array. //maybe this could be re-written as a switch-case? const handleSetEmployee = (number) => { setLoadingStatus("person-loading"); switch (number) { case 1: + //removing the deselected person from the local storage and storedEmployees array. removeDeSelectedPerson(employee.person1); - //add person1 back to employeesArray + //adding person1 back to employeesArray setEmployeesArray([...employeesArray, employee.person1]); setEmployee({ ...employee, @@ -179,7 +126,6 @@ function App() { }); setLoadingStatus("done-loading"); }, 1500); - //removeDeSelectedPerson2(); break; default: setEmployee((state) => ({ ...state, person1: employees[1] })); @@ -200,13 +146,12 @@ function App() { } }; - /* console.log("employees array:: ", employeesArray); - console.log("stored employees:: ", storedEmployees); */ - //this is a state handler that takes in a specific theme from what theme is chosen in the dropdown menu and lets that change the theme. If the first generator button or randomise theme button is clicked it applies a randomised number to the themes array and store it in a variable called theme. const handleSetTheme = (specificTheme) => { if (specificTheme) { + //the randomised theme that is deselected by selecting a new theme from the dropdown gets removed from local storage and storedThemes removeDeSelectedTheme(theme.theme); + //adding the deselected theme back into themesArray setThemesArray([...themesArray, theme]); setTheme(specificTheme); handleSetGif(); @@ -220,15 +165,10 @@ function App() { }, 8000); setTimeout(() => { setLoadingStatus("done-loading"); - //syncThemes(); }, 10500); } - //syncThemes(); }; - console.log("storedThemes array:: ", storedThemes); - console.log("themes array:: ", themesArray); - //a statehandler that shows the gif for 2,5 seconds after a theme has been chosen/randomised. const handleSetGif = () => { setGif(true); @@ -240,6 +180,7 @@ function App() { }; //this useEffect keeps track of which themes has already been, and removes them from the themesArray. + //! change needed useEffect(() => { for (let i = 0; i < themesArray.length; i++) { for (let j = 0; j < storedThemes.length; j++) { @@ -249,22 +190,9 @@ function App() { } } }); - //this version that is called when a theme has been picked is insufficient because it doesn't filter the array until next render. Also, it must be in a useEffect because otherwise the themes array restores after the user refreshes the page. - /* const syncThemes = () => { - for (let i = 0; i < themesArray.length; i++) { - for (let j = 0; j < storedThemes.length; j++) { - if (themesArray[i].theme === storedThemes[j].theme) { - //console.log("i ran"); - setThemesArray(themesArray.filter((t) => t !== themesArray[i])); - } - } - } - }; */ - - /* console.log("employees array:: ", employeesArray); - console.log("stored employees array:: ", storedEmployees); */ //same as above but for employees + //! change needed useEffect(() => { for (let i = 0; i < employeesArray.length; i++) { for (let j = 0; j < storedEmployees.length; j++) { From d5fbf0e23b97dea7c70dfd042446cd3d1a7a5831 Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Wed, 19 Oct 2022 12:02:53 +0200 Subject: [PATCH 30/38] refactor(experiment): removed '?' and 'loading...' from the JSON list of employees and instead tried to be explicit with that these are not employees, these are how the person components should be rendered when no employee has been chosen, when the employee is loading and when the employee is set to an actual employee. Don't know if the code became better or worse really. It felt like it became longer --- src/App.js | 113 ++++++++++++++++++++++++++-------------- src/data/employees.json | 8 --- 2 files changed, 73 insertions(+), 48 deletions(-) diff --git a/src/App.js b/src/App.js index 5af9141..811eb4d 100644 --- a/src/App.js +++ b/src/App.js @@ -19,21 +19,31 @@ function makeRandom(min, max) { } function App() { + const initialPerson = { + name: "?", + }; + /* + const loadingPerson = { + name: "loading...", + }; */ + //initiating the state and statehandlers. //remove '?' and 'loading...' from employees JSON and figure out a new solution for this. - const [employeesArray, setEmployeesArray] = useState( - employees.slice(2, employees.length) - ); + const [employeesArray, setEmployeesArray] = useState([...employees]); const [themesArray, setThemesArray] = useState([...themes]); //try deleting randomise and set this as a new value in 'loadingStatus'. To reduce contradicting state. const [randomise, setRandomise] = useState(false); const [employee, setEmployee] = useState({ - person1: employees[0], - person2: employees[0], + person1: initialPerson, + person2: initialPerson, }); const [theme, setTheme] = useState(); - const [loadingStatus, setLoadingStatus] = useState("nothing"); + //const [peopleLoadingStatus, setPeopleLoadingStatus] = useState("nothing"); + const [themeLoadingStatus, setThemeLoadingStatus] = useState("nothing"); + const [person1IsLoading, setPerson1IsLoading] = useState(false); + const [person2IsLoading, setPerson2IsLoading] = useState(false); + //const [loadingStatus, setLoadingStatus] = useState("nothing"); const [gif, setGif] = useState(false); //accessing the variables and functions through the useLocalStorage hook. @@ -51,10 +61,15 @@ function App() { const colors = ["babyblue", "tulip"]; //declaring the states for the loadingStatuses so I can check if they are 'true' or 'false'. - const themeIsLoading = loadingStatus === "loading"; - const themeIsDoneLoading = loadingStatus === "done-loading"; - const themeReveal = loadingStatus === "theme-reveal"; - const personLoading = loadingStatus === "person-loading"; + const themeIsLoading = themeLoadingStatus === "loading"; + const themeDoneLoading = themeLoadingStatus === "theme-done-loading"; + const themeReveal = themeLoadingStatus === "theme-reveal"; + /* const person1Loading = peopleLoadingStatus === "person1-loading"; + const person2Loading = peopleLoadingStatus === "person2-loading"; + const peopleLoading = person1Loading && person2Loading; + const person1DoneLoading = peopleLoadingStatus === "person1-done-loading"; + const person2DoneLoading = peopleLoadingStatus === "person2-done-loading"; + const peopleDoneLoading = person1DoneLoading && person2DoneLoading; */ //randomising the background color and storing it in a backgroundColor variable later used in a className. let backgroundColor = colors[makeRandom(0, colors.length)]; @@ -68,14 +83,7 @@ function App() { //this useEffect stores the people who have been randomised as office hosts (i.e., not when employees.person 1 or 2 is "?" or "loading...") in an array in localStorage. useEffect(() => { - if ( - employee.person1 !== employees[0] && - employee.person1 !== employees[1] && - employee.person2 !== employees[0] && - employee.person2 !== employees[1] - ) { - addUsedEmployees([employee.person1, employee.person2]); - } + addUsedEmployees([employee.person1, employee.person2]); }); //this function takes in the person object that should be compared to a new randomised person created when this function is called, it then compares the existing person object with the newly created person, and if it is the same then it re-runs the function. Otherwise it returns the newEmployee that was created through randomisation, which is then set to the person object. It is still a bit unclear whether this does what I want it to or not. Office host 1 and 2 still manages to become the same person sometimes. @@ -92,55 +100,57 @@ function App() { //this is a state handler that executes when handleSetRandomiseAll() is called and when a number is passed into setEmployee(). It sets a random value to the employee array and stores this in person1 and person2 objects containing the whole object carried from the employees array. //maybe this could be re-written as a switch-case? const handleSetEmployee = (number) => { - setLoadingStatus("person-loading"); switch (number) { case 1: + setPerson1IsLoading(true); //removing the deselected person from the local storage and storedEmployees array. removeDeSelectedPerson(employee.person1); //adding person1 back to employeesArray setEmployeesArray([...employeesArray, employee.person1]); - setEmployee({ + /* setEmployee({ ...employee, - person1: employees[1], - }); + person1: loadingPerson, + }); */ setTimeout(() => { setEmployee({ ...employee, person1: findUniqueAndRandomPerson(employee.person2), }); - setLoadingStatus("done-loading"); + setPerson1IsLoading(false); }, 1500); - break; case 2: + setPerson2IsLoading(true); removeDeSelectedPerson(employee.person2); setEmployeesArray([...employeesArray, employee.person2]); - setEmployee({ + /* setEmployee({ ...employee, - person2: employees[1], - }); + person2: loadingPerson, + }); */ setTimeout(() => { setEmployee({ ...employee, person2: findUniqueAndRandomPerson(employee.person1), }); - setLoadingStatus("done-loading"); + setPerson2IsLoading(false); }, 1500); break; default: - setEmployee((state) => ({ ...state, person1: employees[1] })); + //setEmployee((state) => ({ ...state, person1: loadingPerson })); setTimeout(() => { setEmployee((state) => ({ ...state, person1: findUniqueAndRandomPerson(employee.person2), })); + setPerson1IsLoading(false); }, 2500); - setEmployee((state) => ({ ...state, person2: employees[1] })); + //setEmployee((state) => ({ ...state, person2: loadingPerson })); setTimeout(() => { setEmployee((state) => ({ ...state, person2: findUniqueAndRandomPerson(employee.person1), })); + setPerson2IsLoading(false); }, 5000); break; } @@ -156,15 +166,15 @@ function App() { setTheme(specificTheme); handleSetGif(); } else { - setLoadingStatus("loading"); + setThemeLoadingStatus("loading"); setTimeout(() => { const theme = themesArray[makeRandom(0, themesArray.length)]; setTheme(theme); - setLoadingStatus("theme-reveal"); + setThemeLoadingStatus("theme-reveal"); handleSetGif(); }, 8000); setTimeout(() => { - setLoadingStatus("done-loading"); + setThemeLoadingStatus("theme-done-loading"); }, 10500); } }; @@ -172,9 +182,9 @@ function App() { //a statehandler that shows the gif for 2,5 seconds after a theme has been chosen/randomised. const handleSetGif = () => { setGif(true); - setLoadingStatus("theme-reveal"); + setThemeLoadingStatus("theme-reveal"); setTimeout(() => { - setLoadingStatus("done-loading"); + setThemeLoadingStatus("theme-done-loading"); setGif(false); }, 2500); }; @@ -226,6 +236,29 @@ function App() { handleSetEmployee(); setRandomise(true); handleSetTheme(); + setPerson1IsLoading(true); + setPerson2IsLoading(true); + }; + + //these person loading handlers handle the different states of whether the person is unknown, loading or set. + const person1LoadingHandler = () => { + if (!randomise) { + return ; + } else if (person1IsLoading) { + return ; + } else { + return ; + } + }; + + const person2LoadingHandler = () => { + if (!randomise) { + return ; + } else if (person2IsLoading) { + return ; + } else { + return ; + } }; return ( @@ -240,8 +273,8 @@ function App() { {/* defining the employee from the employees array with a random number created through clicking the randomise button */}
- - {themeIsDoneLoading && ( + {person1LoadingHandler()} + {!person1IsLoading && themeDoneLoading && ( handleSetEmployee(1)} /> )}
@@ -263,7 +296,7 @@ function App() {
)} - {themeIsDoneLoading && ( + {themeDoneLoading && (
- - {themeIsDoneLoading && ( + {person2LoadingHandler()} + {!person2IsLoading && themeDoneLoading && ( handleSetEmployee(2)} /> )}
diff --git a/src/data/employees.json b/src/data/employees.json index e5199ce..d150bcc 100644 --- a/src/data/employees.json +++ b/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" From c208ebe9a014a3734484dddf85d197d78dfbbd60 Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Wed, 19 Oct 2022 12:09:05 +0200 Subject: [PATCH 31/38] refactor(cleanup): comment cleanup and small bug avoidance (not allowing the user to randomise both office hosts simultaneously) --- src/App.js | 23 +++-------------------- 1 file changed, 3 insertions(+), 20 deletions(-) diff --git a/src/App.js b/src/App.js index 811eb4d..b7d4480 100644 --- a/src/App.js +++ b/src/App.js @@ -39,11 +39,9 @@ function App() { person2: initialPerson, }); const [theme, setTheme] = useState(); - //const [peopleLoadingStatus, setPeopleLoadingStatus] = useState("nothing"); const [themeLoadingStatus, setThemeLoadingStatus] = useState("nothing"); const [person1IsLoading, setPerson1IsLoading] = useState(false); const [person2IsLoading, setPerson2IsLoading] = useState(false); - //const [loadingStatus, setLoadingStatus] = useState("nothing"); const [gif, setGif] = useState(false); //accessing the variables and functions through the useLocalStorage hook. @@ -57,6 +55,7 @@ function App() { employeeKey, themeKey, } = useLocalStorage(); + //deciding the colors for the background to randomise between const colors = ["babyblue", "tulip"]; @@ -64,12 +63,6 @@ function App() { const themeIsLoading = themeLoadingStatus === "loading"; const themeDoneLoading = themeLoadingStatus === "theme-done-loading"; const themeReveal = themeLoadingStatus === "theme-reveal"; - /* const person1Loading = peopleLoadingStatus === "person1-loading"; - const person2Loading = peopleLoadingStatus === "person2-loading"; - const peopleLoading = person1Loading && person2Loading; - const person1DoneLoading = peopleLoadingStatus === "person1-done-loading"; - const person2DoneLoading = peopleLoadingStatus === "person2-done-loading"; - const peopleDoneLoading = person1DoneLoading && person2DoneLoading; */ //randomising the background color and storing it in a backgroundColor variable later used in a className. let backgroundColor = colors[makeRandom(0, colors.length)]; @@ -107,10 +100,6 @@ function App() { removeDeSelectedPerson(employee.person1); //adding person1 back to employeesArray setEmployeesArray([...employeesArray, employee.person1]); - /* setEmployee({ - ...employee, - person1: loadingPerson, - }); */ setTimeout(() => { setEmployee({ ...employee, @@ -123,10 +112,6 @@ function App() { setPerson2IsLoading(true); removeDeSelectedPerson(employee.person2); setEmployeesArray([...employeesArray, employee.person2]); - /* setEmployee({ - ...employee, - person2: loadingPerson, - }); */ setTimeout(() => { setEmployee({ ...employee, @@ -136,7 +121,6 @@ function App() { }, 1500); break; default: - //setEmployee((state) => ({ ...state, person1: loadingPerson })); setTimeout(() => { setEmployee((state) => ({ ...state, @@ -144,7 +128,6 @@ function App() { })); setPerson1IsLoading(false); }, 2500); - //setEmployee((state) => ({ ...state, person2: loadingPerson })); setTimeout(() => { setEmployee((state) => ({ ...state, @@ -274,7 +257,7 @@ function App() { {/* defining the employee from the employees array with a random number created through clicking the randomise button */}
{person1LoadingHandler()} - {!person1IsLoading && themeDoneLoading && ( + {!person1IsLoading && !person2IsLoading && themeDoneLoading && ( handleSetEmployee(1)} /> )}
@@ -332,7 +315,7 @@ function App() {
{person2LoadingHandler()} - {!person2IsLoading && themeDoneLoading && ( + {!person2IsLoading && !person1IsLoading && themeDoneLoading && ( handleSetEmployee(2)} /> )}
From 511ae4423977013025bc648f102a8afa9b9633ee Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Thu, 20 Oct 2022 10:00:26 +0200 Subject: [PATCH 32/38] refactor/fix(localStorage): fixed the bug that allowed the same theme to get stored multiple times if the app re-renders + cleaned up a few other things --- src/App.js | 47 ++++++++++++++++++++++-------------- src/hooks/useLocalStorage.js | 12 ++++++--- 2 files changed, 37 insertions(+), 22 deletions(-) diff --git a/src/App.js b/src/App.js index b7d4480..2759d4d 100644 --- a/src/App.js +++ b/src/App.js @@ -19,24 +19,18 @@ function makeRandom(min, max) { } function App() { - const initialPerson = { + /* const initialPerson = { name: "?", - }; - /* - const loadingPerson = { - name: "loading...", }; */ //initiating the state and statehandlers. - - //remove '?' and 'loading...' from employees JSON and figure out a new solution for this. const [employeesArray, setEmployeesArray] = useState([...employees]); const [themesArray, setThemesArray] = useState([...themes]); //try deleting randomise and set this as a new value in 'loadingStatus'. To reduce contradicting state. const [randomise, setRandomise] = useState(false); const [employee, setEmployee] = useState({ - person1: initialPerson, - person2: initialPerson, + person1: null, + person2: null, }); const [theme, setTheme] = useState(); const [themeLoadingStatus, setThemeLoadingStatus] = useState("nothing"); @@ -76,12 +70,16 @@ function App() { //this useEffect stores the people who have been randomised as office hosts (i.e., not when employees.person 1 or 2 is "?" or "loading...") in an array in localStorage. useEffect(() => { - addUsedEmployees([employee.person1, employee.person2]); + if (employee.person1 !== null && employee.person2 !== null) { + addUsedEmployees([employee.person1, employee.person2]); + } }); //this function takes in the person object that should be compared to a new randomised person created when this function is called, it then compares the existing person object with the newly created person, and if it is the same then it re-runs the function. Otherwise it returns the newEmployee that was created through randomisation, which is then set to the person object. It is still a bit unclear whether this does what I want it to or not. Office host 1 and 2 still manages to become the same person sometimes. const findUniqueAndRandomPerson = (otherPerson) => { let newEmployee = employeesArray[makeRandom(0, employeesArray.length)]; + /* console.log("this is otherPerson:: ", otherPerson); + console.log("this is newEmployee:: ", newEmployee); */ if (isDuplicate(newEmployee.name, otherPerson.name)) { newEmployee = findUniqueAndRandomPerson(otherPerson); } else { @@ -120,18 +118,21 @@ function App() { setPerson2IsLoading(false); }, 1500); break; + /* + ! The findUniqueAndRandomPerson function does not work as intended during the initialisation of the theme & office host generator. This is because person1 doesn't get set as the 'otherPerson' until after both office hosts are assigned. + */ default: setTimeout(() => { setEmployee((state) => ({ ...state, - person1: findUniqueAndRandomPerson(employee.person2), + person1: employeesArray[makeRandom(0, employeesArray.length)], })); setPerson1IsLoading(false); }, 2500); setTimeout(() => { setEmployee((state) => ({ ...state, - person2: findUniqueAndRandomPerson(employee.person1), + person2: employeesArray[makeRandom(0, employeesArray.length)], })); setPerson2IsLoading(false); }, 5000); @@ -175,6 +176,13 @@ function App() { //this useEffect keeps track of which themes has already been, and removes them from the themesArray. //! change needed useEffect(() => { + //const filteredStoredThemes = storedThemes.filter((storedTheme) => storedTheme ?????); + /* const filteredThemes = themesArray.filter( + (theme) => theme !== existingStoredThemes + ); + + setThemesArray(filteredThemes); */ + for (let i = 0; i < themesArray.length; i++) { for (let j = 0; j < storedThemes.length; j++) { if (themesArray[i].theme === storedThemes[j]) { @@ -184,6 +192,9 @@ function App() { } }); + console.log("stored themes:: ", storedThemes); + //console.log("themes array:: ", themesArray); + //same as above but for employees //! change needed useEffect(() => { @@ -201,7 +212,7 @@ function App() { //replaces the employees array with the original employees array (except "?" and "loading") when the employees array runs out of employees useEffect(() => { if (employeesArray.length <= 1) { - setEmployeesArray(employees.slice(2, employees.length)); + setEmployeesArray([...employees]); localStorage.removeItem(employeeKey); } }); @@ -223,8 +234,8 @@ function App() { setPerson2IsLoading(true); }; - //these person loading handlers handle the different states of whether the person is unknown, loading or set. - const person1LoadingHandler = () => { + //these person functions handle the different states of whether the person is unknown, loading or assigned. + const person1 = () => { if (!randomise) { return ; } else if (person1IsLoading) { @@ -234,7 +245,7 @@ function App() { } }; - const person2LoadingHandler = () => { + const person2 = () => { if (!randomise) { return ; } else if (person2IsLoading) { @@ -256,7 +267,7 @@ function App() { {/* defining the employee from the employees array with a random number created through clicking the randomise button */}
- {person1LoadingHandler()} + {person1()} {!person1IsLoading && !person2IsLoading && themeDoneLoading && ( handleSetEmployee(1)} /> )} @@ -314,7 +325,7 @@ function App() {
- {person2LoadingHandler()} + {person2()} {!person2IsLoading && !person1IsLoading && themeDoneLoading && ( handleSetEmployee(2)} /> )} diff --git a/src/hooks/useLocalStorage.js b/src/hooks/useLocalStorage.js index f51fee2..bd1f76a 100644 --- a/src/hooks/useLocalStorage.js +++ b/src/hooks/useLocalStorage.js @@ -30,10 +30,14 @@ export const useLocalStorage = () => { //a function that adds themes to the local storage. The return will call the updating function because if this runs, the local storage has a new item. const addUsedTheme = ({ theme }) => { - localStorage.setItem( - themeKey, - JSON.stringify([...getStoredItems(themeKey), theme]) - ); + const existingThemes = getStoredItems(themeKey).map((theme) => theme); + if (!existingThemes.includes(theme)) { + localStorage.setItem( + themeKey, + JSON.stringify([...existingThemes, theme]) + ); + } + return updateFromStorage(); }; From 8e8e782ab615e8b7ba3ed391eb57e34e059a139f Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Thu, 20 Oct 2022 11:38:25 +0200 Subject: [PATCH 33/38] refactor(clean&prep): small cleanups of comments & preparations for potential code reviews. --- src/App.js | 72 ++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 45 insertions(+), 27 deletions(-) diff --git a/src/App.js b/src/App.js index 2759d4d..9299450 100644 --- a/src/App.js +++ b/src/App.js @@ -19,14 +19,9 @@ function makeRandom(min, max) { } function App() { - /* const initialPerson = { - name: "?", - }; */ - //initiating the state and statehandlers. const [employeesArray, setEmployeesArray] = useState([...employees]); const [themesArray, setThemesArray] = useState([...themes]); - //try deleting randomise and set this as a new value in 'loadingStatus'. To reduce contradicting state. const [randomise, setRandomise] = useState(false); const [employee, setEmployee] = useState({ person1: null, @@ -53,7 +48,7 @@ function App() { //deciding the colors for the background to randomise between const colors = ["babyblue", "tulip"]; - //declaring the states for the loadingStatuses so I can check if they are 'true' or 'false'. + //declaring the states for the themeLoadingStatuses so I can check if they are 'true' or 'false'. const themeIsLoading = themeLoadingStatus === "loading"; const themeDoneLoading = themeLoadingStatus === "theme-done-loading"; const themeReveal = themeLoadingStatus === "theme-reveal"; @@ -61,21 +56,24 @@ function App() { //randomising the background color and storing it in a backgroundColor variable later used in a className. let backgroundColor = colors[makeRandom(0, colors.length)]; - //this useEffect checks whether the theme has been updated somehow and then triggers a confetti gif. It also pushes the randomised or selected theme into an array in local storage by accessing a function declared in useLocalStorage.js. + //this useEffect pushes the randomised or selected theme into an array in local storage by accessing a function declared in useLocalStorage.js. useEffect(() => { if (theme) { addUsedTheme(theme); } }, [theme]); - //this useEffect stores the people who have been randomised as office hosts (i.e., not when employees.person 1 or 2 is "?" or "loading...") in an array in localStorage. + //this useEffect stores the people who have been randomised as office hosts in an array in localStorage. useEffect(() => { - if (employee.person1 !== null && employee.person2 !== null) { + if (employee.person1 && employee.person2) { addUsedEmployees([employee.person1, employee.person2]); } }); - //this function takes in the person object that should be compared to a new randomised person created when this function is called, it then compares the existing person object with the newly created person, and if it is the same then it re-runs the function. Otherwise it returns the newEmployee that was created through randomisation, which is then set to the person object. It is still a bit unclear whether this does what I want it to or not. Office host 1 and 2 still manages to become the same person sometimes. + /* + ! CODE REVIEW ! + This function should make sure that two person objects should never become the same. However, it doesn't work because it compares the new person object with 'null' because the 'otherPerson' object is not assigned until both of them are. + */ const findUniqueAndRandomPerson = (otherPerson) => { let newEmployee = employeesArray[makeRandom(0, employeesArray.length)]; /* console.log("this is otherPerson:: ", otherPerson); @@ -88,8 +86,7 @@ function App() { return newEmployee; }; - //this is a state handler that executes when handleSetRandomiseAll() is called and when a number is passed into setEmployee(). It sets a random value to the employee array and stores this in person1 and person2 objects containing the whole object carried from the employees array. - //maybe this could be re-written as a switch-case? + //this statehandler assigns office hosts. Case 1 is triggered by a dice press on the left office host, case 2 is triggered by a dice press on the right office host and default runs when the user presses the first button to generate everything at the same time. const handleSetEmployee = (number) => { switch (number) { case 1: @@ -101,7 +98,7 @@ function App() { setTimeout(() => { setEmployee({ ...employee, - person1: findUniqueAndRandomPerson(employee.person2), + person1: employeesArray[makeRandom(0, employeesArray.length)], }); setPerson1IsLoading(false); }, 1500); @@ -113,18 +110,20 @@ function App() { setTimeout(() => { setEmployee({ ...employee, - person2: findUniqueAndRandomPerson(employee.person1), + person2: employeesArray[makeRandom(0, employeesArray.length)], }); setPerson2IsLoading(false); }, 1500); break; /* - ! The findUniqueAndRandomPerson function does not work as intended during the initialisation of the theme & office host generator. This is because person1 doesn't get set as the 'otherPerson' until after both office hosts are assigned. + ! CODE REVIEW ! + The findUniqueAndRandomPerson function does not work as intended during the initialisation of the theme & office host generator. This is because person1 doesn't get set as the 'otherPerson' until after both office hosts are assigned. */ default: setTimeout(() => { setEmployee((state) => ({ ...state, + //person1: findUniqueAndRandomPerson(employee.person2) person1: employeesArray[makeRandom(0, employeesArray.length)], })); setPerson1IsLoading(false); @@ -132,6 +131,7 @@ function App() { setTimeout(() => { setEmployee((state) => ({ ...state, + //person1: findUniqueAndRandomPerson(employee.person1) person2: employeesArray[makeRandom(0, employeesArray.length)], })); setPerson2IsLoading(false); @@ -140,7 +140,7 @@ function App() { } }; - //this is a state handler that takes in a specific theme from what theme is chosen in the dropdown menu and lets that change the theme. If the first generator button or randomise theme button is clicked it applies a randomised number to the themes array and store it in a variable called theme. + //this is a state handler that handles events connected to the theme. It can take in a specific theme that is chosen from the dropdown menu. It also randomises a theme when the first generator button or randomise theme button is clicked. const handleSetTheme = (specificTheme) => { if (specificTheme) { //the randomised theme that is deselected by selecting a new theme from the dropdown gets removed from local storage and storedThemes @@ -173,10 +173,25 @@ function App() { }, 2500); }; - //this useEffect keeps track of which themes has already been, and removes them from the themesArray. - //! change needed + /* + ! CODE REVIEW ! + This useEffect keeps track of which themes has already been, and removes them from the themesArray. The code works, but it feels ugly/wrong.. I've tried some other things (the outcommented bits) but none of them work as intended so I need some help with this. + */ useEffect(() => { + /* const existingThemes = getStoredItems(themeKey).map((theme) => theme); + if (!existingThemes.includes(theme)) { + localStorage.setItem( + themeKey, + JSON.stringify([...existingThemes, theme]) + ); + } */ + + /* setThemesArray( + themesArray.filter((theme) => !storedThemes.includes(theme)) + ); */ + //const filteredStoredThemes = storedThemes.filter((storedTheme) => storedTheme ?????); + /* const filteredThemes = themesArray.filter( (theme) => theme !== existingStoredThemes ); @@ -193,10 +208,12 @@ function App() { }); console.log("stored themes:: ", storedThemes); - //console.log("themes array:: ", themesArray); + console.log("themes array:: ", themesArray); - //same as above but for employees - //! change needed + /* + ! CODE REVIEW ! + Same as above: the code works, but it feels wrong. Since this is essentially the same code as above but with different parameters it might be able to be re-written as an abstraction of some sort? + */ useEffect(() => { for (let i = 0; i < employeesArray.length; i++) { for (let j = 0; j < storedEmployees.length; j++) { @@ -209,7 +226,10 @@ function App() { } }); - //replaces the employees array with the original employees array (except "?" and "loading") when the employees array runs out of employees + /* + ! EVENTUAL CODE REVIEW ! + This replaces the empty (or almost empty) employees array with the original employees array and removes the stored employees from localStorage. However, when the employeesArray resets it causes a loop of re-renders and I dunno why. + */ useEffect(() => { if (employeesArray.length <= 1) { setEmployeesArray([...employees]); @@ -217,7 +237,7 @@ function App() { } }); - //same as above but for themes + //same as above but for themes. This also causes a loop of re-renders when it resets. useEffect(() => { if (themesArray.length === 0) { setThemesArray([...themes]); @@ -225,7 +245,7 @@ function App() { } }); - //this state handler is triggered when the first button is pressed, to randomise both theme and office hosts at the same time. When randomise is true elements that are hidden in the first screen shows up. + //this state handler is triggered when the first button is pressed const handleSetRandomiseAll = () => { handleSetEmployee(); setRandomise(true); @@ -234,7 +254,7 @@ function App() { setPerson2IsLoading(true); }; - //these person functions handle the different states of whether the person is unknown, loading or assigned. + //these person functions handle the different displays of whether the person is unknown, loading or assigned. const person1 = () => { if (!randomise) { return ; @@ -264,8 +284,6 @@ function App() {
)} - - {/* defining the employee from the employees array with a random number created through clicking the randomise button */}
{person1()} {!person1IsLoading && !person2IsLoading && themeDoneLoading && ( From 46a136499dc46d45e65175b990a97abc92750d27 Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Fri, 4 Nov 2022 13:17:57 +0100 Subject: [PATCH 34/38] refactor(small changes): itty bitty refactors of the code --- src/App.js | 51 +++++++++++++++------------------------------------ 1 file changed, 15 insertions(+), 36 deletions(-) diff --git a/src/App.js b/src/App.js index 9299450..760401c 100644 --- a/src/App.js +++ b/src/App.js @@ -8,7 +8,6 @@ import Dropdown from "./components/Dropdown"; import themes from "./data/themes.json"; import { useState, useEffect } from "react"; import useLocalStorage from "./hooks/useLocalStorage"; -import isDuplicate from "./hooks/isDuplicate"; import DiceButton from "./components/DiceButton"; //a function that randomises a number. I use it to randomise office hosts, color of the background, and themes. @@ -51,7 +50,6 @@ function App() { //declaring the states for the themeLoadingStatuses so I can check if they are 'true' or 'false'. const themeIsLoading = themeLoadingStatus === "loading"; const themeDoneLoading = themeLoadingStatus === "theme-done-loading"; - const themeReveal = themeLoadingStatus === "theme-reveal"; //randomising the background color and storing it in a backgroundColor variable later used in a className. let backgroundColor = colors[makeRandom(0, colors.length)]; @@ -61,7 +59,7 @@ function App() { if (theme) { addUsedTheme(theme); } - }, [theme]); + }, [theme, addUsedTheme]); //this useEffect stores the people who have been randomised as office hosts in an array in localStorage. useEffect(() => { @@ -74,17 +72,17 @@ function App() { ! CODE REVIEW ! This function should make sure that two person objects should never become the same. However, it doesn't work because it compares the new person object with 'null' because the 'otherPerson' object is not assigned until both of them are. */ - const findUniqueAndRandomPerson = (otherPerson) => { + /* const findUniqueAndRandomPerson = (otherPerson) => { let newEmployee = employeesArray[makeRandom(0, employeesArray.length)]; - /* console.log("this is otherPerson:: ", otherPerson); - console.log("this is newEmployee:: ", newEmployee); */ + //console.log("this is otherPerson:: ", otherPerson); + //console.log("this is newEmployee:: ", newEmployee); if (isDuplicate(newEmployee.name, otherPerson.name)) { newEmployee = findUniqueAndRandomPerson(otherPerson); } else { return newEmployee; } return newEmployee; - }; + }; */ //this statehandler assigns office hosts. Case 1 is triggered by a dice press on the left office host, case 2 is triggered by a dice press on the right office host and default runs when the user presses the first button to generate everything at the same time. const handleSetEmployee = (number) => { @@ -178,26 +176,6 @@ function App() { This useEffect keeps track of which themes has already been, and removes them from the themesArray. The code works, but it feels ugly/wrong.. I've tried some other things (the outcommented bits) but none of them work as intended so I need some help with this. */ useEffect(() => { - /* const existingThemes = getStoredItems(themeKey).map((theme) => theme); - if (!existingThemes.includes(theme)) { - localStorage.setItem( - themeKey, - JSON.stringify([...existingThemes, theme]) - ); - } */ - - /* setThemesArray( - themesArray.filter((theme) => !storedThemes.includes(theme)) - ); */ - - //const filteredStoredThemes = storedThemes.filter((storedTheme) => storedTheme ?????); - - /* const filteredThemes = themesArray.filter( - (theme) => theme !== existingStoredThemes - ); - - setThemesArray(filteredThemes); */ - for (let i = 0; i < themesArray.length; i++) { for (let j = 0; j < storedThemes.length; j++) { if (themesArray[i].theme === storedThemes[j]) { @@ -205,7 +183,7 @@ function App() { } } } - }); + }, [themesArray, storedThemes]); console.log("stored themes:: ", storedThemes); console.log("themes array:: ", themesArray); @@ -224,7 +202,7 @@ function App() { } } } - }); + }, [employeesArray, storedEmployees]); /* ! EVENTUAL CODE REVIEW ! @@ -235,7 +213,7 @@ function App() { setEmployeesArray([...employees]); localStorage.removeItem(employeeKey); } - }); + }, [employeesArray.length, employeeKey]); //same as above but for themes. This also causes a loop of re-renders when it resets. useEffect(() => { @@ -243,7 +221,7 @@ function App() { setThemesArray([...themes]); localStorage.removeItem(themeKey); } - }); + }, [themesArray.length, themeKey]); //this state handler is triggered when the first button is pressed const handleSetRandomiseAll = () => { @@ -255,7 +233,7 @@ function App() { }; //these person functions handle the different displays of whether the person is unknown, loading or assigned. - const person1 = () => { + const displayPerson1 = () => { if (!randomise) { return ; } else if (person1IsLoading) { @@ -265,7 +243,7 @@ function App() { } }; - const person2 = () => { + const displayPerson2 = () => { if (!randomise) { return ; } else if (person2IsLoading) { @@ -281,11 +259,11 @@ function App() { > {gif && (
- + {`confetti
)}
- {person1()} + {displayPerson1()} {!person1IsLoading && !person2IsLoading && themeDoneLoading && ( handleSetEmployee(1)} /> )} @@ -300,6 +278,7 @@ function App() {
{`loading
@@ -343,7 +322,7 @@ function App() {
- {person2()} + {displayPerson2()} {!person2IsLoading && !person1IsLoading && themeDoneLoading && ( handleSetEmployee(2)} /> )} From e5dd17996dba6220208980af4c4ee4447b5c622e Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Thu, 10 Nov 2022 15:43:56 +0100 Subject: [PATCH 35/38] feat(quote API): added a quote API that generates random famous quotes when the user clicks on a person. (also did some minor refactoring) --- src/App.js | 4 ++-- src/components/Person.js | 29 ++++++++++++++++++++++++----- src/components/Quote.js | 12 ++++++------ 3 files changed, 32 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index 760401c..2b8271f 100644 --- a/src/App.js +++ b/src/App.js @@ -185,8 +185,8 @@ function App() { } }, [themesArray, storedThemes]); - console.log("stored themes:: ", storedThemes); - console.log("themes array:: ", themesArray); + /* console.log("stored themes:: ", storedThemes); + console.log("themes array:: ", themesArray); */ /* ! CODE REVIEW ! diff --git a/src/components/Person.js b/src/components/Person.js index a8d30b3..d801439 100644 --- a/src/components/Person.js +++ b/src/components/Person.js @@ -3,22 +3,41 @@ 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(""); - const handleShowQuote = () => { - setShowQuote(true); + 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); - }; + } //calling the button with my quote component and displaying the employee name return (
- {showQuote && } + {showQuote && }
diff --git a/src/components/Quote.js b/src/components/Quote.js index 74bc344..0a3cccd 100644 --- a/src/components/Quote.js +++ b/src/components/Quote.js @@ -1,13 +1,13 @@ //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 ( -
-
-

{quote}

-
+
+
+

{quote}

+

{author}

+
); }; From 126dbcfad8b702cb0e11dc77898719248ae8a860 Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Fri, 18 Nov 2022 15:47:24 +0100 Subject: [PATCH 36/38] style(responsiveness): tried to make the app more responsive. --- src/App.js | 39 +++++---- src/components/DiceButton.js | 2 +- src/components/Dropdown.js | 4 +- src/components/Name.js | 2 +- src/components/Person.js | 4 +- src/components/Quote.js | 14 ++- src/components/Theme.js | 2 +- src/data/themes.json | 161 ++++++++++++++++++----------------- tailwind.config.js | 8 ++ 9 files changed, 131 insertions(+), 105 deletions(-) diff --git a/src/App.js b/src/App.js index 2b8271f..fb55074 100644 --- a/src/App.js +++ b/src/App.js @@ -59,7 +59,7 @@ function App() { if (theme) { addUsedTheme(theme); } - }, [theme, addUsedTheme]); + }, [theme]); //this useEffect stores the people who have been randomised as office hosts in an array in localStorage. useEffect(() => { @@ -255,22 +255,35 @@ function App() { return (
{gif && (
{`confetti
)} -
+
{displayPerson1()} {!person1IsLoading && !person2IsLoading && themeDoneLoading && ( handleSetEmployee(1)} /> )}
+
+ {displayPerson2()} + {!person2IsLoading && !person1IsLoading && themeDoneLoading && ( + handleSetEmployee(2)} /> + )} +
+ {/* replacing the button component with the theme component when the button is pushed */} -
+
{randomise ? ( <>
@@ -283,18 +296,21 @@ function App() { />
) : ( -
+
)} {themeDoneLoading && ( -
+
@@ -315,18 +331,11 @@ function App() {
)}
- -
- {displayPerson2()} - {!person2IsLoading && !person1IsLoading && themeDoneLoading && ( - handleSetEmployee(2)} /> - )} -
); } diff --git a/src/components/DiceButton.js b/src/components/DiceButton.js index c52319c..728f03e 100644 --- a/src/components/DiceButton.js +++ b/src/components/DiceButton.js @@ -7,7 +7,7 @@ const DiceButton = ({ clickHandler }) => { buttonImage={ } clickHandler={clickHandler} diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js index 1009a1c..498ed34 100644 --- a/src/components/Dropdown.js +++ b/src/components/Dropdown.js @@ -10,8 +10,8 @@ const Dropdown = ({ themes, storedThemes, handleSetTheme }) => { return (
- - Pick new theme + + Pick a new theme  
{ return ( <> -

+

{name}

diff --git a/src/components/Person.js b/src/components/Person.js index d801439..5875407 100644 --- a/src/components/Person.js +++ b/src/components/Person.js @@ -36,9 +36,9 @@ const Person = ({ name }) => { //calling the button with my quote component and displaying the employee name return ( -
+
{showQuote && } -
+
diff --git a/src/components/Quote.js b/src/components/Quote.js index 0a3cccd..69ff190 100644 --- a/src/components/Quote.js +++ b/src/components/Quote.js @@ -2,10 +2,16 @@ 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 ( -
-
-

{quote}

-

{author}

+
+
+
+
+

{quote}

+
+
+
+

{author}

+
); diff --git a/src/components/Theme.js b/src/components/Theme.js index 0009571..d6fe8e5 100644 --- a/src/components/Theme.js +++ b/src/components/Theme.js @@ -1,7 +1,7 @@ const Theme = ({ theme }) => { return ( <> -

{theme.theme}

+

{theme.theme}

); }; diff --git a/src/data/themes.json b/src/data/themes.json index 9be2df0..09ca3cf 100644 --- a/src/data/themes.json +++ b/src/data/themes.json @@ -1,80 +1,83 @@ [ - { - "theme": "Marvel!" - }, - { - "theme": "90-talet!" - }, - { - "theme": "Italien!" - }, - { - "theme": "Lucia!" - }, - { - "theme": "Windows 95-release!" - }, - { - "theme": "Dreamhack!" - }, - { - "theme": "Dinosaurier!" - }, - { - "theme": "Rymden!" - }, - { - "theme": "Småkakor!" - }, - { - "theme": "The Office!" - }, - { - "theme": "Halloween!" - }, - { - "theme": "Friidrott!" - }, - { - "theme": "Natur!" - }, - { - "theme": "Återvinning!" - }, - { - "theme": "Fred!" - }, - { - "theme": "Indien!" - }, - { - "theme": "Thailand!" - }, - { - "theme": "Grekland!" - }, - { - "theme": "LGBTQ!" - }, - { - "theme": "Kaffe!" - }, - { - "theme": "Chark (mozzarella)!" - }, - { - "theme": "Murder mystery!" - }, - { - "theme": "¡Fiesta!" - }, - { - "theme": "Glass!" - }, - { - "theme": "Te!" - }, - { - "theme": "Sagor!" - } -] \ No newline at end of file + { + "theme": "Marvel!" + }, + { + "theme": "90-talet!" + }, + { + "theme": "Italien!" + }, + { + "theme": "Lucia!" + }, + { + "theme": "Windows 95-release!" + }, + { + "theme": "Dreamhack!" + }, + { + "theme": "Dinosaurier!" + }, + { + "theme": "Rymden!" + }, + { + "theme": "Småkakor!" + }, + { + "theme": "The Office!" + }, + { + "theme": "Halloween!" + }, + { + "theme": "Friidrott!" + }, + { + "theme": "Natur!" + }, + { + "theme": "Återvinning!" + }, + { + "theme": "Fred!" + }, + { + "theme": "Indien!" + }, + { + "theme": "Thailand!" + }, + { + "theme": "Grekland!" + }, + { + "theme": "LGBTQ!" + }, + { + "theme": "Kaffe!" + }, + { + "theme": "Chark (mozzarella)!" + }, + { + "theme": "Murder mystery!" + }, + { + "theme": "¡Fiesta!" + }, + { + "theme": "Glass!" + }, + { + "theme": "Te!" + }, + { + "theme": "Sagor!" + }, + { + "theme": "Choklad!" + } +] diff --git a/tailwind.config.js b/tailwind.config.js index 3579237..965ffaf 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -20,6 +20,14 @@ module.exports = { almostwhite: "rgb(var(--color-almost-white) / )", gray: "rgb(var(--color-gray) / )", }, + screens: { + tiltedPhone: { raw: "(min-width: 800px), (max-height: 450px)" }, + standingiPad: "768px", + iPad: "844px", + laptop: "1280px", + "13tum": "2560px", + "16tum": "3072px", + }, }, plugins: [], }; From 67e3114ac91e00054b5974caedfb739b37756d0a Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Mon, 21 Nov 2022 07:51:00 +0100 Subject: [PATCH 37/38] refactor(new state): added a useState for the background color because it was going bonkers and re-rendered too many times. --- src/App.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index fb55074..47d0cac 100644 --- a/src/App.js +++ b/src/App.js @@ -45,15 +45,15 @@ function App() { } = useLocalStorage(); //deciding the colors for the background to randomise between - const colors = ["babyblue", "tulip"]; + const colorsArray = ["babyblue", "tulip"]; + const [colors, setColors] = useState( + colorsArray[makeRandom(0, colorsArray.length)] + ); //declaring the states for the themeLoadingStatuses so I can check if they are 'true' or 'false'. const themeIsLoading = themeLoadingStatus === "loading"; const themeDoneLoading = themeLoadingStatus === "theme-done-loading"; - //randomising the background color and storing it in a backgroundColor variable later used in a className. - let backgroundColor = colors[makeRandom(0, colors.length)]; - //this useEffect pushes the randomised or selected theme into an array in local storage by accessing a function declared in useLocalStorage.js. useEffect(() => { if (theme) { @@ -157,6 +157,7 @@ function App() { }, 8000); setTimeout(() => { setThemeLoadingStatus("theme-done-loading"); + setColors(colorsArray[makeRandom(0, colorsArray.length)]); }, 10500); } }; @@ -230,6 +231,7 @@ function App() { handleSetTheme(); setPerson1IsLoading(true); setPerson2IsLoading(true); + setColors(colorsArray[makeRandom(0, colorsArray.length)]); }; //these person functions handle the different displays of whether the person is unknown, loading or assigned. @@ -255,7 +257,7 @@ function App() { return (
{gif && (
From fcc6b690c124a7f0b8ef313586623dd51df1362f Mon Sep 17 00:00:00 2001 From: Clara Isaksson Date: Mon, 21 Nov 2022 12:59:54 +0100 Subject: [PATCH 38/38] style(responsiveness): added a slight padding to the randomise all button but left the two action buttons that replace the randomise button without padding. --- src/App.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 47d0cac..3ff0175 100644 --- a/src/App.js +++ b/src/App.js @@ -284,7 +284,9 @@ function App() { {/* replacing the button component with the theme component when the button is pushed */}
{randomise ? ( <>