fix infinite renders, and update

elevateyou/src/components/CardControls.jsx

@@ -5,18 +5,20 @@ import {
   BsShuffle,
   BsArrowRepeat,
 } from "react-icons/bs";
+import RestartModal from "./RestartModal";
 
-const CardControls = (
+const CardControls = ({
+  showRestartModal,
   cards,
   currentCardIndex,
   handleNextCard,
   handlePrevCard,
   handleShuffle,
-  showRestartModal,
-  setShowRestartModal,
+  handleShowModal,
+  handleHideModal,
   handleRestartCurrent,
-  handleStartNew
-) => (
+  handleStartNew,
+}) => (
   <div className="controls">
     <button
       className="btn btn-icon btn-secondary me-2"
@@ -35,18 +37,15 @@ const CardControls = (
     <button className="btn btn-icon btn-secondary me-2" onClick={handleShuffle}>
       <BsShuffle size={30} />
     </button>
-    <button
-      className="btn btn-icon btn-secondary"
-      onClick={setShowRestartModal(true)}
-    >
+    <button className="btn btn-icon btn-secondary" onClick={handleShowModal}>
       <BsArrowRepeat size={30} />
     </button>
     {showRestartModal && (
       <RestartModal
-        showModal={showRestartModal}
-        hideModal={setShowRestartModal}
-        restartCurrent={handleRestartCurrent}
-        startNew={handleStartNew}
+        showRestartModal={showRestartModal}
+        handleHideModal={handleHideModal}
+        handleRestartCurrent={handleRestartCurrent}
+        handleStartNew={handleStartNew}
       />
     )}
   </div>

elevateyou/src/components/NumbersCard.jsx

@@ -1,17 +1,101 @@
-const NumbersCard = ({ currentCard, flipped, setFlipped }) => (
-  <div className="card-container">
-    <div
-      className={`card ${flipped ? "flipped" : ""}`}
-      onClick={() => setFlipped(!flipped)}
-    >
-      <div className="card-front">
-        <div className="card-front-content">{currentCard.text}</div>
+import React, { useState, useEffect } from "react";
+import { Card, Button, Form } from "react-bootstrap";
+
+const NumbersCard = ({ cards, currentCard, flipped, setFlipped }) => {
+  const [answer, setAnswer] = useState("");
+  const [currentScore, setCurrentScore] = useState(0);
+  const [bestScore, setBestScore] = useState(0);
+  const [correct, setCorrect] = useState(false);
+
+  useEffect(() => {
+    setAnswer("");
+  }, [currentCard]);
+
+  const handleFlip = () => {
+    if (flipped) {
+      setFlipped(!flipped);
+    }
+  };
+
+  const handleFormClick = (event) => {
+    event.stopPropagation(); // prevent click event from propagating up to card
+  };
+
+  const handleAnswerSubmit = (event) => {
+    event.preventDefault();
+    setFlipped(!flipped);
+  };
+
+  const handleAnswerChange = (event) => {
+    const value = event.target.value;
+    if (value.toLowerCase() == currentCard.number) {
+      setCorrect(true);
+      setCurrentScore((prevScore) => prevScore + 1);
+      setBestScore((prevBestScore) => {
+        if (currentScore + 1 > prevBestScore) {
+          return currentScore + 1;
+        } else {
+          return prevBestScore;
+        }
+      });
+    }
+    setAnswer(value);
+  };
+
+  return (
+    <>
+      <div>
+        <p>{`Current Score: ${currentScore}/${cards.length}`}</p>
+        <p>Best Score: {bestScore}</p>
       </div>
-      <div className="card-back">
-        <div className="card-back-content">{currentCard.number}</div>
+      <div className="card-container">
+        <Card
+          className={`card ${flipped ? "flipped" : ""}`}
+          onClick={handleFlip}
+        >
+          <div className="card-front">
+            <div className="card-front-content">
+              {" "}
+              <Card.Body>
+                <Card.Title>{currentCard.text}</Card.Title>
+                <Form onSubmit={handleAnswerSubmit} onClick={handleFormClick}>
+                  <Form.Group controlId="formAnswer">
+                    <Form.Label>Answer:</Form.Label>
+                    <Form.Control
+                      type="text"
+                      value={answer}
+                      onChange={handleAnswerChange}
+                      required
+                    />
+                  </Form.Group>
+                  <Button variant="primary" type="submit">
+                    Check
+                  </Button>
+                </Form>
+              </Card.Body>
+            </div>
+          </div>
+          <div className="card-back">
+            <div className="card-back-content">
+              {" "}
+              <Card.Body>
+                <Card.Title>
+                  {correct ? (
+                    <h4>Correct</h4>
+                  ) : (
+                    <>
+                      <h4>Incorrect</h4>
+                      <h6>{`Correct Answer: ${currentCard.number}`}</h6>
+                    </>
+                  )}
+                </Card.Title>
+              </Card.Body>
+            </div>
+          </div>
+        </Card>
       </div>
-    </div>
-  </div>
-);
+    </>
+  );
+};
 
 export default NumbersCard;

elevateyou/src/components/NumbersFlashcards.jsx

@@ -1,20 +1,7 @@
 import React, { useState, useEffect } from "react";
-import NextButton from "./NextButton";
 import "../styles/Card.css";
 import NumbersStartForm from "./NumbersStartForm";
-import axios from "axios";
-import {
-  BsArrowRight,
-  BsArrowLeft,
-  BsShuffle,
-  BsArrowRepeat,
-} from "react-icons/bs";
 import "../styles/NumbersFlashcards.css";
-import RestartModal from "./RestartModal";
-import {
-  getRandomNumFacts,
-  getCustomNumFacts,
-} from "../utils/fetchNumbersFacts";
 import shuffleArray from "../utils/shuffleArray";
 import StartCard from "./StartCard";
 import NumbersCard from "./NumbersCard";
@@ -67,6 +54,7 @@ const NumbersFlashCards = () => {
 
   const handleNextCard = () => {
     if (currentCardIndex < cards.length - 1) {
+      setFlipped(false);
       setPreviousCardIndex(currentCardIndex);
       setCurrentCardIndex(currentCardIndex + 1);
     }
@@ -92,8 +80,6 @@ const NumbersFlashCards = () => {
     getCards(rangeType, min, max, numQuestions);
   };
 
-  console.log(currentCard);
-
   const handleRestartCurrent = () => {
     setShowRestartModal(false);
     setCurrentCardIndex(0);
@@ -104,6 +90,14 @@ const NumbersFlashCards = () => {
     setShowStartForm(true);
   };
 
+  const handleShowModal = () => {
+    setShowRestartModal(true);
+  };
+
+  const handleHideModal = () => {
+    setShowRestartModal(false);
+  };
+
   const renderProgressBar = () =>
     // TODO: render the progress bar
     console.log("renderProgressBar");
@@ -125,18 +119,20 @@ const NumbersFlashCards = () => {
           {renderProgressBar()}
           {renderScore()}
           <NumbersCard
+            cards={cards}
             currentCard={cards[currentCardIndex]}
             flipped={flipped}
             setFlipped={setFlipped}
           />
           <CardControls
+            showRestartModal={showRestartModal}
             cards={cards}
             currentCardIndex={currentCardIndex}
             handleNextCard={handleNextCard}
             handlePrevCard={handlePrevCard}
             handleShuffle={handleShuffle}
-            showRestartModal={showRestartModal}
-            setShowRestartModal={setShowRestartModal}
+            handleShowModal={handleShowModal}
+            handleHideModal={handleHideModal}
             handleRestartCurrent={handleRestartCurrent}
             handleStartNew={handleStartNew}
           />

elevateyou/src/components/RestartModal.jsx

@@ -1,34 +1,39 @@
 import React from "react";
-import { Modal } from "react-bootstrap";
+import { Button } from "react-bootstrap";
+import Modal from "react-bootstrap/Modal";
+import "../styles/RestartModal.css";
 
-const RestartModal = ({ showModal, hideModal, restartCurrent, startNew }) => {
+const RestartModal = ({
+  showRestartModal,
+  handleHideModal,
+  handleRestartCurrent,
+  handleStartNew,
+}) => {
   return (
-    <Modal show={showModal} onHide={() => hideModal(false)}>
+    <Modal
+      show={showRestartModal}
+      onHide={handleHideModal}
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+    >
       <Modal.Header closeButton>
-        <Modal.Title>Restart Cards</Modal.Title>
+        <Modal.Title id="contained-modal-title-vcenter">
+          Restart Cards
+        </Modal.Title>
       </Modal.Header>
       <Modal.Body>
         <p>
           Do you want to restart the current set of cards, or start a new set?
         </p>
       </Modal.Body>
       <Modal.Footer>
-        <button
-          variant="secondary"
-          onClick={() => {
-            restartCurrent();
-          }}
-        >
+        <Button variant="secondary" onClick={handleRestartCurrent}>
           Restart Current Set
-        </button>
-        <button
-          variant="primary"
-          onClick={() => {
-            startNew();
-          }}
-        >
+        </Button>
+        <Button variant="primary" onClick={handleStartNew}>
           Start New Set
-        </button>
+        </Button>
       </Modal.Footer>
     </Modal>
   );

elevateyou/src/styles/RestartModal.css

@@ -0,0 +1,18 @@
+.restart-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.restart-modal {
+    background-color: white;
+    border-radius: 5px;
+    padding: 20px;
+}

elevateyou/src/utils/fetchNumbersFacts.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import axios from "axios";
 
 const getRandomNumFacts = async (url, numQuestions) => {
   try {