Extract Map.js

2 files changed, 32 insertions, 24 deletions

diff --git a/src/Geshem.js b/src/Geshem.js
index 72ea853..e272e3a 100644
--- a/src/Geshem.js
+++ b/src/Geshem.js
@@ -1,29 +1,17 @@
 import React, { useState, Component } from 'react';
-import { BrowserRouter as Router, Route } from "react-router-dom"
-;
+import { BrowserRouter as Router, Route } from "react-router-dom";
 import Slider from 'rc-slider';
 import { DateTime } from 'luxon';
 import axios from 'axios';
 
-import mapboxgl from 'mapbox-gl';
-import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
+import Map from './Map'
 
 import './Geshem.css';
-import 'mapbox-gl/dist/mapbox-gl.css';
 import 'rc-slider/assets/index.css';
 
-const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw';
-
-const Map = ReactMapboxGl({
-  accessToken: MAPBOX_ACCESS_TOKEN,
-  minZoom: 5,
-  maxZoom: 10,
-  hash: false,
-});
 
 const IMGS_BASE_URL = 'https://imgs.geshem.space/'
 
-
 function App() {
   return (
     <Router>
@@ -34,17 +22,9 @@ function App() {
 }
 
 function Geshem() {
-  const [center, setCenter] = useState([35, 31.9]);
-  const [zoom, setZoom] = useState([6.3]);
-
   return (
-    <Map style="mapbox://styles/mapbox/dark-v9" center={center} zoom={zoom}
-      containerStyle={{
-        height: '100vh',
-        width: '100vw'
-      }}
-    ></Map>
-  );
+    <Map />
+  )
 }
 
 class OldGeshem extends Component {
diff --git a/src/Map.js b/src/Map.js
new file mode 100644
index 0000000..78dbebf
--- /dev/null
+++ b/src/Map.js
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw';
+
+const Mapbox = ReactMapboxGl({
+  accessToken: MAPBOX_ACCESS_TOKEN,
+  minZoom: 5,
+  maxZoom: 10,
+  hash: false,
+});
+
+function Map() {
+  const [center, setCenter] = useState([35, 31.9]);
+  const [zoom, setZoom] = useState([6.3]);
+
+  return (
+    <Mapbox style="mapbox://styles/mapbox/dark-v9" center={center} zoom={zoom}
+      containerStyle={{
+        height: '100vh',
+        width: '100vw'
+      }}
+    ></Mapbox>
+  );
+}
+
+export default Map;