added user preference editor vs json mode

src/App.css

@@ -139,6 +139,7 @@ label .badge{position:relative;top:2px;}
 
 .field-border-bottom{border-bottom:1px solid #BDBDBD;}
 .focus .field-border-bottom{border-bottom:1px solid #0687D1;}
+.focus-layer-features{font-size:0.65rem;}
 
 .flex-2{flex:2;}
 
@@ -293,6 +294,9 @@ label .badge{position:relative;top:2px;}
 .row-icon-right{position:absolute;right:0.25rem;top:0;}
 .row-icon-right-second{right:1.3rem;}
 
+.search-option{color:#EDEFF1;padding:2px 2px 1px 2px;cursor:pointer;}
+.search-option:hover{color:#FFF;}
+
 .swatch{width:22px;height:22px;cursor:pointer;}
 .swatch:hover{border:1px solid #AEAEAE;}
 .swatch-flex{flex:1;height:18px;border:1px solid transparent;}

src/Store.js

@@ -2,12 +2,14 @@ import { applyMiddleware, combineReducers, createStore } from 'redux'
 
 import {reducer as app} from './model/app/reducer'
 import {reducer as map} from './model/map/reducer'
+import {reducer as preference} from './model/preference/reducer'
 import {reducer as source} from './model/source/reducer'
 import {reducer as style} from './model/style/reducer'
 
 export const reducers = combineReducers({
 	app,
 	map,
+	preference,
 	source,
 	style,
 })

src/component/Home/HomeStyles.jsx

@@ -43,26 +43,28 @@ class HomeStyles extends React.Component {
 		const {styles} = this.props,
 			{search, searchShow} = this.state
 
+		const handle = {
+			change: this.handleSearchChange
+		}
+
 		return (
 			<div className="content-body content-body-flex">
 				<div className="content-body-left">
 					{searchShow ? 
-						<div className="d-flex">
+						<div className="d-flex p-1">
 							<div className="property flex-fill">
-								<Field field={{
-									type:'string',
-									name:'search',	
-									value: search,
-									placeholder:'Search for style',
-									controlled:false,
-									inputClass:'form-control-sm font-sm',
-									inputNoAC:true,
-									autoFocus:true
-								}} key="type" handle={{
-									change:this.handleSearchChange
-								}}/>
+								<Field
+									autoFocus={true}
+									handle={handle}
+									name={'search'}
+									placeholder={'Search for style'}
+									inputClass={'form-control-sm font-sm'}
+									inputNoAC={true}
+									type={'string'}
+									value={search}
+								 />
 							</div>
-							<div className="content-title-option" onClick={()=>this.handleSearchShowSet({show:false})}>
+							<div className="search-option" onClick={()=>this.handleSearchShowSet({show:false})}>
 								<Icon icon={'close'}/>
 							</div>
 						</div>

src/component/LayerEdit/LayerEditJson.jsx

@@ -6,9 +6,18 @@ import {withRouter} from 'react-router-dom'
 import Field from '../Field'
 
 import modelStyle from '../../model/style'
+import modelPreference from '../../model/preference'
 
 class LayerEditJson extends React.Component {
 
+	componentDidMount (){
+		// set user preference to json
+		modelPreference.actions.setIn({
+			path: ['editMode'],
+			value: 'json',
+		})
+	}
+
 	handleChange = async ({value})=>{
 		const {history, path, layer} = this.props,
 			{pathname} = this.props.location

src/component/LayerEdit/LayerEditView.jsx

@@ -2,8 +2,17 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import LayerEditGroup from './LayerEditGroup'
+import modelPreference from '../../model/preference'
 
 class LayerEditView extends React.Component {
+
+	componentDidMount (){
+		// set user preference to json
+		modelPreference.actions.setIn({
+			path: ['editMode'],
+			value: 'editor',
+		})
+	}
 
 	render (){
 		const {error, layer, path, style} = this.props

src/component/LayerEdit/index.jsx

@@ -11,6 +11,7 @@ import LayerEditJson from './LayerEditJson'
 import LayerEditView from './LayerEditView'
 import Tooltip from '../Tooltip'
 import modelMap from '../../model/map'
+import modelPreference from '../../model/preference'
 import modelStyle from '../../model/style'
 
 class LayerEdit extends React.Component {
@@ -30,9 +31,17 @@ class LayerEdit extends React.Component {
 	}
 
 	renderSection (){
-		const {focusFeatures, error, match, layer, path, style} = this.props
+		const {editMode, focusFeatures, error, match, layer, path, style} = this.props
+
+		let redirect
+		if (focusFeatures.length > 0){
+			redirect = `${match.url}/features`
+		} else if (editMode === 'json'){
+			redirect = `${match.url}/json`
+		} else {
+			redirect = `${match.url}/editor`
+		}
 
-		const redirect = (focusFeatures.length > 0)? `${match.url}/features` :`${match.url}/editor`
 		return (
 			<Switch>
 				<Route path={`${match.url}/actions`} 
@@ -126,6 +135,7 @@ class LayerEdit extends React.Component {
 */
 
 LayerEdit.propTypes = {
+	editMode: PropTypes.string,
 	error: PropTypes.object, // map
 	layer: PropTypes.object,
 	layerId: PropTypes.string,
@@ -138,6 +148,7 @@ LayerEdit.propTypes = {
 const mapStateToProps = (state, props) => {
 	const {layerId} = props
 	return {
+		editMode: modelPreference.selectors.getIn(state, {path:['editMode']}),
 		focusFeatures: modelMap.selectors.focusFeaturesByLayerId(state, {layerId}),
 		layer: modelStyle.selectors.getIn(state, {path: props.path}),
 	}

src/component/Map/MapMapbox.jsx

@@ -76,6 +76,7 @@ class MapMapbox extends React.Component {
 
 	buildMap (){
 		const {accessTokens, style} = this.props
+		if (!style) return <div/>
 
 		if (this.map){
 			// tear down map
@@ -386,10 +387,10 @@ MapMapbox.propTypes = {
 const mapStoreToProps = (store, props)=>{
 	const {style} = props
 	return {
-		accessTokens: modelStyle.selectors.accessTokens(store, {styleId: style.get('id')}),
+		accessTokens: modelStyle.selectors.accessTokens(store, {styleId: style && style.get('id')}),
 		accessTokenDeploy: modelMap.selectors.accessTokenDeploy(store),
-		domainHeaders: modelStyle.selectors.domainHeaders(store, {styleId: style.get('id')}),
-		featureStates: modelStyle.selectors.featureStates(store, {styleId: style.get('id')}),
+		domainHeaders: modelStyle.selectors.domainHeaders(store, {styleId: style && style.get('id')}),
+		featureStates: modelStyle.selectors.featureStates(store, {styleId: style && style.get('id')}),
 		featureStateDeploy: modelMap.selectors.featureStateDeploy(store),
 	}
 }

src/component/Page/index.jsx

@@ -9,6 +9,7 @@ import Nav from './Nav'
 import Route from './Route'
 
 import modelApp from '../../model/app'
+import modelPreference from '../../model/preference'
 import modelSource from '../../model/source'
 import modelStyle from '../../model/style'
 
@@ -17,6 +18,7 @@ class Page extends React.Component {
 	async componentDidMount(){
 		try{
 			await modelApp.actions.setLoading(true)
+			await modelPreference.actions.init()
 			await modelStyle.actions.init()
 			await modelSource.actions.init()
 			await modelApp.actions.setLoading(false)

src/component/Style/StyleLayers.jsx

@@ -96,7 +96,7 @@ class StyleLayers extends React.Component {
 									value={search}
 								 />
 							</div>
-							<div className="content-title-option" onClick={()=>this.handleSearchShowSet({show:false})}>
+							<div className="search-option" onClick={()=>this.handleSearchShowSet({show:false})}>
 								<Icon icon={'close'}/>
 							</div>
 						</div>
@@ -200,7 +200,7 @@ class StyleLayers extends React.Component {
 			return (
 				<div className="row-icon-right">
 					<Icon className="md-shadow text-info" icon={'map-focus'} weight={'solid'}/>
-					<b className="text-info">{focusLayers[layerId]}</b>
+					<b className="text-info focus-layer-features">{focusLayers[layerId]}</b>
 				</div>
 			)
 		}

src/component/Style/StyleSources.jsx

@@ -61,7 +61,7 @@ class StyleSources extends React.Component {
 									value={search}
 								 />
 							</div>
-							<div className="content-title-option" onClick={()=>this.handleSearchShowSet({show:false})}>
+							<div className="search-option" onClick={()=>this.handleSearchShowSet({show:false})}>
 								<Icon icon={'close'}/>
 							</div>
 						</div>

src/component/Style/index.jsx

@@ -115,7 +115,7 @@ class Style extends React.Component {
 					<Tooltip message={'sources'}/>
 				</NavLink>
 				<NavLink className={`content-title-option interactive tooltip-trigger ${error && error.hasIn(['current','layers'])? 'error': ''}`} to={`${match.url}/layers`}>
-					{focusLayers && focusLayers.length > 0 && (
+					{focusLayers && Object.keys(focusLayers).length > 0 && (
 						<Icon className="text-info content-title-option-super" icon={'map-focus'} weight={'solid'}/>
 					)}
 					<Icon icon={'layer'}/>

src/model/style/reducer.js

@@ -115,7 +115,7 @@ export const reducer = (st = state, action)=>{
 			})
 		}
 		case 'STYLE_REMOVEIN':{
-			const {path, value} = action.payload
+			const {path} = action.payload
 			const styles = st.styles.removeIn(path)
 
 			if (path.length < 3){ // changed whole style, no updated needed