From 5b514d6916144bd5d74e9ddfddce8fcad83240cb Mon Sep 17 00:00:00 2001
From: Nikolai Lebedev <nextstopsun@gmail.com>
Date: Thu, 4 Jul 2019 15:05:58 +0300
Subject: [PATCH 1/3] Added ace editor and set initial map coords to motherland

---
 package-lock.json          | 52 ++++++++++++++++++++++++++++++++++++--
 package.json               |  2 ++
 src/components/App.js      | 36 ++++++++++++++++++++++----
 src/config/initStyle.js    |  4 +--
 src/config/initViewport.js |  6 ++---
 5 files changed, 88 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f9ca103..324ba60 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -849,6 +849,22 @@
         "regexpu-core": "^4.5.4"
       }
     },
+    "@babel/polyfill": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.4.4.tgz",
+      "integrity": "sha512-WlthFLfhQQhh+A2Gn5NSFl0Huxz36x86Jn+E9OW7ibK8edKPq+KLy4apM1yDpQ8kJOVi1OVjpP4vSDLdrI04dg==",
+      "requires": {
+        "core-js": "^2.6.5",
+        "regenerator-runtime": "^0.13.2"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
+          "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A=="
+        }
+      }
+    },
     "@babel/preset-env": {
       "version": "7.4.5",
       "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.4.5.tgz",
@@ -2827,6 +2843,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "brace": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz",
+      "integrity": "sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4767,6 +4788,11 @@
         }
       }
     },
+    "diff-match-patch": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.4.tgz",
+      "integrity": "sha512-Uv3SW8bmH9nAtHKaKSanOQmj2DnlH65fUpcrMdfdaOxUG02QQ4YGZ8AE7kKOMisF7UqvOlGKVYWRvezdncW9lg=="
+    },
     "diff-sequences": {
       "version": "24.3.0",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.3.0.tgz",
@@ -9020,6 +9046,16 @@
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
       "dev": true
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -11581,6 +11617,19 @@
         "scheduler": "^0.13.6"
       }
     },
+    "react-ace": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-7.0.2.tgz",
+      "integrity": "sha512-+TFuO1nO6dme/q+qEHjb7iOuWI8jRDzeALs9JyH8HoyHb9+A2bC8WHuJyNU3pmPo8623bytgAgzEJAzDMkzjlw==",
+      "requires": {
+        "@babel/polyfill": "^7.4.4",
+        "brace": "^0.11.1",
+        "diff-match-patch": "^1.0.4",
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-app-polyfill": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-1.0.1.tgz",
@@ -11850,8 +11899,7 @@
     "regenerator-runtime": {
       "version": "0.13.2",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
-      "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==",
-      "dev": true
+      "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
     },
     "regenerator-transform": {
       "version": "0.14.0",
diff --git a/package.json b/package.json
index 7ef7ab9..1cb4828 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,10 @@
   "dependencies": {
     "@mapbox/mapbox-gl-style-spec": "13.7.1",
     "@urbica/react-map-gl": "1.7.0",
+    "brace": "^0.11.1",
     "mapbox-gl": "1.1.0",
     "react": "16.8.6",
+    "react-ace": "^7.0.2",
     "react-dom": "16.8.6"
   },
   "devDependencies": {
diff --git a/src/components/App.js b/src/components/App.js
index 409ec52..cf5461b 100755
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -3,6 +3,9 @@ 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);
 
@@ -10,20 +13,24 @@ function App() {
   const [style, setStyle] = useState(initStyleString);
   const [viewport, setViewport] = useState(initViewport);
   const editorRef = createRef();
+  let editorStyle;
 
   const onViewportChange = (newViewport) => {
     setViewport(newViewport);
   };
 
+  const onEditorChange = (newStyleValue) => {
+    editorStyle = newStyleValue;
+  };
+
   const setStyleHandler = () => {
-    let { value } = editorRef.current;
+    let value = editorStyle;
     value = value.replace(/'/g, '"');
 
     const result = validate(value);
 
     if (result.length === 0) {
       setStyle(value);
-      editorRef.current.value = JSON.stringify(JSON.parse(value), null, 1);
     } else {
       result.forEach(({ message }) => console.error(message));
     }
@@ -45,10 +52,29 @@ function App() {
         {...viewport}
         onViewportChange={onViewportChange}
       />
-      <textarea
+      <AceEditor
+        style={{
+          width: '50%',
+          height: '100vh'
+        }}
         ref={editorRef}
-        style={{ width: '50%' }}
-        defaultValue={style}
+        placeholder="JSON Style here"
+        theme="github"
+        mode="json"
+        name="styleEditor"
+        fontSize={12}
+        showPrintMargin={true}
+        showGutter={true}
+        highlightActiveLine={true}
+        value={style}
+        onChange={onEditorChange}
+        setOptions={{
+          enableBasicAutocompletion: true,
+          enableLiveAutocompletion: false,
+          enableSnippets: false,
+          showLineNumbers: true,
+          tabSize: 2,
+        }}
       />
       <button onClick={setStyleHandler}>
         apply
diff --git a/src/config/initStyle.js b/src/config/initStyle.js
index bd9863a..dedc90b 100644
--- a/src/config/initStyle.js
+++ b/src/config/initStyle.js
@@ -12,8 +12,8 @@ export default {
             geometry: {
               type: 'Point',
               coordinates: [
-                0,
-                0
+                37.4841,
+                55.8067
               ]
             }
           }
diff --git a/src/config/initViewport.js b/src/config/initViewport.js
index 053e146..955b4cb 100644
--- a/src/config/initViewport.js
+++ b/src/config/initViewport.js
@@ -1,5 +1,5 @@
 export default {
-  latitude: 0,
-  longitude: 0,
-  zoom: 0
+  latitude: 55.8067,
+  longitude: 37.4841,
+  zoom: 9
 };

From 75c59193c539e23be5a69e6c95596f5ed56c050a Mon Sep 17 00:00:00 2001
From: Andrey Bakhvalov <bakhvalov.andrey@gmail.com>
Date: Thu, 4 Jul 2019 21:50:39 +0300
Subject: [PATCH 2/3] =?UTF-8?q?style:=20=F0=9F=92=84=20formating?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/App.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index cf5461b..9c7173a 100755
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -3,7 +3,7 @@ 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 AceEditor from 'react-ace';
 import 'brace/mode/json';
 import 'brace/theme/github';
 
@@ -58,10 +58,10 @@ function App() {
           height: '100vh'
         }}
         ref={editorRef}
-        placeholder="JSON Style here"
-        theme="github"
-        mode="json"
-        name="styleEditor"
+        placeholder='JSON Style here'
+        theme='github'
+        mode='json'
+        name='styleEditor'
         fontSize={12}
         showPrintMargin={true}
         showGutter={true}
@@ -73,15 +73,15 @@ function App() {
           enableLiveAutocompletion: false,
           enableSnippets: false,
           showLineNumbers: true,
-          tabSize: 2,
+          tabSize: 2
         }}
       />
       <button onClick={setStyleHandler}>
         apply
       </button>
-
-      <div className='zoomPanel'>Zoom:{viewport.zoom.toFixed(2)}</div>
-
+      <div className='zoomPanel'>
+        {`Zoom: ${viewport.zoom.toFixed(2)}`}
+      </div>
     </div>
   );
 }

From 81986dfe45732e032cc817cf558a0a2efae03dd4 Mon Sep 17 00:00:00 2001
From: Andrey Bakhvalov <bakhvalov.andrey@gmail.com>
Date: Thu, 4 Jul 2019 23:53:59 +0300
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=F0=9F=90=9B=20remove=20apply=20butt?=
 =?UTF-8?q?on?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/App.js | 47 ++++++++++++++++++-------------------------
 1 file changed, 20 insertions(+), 27 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 9c7173a..b2eb8a2 100755
--- 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>