diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json index fbc0f2daf1..d7ecb8320f 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json @@ -14,8 +14,9 @@ "antd": "^3.15.0", "react": "^16.8.4", "react-dom": "^16.8.4", - "react-scripts": "2.1.8", - "react-router-dom": "latest" + "react-router-config": "^5.0.0", + "react-router-dom": "latest", + "react-scripts": "2.1.8" }, "devDependencies": { "@babel/core": "^7.0.0", diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js index 495a057468..5cf9be115e 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js @@ -1,18 +1,20 @@ import React from "react"; import "antd/dist/antd.css"; -import {BrowserRouter, Route, Switch} from 'react-router-dom'; -import Dashboard from "./pages/dashboard" -import Login from "./pages/Login" +import { renderRoutes } from "react-router-config"; class App extends React.Component { + constructor(props) { + super(props); + this.state = { + route : props.route + } + } render() { return ( - - - - - - +
+ {renderRoutes(this.state.route.routes)} +
+ ); } } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js index 87d1be5518..96931fc788 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js @@ -3,8 +3,39 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; +import { renderRoutes } from "react-router-config"; +import Dashboard from "./pages/dashboard/Dashboard" +import Login from "./pages/Login"; +import {BrowserRouter} from "react-router-dom"; -ReactDOM.render(, document.getElementById('root')); + +const routes = [ + { + component: App, + routes: [ + { + path: "/publisher", + exact: true, + component: Dashboard, + routes: [ + { + path: "/publisher/a", + component: Login + } + ] + }, + { + path: "/publisher/login", + component: Login + } + ] + } +]; + +ReactDOM.render( + {/* kick it all off with the root route */} + {renderRoutes(routes)} +, 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. diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js new file mode 100644 index 0000000000..6088af4b6f --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js @@ -0,0 +1,60 @@ +import React from "react"; +import { Layout, Menu, Breadcrumb } from 'antd'; + +const { Header, Content, Footer } = Layout; + +import styles from './Dashboard.less'; +import Logo from "../../../public/images/logo.svg"; +import Login from "../Login"; +import {renderRoutes} from "react-router-config"; +import {NavLink} from "react-router-dom"; + + +class Dashboard extends React.Component { + constructor(props) { + super(props); + this.state = { + route : props.route + } + console.log(props); + } + + render() { + return ( + +
+
+ + nav 1 + nav 2 + nav 3 + +
+ + + Home + List + App + + + Items + + + {/* child routes won't render without this */} + {renderRoutes(this.state.route.routes, { someProp: "these extra props are optional" })} +
Content
+
+
+ ©2019 entgra.io +
+
+ ); + } +} + +export default Dashboard; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.less b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.less new file mode 100644 index 0000000000..483f13e117 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.less @@ -0,0 +1,7 @@ +.logo { + width: 120px; + height: 31px; + background: rgba(0,0,0,.2); + margin: 16px 24px 16px 0; + float: left; +} \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/index.js deleted file mode 100644 index ac86a24b68..0000000000 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/index.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; -import { version, Button } from 'antd'; -import {Link} from 'react-router-dom'; - -class Dashboard extends React.Component { - render() { - return ( -
-

Currentdddddd antd version: {version}

-

Please fork this codesandbox to reproduce your issue.

-

请 fork 这个链接来重现你碰到的问题。

- login - -
- ); - } -} - -export default Dashboard;