diff --git a/package-lock.json b/package-lock.json index e0f35ff..fdf6a6b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,8 +11,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" @@ -4112,6 +4114,15 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", + "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -4554,6 +4565,11 @@ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.5.tgz", "integrity": "sha512-I3pkr8j/6tmQtKV/ZzHtuaqYSQvyjGRKH4go60Rr0IDLlFxuRT5V32uvB1mecM5G1EVAUyF/4r4QZ1GHgz+mxA==" }, + "node_modules/@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" + }, "node_modules/@types/ws": { "version": "8.5.8", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.8.tgz", @@ -9178,6 +9194,19 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -15204,6 +15233,49 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-redux": { + "version": "8.1.3", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz", + "integrity": "sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==", + "dependencies": { + "@babel/runtime": "^7.12.1", + "@types/hoist-non-react-statics": "^3.3.1", + "@types/use-sync-external-store": "^0.0.3", + "hoist-non-react-statics": "^3.3.2", + "react-is": "^18.0.0", + "use-sync-external-store": "^1.0.0" + }, + "peerDependencies": { + "@types/react": "^16.8 || ^17.0 || ^18.0", + "@types/react-dom": "^16.8 || ^17.0 || ^18.0", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0", + "react-native": ">=0.59", + "redux": "^4 || ^5.0.0-beta.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + }, + "redux": { + "optional": true + } + } + }, + "node_modules/react-redux/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -15428,6 +15500,14 @@ "node": ">=8" } }, + "node_modules/redux": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", + "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", + "dependencies": { + "@babel/runtime": "^7.9.2" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz", @@ -17859,6 +17939,14 @@ "requires-port": "^1.0.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index d19e965..bba3154 100644 --- a/package.json +++ b/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" diff --git a/src/App.js b/src/App.js index a010795..a07510b 100644 --- a/src/App.js +++ b/src/App.js @@ -15,9 +15,9 @@ function App() { diff --git a/src/Games/GamesList.js b/src/Games/GamesList.js index 1fee65c..34923f3 100644 --- a/src/Games/GamesList.js +++ b/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 (
@@ -14,10 +18,11 @@ function GamesList({games}) {

Games

+ {isAuthenticated ? (
- Dodaj grę - -
+ Dodaj grę +
+ ) : (<>)} {listItems}
@@ -25,4 +30,11 @@ function GamesList({games}) { ) } -export default GamesList \ No newline at end of file +const mapStateToProps = (state) => ({ + isAuthenticated: state.isAuthenticated, + user: state.user, + }); + +const mapDispatchToProps = {login,logout,}; + +export default connect(mapStateToProps, mapDispatchToProps)(GamesList); diff --git a/src/User/User.js b/src/User/User.js index e05d18e..dc277f8 100644 --- a/src/User/User.js +++ b/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 ( - - user=icon - - ) - } - else { - return ( -
-
- -
-
- -
-
- ) - } -} +function User({ isAuthenticated, user, login, logout }) { + return ( +
+ {isAuthenticated ? ( + + ) : ( + + )} +
+ ); + } -export default User \ No newline at end of file +// function User({isLoggedIn}) { +// if (isLoggedIn) { +// return ( +// +// user=icon +// +// ) +// } +// else { +// return ( +//
+//
+// +//
+//
+// +//
+//
+// ) +// } +// } + + +const mapStateToProps = (state) => ({ + isAuthenticated: state.isAuthenticated, + user: state.user, + }); + +const mapDispatchToProps = {login,logout,}; + +export default connect(mapStateToProps, mapDispatchToProps)(User); \ No newline at end of file diff --git a/src/User/actions.js b/src/User/actions.js new file mode 100644 index 0000000..ea75524 --- /dev/null +++ b/src/User/actions.js @@ -0,0 +1,10 @@ +// actions.js +export const login = (user) => ({ + type: 'LOGIN', + payload: user, + }); + + export const logout = () => ({ + type: 'LOGOUT', + }); + \ No newline at end of file diff --git a/src/User/store.js b/src/User/store.js new file mode 100644 index 0000000..2b404f7 --- /dev/null +++ b/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; diff --git a/src/index.js b/src/index.js index 553da1e..8883463 100644 --- a/src/index.js +++ b/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( Bot-Wars - + + + );