Merge pull request #962 from sinthuja/application-mgt

Adding more cleanup to the code.
4.x.x
sinthuja 7 years ago committed by GitHub
commit 812033642a

@ -0,0 +1,40 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

@ -0,0 +1,15 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

@ -18,7 +18,7 @@
import React, {Component} from 'react';
import createHistory from 'history/createBrowserHistory';
import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Login from './components/Login';
@ -36,9 +36,6 @@ let muiTheme = null;
if (theme.current === "default") {
let defaultTheme = require("material-ui/styles/baseThemes/" + theme.default);
muiTheme = getMuiTheme(defaultTheme.default);
} else {
let customTheme = require("./themes/" + theme.custom);
muiTheme = getMuiTheme(customTheme.default);
}
/**
@ -55,17 +52,10 @@ if (theme.current === "default") {
* not want to serve the URL.
* */
class Base extends Component {
constructor() {
super();
this.state = {};
}
render() {
this.setState();
return (
<div className="container">
<BaseLayout state={this.state}>
<BaseLayout state={this.props.state} updateState={this.props.updateState}>
<Switch>
<Route component={NotFound}/>
</Switch>
@ -73,16 +63,12 @@ class Base extends Component {
</div>
)
}
setState() {
if (this.props.location.state){
this.state = this.props.location.state;
} else {
this.state = {};
}
}
}
Base.propTypes = {
updateState: React.PropTypes.func.isRequired
};
/**
* This component is referred by the index.js to initiate the application.
* TODO: Currently the URL shows like https://localhost:9443/publisher/#/publisher/assets/apps/create. this needs to
@ -93,6 +79,11 @@ class Store extends Component {
constructor() {
super();
if (!this.state) {
this.state = {};
this.state.store = {};
}
this.updateState = this.updateState.bind(this);
}
render() {
@ -101,15 +92,22 @@ class Store extends Component {
<MuiThemeProvider muiTheme={muiTheme}>
<Router basename="store" history={history}>
<Switch>
<Route path="/login" component={Login}/>
<Route path="/logout" component={Login}/>
<Route component={Base}/>
<Route path="/login"
render={routeProps => <Login {...routeProps} updateState={this.updateState} state={this.state}/>}/>
<Route path="/logout"
render={routeProps => <Base {...routeProps} updateState={this.updateState} state={this.state}/>}/>
<Route
render={routeProps => <Base {...routeProps} updateState={this.updateState} state={this.state}/>}/>
</Switch>
</Router>
</MuiThemeProvider>
</div>
);
}
updateState(data) {
this.setState(data);
}
}
export default Store;

@ -26,7 +26,7 @@ import {List, ListItem} from 'material-ui/List';
import Apps from 'material-ui/svg-icons/navigation/apps';
import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
import { Link } from 'react-router-dom';
import {Link, withRouter} from 'react-router-dom';
/**
* Base Layout:
@ -36,15 +36,6 @@ import { Link } from 'react-router-dom';
* */
class BaseLayout extends Component {
constructor(props) {
super(props);
this.state = this.props.state;
}
componentWillMount() {
}
handleApplicationClick() {
this.handleHistory('/assets/apps');
}
@ -59,9 +50,9 @@ class BaseLayout extends Component {
}
handleUserLogin() {
if (this.state.user) {
if (this.props.state.store.user) {
return (
<IconButton tooltip={this.state.user}>
<IconButton tooltip={this.props.state.store.user}>
<ActionAccountCircle/>
</IconButton>
);
@ -73,10 +64,10 @@ class BaseLayout extends Component {
}
handleNotification() {
if (this.state.user) {
if (this.props.state.store.user) {
return (
<Badge
badgeContent={this.state.notifications}
badgeContent={this.props.state.store.notifications}
secondary={true}
badgeStyle={{top: 12, right: 12}}>
<IconButton tooltip="Notifications">
@ -134,11 +125,8 @@ class BaseLayout extends Component {
}
BaseLayout
.propTypes = {
BaseLayout.propTypes = {
children: PropTypes.element
};
export
default
BaseLayout;
export default withRouter(BaseLayout);

@ -61,14 +61,18 @@ class Login extends Component {
handleLogin(event) {
event.preventDefault();
console.log(this.props);
//TODO: send authentication request.
let location = {
pathname: this.state.referrer,
state: {
notifications: 0,
user: this.state.userName
pathname: this.state.referrer
};
let storeState = {
store : {
user: this.state.userName,
notifications: 0
}
};
this.props.updateState(storeState);
this.props.history.push(location);
}

@ -16,24 +16,10 @@
* under the License.
*/
import BaseLayout from './BaseLayout';
/**
* This a sample custom theme file. In config.json, if the following changes are done, this theme will be applied.
* {
* "theme" : {
* "type" : "custom",
* "value" : "custom-theme"
* }
* }
* Contains all UI components related to Application, Login and Platform
*/
import {
indigo500, indigo700, redA200,
} from 'material-ui/styles/colors';
export default {
palette: {
primary1Color: indigo500,
primary2Color: indigo700,
accent1Color: redA200,
pickerHeaderColor: indigo500,
},
};
export default {BaseLayout};

@ -1,51 +0,0 @@
body {
font: 14px "Century Gothic", Futura, sans-serif;
margin: 20px;
}
ol, ul {
padding-left: 30px;
}
.board-row:after {
clear: both;
content: "";
display: table;
}
.status {
margin-bottom: 10px;
}
.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
}
.square:focus {
outline: none;
}
.kbd-navigation .square:focus {
background: #ddd;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}

@ -1,8 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Store from './App';
import './index.css';
ReactDOM.render(<Store />, document.getElementById('root'));

Loading…
Cancel
Save