fix: 🐛 remove apply button

device25 · Jul 4, 2019 · 81986df · 81986df
1 parent 75c5919
commit 81986df
Showing 1 changed file with 20 additions and 27 deletions.
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,41 +1,38 @@
-import React, { useState, createRef } from 'react';
+import React, { useState } from 'react';
 import MapGL from '@urbica/react-map-gl';
-import { validate } from '@mapbox/mapbox-gl-style-spec';
 import { initStyle, initViewport } from '../config';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import AceEditor from 'react-ace';
 import 'brace/mode/json';
 import 'brace/theme/github';
 
-const initStyleString = JSON.stringify(initStyle, null, 1);
+const initValue = JSON.stringify(initStyle, null, 1);
 
 function App() {
-  const [style, setStyle] = useState(initStyleString);
   const [viewport, setViewport] = useState(initViewport);
-  const editorRef = createRef();
-  let editorStyle;
+  const [value, setValue] = useState(initValue);
+  const [mapStyle, setMapStyle] = useState(initStyle);
 
   const onViewportChange = (newViewport) => {
     setViewport(newViewport);
   };
 
-  const onEditorChange = (newStyleValue) => {
-    editorStyle = newStyleValue;
-  };
-
-  const setStyleHandler = () => {
-    let value = editorStyle;
-    value = value.replace(/'/g, '"');
-
-    const result = validate(value);
+  const onChange = (newValue) => {
+    newValue = newValue.replace(/'/g, '"');
+    setValue(newValue);
 
-    if (result.length === 0) {
-      setStyle(value);
-    } else {
-      result.forEach(({ message }) => console.error(message));
+    try {
+      const newStyle = JSON.parse(newValue);
+      setMapStyleHandler(newStyle);
+    } catch (e) {
+      console.error(e);
     }
   };
 
+  const setMapStyleHandler = (newStyle) => {
+    setMapStyle(newStyle);
+  };
+
   return (
     <div style={{
       display: 'flex',
@@ -47,7 +44,7 @@ function App() {
           width: '50%',
           height: '100vh'
         }}
-        mapStyle={JSON.parse(style)}
+        mapStyle={mapStyle}
         accessToken='pk.eyJ1IjoiZGV2aWNlMjUiLCJhIjoiY2lzaGN3d2tiMDAxOTJ6bGYydDZrcHptdiJ9.UK55aUzBquqYns1AdnuTQg'
         {...viewport}
         onViewportChange={onViewportChange}
@@ -57,17 +54,16 @@ function App() {
           width: '50%',
           height: '100vh'
         }}
-        ref={editorRef}
         placeholder='JSON Style here'
         theme='github'
         mode='json'
         name='styleEditor'
-        fontSize={12}
+        fontSize={14}
         showPrintMargin={true}
         showGutter={true}
         highlightActiveLine={true}
-        value={style}
-        onChange={onEditorChange}
+        value={value}
+        onChange={onChange}
         setOptions={{
           enableBasicAutocompletion: true,
           enableLiveAutocompletion: false,
@@ -76,9 +72,6 @@ function App() {
           tabSize: 2
         }}
       />
-      <button onClick={setStyleHandler}>
-        apply
-      </button>
       <div className='zoomPanel'>
         {`Zoom: ${viewport.zoom.toFixed(2)}`}
       </div>