Merge pull request #3 from fac20/add-user

Add user

src/App.js

@@ -6,47 +6,43 @@ import AddUser from "./components/adduser";
 import DisplayUser from "./components/displayuser";
 import Play from "./components/play";
 
-function App() {
-  const usernames = ["aissshah", "akomiqaia", "Albadylic", "Alexreid95", "Azizi-A", "CampbellDocherty", "Chloeh24", "fairyaksh", "ephieo", "glrta", "hannahgooding", "HettieM", "itsina96", "Ivo-Evans", "jackherizsmith", "jamesj-0", "jenndroid", "jessica440", "jhart5", "Jihyun-Jang", "Joepock123", "khadija-nur", "LiCern", "Lizzy-j", "mhtien", "Netceer", "oliverjam", "RihardsJ", "Roger-Heathcote", "amberrignell", "RunGT", "sofer", "tacotoemeck", "trishtracking", "yvonne-liu", "VatsKan"];
 
+
+function App() {
+  const [difficulty, setDifficulty] = React.useState(6);
   const [state, setState] = React.useState("home");
+  const [usernames, setUsernames] = React.useState(["aissshah", "akomiqaia", "Albadylic", "Alexreid95", "Azizi-A", "CampbellDocherty", "Chloeh24", "fairyaksh", "ephieo", "glrta", "hannahgooding", "HettieM", "itsina96", "Ivo-Evans", "jackherizsmith", "jamesj-0", "jenndroid", "jessica440", "jhart5", "Jihyun-Jang", "Joepock123", "khadija-nur", "LiCern", "Lizzy-j", "mhtien", "Netceer", "oliverjam", "RihardsJ", "Roger-Heathcote", "amberrignell", "RunGT", "sofer", "tacotoemeck", "trishtracking", "yvonne-liu", "VatsKan"]);
+
     if (state === "home") {
         return (
       <div className="App">
         <Header> </Header>
-        <Home setState={setState} usernames={usernames}></Home>
+        <Home setState={setState} usernames={usernames} difficulty={difficulty} setDifficulty={setDifficulty}></Home>
       </div>
       )
     } else if (state === "play"){
         console.log("state updated");
         return (
         <div className="App">
           <Header></Header>
-          <Play setState={setState} usernames={usernames}></Play>
+          <Play setState={setState} usernames={usernames} difficulty={difficulty}></Play>
       </div>
       )
     } else if (state === "adduser") {
       return (
         <div className="App">
         <Header> </Header>
-        <AddUser setState={setState}></AddUser>
+        <AddUser setState={setState} usernames={usernames} setUsernames={setUsernames} ></AddUser>
       </div>
       )
     } else if (state ==="displayuser"){
       return (
         <div className="App">
           <Header> </Header>
-          <DisplayUser setState={setState}></DisplayUser>
+          <DisplayUser setState={setState} usernames={usernames}></DisplayUser>
         </div>
       )
     }
-  // return (
-  //   <div className="App">
-  //       <Header> </Header>
-  //       <Home setState={setState}></Home>
-
-  //   </div>
-  //);
 }
 
 export default App;

src/components/adduser.js

@@ -0,0 +1,24 @@
+import React from "react";
+import "../style/adduser.css";   
+
+function AddUser({setState, usernames, setUsernames}) {
+    console.log(usernames)
+    return (
+        <form>
+            <label htmlFor="username">
+                Enter your GitHub username:
+            </label>
+            <input type="text" id="username"></input>
+            <button type="submit" onClick={(event) => {
+                event.preventDefault();
+                let newValue = document.getElementById("username").value
+                let newArray = usernames.push(newValue)
+                setUsernames(newArray)
+                console.log(usernames)
+                setState("displayuser");
+            }}>Generate a card with my username </button>
+        </form>
+    )
+}
+
+export default AddUser;

src/components/displayuser.js

@@ -1 +1,16 @@
-
+import React from "react"
+import "../style/displayuser.css"; 
+
+function DisplayUser({usernames, setState}) {
+    console.log(usernames[0])
+    return (
+        <>
+            <h1>{usernames}</h1>
+            <button onClick={() => {
+            setState("home");
+        }}>Back to Home</button>
+        </>
+    )
+}
+
+export default DisplayUser

src/components/home.js

@@ -3,8 +3,8 @@ import "../style/home.css";
 import Play from "./play";
 import Adduser from "./adduser";
 
-export default function Home({setState}) {
-    const [difficulty, setDifficulty] = React.useState(6);
+export default function Home({setState, usernames, difficulty, setDifficulty}) {
+
 
     return (
         <main>
@@ -16,9 +16,12 @@ export default function Home({setState}) {
             <p>Difficulty: {difficulty}</p>
 
         <button onClick={() => {
-            console.log("start clicked");
             setState("play");
         }}>Start</button>
+        <button onClick={() => {
+            setState("adduser");
+        }}>Add Your Own GitHub Picture!</button>
+
             {/* // <button onClick={setState("play")}>Add a user</button> */}
         </main>
     )

src/components/play.js

@@ -1,10 +1,98 @@
 import React from "react";
-import "../style/play.css";  
+import "../style/play.css";
+import fetchData from "../utils/datahelpers";
+import timer from "../utils/cardFlipper";
 
 
 export default function Play({ usernames, difficulty }) {
+    const [data, setData] = React.useState("Hi");
+    const [counter, setCounter] = React.useState("1");
+    let [flippedState, setFlippedState] = React.useState(0);
+    let previousCard = ""
+    const [result, setResult] = React.useState(null);
+
+
+    React.useEffect(() => {
+        fetchData(difficulty, usernames)
+        .then(res => {
+            console.log(res);
+            const allData = res.map(user =>  
+                (
+                    <button onClick={(event) => {
+                        if (event.target.className === "user-card hidden"){
+                            event.target.classList.remove("hidden");
+                            event.target.classList.add("flipped");
+                        } else{
+                            event.target.parentNode.classList.remove("hidden");
+                            event.target.parentNode.classList.add("flipped");    
+                        }
+                        console.log(event.target)
+                        setFlippedState(flippedState => flippedState + 1);
+                        console.log("flippedState", flippedState);
+
+
+
+
+                        if (flippedState === 1) {
+                            const flippedCards = document.querySelectorAll(".flipped");
+                            console.log(flippedCards[0].childNodes[0].src)
+                            if (flippedCards[0].childNodes[0].src === flippedCards[1].childNodes[0].src ) {
+                                console.log("you win");
+                                setResult("You Win");
+                            } else {
+                                console.log("you lose");
+                                setResult("You Lose");
+                            }
+                        }
+
+                        // if (flippedState) {
+                        //     console.log(event.target)
+                        //     //comparison with previousCard
+                        // } else {
+                        //     // save value to previousCard
+                        // }
+                        // //flippedState = !flippedState
+                    }} className="user-card" >
+                            <img src={user.avatar_url} alt="user avatar"></img>
+                            <h3>{user.login}</h3>
+                    </button>
+                )
+            )
+            return allData;
+        })
+        .then(JSX => {
+            setData(JSX);
+            timer(setCounter, counter);
+        })
+
 
+    }, [flippedState, result])
+
+    if (counter === 0) {
+        document.querySelectorAll(".user-card").forEach(x => {
+            x.classList.add("hidden");
+            setCounter(null)
+        })
+    }
 
-    return(<h1>{usernames.sort(() => Math.random() - 0.5)}</h1>)
+
+    // document.querySelectorAll(".user-card").forEach(card => {
+    //     card.addEventListener("click", (event) => {
+    //         event.target.classList.remove("hidden");
+    //         // event.target.removeEventListener()
 
-}
+    //     }
+
+
+
+
+    return (
+        <>                  
+            {counter ? <h1>{counter}</h1> : null}
+            {result ? <h1>{result}</h1> : null}
+            <div className="play-grid">{data}</div>
+        </>
+    )
+
+
+}

src/style/adduser.css

@@ -0,0 +1,5 @@
+form {
+    display: flex;
+    flex-direction: column;
+}
+

src/style/play.css

@@ -0,0 +1,23 @@
+.play-grid{
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    background-color: #f7ede2;
+}
+
+.user-card{
+    border: 3px solid #f28482;
+    border-radius: 3rem;
+    margin: 2rem;
+    padding: 0.5rem;
+    background-color: #f5cac3;
+}
+
+img {
+    border-radius: 1.2rem;
+    max-width: 100%;
+}
+
+.hidden > img, .hidden > h3 {
+    opacity: 0;
+    fill: #f28482
+}

src/utils/cardFlipper.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+const timer = (setCounter, counter) => {
+    let interval = setInterval(() => {
+        if (counter === 0) {
+            console.log("finished")
+            clearInterval(interval)
+
+        } else {
+            counter = counter -1;
+            setCounter(counter);
+        }
+    }, 1000)
+}   
+
+export default timer
+

src/utils/datahelpers.js

@@ -0,0 +1,31 @@
+const checkResponse = (response) => {
+  if (response.status !== 200) {
+    console.log(`Error with the request! ${response.status}`);
+    return;
+  }
+  //console.log(response);
+  return response.json();
+};
+
+const fetchData = (difficulty, usernames) => {
+  let sortedArray = getRandomUsers(difficulty, usernames);
+      let promiseArray = sortedArray.map(username => {
+        return fetch(`https://api.github.com/users/${username}`)
+        .then(checkResponse)
+        .catch( err => {
+            throw new Error (`fetch user failed ${err}`);     
+          })
+      })
+
+    return Promise.all(promiseArray);
+
+}
+
+const getRandomUsers = (difficulty, usernames) => {
+  let sortedArray = usernames.sort(() => Math.random() - 0.5);
+  let randomised = sortedArray.slice(0, difficulty/2)
+  let randomisedDouble = randomised.concat(randomised);
+  return randomisedDouble.sort(() => Math.random() - 0.5);
+}
+
+export default fetchData;