Skip to content

Commit 7241bfd

Browse files
ryoldashryoldash
committed
Code refactoring
1 parent a1850cc commit 7241bfd

File tree

20 files changed

+429
-223
lines changed

20 files changed

+429
-223
lines changed

‎reactjs/package-lock.json

Lines changed: 48 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎reactjs/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"@types/moment": "^2.13.0",
88
"@types/moment-timezone": "^0.5.9",
99
"@types/react-document-title": "^2.0.3",
10+
"@types/react-loadable": "^5.4.2",
1011
"@types/recharts": "^1.1.1",
1112
"abp-web-resources": "^3.8.2",
1213
"antd": "^3.10.3",
@@ -23,6 +24,7 @@
2324
"react-app-rewired": "^1.6.2",
2425
"react-document-title": "^2.0.3",
2526
"react-dom": "^16.6.0",
27+
"react-loadable": "^5.5.0",
2628
"react-router-dom": "^4.3.1",
2729
"react-scripts-ts": "3.1.0",
2830
"recharts": "^1.4.1",

‎reactjs/src/App.tsx

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,30 @@
11
import * as React from 'react';
22
import './App.css';
3-
import { withRouter, Switch, Route } from 'react-router-dom';
4-
import Layout from './components/Layout';
5-
import Login from './scenes/Login';
63
import { inject } from 'mobx-react';
74
import SignalRAspNetCoreHelper from 'src/lib/signalRAspNetCoreHelper';
85
import SessionStore from './stores/sessionStore';
96
import Stores from './stores/storeIdentifier';
7+
import Router from 'src/components/Router';
108

119
export interface IAppProps {
12-
sessionStore: SessionStore;
10+
sessionStore?: SessionStore;
1311
}
1412

1513
@inject(Stores.SessionStore)
1614
class App extends React.Component<IAppProps> {
17-
async componentDidMount() {
18-
await this.props.sessionStore.getCurrentLoginInformations();
15+
async componentWillMount() {
16+
await this.props.sessionStore!.getCurrentLoginInformations();
1917

20-
if (!!this.props.sessionStore.currentLogin.user && this.props.sessionStore.currentLogin.application.features['SignalR']) {
21-
if (this.props.sessionStore.currentLogin.application.features['SignalR.AspNetCore']) {
18+
if (!!this.props.sessionStore!.currentLogin.user && this.props.sessionStore!.currentLogin.application.features['SignalR']) {
19+
if (this.props.sessionStore!.currentLogin.application.features['SignalR.AspNetCore']) {
2220
SignalRAspNetCoreHelper.initSignalR();
2321
}
2422
}
2523
}
2624

2725
public render() {
28-
return (
29-
<Switch>
30-
<Route path="/dashboard" component={Layout} />
31-
<Route path="/users" component={Layout} />
32-
<Route path="/tenants" component={Layout} />
33-
<Route path="/roles" component={Layout} />
34-
<Route path="/about" component={Layout} />
35-
<Route path="/login" component={Login} />
36-
<Route path="/" component={Login} />
37-
</Switch>
38-
);
26+
return <Router />;
3927
}
4028
}
4129

42-
export default withRouter<any>(App);
30+
export default App;

‎reactjs/src/components/Layout/index.css renamed to ‎reactjs/src/components/Layout/AppLayout.css

File renamed without changes.

‎reactjs/src/components/Layout/index.tsx renamed to ‎reactjs/src/components/Layout/AppLayout.tsx

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import * as React from 'react';
22
import { Layout } from 'antd';
3-
import './index.css';
4-
import { Switch, withRouter } from 'react-router';
3+
import './AppLayout.css';
4+
import { Switch, Redirect } from 'react-router-dom';
55
import Header from 'src/components/Header';
66
import SiderMenu from 'src/components/SiderMenu';
77
import Footer from 'src/components/Footer';
88
import DocumentTitle from 'react-document-title';
9-
import { appRouters } from 'src/components/Router/router.config';
10-
import { L } from 'src/lib/abpUtility';
119
import ProtectedRoute from 'src/components/Router/ProtectedRoute';
10+
import utils from 'src/utils/utils';
11+
import { appRouters } from '../Router/router.config';
1212

1313
const { Content } = Layout;
1414

@@ -27,23 +27,16 @@ class AppLayout extends React.Component<any> {
2727
this.setState({ collapsed });
2828
};
2929

30-
getPageTitle = (pathname: string) => {
31-
const route = appRouters.filter(route => route.path === pathname);
32-
const localizedAppName = L('AppName');
33-
if (!route) {
34-
return localizedAppName;
35-
}
36-
37-
return L(route[0].title) + ' | ' + localizedAppName;
38-
};
39-
4030
render() {
31+
debugger;
4132
const {
4233
history,
4334
location: { pathname },
4435
} = this.props;
36+
4537
const { path } = this.props.match;
4638
const { collapsed } = this.state;
39+
4740
const layout = (
4841
<Layout style={{ minHeight: '100vh' }}>
4942
<SiderMenu path={path} onCollapse={this.onCollapse} history={history} collapsed={collapsed} />;
@@ -53,9 +46,13 @@ class AppLayout extends React.Component<any> {
5346
</Layout.Header>
5447
<Content style={{ margin: '0 16px' }}>
5548
<Switch>
56-
{appRouters.map((route, index) => {
57-
return <ProtectedRoute key={index} path={route.path} component={route.component} permission={route.permission} />;
58-
})}
49+
{appRouters
50+
.filter((item: any) => !item.isLayout)
51+
.map((route: any, index: any) => (
52+
<ProtectedRoute key={index} path={route.path} component={route.component} permission={route.permission} />
53+
))}
54+
55+
<Redirect from="/" to="/dashboard" />
5956
</Switch>
6057
</Content>
6158
<Layout.Footer style={{ textAlign: 'center' }}>
@@ -65,8 +62,8 @@ class AppLayout extends React.Component<any> {
6562
</Layout>
6663
);
6764

68-
return <DocumentTitle title={this.getPageTitle(pathname)}>{layout}</DocumentTitle>;
65+
return <DocumentTitle title={utils.getPageTitle(pathname)}>{layout}</DocumentTitle>;
6966
}
7067
}
7168

72-
export default withRouter<any>(AppLayout);
69+
export default AppLayout;

‎reactjs/src/components/Layout/UserLayout.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import * as React from 'react';
2+
import DocumentTitle from 'react-document-title';
3+
import { Switch, Route, Redirect } from 'react-router-dom';
4+
import utils from 'src/utils/utils';
5+
// import { userRouter } from '../Router/router.config';
6+
// import Login from 'src/scenes/Login';
7+
import { userRouter } from '../Router/router.config';
8+
9+
class UserLayout extends React.Component<any> {
10+
render() {
11+
debugger;
12+
const {
13+
location: { pathname },
14+
} = this.props;
15+
return (
16+
<DocumentTitle title={utils.getPageTitle(pathname)}>
17+
<Switch>
18+
{userRouter
19+
.filter((item: any) => !item.isLayout)
20+
.map((item: any, index: number) => (
21+
<Route key={index} path={item.path} component={item.component} exact={item.exact} />
22+
))}
23+
24+
<Redirect from="/user" to="/user/login" />
25+
</Switch>
26+
</DocumentTitle>
27+
);
28+
}
29+
}
30+
31+
export default UserLayout;

‎reactjs/src/components/Loadable/index.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import * as Loadable from 'react-loadable';
2+
import Loading from './../Loading/index';
3+
4+
const LoadableComponent = (component: any) =>
5+
Loadable({
6+
loader: component,
7+
loading: Loading,
8+
});
9+
10+
export default LoadableComponent;

‎reactjs/src/components/Router/ProtectedRoute.tsx

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,37 @@
11
import * as React from 'react';
22
import { Route, Redirect } from 'react-router-dom';
3-
import { Alert } from 'antd';
4-
import { isGranted } from 'src/lib/abpUtility';
3+
// import { Alert } from 'antd';
4+
// import { isGranted } from 'src/lib/abpUtility';
55

66
const ProtectedRoute = ({ path, component: Component, permission, render, ...rest }: any) => {
7+
debugger;
78
return (
89
<Route
910
{...rest}
1011
render={props => {
12+
debugger;
1113
if (!abp.session.userId)
1214
return (
1315
<Redirect
1416
to={{
15-
pathname: '/login',
17+
pathname: '/user/login',
1618
state: { from: props.location },
1719
}}
1820
/>
1921
);
2022

21-
if (permission && !isGranted(permission)) {
22-
console.log('Not authorized!');
23-
return (
24-
<Alert message="No permission." type="error" showIcon />
25-
// <Redirect
26-
// to={{
27-
// pathname: '/error-403', //TODO: implement NotAuthorized component
28-
// state: { from: props.location },
29-
// }}
30-
// />
31-
);
32-
}
23+
// if (permission && !isGranted(permission)) {
24+
// console.log('Not authorized!');
25+
// return (
26+
// <Alert message="No permission." type="error" showIcon />
27+
// // <Redirect
28+
// // to={{
29+
// // pathname: '/error-403', //TODO: implement NotAuthorized component
30+
// // state: { from: props.location },
31+
// // }}
32+
// // />
33+
// );
34+
// }
3335

3436
return Component ? <Component {...props} /> : render(props);
3537
}}

‎reactjs/src/components/Router/index.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import * as React from 'react';
2+
import { Route, Switch } from 'react-router-dom';
3+
import ProtectedRoute from './ProtectedRoute';
4+
import utils from 'src/utils/utils';
5+
6+
const Router = () => {
7+
const UserLayout = utils.getRoute('/user').component;
8+
const AppLayout = utils.getRoute('/').component;
9+
10+
return (
11+
<Switch>
12+
<Route path="/user" render={(props: any) => <UserLayout {...props} />} />
13+
<ProtectedRoute path="/" render={(props: any) => <AppLayout {...props} exact />} />
14+
</Switch>
15+
);
16+
};
17+
18+
export default Router;

0 commit comments

Comments
 (0)