Upgrade module dependencies

Revamp UI
amelki · Aug 20, 2017 · c228685 · c228685
1 parent f502483
commit c228685
Show file tree

Hide file tree

Showing 12 changed files with 214 additions and 154 deletions.
diff --git a/app/app.js b/app/app.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './cms.scss';
 import axios from 'axios';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import Cms from './cms';
 import Tree from './tree';
 import List from './list';
@@ -74,8 +74,9 @@ export class App extends React.Component {
 	}
 
 	loadState(message) {
+		const _this = this;
 		Promise.all([axios.get(`/model.json`), axios.get(`/data.json`)]).then(values => {
-			this.setState({
+			_this.setState({
 				model: values[0].data,
 				data: values[1].data,
 				stale: false,
@@ -92,7 +93,8 @@ export class App extends React.Component {
 		if (!this.isStateValid()) {
 			return <div>No model nor data</div>;
 		}
-		const selection = this.props.params.splat;
+		const selection = this.props.match.params["0"];
+//		const selection = this.props.location.pathname.substring(1);
 		let node;
 		let right = '';
 		if (selection && selection.length > 0) {
@@ -112,26 +114,29 @@ export class App extends React.Component {
 		const saveBtnClass = (this.state.stale ? 'btn blue cmd' : 'btn blue cmd disabled');
 		const resetBtnClass = (this.state.stale ? 'btn cmd' : 'btn cmd disabled');
 		return (
-			<div>
-				<aside id="sidebar">
-					<div className="inner">
-						<header>
-							<h1>{this.state.model.name}</h1>
-						</header>
-						<Tree model={this.state.model} selection={'/' + Cms.treePath(selection)}/>
-					</div>
-				</aside>
-				<section id="content">
-					<div id="navbar">
-						<a href="#" className={saveBtnClass} onClick={this.saveState}>Save</a>
-						<a href="#" className={resetBtnClass} onClick={this.resetState}>Reset</a>
-						<div id="message">{this.state.message}</div>
-						<div className="separator">|</div>
-						<a href='/data.json' className="blue" target="_blank">Download data</a>
-					</div>
-					<hr/>
-					{right}
-				</section>
+			<div style={{position: 'relative', textAlign: 'left'}}>
+				<div id="navbar">
+					<a href="#" className={saveBtnClass} onClick={this.saveState}>Save</a>
+					<a href="#" className={resetBtnClass} onClick={this.resetState}>Reset</a>
+					<div className="separator">|</div>
+					<a href='/json/data.json' className="blue" target="_blank">data.json</a>
+					<div className="separator">|</div>
+					<a href='/json/model.json' className="blue" target="_blank">model.json</a>
+				</div>
+				<div id="content">
+					<aside id="left">
+						<div className="inner">
+							<header>
+								<h1>{this.state.model.name}</h1>
+							</header>
+							<Tree model={this.state.model} selection={'/' + Cms.treePath(selection)}/>
+						</div>
+					</aside>
+					<section id="right">
+						{right}
+					</section>
+				</div>
+				<div id="message">{this.state.message}</div>
 			</div>
 		);
 	}

diff --git a/app/cms.scss b/app/cms.scss
@@ -1,3 +1,6 @@
+$topNav: 50px;
+$bottomNav: 20px;
+
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 	margin: 0;
 	padding: 0;
@@ -229,19 +232,19 @@ input.error, textarea.error, .ql-editor.error {
 	outline: none
 }
 
-#sidebar {
+#left {
 	position: fixed;
-	top: 0;
+	top: $topNav;
+	bottom: $bottomNav;
 	left: 0;
-	bottom: 0;
 	width: 200px;
 	height: 100%;
 	color: #fff;
 	text-align: left;
 	background-color: #111
 }
 
-#sidebar .inner {
+#left .inner {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -250,15 +253,15 @@ input.error, textarea.error, .ql-editor.error {
 	overflow-y: auto
 }
 
-#sidebar header {
+#left header {
 	margin: 30px 20px
 }
 
-#sidebar header h1 {
+#left header h1 {
 	font-size: 22px
 }
 
-#sidebar footer {
+#left footer {
 	position: fixed;
 	left: 0;
 	bottom: 0;
@@ -267,57 +270,80 @@ input.error, textarea.error, .ql-editor.error {
 	background-color: #292929
 }
 
-#sidebar footer a {
+#left footer a {
 	display: block;
 	color: #fff;
 	padding: 20px 0
 }
 
-#sidebar footer a:hover {
+#left footer a:hover {
 	color: salmon
 }
 
-#sidebar nav {
+#left nav {
 	padding-bottom: 70px
 }
 
-#sidebar nav > li {
+#left nav > li {
 	list-style-type: none;
 	padding-bottom: 10px;
 	margin-bottom: 10px;
 	border-bottom: 1px solid #333
 }
 
-#sidebar nav > li:last-of-type {
+#left nav > li:last-of-type {
 	border-bottom: none
 }
 
-#sidebar nav > li ul {
+#left nav > li ul {
 	margin-left: 20px
 }
 
-#sidebar nav a {
+#left nav a {
 	display: block;
 	margin-top: 1px;
 	padding: 10px 15px;
 	color: #aaa;
 	border-left: 3px solid transparent;
 }
 
-#sidebar nav a:hover {
+#left nav a:hover {
 	color: #fff;
 	background-color: rgba(255, 255, 255, 0.1)
 }
 
-#sidebar nav a.selected {
+#left nav a.selected {
 	color: salmon;
 	border-color: salmon;
 	background-color: transparent
 }
 
-#content {
+#navbar {
+	text-align: left;
+	background-color: #eeeeee;
+	border-bottom: 1px solid #dddddd;
+	height: $topNav;
+}
+
+#message {
+//	display: none;
+	background-color: #eeeeee;
+	padding: 5px 5px 5px 20px;
+	text-align: left;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	border-top: 1px solid #dddddd;
+	font-size: 12px;
+	color: #202020;
+	z-index: 1000;
+	height: $bottomNav;
+}
+
+#right {
 	position: absolute;
-	top: 0;
+	top: $topNav;
 	left: 200px;
 	right: 0;
 	bottom: 0;
@@ -536,21 +562,6 @@ form .bottom {
 	}
 }
 
-#content {
-	#navbar {
-		text-align: left;
-		#message {
-			font-size: 12px;
-			//margin-left: 30px;
-			display: inline;
-			color: #888888;
-		}
-	}
-	hr {
-		background-color: #ccc;
-	}
-}
-
 
 .msg {
 	margin: 40px;

diff --git a/app/item.js b/app/item.js
@@ -4,7 +4,7 @@ import Cms from './cms';
 import md from './md';
 import { WithContext as ReactTags } from 'react-tag-input';
 import Tags from "./tags";
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 export default class Item extends React.Component {
 	render() {

diff --git a/app/json.js b/app/json.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import JSONPretty from 'react-json-pretty';
+import axios from 'axios';
+import 'react-json-pretty/JSONPretty.adventure_time.styl';
+
+export default class Json extends React.Component {
+	constructor(props) {
+		super(props);
+		this.loadState = this.loadState.bind(this);
+		this.isStateValid = this.isStateValid.bind(this);
+	}
+
+	loadState() {
+		const _this = this;
+		const fileName = this.props.match.params["0"];
+		axios.get('/' + fileName).then(res => {
+			_this.setState(res.data);
+		});
+
+	}
+
+	componentDidMount() {
+		this.loadState();
+	}
+
+	isStateValid() {
+		return this.state;
+	}
+
+	render() {
+		if (this.isStateValid()) {
+			return <JSONPretty style={{textAlign: 'left', padding: 10}} id="json-pretty" json={this.state}/>;
+		} else {
+			return <div>no json</div>;
+		}
+	}
+
+};
diff --git a/app/list.js b/app/list.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import styles from './cms.scss';
 import Cms from './cms';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import { DragSource, DropTarget } from 'react-dnd';

diff --git a/app/main.js b/app/main.js
@@ -1,13 +1,16 @@
 import React from 'react';
 import { render } from 'react-dom'
 import {App, NoMatch,} from './app';
-import { Router, Route, browserHistory } from 'react-router'
+import Json from './json';
+import { BrowserRouter, Route, Switch } from 'react-router-dom'
 
 render((
-	<Router history={browserHistory}>
-		<Route path="/" component={App}>
-			<Route path="/node/*" component={App}/>
-			<Route path="*" component={NoMatch}/>
-		</Route>
-	</Router>
+		<BrowserRouter>
+			<Switch>
+				<Route exact path="/" component={App}/>
+				<Route path="/node/*" component={App}/>
+				<Route path="/json/*" component={Json}/>
+				<Route component={NoMatch}/>
+			</Switch>
+		</BrowserRouter>
 ), document.getElementById('root'));
diff --git a/app/tree.js b/app/tree.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './cms.scss';
 import axios from 'axios';
-import { Router, Route, Link, browserHistory } from 'react-router';
+import { Link } from 'react-router-dom';
 import Cms from './cms';
 
 export default class Tree extends React.Component {
@@ -19,7 +19,7 @@ export default class Tree extends React.Component {
 	}
 }
 
-class Node extends React.Component {
+export class Node extends React.Component {
 	render() {
 		var node = this.props.node;
 		var path = this.props.path;

diff --git a/index.js b/index.js
@@ -4,6 +4,7 @@ const path = require('path');
 const fs = require('fs');
 const express = require('express');
 const bodyParser = require('body-parser');
+const cors = require('cors');
 
 
 /**
@@ -27,7 +28,7 @@ module.exports.run = function(options) {
 	var port = options.port || 3000;
 	var modelFile = options.modelFile;
 	var dataFile = options.dataFile;
-	const isDeveloping = options.env == 'development';
+	const isDeveloping = options.env === 'development';
 	if (!modelFile) {
 		throw "Model file not provided";
 	}
@@ -37,13 +38,15 @@ module.exports.run = function(options) {
 
 	const app = express();
 	app.use(bodyParser.json());
-
+	app.use(cors());
+	app.options('/model.json', cors());
 	app.get('/model.json', function (req, res) {
 		fs.readFile(modelFile, 'utf-8', (err, json) => {
 			if (err) throw err;
 			res.send(json);
 		});
 	});
+	app.options('/data.json', cors());
 	app.get('/data.json', function (req, res) {
 		fs.readFile(dataFile, 'utf-8', (err, json) => {
 			if (err) throw err;