added win dialogue and toast notifs

package.json

@@ -14,6 +14,7 @@
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
+    "react-toastify": "^7.0.3",
     "redux": "^4.0.5",
     "uuid": "^8.3.2",
     "web-vitals": "^1.1.0"

src/components/Forms/ChoiceForm.js

@@ -66,13 +66,31 @@ class ChoiceForm extends React.Component {
           break;
       }
 
+      const rightDialogue = store.getState().modal.rightDialogue
+      const name = store.getState().modal.name
+
+      // store.dispatch({
+      //   type: "SHOW_MODAL",
+      //   payload: {
+      //     show: false
+      //   }
+      // })
 
       store.dispatch({
         type: "SHOW_MODAL",
         payload: {
-          show: false,
+          show: true,
+          dialogue: rightDialogue,
+          name: name,
+          questionNumber: 0
         }
       })
+      // store.dispatch({
+      //   type: "ASK_QUESTION",
+      //   payload: {
+      //   }
+      // })
+
     } else {
       store.dispatch({
         type: "SHOW_MODAL",

src/pages/loadgame.js

@@ -3,6 +3,10 @@ import store from "../config/store";
 import { useHistory, useLocation } from "react-router-dom";
 import API from "../utils/API";
 import "./pages.css"
+import { ToastContainer, toast } from 'react-toastify'
+
+import 'react-toastify/dist/ReactToastify.css'
+
 function LoadGame() {
 
   let location = useLocation();
@@ -14,6 +18,13 @@ function LoadGame() {
       }
   })
 
+  const wrongLogin = () => {
+    toast.error("Wrong Username or Password", 
+    {
+      position: toast.POSITION.TOP_CENTER
+    })
+  }
+
   let history = useHistory();
   // Set initial user state
   const [userState, setUserState] = useState({
@@ -89,7 +100,8 @@ function LoadGame() {
         }
       })
       localStorage.removeItem("token");
-      alert("Wrong login information")
+      // alert("Wrong login information")
+      wrongLogin()
       // history.push("/");
     });
   }
@@ -109,6 +121,7 @@ function LoadGame() {
           <input type="submit" value="Submit" onClick={handleSubmit} />
         </form>
       </div>
+      <ToastContainer />
     </div>
   );
 }

src/pages/newgame.js

@@ -3,6 +3,8 @@ import store from "../config/store";
 import API from "../utils/API";
 import { useHistory, useLocation } from "react-router-dom";
 import "./pages.css"
+import { ToastContainer, toast } from 'react-toastify'
+
 
 function NewGame() {
 
@@ -15,6 +17,20 @@ function NewGame() {
       }
   })
 
+  const userAlreadyExists = () => {
+    toast.error("User already exists", 
+    {
+      position: toast.POSITION.TOP_CENTER
+    })
+  }
+
+  const emptyUsernameOrPassword = () => {
+    toast.error("Username and Password are required", 
+    {
+      position: toast.POSITION.TOP_CENTER
+    })
+  }
+
   let history = useHistory();
   // Set initial user state
   const [userState, setUserState] = useState({
@@ -43,6 +59,10 @@ function NewGame() {
 
   const handleSubmit = e => {
     e.preventDefault();
+    if (!signupState.username || !signupState.password) {
+      console.log("username and password required")
+      emptyUsernameOrPassword()
+    } else {
     API.signup(signupState).then(res => {
       console.log(`Congrats! ${JSON.stringify(res.data)}`);
       localStorage.setItem("token", res.data.token)
@@ -83,10 +103,12 @@ function NewGame() {
           isLoggedIn: false
         }
       });
+      userAlreadyExists()
       localStorage.removeItem("token");
-      history.push("/");
+      // history.push("/");
     });
   }
+  }
 
   return (
     <div className="game-wrapper">
@@ -103,6 +125,7 @@ function NewGame() {
           <input type="submit" value="Submit" onClick={handleSubmit} />
         </form>
       </div>
+      <ToastContainer />
     </div>
   );
 }