router configuration

Author: sametkabay

reactjs/src/App.tsx

@@ -2,25 +2,15 @@ import * as React from "react";
 import "./App.css";
 
 import * as abpUserConfiguration from "./services/abpUserConfigurationService";
-import { Switch, Route, withRouter } from "react-router-dom";
-import Login from "./scenes/Login";
+import { withRouter } from "react-router-dom";
+import Layout from "./scenes/Layout";
 class App extends React.Component {
   componentDidMount() {
     console.log(abpUserConfiguration.initialize());
   }
   public render() {
     return (
-      <Switch>
-        <Route path="/login" component={Login} />
-        <Route path="/" component={Login} />
-        {/* <PrivateRouter path="/activity" component={Activity} />
-        <PublicRouter path="/login" component={Login} />
-        <PublicRouter path="/forgetPassword" component={ForgetPassword} />
-        <PrivateRouter path="/profile/:id" component={Profile} />
-        <PrivateRouter path="/pushNotification" component={PushNotification} />
-        <PublicRouter path="/" component={Login} />
-        <PrivateRouter path="/activity/create" component={Profile} /> */}
-      </Switch>
+      <Layout />
     );
   }
 }

reactjs/src/scenes/Layout/index.tsx

@@ -1,62 +1,73 @@
 import * as React from "react";
 import { Layout, Menu, Icon } from "antd";
 import "./index.css";
+import { Route, Switch, withRouter } from 'react-router';
+import Logins from '../Login';
+import Users from '../Users';
+import Tenants from '../Tenants';
+import Rules from '../Rules';
 
 const { Header, Sider, Content } = Layout;
 
-class SiderDemo extends React.Component {
+class LayoutComponent extends React.Component<any> {
   state = {
-    collapsed: false
+    collapsed: false,
   };
 
   toggle = () => {
     this.setState({
-      collapsed: !this.state.collapsed
+      collapsed: !this.state.collapsed,
     });
-  };
+  }
 
   render() {
     return (
       <Layout>
-        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
+        <Sider
+          trigger={null}
+          collapsible
+          collapsed={this.state.collapsed}
+        >
           <div className="logo" />
-          <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
+          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
             <Menu.Item key="1">
-              <Icon type="user" />
-              <span>nav 1</span>
+              <Icon type="home" />
+              <span onClick={() => this.props.history.push("/")}>Home</span>
             </Menu.Item>
             <Menu.Item key="2">
               <Icon type="video-camera" />
-              <span>nav 2</span>
+              <span onClick={() => this.props.history.push("/tenants")}>Tenants</span>
             </Menu.Item>
             <Menu.Item key="3">
+              <Icon type="user" />
+              <span onClick={() => this.props.history.push("/users")}>Users</span>
+            </Menu.Item>
+            <Menu.Item key="4">
               <Icon type="upload" />
-              <span>nav 3</span>
+              <span onClick={() => this.props.history.push("/rules")}>Rules</span>
             </Menu.Item>
           </Menu>
         </Sider>
         <Layout>
-          <Header style={{ background: "#fff", padding: 0 }}>
+          <Header style={{ background: '#fff', padding: 0 }}>
             <Icon
               className="trigger"
-              type={this.state.collapsed ? "menu-unfold" : "menu-fold"}
+              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
               onClick={this.toggle}
             />
           </Header>
-          <Content
-            style={{
-              margin: "24px 16px",
-              padding: 24,
-              background: "#fff",
-              minHeight: 280
-            }}
-          >
-            Content
+          <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
+            <Switch>
+              <Route path="/login" component={Logins} />
+              <Route path="/users" component={Users} />
+              <Route path="/tenants" component={Tenants} />
+              <Route path="/rules" component={Rules} />
+            </Switch>
           </Content>
         </Layout>
       </Layout>
     );
   }
 }
 
-export default SiderDemo;
+export default withRouter<any>(LayoutComponent);

reactjs/src/scenes/Login/index.tsx

@@ -66,7 +66,6 @@ class Login extends React.Component<any, any> {
                     rules: [
                       {
                         required: true,
-                        // tslint:disable-next-line:object-literal-sort-keys
                         message: "Tenant name is required."
                       }
                     ]
@@ -80,7 +79,6 @@ class Login extends React.Component<any, any> {
                       }
                       placeholder=""
                       size="large"
-                      //   onChange={}
                     />
                   )}
                 </FormItem>
@@ -94,7 +92,6 @@ class Login extends React.Component<any, any> {
                   rules: [
                     {
                       required: true,
-                      // tslint:disable-next-line:object-literal-sort-keys
                       message: "User Name is required."
                     }
                   ]

reactjs/src/scenes/Rules/index.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { inject, observer } from "mobx-react";
+
+@inject("AuthenticationStores")
+@observer
+class Rules extends React.Component<any, any> {
+    constructor(props: any) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <p>Rule Component</p>
+        )
+    }
+
+}
+
+
+export default Rules;

reactjs/src/scenes/Tenants/index.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { inject, observer } from "mobx-react";
+
+@inject("AuthenticationStores")
+@observer
+class Tenants extends React.Component<any, any> {
+    constructor(props: any) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <p>Tenant Component</p>
+        )
+    }
+
+}
+
+
+export default Tenants;

reactjs/src/scenes/Users/index.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { inject, observer } from "mobx-react";
+
+@inject("AuthenticationStores")
+@observer
+class Users extends React.Component<any, any> {
+    constructor(props: any) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <p>User Component</p>
+        )
+    }
+
+}
+
+export default Users;