Code refactoring

Author: ryoldash

reactjs/src/components/LanguageSelect/index.tsx

@@ -3,15 +3,25 @@ import { Menu, Dropdown, Icon } from 'antd';
 import classNames from 'classnames';
 import './index.less';
 import 'famfamfam-flags/dist/sprite/famfamfam-flags.css';
+import UserStore from 'src/stores/userStore';
+import { inject } from 'mobx-react';
+import Stores from 'src/stores/storeIdentifier';
+import { L } from 'src/lib/abpUtility';
 
-class LanguageSelect extends React.Component {
+export interface ILanguageSelectProps {
+  userStore?: UserStore;
+}
+
+@inject(Stores.UserStore)
+class LanguageSelect extends React.Component<ILanguageSelectProps> {
   get languages() {
     return abp.localization.languages.filter(val => {
       return !val.isDisabled;
     });
   }
 
-  changeLanguage(languageName: string) {
+  async changeLanguage(languageName: string) {
+    await this.props.userStore!.changeLanguage(languageName);
     abp.utils.setCookieValue(
       'Abp.Localization.CultureName',
       languageName,
@@ -38,7 +48,7 @@ class LanguageSelect extends React.Component {
     );
     return (
       <Dropdown overlay={langMenu} placement="bottomRight">
-        <Icon type="global" className={classNames('dropDown', 'className')} title={'Diller'} />
+        <Icon type="global" className={classNames('dropDown', 'className')} title={L('Languages')} />
       </Dropdown>
     );
   }

reactjs/src/components/Router/ProtectedRoute.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Route, Redirect } from 'react-router-dom';
+import { isGranted } from 'src/lib/abpUtility';
 // import { Alert } from 'antd';
 // import { isGranted } from 'src/lib/abpUtility';
 
@@ -18,18 +19,16 @@ const ProtectedRoute = ({ path, component: Component, permission, render, ...res
             />
           );
 
-        // if (permission && !isGranted(permission)) {
-        //   console.log('Not authorized!');
-        //   return (
-        //     <Alert message="No permission." type="error" showIcon />
-        //     // <Redirect
-        //     //   to={{
-        //     //     pathname: '/error-403', //TODO: implement NotAuthorized component
-        //     //     state: { from: props.location },
-        //     //   }}
-        //     // />
-        //   );
-        // }
+        if (permission && !isGranted(permission)) {
+          return (
+            <Redirect
+              to={{
+                pathname: '/exception?type=401',
+                state: { from: props.location },
+              }}
+            />
+          );
+        }
 
         return Component ? <Component {...props} /> : render(props);
       }}

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

@@ -84,6 +84,15 @@ export const appRouters: any = [
     showInMenu: false,
     component: LoadableComponent(() => import('src/components/Logout')),
   },
+  {
+    path: '/exception',
+    permission: '',
+    title: 'exception',
+    name: 'exception',
+    icon: 'info-circle',
+    showInMenu: false,
+    component: LoadableComponent(() => import('src/scenes/Exception')),
+  },
 ];
 
 export const routers = [...userRouter, ...appRouters];

reactjs/src/scenes/Exception/index.tsx

@@ -1,17 +1,12 @@
-
-
-
-
 import error404 from 'src/images/404.png';
 import error401 from 'src/images/401.png';
 import error500 from 'src/images/500.png';
 import { Link } from 'react-router-dom';
 
 import './index.css';
-import  * as  React from 'react';
+import * as React from 'react';
 import { Row, Col, Avatar, Button } from 'antd';
 
-
 const exception = [
   {
     errorCode: '404',
@@ -97,7 +92,7 @@ class Exception extends React.Component<any, any> {
             <Button type={'primary'}>
               <Link
                 to={{
-                  pathname: '/dashboard',
+                  pathname: '/',
                 }}
               >
                 Back to Home

reactjs/src/stores/userStore.ts

@@ -1,4 +1,4 @@
-import {  action, observable } from 'mobx';
+import { action, observable } from 'mobx';
 
 import userService from 'src/services/user/userService';
 import { PagedResultDto } from 'src/services/dto/pagedResultDto';
@@ -9,12 +9,9 @@ import { CreateOrUpdateUserInput } from 'src/services/user/dto/createOrUpdateUse
 import { GetRoles } from 'src/services/user/dto/getRolesOuput';
 
 class UserStore {
-  @observable
-  users: PagedResultDto<GetUserOutput>;
-  @observable
-  editUser: CreateOrUpdateUserInput;
-  @observable
-  roles: GetRoles[]=[];
+  @observable users: PagedResultDto<GetUserOutput>;
+  @observable editUser: CreateOrUpdateUserInput;
+  @observable roles: GetRoles[] = [];
 
   @action
   async create(createUserInput: CreateOrUpdateUserInput) {
@@ -54,7 +51,7 @@ class UserStore {
   async get(entityDto: EntityDto) {
     var result = await userService.get(entityDto);
     console.log(result);
-    this.editUser=result;
+    this.editUser = result;
   }
 
   @action
@@ -69,14 +66,19 @@ class UserStore {
       password: '',
       id: 0,
     };
-    this.roles=[];
+    this.roles = [];
   }
+
   @action
   async getAll(pagedFilterAndSortedRequest: PagedFilterAndSortedRequest) {
     var result = await userService.getAll(pagedFilterAndSortedRequest);
     console.log(result);
     this.users = result;
   }
+
+  async changeLanguage(languageName: string) {
+    await userService.changeLanguage({ languageName: languageName });
+  }
 }
 
 export default UserStore;