Merge branch 'application-mgt-new' into 'application-mgt-new'

Add router config

See merge request entgra/carbon-device-mgt!56

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js

@@ -1,19 +1,26 @@
 import React from "react";
 import "antd/dist/antd.css";
-import { renderRoutes } from "react-router-config";
+import RouteWithSubRoutes from "./components/RouteWithSubRoutes";
+import {
+    BrowserRouter as Router,
+    Link,
+} from 'react-router-dom';
 
 class App extends React.Component {
+    routes;
     constructor(props) {
         super(props);
-       this.state = {
+        this.routes = props.routes;
-           route : props.route
-        }
     }
   render() {
     return (
+        <Router>
             <div>
-            {renderRoutes(this.state.route.routes)}
+                {this.routes.map((route) => (
+                    <RouteWithSubRoutes key={route.path} {...route} />
+                ))}
             </div>
+        </Router>
 
     );
   }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/RouteWithSubRoutes.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import {Route} from 'react-router-dom';
+class RouteWithSubRoutes extends React.Component{
+    props;
+    constructor(props){
+        super(props);
+        this.props = props;
+    }
+    render() {
+        return(
+            <Route path={this.props.path} render={(props) => (
+                <this.props.component {...props} routes={this.props.routes}/>
+            )}/>
+        );
+    }
+
+}
+
+export default RouteWithSubRoutes;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js

@@ -1,41 +1,27 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
 import * as serviceWorker from './serviceWorker';
-import { renderRoutes } from "react-router-config";
+import App from "./App"
+import Login from "./pages/Login"
 import Dashboard from "./pages/dashboard/Dashboard"
-import Login from "./pages/Login";
+
-import {BrowserRouter} from "react-router-dom";
 
 
 const routes = [
     {
-        component: App,
+        path: '/publisher/Login',
-        routes: [
-            {
-                path: "/publisher",
-                exact: true,
-                component: Dashboard,
-                routes: [
-                    {
-                        path: "/publisher/a",
         component: Login
-                    }
-                ]
     },
     {
-                path: "/publisher/login",
+        path: '/publisher/dashboard',
-                component: Login
+        component: Dashboard
     }
 ]
-    }
-];
 
-ReactDOM.render( <BrowserRouter>
+
-    {/* kick it all off with the root route */}
+
-    {renderRoutes(routes)}
+ReactDOM.render( <App routes={routes}/>, document.getElementById('root'));
-</BrowserRouter>, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Layout, Menu, Breadcrumb } from 'antd';
+import { Layout, Menu, Breadcrumb, PageHeader } from 'antd';
 
 const { Header, Content, Footer } = Layout;
 
@@ -8,15 +8,15 @@ import Logo from "../../../public/images/logo.svg";
 import Login from "../Login";
 import {renderRoutes} from "react-router-config";
 import {NavLink} from "react-router-dom";
+import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
 
 
 class Dashboard extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            route : props.route
+            routes : props.routes
         }
-        console.log(props);
     }
 
     render() {
@@ -35,19 +35,20 @@ class Dashboard extends React.Component {
                         <Menu.Item key="3">nav 3</Menu.Item>
                     </Menu>
                 </Header>
-                <Content style={{ padding: '0 50px' }}>
+                <Content style={{ padding: '0 0' }}>
-                    <Breadcrumb style={{ margin: '16px 0' }}>
+                    <Breadcrumb style={{ margin: '16px 50px' }}>
                         <Breadcrumb.Item>Home</Breadcrumb.Item>
                         <Breadcrumb.Item>List</Breadcrumb.Item>
                         <Breadcrumb.Item>App</Breadcrumb.Item>
                     </Breadcrumb>
-                    <NavLink exact to="/publisher/a" className="nav-link" >
+                    <PageHeader
-                        Items
+                        title="Title"
-                    </NavLink>
+                    />
-
+                    <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
-                    {/* child routes won't render without this */}
+                        {this.state.routes.map((route) => (
-                    {renderRoutes(this.state.route.routes, { someProp: "these extra props are optional" })}
+                            <RouteWithSubRoutes key={route.path} {...route} />
-                    <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>Content</div>
+                        ))}
+                    </div>
                 </Content>
                 <Footer style={{ textAlign: 'center' }}>
                     ©2019 entgra.io

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js

@@ -21,6 +21,9 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const config = {
     devtool: "source-map",
+    output: {
+        publicPath: '/publisher/' // <---- this
+    },
     watch: false,
     resolve: {
         alias: {