MInor fix auth

Author: tduyng

server/db/db.json

@@ -1,9 +1,23 @@
 {
-  "users": [{
-    "id": "dfdmsqjfmsd",
-    "username": "usertest",
-    "email": "emailusertest@gmail.com",
-    "password": "123"
-  }],
+  "users": [
+    {
+      "id": "idtest",
+      "username": "tester",
+      "email": "tester@gmail.com",
+      "password": "123456"
+    },
+    {
+      "id": "d18eca47-e1fb-4259-b2b7-9cf2ead4ba29",
+      "username": "tienduy",
+      "email": "tienduy@gmail.com",
+      "password": "123456"
+    },
+    {
+      "id": "d3dda531-1893-4ffa-972e-c3d55541f7d5",
+      "username": "alan",
+      "email": "alan@gmail.com",
+      "password": "123456"
+    }
+  ],
   "products": []
 }

src/Api/user.api.ts

@@ -1,5 +1,5 @@
 import * as types from './App.constants';
-import { LOGIN_SUCCESS } from 'src/components/Auth/Login/Auth.constants';
+import { LOGIN_SUCCESS } from 'src/components/Auth/Auth.constants';
 import produce from 'immer';
 
 const initialState = {

src/App/App.reducer.ts

@@ -43,6 +43,9 @@ export const register = (payload: ReqRegister) => async dispatch => {
     await axios.post(`${URL.baseAPIUrl}/api/users`, newUser);
     localStorage.setItem('token', id);
     dispatch(actions.registerSuccess(newUser));
+    console.log('Resgister success', newUser);
+    const all = await axios.get(`${URL.baseAPIUrl}/api/users`);
+    console.log('All users', all);
     loadUser();
   } catch (error) {
     return dispatch(actions.registerFailed);

src/components/Auth/Auth.thunks.ts

@@ -17,7 +17,7 @@ const connector = connect(mapStateToProps, mapDispatchToProps);
 interface Props extends ConnectedProps<typeof connector> {}
 
 const _Login = (props: Props) => {
-  // const [formData, setFormData] = useState({ username: '', password: '' });
+  //  eslint-disable-next-line
   const [error, setError] = useState('');
   const { login, loading } = props;
   const history = useHistory();
@@ -27,7 +27,7 @@ const _Login = (props: Props) => {
     if (!loading) {
       const payload = { username, password };
       try {
-        const res = await login(payload);
+        await login(payload);
         message.success('Login successfully');
         history.push(PATH.HOME);
       } catch (error) {

src/components/Auth/Login.tsx

@@ -1,38 +1,35 @@
 import React, { useState } from 'react';
-import { Form, Input, Button } from 'antd';
+import { Form, Input, Button, message } from 'antd';
 import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons';
 import { connect, ConnectedProps } from 'react-redux';
 import { useHistory, Link } from 'react-router-dom';
-import { login } from './Register/Register.thunks';
+import { register } from './Auth.thunks';
 import { PATH } from 'src/constants/paths';
 
 const mapStateToProps = state => ({
   loading: state.loading,
   isAuthenticated: state.isAuthenticated,
 });
 const mapDispatchToProps = {
-  login,
+  register,
 };
 const connector = connect(mapStateToProps, mapDispatchToProps);
 interface Props extends ConnectedProps<typeof connector> {}
 
 const _Register = (props: Props) => {
-  // const [formData, setFormData] = useState({ username: '', password: '' });
+  // eslint-disable-next-line
   const [error, setError] = useState('');
-  const { login, loading } = props;
+  const { register, loading } = props;
   const history = useHistory();
 
   const onFinish = async formData => {
-    const { username, password } = formData;
     if (!loading) {
-      const payload = { username, password };
       try {
-        const res = await login(payload);
+        await register(formData);
+        message.success('Register successfully');
         history.push(PATH.HOME);
-        console.log('Success', res);
       } catch (error) {
         setError(error.payload.message);
-        console.log('Error', error.message);
       }
     }
   };
@@ -93,7 +90,7 @@ const _Register = (props: Props) => {
             <div className="login-form-register-link-wrapper">
               Or{' '}
               <Link to="/login" className="login-form-register-link">
-                LogIn now!
+                Log in now!
               </Link>
             </div>
           </Form.Item>

src/components/Auth/Register.tsx

@@ -2,7 +2,7 @@ export const PATH = {
   HOME: '/',
   PRODUCT: '/product',
   LOGIN: '/login',
-  SIGNUP: '/signup',
+  REGISTER: '/signup',
   CONTACT: '/contact',
   ABOUT: '/about',
   DEMO1: '/demo1',

src/constants/paths.ts

@@ -1,3 +1,3 @@
 export const URL = {
-  baseAPIUrl: 'http://locahost:5000/',
+  baseAPIUrl: 'http://localhost:5000',
 };

src/constants/urls.ts

@@ -1,6 +1,6 @@
 import { combineReducers } from 'redux';
 import { AppReducer } from 'src/App/App.reducer';
-import { loginReducer } from 'src/components/Auth/Login/Auth.reducers';
+import { loginReducer } from 'src/components/Auth/Auth.reducers';
 // import { ProductListReducer } from "src/pages/Product/ProductList/ProductList.reducer"
 // import { productItemReducer } from "src/pages/Product/ProductItem/ProductItem.reducer"
 

src/reducer/index.ts

@@ -3,6 +3,7 @@ import { Route, Switch } from 'react-router-dom';
 import { PATH } from 'src/constants/paths';
 import { Loading } from 'src/components/Loading';
 const LoginPage = lazy(() => import('src/pages/AuthPages/LoginPage'));
+const RegisterPage = lazy(() => import('src/pages/AuthPages/RegisterPage'));
 
 export const AuthRoutes = () => {
   return (
@@ -15,6 +16,14 @@ export const AuthRoutes = () => {
           </Suspense>
         )}
       />
+      <Route
+        path={PATH.REGISTER}
+        component={() => (
+          <Suspense fallback={<Loading />}>
+            <RegisterPage />
+          </Suspense>
+        )}
+      />
     </Switch>
   );
 };