Merge branch 'master' of https://github.com/robertluttig/geoquiz into…

… fontColor
Shelrothman · Aug 24, 2020 · 7a17e76 · 7a17e76
2 parents 9b94468 + e4990e7
commit 7a17e76
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 21 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>GeoQuiz</title>
   </head>
   <body>
     <noscript>

diff --git a/client/src/components/Map/Map.js b/client/src/components/Map/Map.js
@@ -71,6 +71,8 @@ export class MapContainer extends Component {
   displayMarker = (mapProps, map, clickEvent) => {
     this.setState({
       ...this.state,
+      latitude: clickEvent.latLng.lat(),
+      longitude: clickEvent.latLng.lng(),
       markerLocation: {
         lat: clickEvent.latLng.lat(),
         lng: clickEvent.latLng.lng(),

diff --git a/client/src/components/Quiz/index.js b/client/src/components/Quiz/index.js
@@ -32,13 +32,16 @@ function Quiz() {
   function getRandomCountry() {
     const randomCountry =
       countryArr.current[Math.floor(Math.random() * countryArr.current.length)];
-    if (questionCount <= 5) {
-      quizArr.push(randomCountry);
-      console.log(quizArr);
+    if (quizArr.includes(randomCountry)) {
+      getRandomCountry();
+    } else {
+      if (questionCount <= 5) {
+        quizArr.push(randomCountry);
+      }
+      answerList.push(answerFromMap);
+      setCountry(randomCountry);
+      setQuestionCount(questionCount + 1);
     }
-    answerList.push(answerFromMap);
-    setCountry(randomCountry);
-    setQuestionCount(questionCount + 1);
     //TODO: Add functionality to check for correct answer and record the score
   }
 

diff --git a/client/src/pages/Home/index.js b/client/src/pages/Home/index.js
@@ -39,7 +39,6 @@ function Home() {
     let data = "Continent Not Found";
     if (results.length !== 0 && results.length !== "undefined") {
       for (let i=0;i< results.length;i++){
-        console.log("continent",continent)
         let result = results[i];
           if(result.hasOwnProperty(continent)){  
             data = "Continent Found"        

diff --git a/client/src/pages/Results/ResultCard.js b/client/src/pages/Results/ResultCard.js
@@ -1,15 +1,18 @@
 import React from "react";
 import ResultsFacts from "./ResultsFacts";
 
-function ResultCard(props) {
-
+function ResultCard({ country, status }) {
   return (
     <div className="col-sm-2 title-container p-3 m-3">
       <div className="card">
         <div className="card-body">
-          <h5 className="card-title">{props.country}</h5>
-          <span className="badge badge-pill badge-success">Correct</span>
-          <ResultsFacts country={props.country}/>
+          <h5 className="card-title">{country}</h5>
+          {status === "Correct" ? (
+            <span className="badge badge-pill badge-success">Correct</span>
+          ) : (
+            <span className="badge badge-pill badge-danger">Incorrect</span>
+          )}
+          <ResultsFacts country={country} />
         </div>
       </div>
     </div>

diff --git a/client/src/pages/Results/Results.js b/client/src/pages/Results/Results.js
@@ -1,15 +1,17 @@
 import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
+import { useAuth } from "../../utils/auth";
 import API from "../../utils/API";
 import Button from "react-bootstrap/Button";
 import ResultsHeader from "./ResultsHeader";
 import ResultCard from "./ResultCard";
+
 function Results(props) {
+  const { user, logout } = useAuth();
   const continent = useParams().continent;
-  console.log(continent);
   const countries = props.location.resultProps.countryList;
   const guessedCountries = props.location.resultProps.resultList;
-  console.log(guessedCountries);
+
   let correct = 0;
   let incorrect = 0;
   for (let i = 1; i < guessedCountries.length; i++) {
@@ -18,16 +20,34 @@ function Results(props) {
     } else {
       incorrect++;
     }
-    console.log(`Correct: ${correct} Incorrect: ${incorrect}`);
   }
   const score = `${(correct / 5) * 100}%`;
-  console.log(`Your score is: ${score}`);
+
+  function getStatus(country) {
+    let status = "Incorrect";
+    for (let i = 1; i < guessedCountries.length; i++) {
+      let countryStatus = guessedCountries[i];
+      if (countryStatus[country] === "Correct") {
+        status = "Correct";
+        return "Correct";
+      }
+    }
+    if (status === "Incorrect") {
+      return "Incorrect";
+    }
+  }
   useEffect(() => {
     let results = {};
     results[continent] = score;
 
-    API.saveResult("5f4337f4de294f0bfce616a3", results);
-  });
+    API.saveResult(user.id, results)
+      .then((res) => {
+        console.log("Results saved successfully");
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, [user.id, score]);
   return (
     <div className="container mt-4 p-4">
       <div className="row">
@@ -37,7 +57,13 @@ function Results(props) {
       </div>
       <div className="row text-center">
         {countries.map((country) => {
-          return <ResultCard key={Math.random()} country={country} />;
+          return (
+            <ResultCard
+              key={Math.random()}
+              country={country}
+              status={getStatus(country)}
+            />
+          );
         })}
       </div>
       <div className="row">
@@ -52,4 +78,4 @@ function Results(props) {
     </div>
   );
 }
-export default Results;
+export default Results;