Re-structure components

Author: tduyng

src/App/App.reducer.ts

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

src/components/Login/Login.actions.ts …c/components/Auth/Login/Login.actions.tssrc/components/Login/Login.actions.ts renamed to src/components/Auth/Login/Login.actions.ts src/components/Login/Login.actions.ts renamed to src/components/Auth/Login/Login.actions.ts

@@ -3,6 +3,7 @@ import produce from 'immer';
 
 const initialState = {
   loading: false,
+  isAuthenticated: false,
 };
 
 export const loginReducer = (state = initialState, action) =>
@@ -13,6 +14,7 @@ export const loginReducer = (state = initialState, action) =>
         break;
       case types.LOGIN_SUCCESS:
         draft.loading = false;
+        draft.isAuthenticated = true;
         break;
       case types.LOGIN_FAILED:
         draft.loading = false;

src/components/Login/Login.constants.ts …components/Auth/Login/Login.constants.tssrc/components/Login/Login.constants.ts renamed to src/components/Auth/Login/Login.constants.ts src/components/Login/Login.constants.ts renamed to src/components/Auth/Login/Login.constants.ts

@@ -2,12 +2,13 @@ import React, { useState } from 'react';
 import { Form, Input, Button, Checkbox } from 'antd';
 import { UserOutlined, LockOutlined } from '@ant-design/icons';
 import { connect, ConnectedProps } from 'react-redux';
+import { useHistory, Link } from 'react-router-dom';
 import { login } from './Login.thunks';
-import { useHistory } from 'react-router-dom';
 import { PATH } from 'src/constants/paths';
 
 const mapStateToProps = state => ({
   loading: state.loading,
+  isAuthenticated: state.isAuthenticated,
 });
 const mapDispatchToProps = {
   login,
@@ -26,10 +27,12 @@ const _Login = (props: Props) => {
     if (!loading) {
       const payload = { username, password };
       try {
-        await login(payload);
+        const res = await login(payload);
         history.push(PATH.HOME);
+        console.log('Success', res);
       } catch (error) {
         setError(error.payload.message);
+        console.log('Error', error.message);
       }
     }
   };
@@ -74,9 +77,9 @@ const _Login = (props: Props) => {
               <Checkbox>Remember me</Checkbox>
             </Form.Item>
 
-            <a className="login-form-forgot" href="/">
+            <Link className="login-form-forgot" to="/forgotpassword">
               Forgot password
-            </a>
+            </Link>
           </Form.Item>
           <Form.Item>
             <Button
@@ -88,9 +91,9 @@ const _Login = (props: Props) => {
             </Button>
             <div className="login-form-register-link-wrapper">
               Or{' '}
-              <a href="/" className="login-form-register-link">
+              <Link to="/signup" className="login-form-register-link">
                 Register now!
-              </a>
+              </Link>
             </div>
           </Form.Item>
         </Form>

src/components/Login/Login.reducers.ts …/components/Auth/Login/Login.reducers.tssrc/components/Login/Login.reducers.ts renamed to src/components/Auth/Login/Login.reducers.ts src/components/Login/Login.reducers.ts renamed to src/components/Auth/Login/Login.reducers.ts

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { Form, Input, Button, Checkbox } from 'antd';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
+import { connect, ConnectedProps } from 'react-redux';
+import { useHistory, Link } from 'react-router-dom';
+import { login } from './Login.thunks';
+import { PATH } from 'src/constants/paths';
+
+const mapStateToProps = state => ({
+  loading: state.loading,
+  isAuthenticated: state.isAuthenticated,
+});
+const mapDispatchToProps = {
+  login,
+};
+const connector = connect(mapStateToProps, mapDispatchToProps);
+interface Props extends ConnectedProps<typeof connector> {}
+
+const _Register = (props: Props) => {
+  // const [formData, setFormData] = useState({ username: '', password: '' });
+  const [error, setError] = useState('');
+  const { login, 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);
+        history.push(PATH.HOME);
+        console.log('Success', res);
+      } catch (error) {
+        setError(error.payload.message);
+        console.log('Error', error.message);
+      }
+    }
+  };
+  return (
+    <div className="container">
+      <div className="login-form-wrap">
+        <h1 className="login-form-title">
+          <img
+            alt=" logo "
+            src=" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg "
+          />
+          SIGNUP
+        </h1>
+        <Form
+          name="login_form"
+          className="login-form"
+          initialValues={{ remember: true }}
+          onFinish={onFinish}
+        >
+          <Form.Item
+            name="username"
+            rules={[{ required: true, message: 'Please input your username!' }]}
+          >
+            <Input
+              prefix={<UserOutlined className="site-form-item-icon" />}
+              placeholder="Username"
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="password"
+            rules={[{ required: true, message: 'Please input your Password!' }]}
+          >
+            <Input
+              prefix={<LockOutlined className="site-form-item-icon" />}
+              type="password"
+              placeholder="Password"
+            />
+          </Form.Item>
+          <Form.Item>
+            <Button
+              type="primary"
+              htmlType="submit"
+              className="login-form-button"
+            >
+              Sign Up
+            </Button>
+            <div className="login-form-register-link-wrapper">
+              Or{' '}
+              <Link to="/login" className="login-form-register-link">
+                LogIn now!
+              </Link>
+            </div>
+          </Form.Item>
+        </Form>
+      </div>
+    </div>
+  );
+};
+const Register = connector(_Register);
+export { Register };

src/components/Login/Login.thunks.ts src/components/Auth/Login/Login.thunks.tssrc/components/Login/Login.thunks.ts renamed to src/components/Auth/Login/Login.thunks.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Login } from 'src/components/Login';
+import { Login } from 'src/components/Auth/Login';
 import { MainLayout } from 'src/layouts/MainLayout';
 
 const _LoginPage = () => {

src/components/Login/index.tsx src/components/Auth/Login/index.tsxsrc/components/Login/index.tsx renamed to src/components/Auth/Login/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Register } from 'src/components/Auth/Register';
+import { MainLayout } from 'src/layouts/MainLayout';
+
+const _RegisterPage = () => {
+  return (
+    <MainLayout>
+      <Register />
+    </MainLayout>
+  );
+};
+
+const RegisterPage = React.memo(_RegisterPage);
+export default RegisterPage;