Homework

src/components/App/App.css

@@ -26,3 +26,37 @@
 .App .App-Content .ItemInput {
   width: 100%;
 }
+
+.User-Panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px;
+  background: #50a3a2;
+  background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
+  background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
+  background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
+  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
+}
+
+.User-Panel .Login {
+  outline: 0;
+  background-color: white;
+  border: 0;
+  padding: 10px 15px;
+  color: #53e3a6;
+  border-radius: 3px;
+  width: 250px;
+  cursor: pointer;
+  font-size: 18px;
+  transition-duration: 0.25s;
+}
+
+.User-Panel .Login:hover {
+  background-color: #000000;
+}
+
+.User-Panel .Greeting {
+  margin-top: 20px;
+  font-size: 24px;
+}

src/components/App/index.js

@@ -4,13 +4,19 @@ import { List, ListItem } from '@material-ui/core';
 import Header from '../Header';
 import ItemInput from '../ItemInput';
 import './App.css';
+import Login from '../Login';
+import Greeting from '../Greeting';
 
 const App = ({
   items,
   onButtonClick
 }) => (
   <div className="App">
     <Header />
+   <div className='User-Panel'>
+     <Login/>
+     <Greeting/>
+   </div>
     <main className="App-Content">
       <List className="List">{
         items.map((item, i) => <ListItem key={i}>{item}</ListItem>)
@@ -21,7 +27,7 @@ const App = ({
 );
 
 const mapStateToProps = (state) => ({
-  items: state.items
+  items: state.appReducer.items
 });
 
 export default connect(

src/components/Greeting/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useSelector } from "react-redux";
+
+const Greeting = ({
+	userName,
+	loggedIn
+}) => {
+
+	userName = useSelector(state => state.loginReducer.userName);
+	loggedIn = useSelector(state => state.loginReducer.loggedIn);
+	return (
+		<div className="Greeting">
+			{loggedIn ? `Hello ${userName}. Wassup?` : `Hmm, I don't know you ${userName}. Would you mind to log in?`}
+		</div>
+	)
+};
+
+export default Greeting;

src/components/Login/actions.js

@@ -0,0 +1,17 @@
+export const actions = {
+	login: 'LOGIN',
+	logOut: 'LOGOUT',
+};
+
+export const login = () => ({
+	type: actions.login
+});
+
+export const logOut = () => ({
+	type: actions.logOut
+});
+
+export default {
+	login,
+	logOut
+};

src/components/Login/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useSelector, useDispatch } from "react-redux";
+import { login, logOut } from './actions'
+
+const Login = ({
+	isLoggedIn
+}) => {
+	isLoggedIn =  useSelector(state => state.loginReducer.loggedIn);
+	const dispatch = useDispatch();
+
+	const changeStatus = () => {
+		isLoggedIn ? dispatch(logOut()) : dispatch(login())
+	};
+
+	return (
+		<button onClick={() => changeStatus()}
+		className="Login">
+			{ isLoggedIn ? 'Logout' : 'Login'}
+		</button>
+	)
+};
+
+export default Login;

src/components/Login/reducer.js

@@ -0,0 +1,22 @@
+import { actions } from './actions';
+
+const initialState = {
+	loggedIn: false,
+	userName: 'guest'
+};
+
+export default (state = initialState, action) => {
+	switch (action.type) {
+		case actions.login:
+			return {
+				loggedIn: true,
+				userName: 'not guest'
+			};
+		case actions.logOut:
+			return {
+				loggedIn: false
+			};
+		default:
+			return state;
+	}
+};

src/index.js

@@ -5,7 +5,7 @@ import { createStore } from 'redux';
 import 'typeface-roboto';
 import './index.css';
 import App from './components/App';
-import appReducer from './components/App/reducer';
+import rootReducer from './rootReducer';
 
 let devAdditions;
 if (module.hot) {
@@ -17,9 +17,10 @@ if ('__REDUX_DEVTOOLS_EXTENSION__' in window) {
 }
 
 const store = createStore(
-  appReducer,
+  rootReducer,
   devAdditions
 );
+console.log(store.getState())
 
 ReactDOM.render(
   <React.StrictMode>

src/rootReducer.js

@@ -0,0 +1,9 @@
+import { combineReducers } from 'redux';
+import appReducer from './components/App/reducer';
+import loginReducer from './components/Login/reducer';
+
+export default combineReducers({
+	appReducer,
+	loginReducer
+});
+