Update profile pages

Author: tduyng

src/@types/user.d.ts

@@ -17,6 +17,7 @@ interface IUser {
   username: string;
   email?: string;
   password: string;
+  accessToken?: string;
 }
 
 interface DispatchAuth {

src/App/App.tsx

@@ -15,13 +15,13 @@ const _App = (props: Props) => {
   useEffect(() => {
     const { loadUser, logout } = props;
     // check for token in LS
-    if (localStorage.token) {
+    if (localStorage.user) {
       loadUser();
     }
 
     // log user out from all tabs if they log out in one tab
     window.addEventListener('storage', () => {
-      if (!localStorage.token) logout();
+      if (!localStorage.user) logout();
     });
   }, []);
   return <Routes />;

src/assets/scss/_footer.scss

@@ -4,10 +4,10 @@
   padding: 20px 0 !important;
   text-align: center;
   height: $heightFooter;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  right: 0;
+  // position: absolute;
+  // left: 0;
+  // bottom: 0;
+  // right: 0;
 }
 .footer .footer-logo {
   font-size: 1.2rem;

src/assets/scss/_header.scss

@@ -1,5 +1,5 @@
 .ant-layout-header {
-  position: fixed;
+  position: relative;
   left: 0;
   right: 0;
   z-index: 9;
@@ -13,22 +13,22 @@
 .navbar-section {
   border-bottom: solid 1px #e8e8e8;
   overflow: auto;
-  box-shadow: 0 0 30px #f3f1f1;
+  box-shadow: 0 0 2px #f3f1f1;
 }
 .navbar {
   display: flex;
   align-items: center;
-  padding: 0 10px;
+  padding: 0;
 
   .ant-menu-item {
-    padding: 0px 5px;
+    padding: 0px 2px;
   }
   .ant-menu-submenu-title {
-    padding: 10px 20px;
+    padding: 4px;
   }
   .ant-menu-item a,
   .ant-menu-submenu-title a {
-    padding: 10px 15px;
+    padding: 10px 0px;
   }
   .ant-menu-horizontal {
     border-bottom: none;

src/assets/scss/index.scss

@@ -47,7 +47,6 @@ img {
 .ant-layout-content {
   background-color: #fff;
   min-height: calc(100vh - #{$heightFooter} - #{$heightHeader}) !important;
-  padding-bottom: 2rem;
   overflow: auto;
 }
 .ant-layout.main-layout {

src/components/Auth/Auth.reducers.ts

@@ -5,11 +5,12 @@ let userType: IUser = {
   username: '',
   email: undefined,
   password: '',
+  accessToken: '',
 };
 const initialState = {
   loading: true,
   isAuthenticated: false,
-  token: localStorage.getItem('token'),
+  token: null,
   user: userType,
 };
 
@@ -22,22 +23,30 @@ export const authReducer = (state = initialState, action: ActionRedux) => {
         isAuthenticated: true,
         loading: false,
         token: payload.id,
-        user: payload.user,
+        user: payload,
       };
     case types.LOGIN_SUCCESS:
     case types.REGISTER_SUCCESS:
-      localStorage.setItem('token', payload.id);
+      localStorage.setItem('user', JSON.stringify(payload));
       return {
         ...state,
         ...payload,
         isAuthenticated: true,
         loading: false,
+        user: payload,
       };
     case types.LOGIN_FAILED:
     case types.AUTH_ERROR:
-    case types.LOGOUT:
     case types.REGISTER_FAILED:
-      localStorage.removeItem('token');
+      localStorage.removeItem('user');
+      return {
+        ...state,
+        token: null,
+        isAuthenticated: false,
+        loading: false,
+      };
+    case types.LOGOUT:
+      localStorage.removeItem('user');
       return {
         ...state,
         token: null,

src/components/Auth/Auth.thunks.ts

@@ -4,60 +4,64 @@ import * as actions from './Auth.actions';
 import { v4 as uuid } from 'uuid';
 
 export const loadUser = () => async dispatch => {
-  const tokenId = localStorage.getItem('token');
+  const userJson = localStorage.getItem('user') || '{}';
+  const user = JSON.parse(userJson) as IUser;
+  const id = user.id;
   console.log('Load user running!');
-  if (!tokenId) {
-    return dispatch(actions.authError);
+  console.log('User from loadUser', user);
+  if (!id) {
+    return dispatch(actions.authError());
   }
   try {
-    const res = await axios.get(`${URL.baseAPIUrl}/api/users/${tokenId}`);
+    const res = await axios.get(`${URL.baseAPIUrl}/api/users/${id}`);
     console.log('Response', res);
     console.log('Hey loadUser function triggered');
     if (res) {
       return dispatch(actions.userLoaded(res.data));
     }
-    dispatch(actions.authError);
+    return dispatch(actions.authError());
   } catch (error) {
     console.log('Some error loadUser running', error);
-    return dispatch(actions.authError);
+    return dispatch(actions.authError());
   }
 };
 
 export const login = (payload: ReqLogin) => async dispatch => {
   const { username, password } = payload;
+  console.log('Login triggered');
   try {
     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);
+    console.log('user found  from login', user);
     if (user && user.password === password) {
       dispatch(actions.loginSuccess(user));
       dispatch(loadUser());
       return;
-    } else {
-      console.log('Invalid credentials');
-      return dispatch(actions.loginFailed);
     }
+    return dispatch(actions.loginFailed());
   } catch (error) {
-    return dispatch(actions.loginFailed);
+    return dispatch(actions.loginFailed());
   }
 };
 
 export const register = (payload: ReqLogin) => async dispatch => {
+  console.log('Register triggered');
   try {
     const id = uuid();
-    const newUser = { id, ...payload };
+    const accessToken = id;
+
+    const newUser = { ...payload, id, accessToken };
     await axios.post(`${URL.baseAPIUrl}/api/users`, newUser);
     dispatch(actions.registerSuccess(newUser));
     console.log('Resgister success', newUser);
-    const all = await axios.get(`${URL.baseAPIUrl}/api/users`);
-    console.log('All users', all);
     dispatch(loadUser());
   } catch (error) {
-    return dispatch(actions.registerFailed);
+    return dispatch(actions.registerFailed());
   }
 };
 export const logout = () => async dispatch => {
-  return dispatch(actions.logoutSuccess);
+  console.log('Logout triggered');
+  return dispatch(actions.logoutSuccess());
 };

src/components/Auth/Login.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Form, Input, Button, Checkbox, message } from 'antd';
 import { UserOutlined, LockOutlined } from '@ant-design/icons';
 import { connect, ConnectedProps } from 'react-redux';
-import { useHistory, Link } from 'react-router-dom';
+import { useHistory, Link, Redirect } from 'react-router-dom';
 import { login } from './Auth.thunks';
 import { PATH } from 'src/constants/paths';
 
@@ -18,22 +18,22 @@ interface Props extends ConnectedProps<typeof connector> {}
 const _Login = (props: Props) => {
   //  eslint-disable-next-line
   const [error, setError] = useState('');
-  const { login } = props;
-  const history = useHistory();
+  const { login, isAuthenticated } = props;
 
   const onFinish = async formData => {
     const { username, password } = formData;
     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);
     }
   };
 
+  if (isAuthenticated) {
+    return <Redirect to={PATH.HOME} />;
+  }
   return (
     <div className="container">
       <div className="login-form-wrap">

src/components/Auth/Profile.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import { Card, Avatar, Row, Col } from 'antd';
+import {
+  EditOutlined,
+  EllipsisOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
+const { Meta } = Card;
+
+const mapStateToProps = (state: AppState) => ({
+  user: state.auth.user,
+});
+
+const mapDispatchToProps = {};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+interface Props extends ConnectedProps<typeof connector> {}
+const _Profile = (props: Props) => {
+  const { user } = props;
+  return (
+    <div className="mt-1">
+      <Row>
+        <Col span={8} offset={10}>
+          <Card
+            style={{ width: 350 }}
+            cover={
+              <img
+                alt="example"
+                src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
+              />
+            }
+            actions={[
+              <SettingOutlined key="setting" />,
+              <EditOutlined key="edit" />,
+              <EllipsisOutlined key="ellipsis" />,
+            ]}
+          >
+            <Meta
+              avatar={
+                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+              }
+              title={user.username}
+              description="User profile"
+            ></Meta>
+            <div className="additional">
+              <p></p>
+              <Row>
+                <Col offset={4}>
+                  <small>Email: </small>
+                </Col>
+
+                <Col offset={4}>
+                  <strong>{user.email}</strong>
+                </Col>
+              </Row>
+              <Row>
+                <Col offset={4}>
+                  <small>Password: </small>
+                </Col>
+
+                <Col offset={2}>
+                  <strong>{user.password}</strong>
+                </Col>
+              </Row>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+      ,
+    </div>
+  );
+};
+
+export const Profile = connector(_Profile);

src/components/Auth/Register.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 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 { useHistory, Link, Redirect } from 'react-router-dom';
 import { register } from './Auth.thunks';
 import { PATH } from 'src/constants/paths';
 
@@ -18,21 +18,23 @@ interface Props extends ConnectedProps<typeof connector> {}
 const _Register = (props: Props) => {
   // eslint-disable-next-line
   const [error, setError] = useState('');
-  const { register } = props;
+  const { register, isAuthenticated } = props;
   const history = useHistory();
 
   const onFinish = async formData => {
     try {
       await register(formData);
-      message.success('Register successfully');
-      history.push(PATH.HOME);
     } catch (error) {
       setError(error.payload.message);
     }
   };
   const onFinishFailed = errorInfo => {
     console.log('Failed:', errorInfo);
   };
+
+  if (isAuthenticated) {
+    return <Redirect to={PATH.HOME} />;
+  }
   return (
     <div className="container">
       <div className="login-form-wrap">