login reload

src/App.js

@@ -1,30 +1,32 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Router, Route, Switch, useParams } from 'react-router-dom';
 import createHistory from "history/createBrowserHistory";
 import { createStore, combineReducers, applyMiddleware } from 'redux';
 import { Provider, connect, useSelector } from 'react-redux';
-import thunk from 'redux-thunk';
 import './App.css';
 import { authReducer, promiseReducer, actionAuthLogin } from './reducers';
 import { CLoginForm, GoodExample, GoodsList, goodsExample, Category, exampleCategory, OrderGood, exampleOrderGood, Order, exampleOrder, OrderList, exampleOrderList, exampleOrderGoodsList, OrderGoodsList } from "./Components";
 import { MainAppBar } from './Components';
 import { CLogout } from './Components';
 import { Sidebar } from './Components/Sidebar';
+import thunk from 'redux-thunk';
+
+
+export const store = createStore(combineReducers({ promise: promiseReducer, auth: authReducer }), applyMiddleware(thunk));
+store.subscribe(() => console.log(store.getState()))
+
 
 
 export const history = createHistory()
 console.log(useParams)
-const store = createStore(combineReducers({ promise: promiseReducer, auth: authReducer }), applyMiddleware(thunk));
-store.subscribe(() => console.log(store.getState()))
 
 //store.dispatch(actionRootCats())
 //store.dispatch(actionAuthLogin(localStorage.authToken));
 
 
-/*const CCatMenu = connect(state => ({ cats: state.promise?.rootCats?.payload || [] }), { onLogin: actionFullLogin })(CatMenu)
-
-const CLoginForm = connect(null, { onLogin: actionFullLogin })(LoginForm)*/
-store.dispatch(actionAuthLogin(localStorage.authToken));
+/*
+const CCatMenu = connect(state => ({ cats: state.promise?.rootCats?.payload || [] }), { onLogin: actionFullLogin })(CatMenu)
+*/
 
 const NotFound = () =>
   <div>
@@ -41,7 +43,14 @@ const Test = () => {
   return <div />
 }
 
+const Main = () =>
+  <div>
+    <h1>Main page</h1>
+  </div>
+
 
+store.dispatch(actionAuthLogin(localStorage.authToken));
+console.log(performance.now())
 
 function App() {
 
@@ -54,39 +63,14 @@ function App() {
             <MainAppBar />
             <Sidebar menuComponent={() => <div>TEST!!!!!!</div>} />
             <Switch>
-              {/*<Route path="/" component={Main} exact />*/}
+              <Route path="/" component={Main} exact />
               <Route path="/login" component={CLoginForm} />
               <Route path="/logout" component={CLogout} />
               <Route path="*" component={NotFound} />
             </Switch>
-            {/*<CCatMenu />
-            <LoginForm onLogin={(l, p) => console.log(l, p)} />
-            <CLoginForm />
-            <MyLink to="/" activeClassName='activeLink'>Главная</MyLink>
-            <MyLink to="/aboutus" activeClassName='activeLink'>О нас</MyLink>
-            <MyLink to="/add/2/3" activeClassName='activeLink'>2 + 3</MyLink>
-            <MyLink to="/add/20/50" activeClassName='activeLink'>20 + 50</MyLink>
-
-            <h1>Этот текст будет всегда в независимости от роутинга</h1>
-            <Switch>
-              <Route path="/" component={Main} exact />
-              <Route path="/aboutus" component={AboutUs} />
-              <Route path="/add/:a/:b" component={Add} />
-              <Route path="*" component={NotFound} />
-            </Switch>
-            <h1>Роутинг выше</h1>*/}
           </div>
         </Provider>
       </Router>
-      {/*
-      <GoodsList goods={goodsExample} />
-      <GoodExample />
-      <Category category={exampleCategory} />
-      <OrderGood orderGood={exampleOrderGood}/>
-      <Order order={exampleOrder} />
-      <OrderList orders={exampleOrderList} />
-      <OrderGoodsList orderGoods={exampleOrderGoodsList} />
-      */}
     </>
 
   );
@@ -110,5 +94,33 @@ function App() {
   </div>
 */}
 
+{/*<Route path="/" component={Main} exact />*/ }
+{/*<CCatMenu />
+              <Route path="*" component={NotFound} />
+            <LoginForm onLogin={(l, p) => console.log(l, p)} />
+            <CLoginForm />
+            <MyLink to="/" activeClassName='activeLink'>Главная</MyLink>
+            <MyLink to="/aboutus" activeClassName='activeLink'>О нас</MyLink>
+            <MyLink to="/add/2/3" activeClassName='activeLink'>2 + 3</MyLink>
+            <MyLink to="/add/20/50" activeClassName='activeLink'>20 + 50</MyLink>
+
+            <h1>Этот текст будет всегда в независимости от роутинга</h1>
+            <Switch>
+              <Route path="/" component={Main} exact />
+              <Route path="/aboutus" component={AboutUs} />
+              <Route path="/add/:a/:b" component={Add} />
+              <Route path="*" component={NotFound} />
+            </Switch>
+            <h1>Роутинг выше</h1>*/}
+
+{/*
+      <GoodsList goods={goodsExample} />
+      <GoodExample />
+      <Category category={exampleCategory} />
+      <OrderGood orderGood={exampleOrderGood}/>
+      <Order order={exampleOrder} />
+      <OrderList orders={exampleOrderList} />
+      <OrderGoodsList orderGoods={exampleOrderGoodsList} />
+      */}
 
 export default App;

src/Components/LoginForm.js

@@ -4,7 +4,8 @@ import Button from '@mui/material/Button';
 import { Container, CssBaseline, TextField, Avatar, Typography, FormControlLabel, Checkbox, Grid, Link } from '@mui/material';
 import { Box } from '@mui/system';
 import { connect } from 'react-redux';
-import { actionFullLogin } from '../jql_actions';
+import { actionFullLogin } from '../jql';
+import { actionAuthLoginThunk } from '../reducers';
 
 const LoginForm = ({ onLogin }) => {
     const [login, setLogin] = useState('');
@@ -78,6 +79,6 @@ const LoginForm = ({ onLogin }) => {
         </Container>
     )
 }
-const CLoginForm = connect(null, {onLogin: actionFullLogin})(LoginForm)
+const CLoginForm = connect(null, {onLogin: actionAuthLoginThunk})(LoginForm)
 
 export { CLoginForm };

src/Components/Logout.js

@@ -1,12 +1,13 @@
 import { actionAuthLogout } from '../reducers';
 import { useEffect } from 'react';
 import { connect } from 'react-redux';
+import { history } from "../App";
 
 
 const Logout = ({onLogout}) => {
     useEffect(() => {
         onLogout();
-        window.location = '/';
+        history.push('/');
     }, []);
 
     return <div></div>;

src/Components/MainAppBar.js

@@ -7,8 +7,9 @@ import IconButton from '@mui/material/IconButton';
 import MenuIcon from '@mui/icons-material/Menu';
 import { MyLink } from './MyLink';
 import { useState } from 'react';
-import { useSelector } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import { useTheme } from '@emotion/react';
+import { Logout } from '@mui/icons-material';
 
 export function MainAppBar() {
     const token = useSelector(state => state.auth?.token)
@@ -57,4 +58,3 @@ export function MainAppBar() {
     );
 }
 
-export const CLogout = connect(null, { onLogout: actionAuthLogout })(Logout)

src/index.js

@@ -6,13 +6,15 @@ import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
+
+{/*} <React.StrictMode>*/ }
+{/*} </React.StrictMode>*/ }
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <App />
 );
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
+

src/reducers/authReducer.js

@@ -1,7 +1,6 @@
 import { jwtDecode } from '../utills';
 import { history } from "../App";
 
-
 export function authReducer(state = {}, action) {                   // диспетчер обработки login
     if (action) {
         if (action.type === 'AUTH_LOGIN') {
@@ -15,9 +14,7 @@ export function authReducer(state = {}, action) {                   // дисп
                 localStorage.authToken = newState.token;
             else
                 delete localStorage.authToken;
-            //let history = useHistory();
-            history.push('/');
-            //window.location = "/";
+            setTimeout(() => history.push('/'), 100);
             return newState;
         }
         else if (action.type === 'AUTH_LOGOUT') {
@@ -32,3 +29,5 @@ export function authReducer(state = {}, action) {                   // дисп
 }
 export const actionAuthLogin = token => ({ type: 'AUTH_LOGIN', token });
 export const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' });
+
+export const actionAuthLoginThunk = token => dispatch => dispatch(actionAuthLogin(token));

src/reducers/index.js

@@ -1,4 +1,4 @@
 export { promiseReducer, actionPromise, actionFulfilled, actionPending, actionRejected } from "./promiseReducer";
-export { authReducer, actionAuthLogin, actionAuthLogout } from "./authReducer";
+export { authReducer, actionAuthLogin, actionAuthLogout, actionAuthLoginThunk } from "./authReducer";
 export { cartReducer, actionCartAdd, actionCartClear, actionCartDel, actionCartSet, actionCartShow, actionCartSub } from "./cartReducer";
 export { localStoredReducer, } from "./localStoredReducer";