redux user login (#13)

Co-authored-by: Mikołaj Burdzy <[email protected]>

package.json

@@ -5,8 +5,10 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.1.3",
     "react-router-dom": "^6.18.0",
     "react-scripts": "^5.0.1",
+    "redux": "^4.2.1",
     "saas": "^1.0.0",
     "sass": "^1.69.5",
     "web-vitals": "^2.1.4"

src/App.js

@@ -15,24 +15,24 @@ function App() {
             </div>
             <div id="menu-bar" className="container">
                 <div className="col-3">
-                    <a href="index.html">
+                    <Link to="index.html">
                         <button className="btn">Home</button>
-                    </a>
+                    </Link>
                 </div>
                 <div className="col-3">
                     <Link to="tournaments/add">
                         <button className="btn">Tournaments</button>
                     </Link>
                 </div>
                 <div className="col-3">
-                    <a href="games">
+                    <Link to="games">
                         <button className="btn">Games</button>
-                    </a>
+                    </Link>
                 </div>
                 <div className="col-3">
-                    <a href="about.html">
+                    <Link to="about.html">
                         <button className="btn">About</button>
-                    </a>
+                    </Link>
                 </div>
             </div>
         </div>

src/Games/GamesList.js

@@ -1,6 +1,10 @@
 import './GamesList.scss'
 import DeleteGameButton from './DeleteGameButton';
-function GamesList({games}) {
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { login, logout } from './../User/actions';
+function GamesList({games, isAuthenticated, user, login, logout }) {
+// function GamesList({games}) {
     const listItems = games.map(game => {
         return (
             <div key = {game.id} className="container game-list-element btn">
@@ -14,15 +18,23 @@ function GamesList({games}) {
             <h1>Games</h1>
             <div className="container container-list">
                 <div className="list">
+                {isAuthenticated ? (
                     <div className="container game-list-element btn">
-                        <a className="game-name add-game-btn color-primary-3" href="/games/add">Dodaj grę
-                    </a>
-                </div>
+                        <Link className="game-name add-game-btn color-primary-3" to="/games/add">Dodaj grę</Link>
+                    </div>
+                ) : (<></>)}
                     {listItems}
                 </div>
             </div>
         </div>
     )
 }
 
-export default GamesList
+const mapStateToProps = (state) => ({
+    isAuthenticated: state.isAuthenticated,
+    user: state.user,
+  });
+
+const mapDispatchToProps = {login,logout,};
+
+export default connect(mapStateToProps, mapDispatchToProps)(GamesList);

src/User/User.js

@@ -1,26 +1,51 @@
 import generic_user from '../resources/icons8-male-user-50.png'
 import '../App.scss'
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { login, logout } from './actions';
 
-function User({isLoggedIn}) {
-   if (isLoggedIn) {
-       return (
-           <a href="account.html">
-               <img src={generic_user} alt="user=icon"/>
-           </a>
-       )
-   }
-   else {
-       return (
-           <div className="login">
-               <div className="col-6">
-                   <a href="login.html"><button className="btn">Login</button></a>
-               </div>
-               <div className="col-6">
-                   <a href="register.html"><button class="btn">Register</button></a>
-               </div>
-           </div>
-       )
-   }
-}
+function User({ isAuthenticated, user, login, logout }) {
+    return (
+      <div>
+        {isAuthenticated ? (
+          <button onClick={logout}>Logout</button>
+        ) : (
+          <button onClick={() => login({ username: 'exampleUser' })}>
+            Login
+          </button>
+        )}
+      </div>
+    );
+  }
 
-export default User
+// function User({isLoggedIn}) {
+//     if (isLoggedIn) {
+//        return (
+//            <Link to="account.html">
+//                <img src={generic_user} alt="user=icon"/>
+//            </Link>
+//        )
+//    }
+//    else {
+//        return (
+//            <div className="login">
+//                <div className="col-6">
+//                    <Link to="login.html"><button className="btn">Login</button></Link>
+//                </div>
+//                <div className="col-6">
+//                    <Link to="register.html"><button class="btn">Register</button></Link>
+//                </div>
+//            </div>
+//        )
+//    }
+// }
+
+
+const mapStateToProps = (state) => ({
+    isAuthenticated: state.isAuthenticated,
+    user: state.user,
+  });
+
+const mapDispatchToProps = {login,logout,};
+
+export default connect(mapStateToProps, mapDispatchToProps)(User);

src/User/actions.js

@@ -0,0 +1,10 @@
+// actions.js
+export const login = (user) => ({
+    type: 'LOGIN',
+    payload: user,
+  });
+
+  export const logout = () => ({
+    type: 'LOGOUT',
+  });
+

src/User/store.js

@@ -0,0 +1,30 @@
+// store.js
+import { createStore } from 'redux';
+
+const initialState = {
+  isAuthenticated: false,
+  user: null,
+};
+
+const authReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case 'LOGIN':
+      return {
+        ...state,
+        isAuthenticated: true,
+        user: action.payload,
+      };
+    case 'LOGOUT':
+      return {
+        ...state,
+        isAuthenticated: false,
+        user: null,
+      };
+    default:
+      return state;
+  }
+};
+
+const store = createStore(authReducer);
+
+export default store;

src/index.js

@@ -10,7 +10,8 @@ import {
 import GamesList from "./Games/GamesList";
 import AddGameForm from "./Games/AddGameForm";
 import AddTournamentForm from "./Tournaments/AddTournamentForm";
-
+import { Provider } from 'react-redux';
+import store from './User/store';
 
 const games = [{name:'Szachy', id:1}, {name:'Warcaby', id:2}, {name:'Scrabble', id:3}, {name:'Chińczyk', id:4}, {name:'Go', id:5}]
 
@@ -45,7 +46,9 @@ root.render(
             <title>Bot-Wars</title>
         </head>
         <body>
-            <RouterProvider router={router}/>
+            <Provider store={store}>
+                <RouterProvider router={router}/>
+            </Provider>
         </body>
     </React.StrictMode>
 );