logout history problems

hipstagram/package-lock.json

@@ -6990,16 +6990,11 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
     "history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.0.0.tgz",
+      "integrity": "sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==",
       "requires": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
+        "@babel/runtime": "^7.7.6"
       }
     },
     "hmac-drbg": {
@@ -12338,6 +12333,19 @@
         "tiny-warning": "^1.0.0"
       },
       "dependencies": {
+        "history": {
+          "version": "4.10.1",
+          "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+          "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+          "requires": {
+            "@babel/runtime": "^7.1.2",
+            "loose-envify": "^1.2.0",
+            "resolve-pathname": "^3.0.0",
+            "tiny-invariant": "^1.0.2",
+            "tiny-warning": "^1.0.0",
+            "value-equal": "^1.0.1"
+          }
+        },
         "isarray": {
           "version": "0.0.1",
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
@@ -12365,6 +12373,21 @@
         "react-router": "5.2.0",
         "tiny-invariant": "^1.0.2",
         "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "history": {
+          "version": "4.10.1",
+          "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+          "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+          "requires": {
+            "@babel/runtime": "^7.1.2",
+            "loose-envify": "^1.2.0",
+            "resolve-pathname": "^3.0.0",
+            "tiny-invariant": "^1.0.2",
+            "tiny-warning": "^1.0.0",
+            "value-equal": "^1.0.1"
+          }
+        }
       }
     },
     "react-scripts": {

hipstagram/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.6.3",
+    "history": "^5.0.0",
     "jwt-decode": "^3.1.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

hipstagram/src/Actions/action_login.js

@@ -1,5 +1,5 @@
 import { actionAuthLogin } from '../Redux/auth_reducer';
-import {actionPromise, store} from '../Redux/promise_reducer';
+import {actionPromise} from '../Redux/promise_reducer';
 
 const urlConst = '/graphql';
 
@@ -44,6 +44,6 @@ export const actionLogin = (login, password) => async (dispatch) => {
     if(result?.data?.login) {
         dispatch(actionAuthLogin(result.data.login))
     } else {
-        alert("Authorization failed")
+        console.log("Authorization failed")
     }
 }

hipstagram/src/Actions/action_logout.js

@@ -0,0 +1,5 @@
+
+
+export const actionLogout = () => ({
+    type: 'LOGOUT'
+})

hipstagram/src/App.js

@@ -3,7 +3,7 @@ import "./App.css";
 import Header from "./Header/header";
 import Navigation from "./Content/Navigation/navigation";
 import News from "./Content/News/news";
-import { Redirect, Route } from "react-router-dom";
+import { Redirect, Route, Router, Switch } from "react-router-dom";
 import Music from "./Content/Music/music";
 import Profile from "./Content/Profile/profile";
 import Settings from "./Content/Settings/settings";
@@ -12,9 +12,14 @@ import Registration from "./Content/Registration/Registration";
 import Users from "./Content/Users/users";
 import Messages from "./Content/Messages/messages";
 import Page404 from "./Components/404_Page/404_Page";
+import { store } from "./Redux/promise_reducer";
+import { Provider } from "react-redux";
+import history from "./history";
 
 function App() {
     return (
+        <Provider store={store}>
+        <Router history={history}>
         <div className="app-wrapper">
             <Header />
 
@@ -23,8 +28,9 @@ function App() {
 
                 <div className="app-wrapper-content">
                     {/* <Redirect exact from="/" to="/profile" /> */}
-                    <Route
-                        path="/profile"
+                    <Switch>
+                    {/* <Route
+                        path="/profile" 
                         render={() => <Profile />}
                     />
                     <Route
@@ -38,15 +44,18 @@ function App() {
                     <Route
                         path="/404"
                         render={() => <Page404 /> }
-                    />
+                    /> */}
                     <Route path="/news" component={News} />
                     <Route path="/music" component={Music} />
                     <Route path="/settings" component={Settings} />
                     <Route path="/login" component={Login} />
                     <Route path="/registration" component={Registration} />
+                    </Switch>
                 </div>
             </div>
         </div>
+        </Router>
+    </Provider>
     );
 }
 

hipstagram/src/Components/Logout/Logout.css

@@ -1,5 +1,6 @@
 .logout-wrapper {
-    background: cadetblue;
+    /* background: cadetblue; */
+    background: rgb(255, 255, 255);
     border: 2px solid #3578e5;
     border-radius: 5px;
     padding: 15px 35px;

hipstagram/src/Components/Logout/Logout.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import './Logout.css';
 
-const Logout = () => {
+const Logout = ({onClick}) => {
     return (
-        <div className='logout-wrapper'>
+        <div className='logout-wrapper' onClick={onClick} >
             Logout
         </div>
     )

hipstagram/src/Content/Login/Login.js

@@ -3,10 +3,15 @@ import { connect } from 'react-redux';
 import { NavLink } from 'react-router-dom';
 import { actionLogin } from '../../Actions/action_login';
 import LoginError from '../../Components/LoginError/LoginError';
+import history from "../../history";
 import './Login.css';
 
 const Login = ({onLogin=null}) => {        //деструктуризация объекта
 
+    if(localStorage.authToken) {
+        history.push('/profile')
+    }
+    
     const loginRef = useRef(null)
     const pasRef = useRef(null)
 

hipstagram/src/Content/Navigation/navigation.js

@@ -1,29 +1,30 @@
 import { NavLink } from "react-router-dom";
+import { Link } from "react-router-dom";
 import "./navigation.css";
 
 function Navigation() {
-  return (
-    <nav className="navigation">
-      <div>
-        <NavLink to="/profile">Profile</NavLink>
-      </div>
-      <div>
-        <NavLink to="/messages">Messages</NavLink>
-      </div>
-      <div>
-        <NavLink to="/news">News</NavLink>
-      </div>
-      <div>
-        <NavLink to="/music">Music</NavLink>
-      </div>
-      <div>
-        <NavLink to="/users">Users</NavLink>
-      </div>
-      <div>
-        <NavLink to="/settings">Settings</NavLink>
-      </div>
-    </nav>
-  );
+    return (
+        <nav className="navigation">
+            <div>
+                <Link to={"/profile"}>Profile</Link>
+            </div>
+            <div>
+                <Link to={"/messages"}>Messages</Link>
+            </div>
+            <div>
+                <Link to={"/news"}>News</Link>
+            </div>
+            <div>
+                <Link to={"/music"}>Music</Link>
+            </div>
+            <div>
+                <Link to={"/users"}>Users</Link>
+            </div>
+            <div>
+                <Link to={"/settings"}>Settings</Link>
+            </div>
+        </nav>
+    );
 }
 
 export default Navigation;

hipstagram/src/Content/Profile/profile.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import './profile.css';
 
-function Profile() {
+function Profile(a) {
+    console.log(a)
     return(
         <div className='content-wrapper'>
 

hipstagram/src/Header/header.js

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import { NavLink } from 'react-router-dom';
+import { actionLogout } from '../Actions/action_logout';
 import Logout from '../Components/Logout/Logout';
 import './header.css';
 
-function Header({ loginName = "", isLogin = false }) {
+function Header({ loginName = "", isLogin = false, onLogout }) {
 
     let [isLogout, setIsLogout] = useState(false)
 
@@ -25,7 +26,9 @@ function Header({ loginName = "", isLogin = false }) {
                     </div>
                 }
 
-                {isLogout && <Logout />}
+                {/* {isLogout && <Logout onClick={onLogout} />} */}
+                {isLogout && <Logout onClick={() => {onLogout(); console.log('it works'); setIsLogout(false)}} />}
+                {/* {isLogout && <button onClick={() => onLogout()}>Logout</button>} */}
             </header>
         </nav>
     );
@@ -34,6 +37,8 @@ function Header({ loginName = "", isLogin = false }) {
 const CHeader = connect((s) => ({
     loginName: s.auth.login,
     isLogin: s.auth.isLogin
-}), {})(Header)
+}), {
+    onLogout: actionLogout
+})(Header)
 
 export default CHeader;

hipstagram/src/Redux/auth_reducer.js

@@ -34,10 +34,10 @@ export const authReducer = (state, action) => {
                 isLogin: true,
                 token: action.jwt
             }
-            case LOGOUT:
-                localStorage.removeItem('authToken');
-                return {};
-            default:
-                return state
+        case LOGOUT:
+            localStorage.removeItem('authToken');
+            return {};
+        default:
+            return state
     }
 }

hipstagram/src/Redux/promise_reducer.js

@@ -1,6 +1,7 @@
 import { createStore, combineReducers, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 import { authReducer } from './auth_reducer';
+import history from "../history";
 
 const LOGIN = 'LOGIN';
 const LOGOUT = 'LOGOUT';
@@ -41,6 +42,7 @@ export const actionPromise = (name, promise) => {
             dispatch(actionResolved(result))
         }
         catch (e) {
+            history.push("/404")
             dispatch(actionRejected(e))
         }
         return result

hipstagram/src/history.js

@@ -0,0 +1,3 @@
+import { createBrowserHistory } from "history";
+
+export default createBrowserHistory();

hipstagram/src/index.js

@@ -1,18 +1,23 @@
-import "./index.css";
 import reportWebVitals from "./reportWebVitals";
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter, Router } from "react-router-dom";
 import { Provider } from "react-redux";
 import { store } from "./Redux/promise_reducer";
+import history from "./history";
+import "./index.css";
 
 ReactDOM.render(
-        <BrowserRouter>
-        <Provider store={store}>
-            <App />
-            </Provider>
-        </BrowserRouter>,
+    <React.StrictMode>
+    {/* <Provider store={store}>
+        <Router history={history}> */}
+            {/* <Provider store={store}> */}
+                <App />
+            {/* </Provider> */}
+        {/* </Router>
+    </Provider> */}
+    </React.StrictMode>,
 
     document.getElementById("root")
 );