improved errors and form flow

Author: justenPalmer

package-lock.json

@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "babel-preset-flow": "^6.23.0",
+    "bootstrap": "^4.1.1",
     "gh-pages": "^1.1.0",
     "js-file-download": "^0.4.1",
     "jshint": "^2.9.5",

package.json

@@ -26,6 +26,7 @@ label .badge{position:relative;top:2px;}
 .border-gray{border:1px solid #273237;}
 
 .btn-xs{padding:0 .1rem;font-size:.8rem;}
+.btn-xs i{position:relative;top:-1px;left:0;}
 .btn.btn-primary{background-color:#00ACC1;border-color:#00A7B6;}
 .btn.btn-primary:hover{background-color:#00A7B6;border-color:#0094A0;}
 .btn.btn-primary:active{background-color:#0094A0;border-color:#0094A0;}
@@ -35,8 +36,10 @@ label .badge{position:relative;top:2px;}
 /* Code mirror */
 .CodeMirror{width:100%;height:auto;font-size:0.9em;margin-left:-4px;}
 .CodeMirror-linenumbers{}
-
 .CodeMirror-gutters{background:transparent;border-right:1px solid transparent;}
+
+.close-pos{top:0.25rem;right:0.25rem;}
+
 .cm-s-default .cm-string{color: #03838F;}
 .cm-s-default .cm-number { color: #9C27B0; }
 .cm-s-default .cm-property { color: #273237; }

public/index.html

@@ -14,11 +14,6 @@ import Store from './Store';
 export default class App extends Component {
 
    render (){
-
-      const routeRoot = process.env.PUBLIC_URL;
-
-      console.log('root:',routeRoot);
-
       return (
          <Provider store={Store}>
             <Router>

src/App.css

@@ -1,40 +1,47 @@
 
-//import Store from '../Store';
-import Mstyle from './Mstyle';
 import Msource from './Msource';
+import Mstyle from './Mstyle';
+
 import NameFromURL from '../utility/NameFromURL';
+import SourceReader from '../utility/SourceReader';
 
 export default {
 	addFromSource:function(sourceUrl){
 		return new Promise((resolve,reject)=>{
-			const rec = {
-				name:NameFromURL.get(sourceUrl)
-			};
-			Mstyle.add(rec).then((style)=>{
-				Mstyle.define(style);
-				console.log('style defined:',style);
-				// add source
-				Msource.add({
-					url:sourceUrl,
-					type:'vector'
-				}).then((source)=>{
-					//console.log('added source:',source);
-					const json = Msource.getJson(source.url);
-					console.log('added source json:',json);
-					const center = [
-						json.getIn(['center',0]),
-						json.getIn(['center',1])
-					];
-					if (json.has('center')) Mstyle.setIn(['center'],center);
-					if (json.has('maxzoom') && json.has('minzoom')){
-						const zoom = json.getIn(['center',2]) || (json.get('maxzoom') - json.get('minzoom'))/2;
-						Mstyle.setIn(['zoom'],zoom);
-					}
-					Mstyle.save();
-					return resolve(style);
+			SourceReader.load(sourceUrl).then(()=>{
+				const rec = {
+					name:NameFromURL.get(sourceUrl)
+				};
+				Mstyle.add(rec).then((style)=>{
+					Mstyle.define(style);
+					//console.log('style defined:',style);
+					// add source
+					Msource.add({
+						url:sourceUrl,
+						type:'vector'
+					}).then((source)=>{
+						//console.log('added source:',source);
+						const json = Msource.getJson(source.url);
+						console.log('added source json:',json);
+						const center = [
+							json.getIn(['center',0]),
+							json.getIn(['center',1])
+						];
+						if (json.has('center')) Mstyle.setIn(['center'],center);
+						if (json.has('maxzoom') && json.has('minzoom')){
+							const zoom = json.getIn(['center',2]) || (json.get('maxzoom') - json.get('minzoom'))/2;
+							Mstyle.setIn(['zoom'],zoom);
+						}
+						Mstyle.save();
+						return resolve(style);
+					}).catch((e)=>{
+						reject({message:'source not found'});
+					});
+				}).catch((e)=>{
+					reject(e);
 				});
 			}).catch((e)=>{
-				reject(e);
+				reject({message:'source not found'});
 			});
 		});
 	},

src/App.js

@@ -1,11 +1,12 @@
+import PropTypes from 'prop-types';
 import React from 'react';
-
 import {connect} from 'react-redux';
 
 import Mstyle from '../model/Mstyle';
 
-import Vstyle from '../view/Vstyle';
+import Valert from '../view/Valert';
 import Vmap from '../view/Vmap';
+import Vstyle from '../view/Vstyle';
 
 const mapStoreToProps = (store)=>{
 	return {
@@ -16,11 +17,18 @@ const mapStoreToProps = (store)=>{
 const mapDispatchToProps = {};
 
 class Pstyle extends React.Component {
+
+	static propTypes = {
+		error: PropTypes.oneOfType([
+			PropTypes.string,
+			PropTypes.object
+		]),
+		match: PropTypes.object,
+		style: PropTypes.object
+	}
+
 	constructor(props) {
 		super(props);
-		this.state = {
-			styleRec:undefined
-		};
 
 		//styles.do();
 		this.id = props.match.params.id;
@@ -51,18 +59,17 @@ class Pstyle extends React.Component {
 		}
 	}
 
-	componentWillReceiveProps (nextProps){
-		const {style, error} = nextProps;
-
-		this.setState({styleRec:style.get('rec')});		
-	}
-
 	render (){
 		const {style, match, error} = this.props;
 
 		return <div>
-			<Vmap handle={this.handle} style={style.get('rec')} match={match} error={error}/>
-			<Vstyle handle={this.handle} style={style.get('rec')} match={match} error={error}/>
+			<Vmap handle={this.handle} style={style.get('rec')} match={match}/>
+			<Vstyle handle={this.handle} style={style.get('rec')} match={match}/>
+			<div className="fixed-bottom p-2">
+				{error.has('general') && 
+					<Valert message={error.get('general')}/>
+				}
+			</div>
 		</div>
 	}
 };

src/model/MstyleSource.js

@@ -10,8 +10,8 @@ export default {
 				//if (!response.data.maps) return reject('no maps defined on source');
 				return resolve(response.data);
 			})
-			.catch(function (error) {
-				return reject(error);
+			.catch(function (error){
+				return reject('not found');
 			});
 		});
 	}

src/page/Pstyle.jsx

@@ -4,12 +4,12 @@ export default class Valert extends React.Component {
 	constructor(props){
 		super(props);
 		this.state = {
-			closed:false,
+			show:true,
 			message:null
 		}
 		this.handle = {
 			close:()=>{
-				this.setState({closed:true});
+				this.setState({show:false});
 			}
 		};
 		for (const i in this.handle){
@@ -18,19 +18,20 @@ export default class Valert extends React.Component {
 	}
 
 	componentWillReceiveProps(nextProps){
-		if (nextProps.message !== this.state.message){
+		if (!this.state.show || nextProps.message !== this.state.message){
 			this.setState({
 				message:nextProps.message,
-				closed:false
+				show:true
 			});
 		}
 	}
 
 	render (){
 		const {message} = this.props;
 
-		let className = 'alert alert-danger m-2 alert-dismissible fade';
-		if (!this.state.closed) className += ' show';
+		if (!message || !this.state.show) return <div/>
+
+		let className = 'alert alert-danger alert-dismissible fade show mb-0';
 		return <div className={className}>
 			{message}
 			<button onClick={this.handle.close} type="button" className="close" aria-label="Close">

src/utility/SourceReader.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+export default class Vdropdown extends React.Component {
+
+	static propTypes = {
+		elem: PropTypes.object.isRequired, // dom ref to render the dropdown around
+		scrollElem: PropTypes.object,
+		show: PropTypes.bool
+	}
+
+	render(){
+		const {elem, scrollElem, show} = this.props;
+
+		// if in bottom of window, project upwards
+		const winRect = elem.getBoundingClientRect(); // {top, bottom, left, right}
+
+		// get scrollTop offset
+
+		const offsetTop = (scrollElem && scrollElem.offsetTop)? scrollElem.offsetTop: 0;
+		const offsetLeft = (scrollElem && scrollElem.offsetLeft)? scrollElem.offsetLeft: 0;
+
+		const style = {
+			top:(winRect.bottom+offsetTop)+'px',
+			left:(winRect.left+offsetLeft)+'px'
+		};
+		const dropdownClass = 'dropdown-menu'+(show?' show':'');
+
+		console.log('rendered dropdown:',winRect,offsetTop,offsetLeft);
+
+		return ReactDOM.createPortal(
+			<div style={style} className={dropdownClass}>
+				{this.props.children}
+			</div>,
+			document.body
+		);
+	}
+};