Header component refactor

hipstagram/src/Components/Logout/Logout.css

@@ -7,4 +7,7 @@
     text-align: center;
     font-size: 26px;
     color: #000000;
+    position: absolute;
+    top: 46px;
+    right: 46px;
 }

hipstagram/src/Header/header.css

@@ -10,6 +10,7 @@
     justify-content: space-around;
     align-items: center;
     text-align: right;
+    position: relative;
 }
 
 .header img {
@@ -19,7 +20,7 @@
     border-radius: 5px;
 }
 
-.header a {
+.header a, .header div {
     padding-right: 15px;
     text-decoration: none;
     color: #fff;

hipstagram/src/Header/header.js

@@ -1,20 +1,39 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
 import { NavLink } from 'react-router-dom';
+import Logout from '../Components/Logout/Logout';
 import './header.css';
 
-function Header() {
-    return(
+function Header({ loginName = "", isLogin = false }) {
+
+    let [k, setK] = useState(false)
+
+    return (
         <nav>
             <header className='header'>
-                {/* <img src="Bruce_Willis01.jpg" /> */}
                 <img src="logo.png" />
 
-                <NavLink to="/login">
-                    Login Pocu46 ^
-                </NavLink>
+                {!isLogin &&
+                    <NavLink to="/login">
+                        Login
+                    </NavLink>
+                }
+
+                {isLogin &&
+                    <div onClick={() => setK((x) => !x)}>
+                        {loginName}
+                    </div>
+                }
+
+                {k && <Logout />}
             </header>
         </nav>
     );
 }
 
-export default Header;
+const CHeader = connect((s) => ({
+    loginName: s.auth.login,
+    isLogin: s.auth.isLogin
+}), {})(Header)
+
+export default CHeader;

hipstagram/src/Redux/promise_reducer.js

@@ -52,4 +52,6 @@ export const store = createStore(combineReducers({
     promise: promiseReducer
 }), applyMiddleware(thunk));
 
-store.subscribe(() => console.log('STORE', store.getState()))
+store.subscribe(() => console.log('STORE', store.getState()))
+
+window.store = store;