userPage from loginPage

shop/package-lock.json

@@ -7019,6 +7019,11 @@
         "react-is": "^16.7.0"
       }
     },
+    "hookrouter": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/hookrouter/-/hookrouter-1.2.5.tgz",
+      "integrity": "sha512-9OLve2u+JZDCOgPnxJu5dvg/mU1w2ZWWlSOFxCKcGQKRSH1MXI8tMwEgm64mQfjZLET/7yFRTUrZ4hUYoK0ezw=="
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -7378,9 +7383,9 @@
       "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw=="
     },
     "immer": {
-      "version": "7.0.9",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-7.0.9.tgz",
-      "integrity": "sha512-Vs/gxoM4DqNAYR7pugIxi0Xc8XAun/uy7AQu4fLLqaTBHxjOP9pJ266Q9MWA/ly4z6rAFZbvViOtihxUZ7O28A=="
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
+      "integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA=="
     },
     "import-cwd": {
       "version": "2.1.0",
@@ -10464,9 +10469,9 @@
       }
     },
     "open": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/open/-/open-7.4.0.tgz",
-      "integrity": "sha512-PGoBCX/lclIWlpS/R2PQuIR4NJoXh6X5AwVzE7WXnWRGvHg7+4TBCgsujUgiPpm0K1y4qvQeWnCWVTpTKZBtvA==",
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
+      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
       "requires": {
         "is-docker": "^2.0.0",
         "is-wsl": "^2.1.1"
@@ -12178,9 +12183,9 @@
       }
     },
     "react-dev-utils": {
-      "version": "11.0.2",
-      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.2.tgz",
-      "integrity": "sha512-xG7GlMoYkrgc2M1kDCHKRywXMDbFnjOB+/VzpytQyYBusEzR8NlGTMmUbvN86k94yyKu5XReHB8eZC2JZrNchQ==",
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.3.tgz",
+      "integrity": "sha512-4lEA5gF4OHrcJLMUV1t+4XbNDiJbsAWCH5Z2uqlTqW6dD7Cf5nEASkeXrCI/Mz83sI2o527oBIFKVMXtRf1Vtg==",
       "requires": {
         "@babel/code-frame": "7.10.4",
         "address": "1.1.2",
@@ -12195,7 +12200,7 @@
         "global-modules": "2.0.0",
         "globby": "11.0.1",
         "gzip-size": "5.1.1",
-        "immer": "7.0.9",
+        "immer": "8.0.1",
         "is-root": "2.1.0",
         "loader-utils": "2.0.0",
         "open": "^7.0.2",

shop/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",
+    "hookrouter": "^1.2.5",
     "jwt-decode": "^3.1.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

shop/src/App.css

@@ -159,7 +159,7 @@ content {
 
   border: 0.01px;
   border-style: solid;
-  border-color:rgb(229, 229, 243);
+  border-color:rgb(10, 10, 10);
 }
 
 

shop/src/components/header.js

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
 import {Footer, Links} from "./index"
-import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
-import createHistory from "history/createBrowserHistory";
+import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from 'react-router-dom';
 import {Provider, connect} from 'react-redux';
+import React, {Component, useState, useEffect} from 'react';
+import createHistory from "history/createBrowserHistory";
 import {actionAuthLogout} from "../reducers"
 import {createStore, combineReducers, applyMiddleware} from 'redux';
 import thunk from 'redux-thunk';
@@ -42,8 +42,8 @@ const TabletMenu = ({}) => {
     return (
         <>
             
-            <svg onClick = {onClick} xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-justify-left" viewBox="0 0 16 16">
-            <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+            <svg onClick = {onClick} xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" className="bi bi-justify-left" viewBox="0 0 16 16">
+            <path fillRule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
             </svg>
             {show && <StandartMenu className = {divStyle}/>}
         </>
@@ -51,10 +51,11 @@ const TabletMenu = ({}) => {
 }
 
 const ToLoginPage = ({login, onLogout}) => {
-
+    const history = useHistory();
+    useEffect(() => login ?  history.push(`/profile/` + login) : history.push(`/login`),[login])
     return(
         <>
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-person" viewBox="0 0 16 16">
         <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
         </svg>
         <Link to = {login ? "/profile/" + login: "/login"} >
@@ -82,7 +83,7 @@ const Header = ({}) => {
 
                 <div className = "rightSide">
                     <div>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-heart" viewBox="0 0 16 16">
                         <path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                         </svg>
                         <span>Хочу({wishes})</span>
@@ -97,7 +98,7 @@ const Header = ({}) => {
                         </Link> */}
                     </div>
                     <div>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-bag" viewBox="0 0 16 16">
                         <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
                         </svg>
                         <span>{basketCount}</span>

shop/src/components/loginOnPage.js

@@ -1,4 +1,4 @@
-import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
+import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from 'react-router-dom';
 import {Provider, connect} from 'react-redux';
 import React, {Component, useState, useEffect} from 'react';
 import {createStore, combineReducers, applyMiddleware} from 'redux';
@@ -21,13 +21,14 @@ return(
 <div className = "DashboardLink">{login ? <Link to='/dashboard'>{login}</Link> : <Link to='/login'>Anon</Link>}</div>
 )
 }
-const CDashboardLink = connect(s => ({login: s.auth.payload && s.auth.payload.sub.login}))(DashboardLink)
+const CDashboardLink = connect(s => ({login: s.auth.payload && s.auth.payload.sub.login, }))(DashboardLink)
 
 
-const PasswordConfirm = ({isLoggedIn, onLogin = null }) => {
+const PasswordConfirm = ({login, isLoggedIn, onLogin = null }) => {
     const [pass1, setPass1] = useState("");
     const [pass2, setPass2] = useState("");
-
+    const history = useHistory();
+    useEffect(() => login ?  history.push(`/profile/` + login) : history.push(`/login`),[login])
 
 
     return (
@@ -49,7 +50,7 @@ const PasswordConfirm = ({isLoggedIn, onLogin = null }) => {
                 ></input>
             </div>
             <div>
-                <button disabled = {isLoggedIn} onClick={() => {onLogin(pass1, pass2)}}>Login</button>
+                <button disabled = {isLoggedIn} onClick={() => onLogin(pass1, pass2)}>Login</button>
                 <CButtonLogout />
             </div>
 
@@ -57,7 +58,7 @@ const PasswordConfirm = ({isLoggedIn, onLogin = null }) => {
     );
 };
 
-const CFormLogin = connect((s) => ({isLoggedIn: s.auth.payload}), {
+const CFormLogin = connect((s) => ({isLoggedIn: s.auth.payload, login: s.auth.payload && s.auth.payload.sub.login}), {
     onLogin:actionLogin})(PasswordConfirm);