From 9770af4050785ea09ed16855a33779fdbfd8577a Mon Sep 17 00:00:00 2001
From: Andrey Bakhvalov <bakhvalov.andrey@gmail.com>
Date: Thu, 4 Jul 2019 12:15:57 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20store=20viewport=20in=20?=
 =?UTF-8?q?app=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json          |  2 +-
 src/components/App.js      | 13 ++++++++-----
 src/config/index.js        |  2 ++
 src/config/initViewport.js |  5 +++++
 4 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 src/config/index.js
 create mode 100644 src/config/initViewport.js

diff --git a/package-lock.json b/package-lock.json
index cdb69da..f9ca103 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "style-editor",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/components/App.js b/src/components/App.js
index 843e52c..ca4ed83 100755
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,15 +1,20 @@
 import React, { useState, createRef } from 'react';
 import MapGL from '@urbica/react-map-gl';
 import { validate } from '@mapbox/mapbox-gl-style-spec';
-import initStyle from '../config/initStyle';
+import { initStyle, initViewport } from '../config';
 import 'mapbox-gl/dist/mapbox-gl.css';
 
 const initStyleString = JSON.stringify(initStyle, null, 1);
 
 function App() {
   const [style, setStyle] = useState(initStyleString);
+  const [viewport, setViewport] = useState(initViewport);
   const editorRef = createRef();
 
+  const onViewportChange = (newViewport) => {
+    setViewport(newViewport);
+  };
+
   const setStyleHandler = () => {
     let { value } = editorRef.current;
     value = value.replace(/'/g, '"');
@@ -37,10 +42,8 @@ function App() {
         }}
         mapStyle={JSON.parse(style)}
         accessToken='pk.eyJ1IjoiZGV2aWNlMjUiLCJhIjoiY2lzaGN3d2tiMDAxOTJ6bGYydDZrcHptdiJ9.UK55aUzBquqYns1AdnuTQg'
-        latitude={0}
-        longitude={0}
-        zoom={0}
-        onViewportChange={() => ({})}
+        {...viewport}
+        onViewportChange={onViewportChange}
       />
       <textarea
         ref={editorRef}
diff --git a/src/config/index.js b/src/config/index.js
new file mode 100644
index 0000000..9883439
--- /dev/null
+++ b/src/config/index.js
@@ -0,0 +1,2 @@
+export { default as initStyle }from './initStyle';
+export { default as initViewport }from './initViewport';
diff --git a/src/config/initViewport.js b/src/config/initViewport.js
new file mode 100644
index 0000000..053e146
--- /dev/null
+++ b/src/config/initViewport.js
@@ -0,0 +1,5 @@
+export default {
+  latitude: 0,
+  longitude: 0,
+  zoom: 0
+};