Code refactoring

Author: ryoldash

reactjs/src/appInitializer.ts

@@ -3,6 +3,7 @@ import { Col, Icon, Avatar, Menu, Dropdown, Badge } from 'antd';
 import { Link } from 'react-router-dom';
 import LanguageSelect from '../LanguageSelect';
 import './index.css';
+import { L } from 'src/lib/abpUtility';
 
 export interface IHeaderProps {
   collapsed?: any;
@@ -15,7 +16,7 @@ const userDropdownMenu = (
       <Icon type="logout" />
       <span>
         {' '}
-        <Link to="/login">Logout</Link>
+        <Link to="/logout">{L('Logout')}</Link>
       </span>
     </Menu.Item>
   </Menu>

reactjs/src/components/Header/index.tsx

@@ -28,7 +28,6 @@ class AppLayout extends React.Component<any> {
   };
 
   render() {
-    debugger;
     const {
       history,
       location: { pathname },

reactjs/src/components/Layout/AppLayout.tsx

@@ -2,13 +2,10 @@ import * as React from 'react';
 import DocumentTitle from 'react-document-title';
 import { Switch, Route, Redirect } from 'react-router-dom';
 import utils from 'src/utils/utils';
-// import { userRouter } from '../Router/router.config';
-// import Login from 'src/scenes/Login';
 import { userRouter } from '../Router/router.config';
 
 class UserLayout extends React.Component<any> {
   render() {
-    debugger;
     const {
       location: { pathname },
     } = this.props;

reactjs/src/components/Layout/UserLayout.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import AuthenticationStore from 'src/stores/authenticationStore';
+import { inject } from 'mobx-react';
+import Stores from 'src/stores/storeIdentifier';
+
+export interface ILogoutProps {
+  authenticationStore?: AuthenticationStore;
+}
+
+@inject(Stores.AuthenticationStore)
+class Logout extends React.Component<ILogoutProps> {
+  componentDidMount() {
+    this.props.authenticationStore!.logout();
+    window.location.href = '/';
+  }
+
+  render() {
+    return null;
+  }
+}
+
+export default Logout;

reactjs/src/components/Logout/index.tsx

@@ -4,12 +4,10 @@ import { Route, Redirect } from 'react-router-dom';
 // import { isGranted } from 'src/lib/abpUtility';
 
 const ProtectedRoute = ({ path, component: Component, permission, render, ...rest }: any) => {
-  debugger;
   return (
     <Route
       {...rest}
       render={props => {
-        debugger;
         if (!abp.session.userId)
           return (
             <Redirect

reactjs/src/components/Router/ProtectedRoute.tsx

@@ -7,12 +7,14 @@ export const userRouter: any = [
     title: 'User',
     component: LoadableComponent(() => import('src/components/Layout/UserLayout')),
     isLayout: true,
+    showInMenu: false,
   },
   {
     path: '/user/login',
     name: 'login',
     title: 'LogIn',
     component: LoadableComponent(() => import('src/scenes/Login')),
+    showInMenu: false,
   },
 ];
 
@@ -26,13 +28,15 @@ export const appRouters: any = [
     icon: 'home',
     component: LoadableComponent(() => import('src/components/Layout/AppLayout')),
     isLayout: true,
+    showInMenu: false,
   },
   {
     path: '/dashboard',
     name: 'dashboard',
     permission: '',
     title: 'Dashboard',
     icon: 'home',
+    showInMenu: true,
     component: LoadableComponent(() => import('src/scenes/Dashboard')),
   },
   {
@@ -41,6 +45,7 @@ export const appRouters: any = [
     title: 'Users',
     name: 'user',
     icon: 'user',
+    showInMenu: true,
     component: LoadableComponent(() => import('src/scenes/Users')),
   },
   {
@@ -49,6 +54,7 @@ export const appRouters: any = [
     title: 'Roles',
     name: 'role',
     icon: 'tags',
+    showInMenu: true,
     component: LoadableComponent(() => import('src/scenes/Roles')),
   },
   {
@@ -57,6 +63,7 @@ export const appRouters: any = [
     title: 'Tenants',
     name: 'tenant',
     icon: 'appstore',
+    showInMenu: true,
     component: LoadableComponent(() => import('src/scenes/Tenants')),
   },
   {
@@ -65,8 +72,18 @@ export const appRouters: any = [
     title: 'About',
     name: 'about',
     icon: 'info-circle',
+    showInMenu: true,
     component: LoadableComponent(() => import('src/scenes/About')),
   },
+  {
+    path: '/logout',
+    permission: '',
+    title: 'Logout',
+    name: 'logout',
+    icon: 'info-circle',
+    showInMenu: false,
+    component: LoadableComponent(() => import('src/components/Logout')),
+  },
 ];
 
 export const routers = [...userRouter, ...appRouters];

reactjs/src/components/Router/router.config.ts

@@ -30,7 +30,7 @@ const SiderMenu = (props: ISiderMenuProps) => {
 
       <Menu theme="dark" mode="inline">
         {appRouters
-          .filter((item: any) => !item.isLayout)
+          .filter((item: any) => !item.isLayout && item.showInMenu)
           .map((route: any, index: number) => {
             if (route.permission && !isGranted(route.permission)) return null;
 

reactjs/src/components/SiderMenu/index.tsx

@@ -48,9 +48,7 @@ class Login extends React.Component<ILoginProps, any> {
     e.preventDefault();
     await this.props.form.validateFields(async (err: any, values: any) => {
       if (!err) {
-        debugger;
         await this.props.authenticationStore!.login(values);
-        debugger;
         sessionStorage.setItem('rememberMe', this.state.rememberMe ? '1' : '0');
         const { state } = this.props.location;
         window.location = state ? state.from.pathname : '/';

reactjs/src/scenes/Login/index.tsx

@@ -39,7 +39,6 @@ http.interceptors.response.use(
         title: L('LoginFailed'),
         content: error.response.data.error.message,
       });
-      console.log(`title: Login Failed content:$`);
     } else if (!error.response) {
       Modal.error({ content: L('UnknownError') });
     }