Fix error dispatch actions auths

tduyng · tduyng · commit fb2b5b42a4d8 · 2020-12-07T14:33:23.000+01:00
diff --git a/package.json b/package.json
@@ -19,7 +19,6 @@
     "@types/styled-components": "^5.1.4",
     "antd": "^4.9.2",
     "concurrently": "^5.3.0",
-    "immer": "^8.0.0",
     "json-server": "^0.16.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
diff --git a/server/db/db.json b/server/db/db.json
@@ -17,6 +17,12 @@
       "username": "alan",
       "email": "alan@gmail.com",
       "password": "123456"
+    },
+    {
+      "id": "38550566-e1c6-40c2-a616-8ea74189f677",
+      "username": "felix",
+      "email": "felix@gmail.com",
+      "password": "123456"
     }
   ],
   "products": []
diff --git a/src/@types/actions.d.ts b/src/@types/actions.d.ts
@@ -1,4 +1,4 @@
 interface ActionRedux {
-  types: string;
+  type: string;
   payload?: any;
 }
diff --git a/src/@types/user.d.ts b/src/@types/user.d.ts
@@ -18,3 +18,8 @@ interface IUser {
   email?: string;
   password: string;
 }
+
+interface DispatchAuth {
+  type: string;
+  payload?: any;
+}
diff --git a/src/App/App.actions.ts b/src/App/App.actions.ts
diff --git a/src/App/App.constants.ts b/src/App/App.constants.ts
diff --git a/src/App/App.reducer.ts b/src/App/App.reducer.ts
diff --git a/src/App/App.tsx b/src/App/App.tsx
@@ -1,9 +1,30 @@
 import React, { useEffect } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
 import { loadUser, logout } from 'src/components/Auth/Auth.thunks';
 import { Routes } from 'src/routes';
 
-function App() {
+const mapStateToProps = () => ({});
+const mapDispatchToProps = {
+  loadUser,
+  logout,
+};
+const connector = connect(mapStateToProps, mapDispatchToProps);
+interface Props extends ConnectedProps<typeof connector> {}
+
+const _App = (props: Props) => {
+  useEffect(() => {
+    const { loadUser, logout } = props;
+    // check for token in LS
+    if (localStorage.token) {
+      loadUser();
+    }
+
+    // log user out from all tabs if they log out in one tab
+    window.addEventListener('storage', () => {
+      if (!localStorage.token) logout();
+    });
+  }, []);
   return <Routes />;
-}
+};
 
-export default App;
+export const App = connector(_App);
diff --git a/src/components/Auth/Auth.actions.ts b/src/components/Auth/Auth.actions.ts
@@ -1,9 +1,5 @@
 import * as types from './Auth.constants';
 
-export const loginRequested = () => ({
-  type: types.LOGIN_REQUESTED,
-});
-
 export const loginSuccess = (payload: IUser) => ({
   type: types.LOGIN_SUCCESS,
   payload,
@@ -22,7 +18,7 @@ export const authError = () => ({
   type: types.AUTH_ERROR,
 });
 
-export const logout = () => ({
+export const logoutSuccess = () => ({
   type: types.LOGOUT,
 });
 
diff --git a/src/components/Auth/Auth.constants.ts b/src/components/Auth/Auth.constants.ts
@@ -1,6 +1,5 @@
 export const LOGIN_SUCCESS = 'views/auth/LOGIN_SUCCESS';
 export const LOGIN_FAILED = 'views/auth/LOGIN_FAILED';
-export const LOGIN_REQUESTED = 'views/auth/LOGIN_REQUESTED';
 export const USER_LOADED = 'views/auth/USER_LOADED';
 export const AUTH_ERROR = 'views/auth/AUTH_ERROR';
 export const LOGOUT = 'views/auth/LOGOUT';
diff --git a/src/components/Auth/Auth.reducers.ts b/src/components/Auth/Auth.reducers.ts
@@ -1,6 +1,4 @@
 import * as types from './Auth.constants';
-import produce from 'immer';
-import { WritableDraft } from 'immer/dist/internal';
 
 let userType: IUser = {
   id: '',
@@ -15,34 +13,39 @@ const initialState = {
   user: userType,
 };
 
-export const authReducer = (
-  state = initialState,
-  action: { type: any; payload: WritableDraft<IUser> },
-) =>
-  produce(state, draft => {
-    switch (action.type) {
-      case types.USER_LOADED:
-        draft.isAuthenticated = true;
-        draft.loading = false;
-        draft.user = action.payload;
-        break;
-      case types.LOGIN_SUCCESS:
-      case types.REGISTER_SUCCESS:
-        localStorage.setItem('token', draft.user.id);
-        draft.loading = false;
-        draft.isAuthenticated = true;
-        break;
-      case types.LOGIN_FAILED:
-      case types.AUTH_ERROR:
-      case types.LOGOUT:
-      case types.REGISTER_FAILED:
-        localStorage.removeItem('token');
-        draft.loading = false;
-        draft.isAuthenticated = false;
-        draft.token = null;
-        break;
+export const authReducer = (state = initialState, action: ActionRedux) => {
+  const { type, payload } = action;
+  switch (type) {
+    case types.USER_LOADED:
+      return {
+        ...state,
+        isAuthenticated: true,
+        loading: false,
+        token: payload.id,
+        user: payload.user,
+      };
+    case types.LOGIN_SUCCESS:
+    case types.REGISTER_SUCCESS:
+      localStorage.setItem('token', payload.id);
+      return {
+        ...state,
+        ...payload,
+        isAuthenticated: true,
+        loading: false,
+      };
+    case types.LOGIN_FAILED:
+    case types.AUTH_ERROR:
+    case types.LOGOUT:
+    case types.REGISTER_FAILED:
+      localStorage.removeItem('token');
+      return {
+        ...state,
+        token: null,
+        isAuthenticated: false,
+        loading: false,
+      };
 
-      default:
-        return state;
-    }
-  });
+    default:
+      return state;
+  }
+};
diff --git a/src/components/Auth/Auth.thunks.ts b/src/components/Auth/Auth.thunks.ts
@@ -5,31 +5,40 @@ import { v4 as uuid } from 'uuid';
 
 export const loadUser = () => async dispatch => {
   const tokenId = localStorage.getItem('token');
+  console.log('Load user running!');
   if (!tokenId) {
     return dispatch(actions.authError);
   }
   try {
     const res = await axios.get(`${URL.baseAPIUrl}/api/users/${tokenId}`);
+    console.log('Response', res);
+    console.log('Hey loadUser function triggered');
     if (res) {
-      return dispatch(actions.userLoaded(res));
+      return dispatch(actions.userLoaded(res.data));
     }
     dispatch(actions.authError);
   } catch (error) {
+    console.log('Some error loadUser running', error);
     return dispatch(actions.authError);
   }
 };
 
 export const login = (payload: ReqLogin) => async dispatch => {
   const { username, password } = payload;
   try {
-    let allUsers: IUser[] = [];
-    allUsers = await axios.get(`${URL.baseAPIUrl}/api/users`);
+    const res = await axios.get(`${URL.baseAPIUrl}/api/users`);
+    const allUsers = res.data;
+
     let user = allUsers.filter(x => x.username === username)[0];
+    console.log('user', user);
     if (user && user.password === password) {
       dispatch(actions.loginSuccess(user));
-      loadUser();
+      dispatch(loadUser());
+      return;
+    } else {
+      console.log('Invalid credentials');
+      return dispatch(actions.loginFailed);
     }
-    dispatch(actions.loginFailed);
   } catch (error) {
     return dispatch(actions.loginFailed);
   }
@@ -44,11 +53,11 @@ export const register = (payload: ReqLogin) => async dispatch => {
     console.log('Resgister success', newUser);
     const all = await axios.get(`${URL.baseAPIUrl}/api/users`);
     console.log('All users', all);
-    loadUser();
+    dispatch(loadUser());
   } catch (error) {
     return dispatch(actions.registerFailed);
   }
 };
 export const logout = () => async dispatch => {
-  return dispatch(actions.logout);
+  return dispatch(actions.logoutSuccess);
 };
diff --git a/src/components/Auth/Login.tsx b/src/components/Auth/Login.tsx
@@ -7,8 +7,7 @@ import { login } from './Auth.thunks';
 import { PATH } from 'src/constants/paths';
 
 const mapStateToProps = (state: AppState) => ({
-  loading: state.auth.loading,
-  isAuthenticated: state.app.isAuthenticated,
+  isAuthenticated: state.auth.isAuthenticated,
 });
 const mapDispatchToProps = {
   login,
@@ -19,21 +18,19 @@ interface Props extends ConnectedProps<typeof connector> {}
 const _Login = (props: Props) => {
   //  eslint-disable-next-line
   const [error, setError] = useState('');
-  const { login, loading } = props;
+  const { login } = props;
   const history = useHistory();
 
   const onFinish = async formData => {
     const { username, password } = formData;
-    if (!loading) {
-      const payload = { username, password };
-      try {
-        await login(payload);
-        message.success('Login successfully');
-        history.push(PATH.HOME);
-      } catch (error) {
-        message.error(error.message);
-        setError(error.payload.message);
-      }
+    const payload = { username, password };
+    try {
+      await login(payload);
+      message.success('Login successfully');
+      history.push(PATH.HOME);
+    } catch (error) {
+      message.error(error.message);
+      setError(error.payload.message);
     }
   };
 
diff --git a/src/components/Auth/Register.tsx b/src/components/Auth/Register.tsx
@@ -7,8 +7,7 @@ import { register } from './Auth.thunks';
 import { PATH } from 'src/constants/paths';
 
 const mapStateToProps = (state: AppState) => ({
-  loading: state.auth.loading,
-  isAuthenticated: state.app.isAuthenticated,
+  isAuthenticated: state.auth.isAuthenticated,
 });
 const mapDispatchToProps = {
   register,
@@ -19,18 +18,16 @@ interface Props extends ConnectedProps<typeof connector> {}
 const _Register = (props: Props) => {
   // eslint-disable-next-line
   const [error, setError] = useState('');
-  const { register, loading } = props;
+  const { register } = props;
   const history = useHistory();
 
   const onFinish = async formData => {
-    if (!loading) {
-      try {
-        await register(formData);
-        message.success('Register successfully');
-        history.push(PATH.HOME);
-      } catch (error) {
-        setError(error.payload.message);
-      }
+    try {
+      await register(formData);
+      message.success('Register successfully');
+      history.push(PATH.HOME);
+    } catch (error) {
+      setError(error.payload.message);
     }
   };
   const onFinishFailed = errorInfo => {
diff --git a/src/components/Header/RightMenu.tsx b/src/components/Header/RightMenu.tsx
@@ -10,7 +10,7 @@ const { useBreakpoint } = Grid;
 
 const mapStateToProps = (state: AppState) => ({
   loading: state.auth.loading,
-  isAuthenticated: state.app.isAuthenticated,
+  isAuthenticated: state.auth.isAuthenticated,
 });
 const mapDispatchToProps = {
   logout,
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
 
 const mapStateToProps = (state: AppState) => ({
   loading: state.auth.loading,
-  isAuthenticated: state.app.isAuthenticated,
+  isAuthenticated: state.auth.isAuthenticated,
 });
 const mapDispatchToProps = {};
 
diff --git a/src/index.tsx b/src/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import 'src/assets/scss/index.scss';
 import 'antd/dist/antd.css';
-import App from './App/App';
+import { App } from './App/App';
 import reportWebVitals from './reportWebVitals';
 import { Provider } from 'react-redux';
 import { store } from './store';
diff --git a/src/reducer/index.ts b/src/reducer/index.ts
@@ -1,10 +1,8 @@
 import { combineReducers } from 'redux';
-import { AppReducer } from 'src/App/App.reducer';
 import { authReducer } from 'src/components/Auth/Auth.reducers';
 // import { ProductListReducer } from "src/pages/Product/ProductList/ProductList.reducer"
 // import { productItemReducer } from "src/pages/Product/ProductItem/ProductItem.reducer"
 
 export const RootReducer = combineReducers({
-  app: AppReducer,
   auth: authReducer,
 });
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`	`1`	`interface ActionRedux {`
`2`		`- types: string;`
	`2`	`+ type: string;`
`3`	`3`	`payload?: any;`
`4`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -18,3 +18,8 @@ interface IUser {`
`18`	`18`	`email?: string;`
`19`	`19`	`password: string;`
`20`	`20`	`}`
	`21`	`+`
	`22`	`+interface DispatchAuth {`
	`23`	`+ type: string;`
	`24`	`+ payload?: any;`
	`25`	`+}`