Merge pull request #17 from StabRabbit41/paul-logout

logout functionality

Client/actionCreator/actionCreator.js

@@ -7,15 +7,14 @@ export const updateExercisesFromAPI = (array) => ({
 
 export const updateUSER_LOG_ON = (userObj) => ({
   type: types.USER_LOG_ON,
-  payload: userObj
-})
+  payload: userObj,
+});
 
 export const updateUSER_LOG_OFF = () => ({
   type: types.USER_LOG_OFF,
-  payload: 'probably none'
-})
+});
 
 export const updateDifficultyAndMuscle = ([muscle, difficulty]) => ({
   type: types.UPDATE_MUSCLE_DIFFICULTY,
-  payload: [muscle, difficulty]
-})
+  payload: [muscle, difficulty],
+});

Client/components/login.jsx

@@ -36,17 +36,17 @@ const login = () => {
           alert(data.err);
         }
       })
-      .catch((error) => alert(error));
+      .catch((error) => alert('Invalid Username/Password'));
   };
 
   return (
     <div>
       <form>
-        <input type="text" id="usernameLogin" placeholder="Username"></input>
+        <input type='text' id='usernameLogin' placeholder='Username'></input>
         <input
-          type="password"
-          id="passwordLogin"
-          placeholder="Password"
+          type='password'
+          id='passwordLogin'
+          placeholder='Password'
         ></input>
         <button onClick={(event) => loginFunc(event)}>Login</button>
       </form>

Client/components/star-style.module.css

@@ -0,0 +1,14 @@
+.star_true {
+  /* represents on state  */
+  color: #d4af37;
+}
+
+.star_false {
+  /* represents off state  */
+  color: black;
+}
+
+.star-button {
+  background: none;
+  border: none;
+}

Client/containers/HeaderContainer.jsx

@@ -11,12 +11,22 @@
 
 import React from 'react';
 import * as actions from '../actionCreator/actionCreator.js';
+import { useDispatch } from 'react-redux';
 
 const HeaderContainer = () => {
+  const dispatch = useDispatch();
+
+  const logoutHandler = () => {
+    dispatch(actions.updateUSER_LOG_OFF());
+    document.getElementById('overlay').style.display = 'block';
+  };
+
   return (
-    <div className="appHeaderBox">
-      <h4 className="mainHeader">Stretch</h4>
-      <button className="logoutBtn">Logout</button>
+    <div className='appHeaderBox'>
+      <h4 className='mainHeader'>Stretch</h4>
+      <button onClick={logoutHandler} className='logoutBtn'>
+        Logout
+      </button>
     </div>
   );
 };

Client/reducers/stretchReducer.js

@@ -15,31 +15,40 @@ const initialState = {
   loggedInUser: '',
   favorites: [],
   muscle: '',
-  difficulty: ''
+  difficulty: '',
 };
 
 const stretchReducer = (state = initialState, action) => {
   switch (action.type) {
     // Get's a list of exercises from the server and updates the array with objects of exercises
     case types.UPDATE_FROM_API: {
-      return {...state, exercisesFromAPI : action.payload};
+      return { ...state, exercisesFromAPI: action.payload };
     }
 
     // Logs user on
     case types.USER_LOG_ON: {
       // get authentication status of user
-      return {...state, loggedInUser: action.payload.username, favorites : action.payload.favorites}
-
+      document.getElementById('usernameLogin').value = '';
+      document.getElementById('passwordLogin').value = '';
+      document.getElementById('usernameSignup').value = '';
+      document.getElementById('passwordSignup').value = '';
+      document.getElementById('passwordSignupConfirm').value = '';
+      return {
+        ...state,
+        loggedInUser: action.payload.username,
+        favorites: action.payload.favorites,
+      };
     }
 
     // Logs user off
     case types.USER_LOG_OFF: {
-      return {...state, loggedInUser : ''}
+      // reset the state including the logged-in user
+      return { ...initialState };
     }
 
     case types.UPDATE_MUSCLE_DIFFICULTY: {
       const [muscle, difficulty] = action.payload;
-      return {...state, muscle:muscle, difficulty,difficulty}
+      return { ...state, muscle: muscle, difficulty, difficulty };
     }
     default:
       return state;

Client/stylesheets/_flexios.scss

@@ -112,5 +112,5 @@ li:last-child {
   bottom: 0;
   background-color: black;
   z-index: 2;
-  cursor: pointer;
+  // cursor: pointer;
 }

package.json

@@ -34,7 +34,6 @@
     "mongodb": "^5.6.0",
     "mongoose": "^6.8.0",
     "react": "^18.2.0",
-    "react-countdown-clock": "^2.10.0",
     "react-dom": "^18.2.0",
     "react-hot-loader": "^4.6.3",
     "react-redux": "^8.1.1",