Merge pull request #162 from heritagemap/feature/router-to-monument

Роутинг для достопримечательностей
heritagemap · Dec 1, 2020 · f344a0c · f344a0c
2 parents b90d9d5 + ba38333
commit f344a0c
Show file tree

Hide file tree

Showing 15 changed files with 1,773 additions and 417 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "@mapbox/mapbox-gl-geocoder": "4.7.0",
+    "@types/react-router-dom": "^5.1.6",
     "@urbica/react-map-gl": "1.14.2",
     "@urbica/react-map-gl-cluster": "0.2.0",
     "classnames": "2.2.6",
@@ -18,6 +19,7 @@
     "react-dom": "17.0.1",
     "react-map-gl": "5.2.10",
     "react-map-gl-geocoder": "2.1.6",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.4",
     "supercluster": "6.0.2",
     "typescript": "3.9.7",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,30 +1,31 @@
-import React, { useState } from 'react';
+import React from 'react';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+} from "react-router-dom";
 
 import Map from 'components/Map';
 import Sidebar from 'components/Sidebar';
-import MarkerProvider from 'contexts/sidebarContext';
 
 import './App.scss';
 
 function App() {
-  const [currentMonument, setCurrentMonument] = useState(undefined);
-  const [sidebarIsOpen, setSidebarIsOpen] = useState(false);
-
   return (
-    <main>
-      <MarkerProvider
-        value={{
-          monument: currentMonument,
-          setCurrentMonument,
-          sidebarIsOpen,
-          onOpen: () => setSidebarIsOpen(true),
-          onClose: () => setSidebarIsOpen(false),
-        }}
-      >
-        <Sidebar />
-        <Map />
-      </MarkerProvider>
-    </main>
+    <Router>
+      <main>
+        <Switch>
+          <Route path="/lat/:lat/lon/:lon/:id?">
+            <Map />
+            <Sidebar />
+          </Route>
+
+          <Route path="/">
+            <Map />
+          </Route>
+        </Switch>
+      </main>
+    </Router>
   );
 }
 

diff --git a/src/components/FullInfo/FullInfo.module.scss b/src/components/FullInfo/FullInfo.module.scss
@@ -6,14 +6,14 @@
 .attributes {
   color: #aaa;
   font-size: 12px;
-
+
+  div {
+    display: inline-block;
+    margin-right: 4px;
+  }
+
   a:link,
   a:visited  {
     color: #aaa;
   }
-
-  & > * {
-    margin-right: 4px;
-  }
-
 }
diff --git a/src/components/FullInfo/index.tsx b/src/components/FullInfo/index.tsx
@@ -8,7 +8,7 @@ import styles from './FullInfo.module.scss';
 const IMAGE_RESOURCE = '/_api/ru_monument_image?image=';
 const x2js = new X2JS();
 
-const FullInfo = ({ image, id }: { image?: string, id: number }) => {
+const FullInfo = ({ image, id }: { image?: string, id: number | string }) => {
   const [loading, setLoading] = useState(false);
   const [licenses, setLicenses] = useState<string | undefined>('');
   const [file, setFile] = useState<FileInterface | undefined>(undefined);
@@ -51,17 +51,16 @@ const FullInfo = ({ image, id }: { image?: string, id: number }) => {
           <img src={file.urls.file} alt={file.name || 'description'} width="320" />
 
           <div className={styles.attributes}>
-
             {licenses && (
-              <span dangerouslySetInnerHTML={{ __html: licenses }} className={styles.licenses} />
+              <div dangerouslySetInnerHTML={{ __html: licenses }} className={styles.licenses} />
             )}
 
             {file.author && (
-              <span dangerouslySetInnerHTML={{ __html: file.author + ',' }} className={styles.author} />
+              <div dangerouslySetInnerHTML={{ __html: file.author + ',' }} className={styles.author} />
             )}
 
             {file.date && (
-              <span dangerouslySetInnerHTML={{ __html: file.date }} />
+              <div dangerouslySetInnerHTML={{ __html: file.date }} />
             )}
           </div>
         </>

diff --git a/src/components/Map/index.tsx b/src/components/Map/index.tsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { debounce } from 'lodash';
-import { withAlert, AlertManager } from 'react-alert';
+import { withAlert } from 'react-alert';
 
 import MapGL, { Marker, GeolocateControl, NavigationControl } from '@urbica/react-map-gl';
 import Cluster from '@urbica/react-map-gl-cluster';
@@ -9,35 +9,22 @@ import 'mapbox-gl/dist/mapbox-gl.css';
 import Geocoder from 'react-map-gl-geocoder';
 
 import MonumentInterface from 'interfaces/Monument';
-import { ViewportInterface } from 'interfaces/Map';
+import { ViewportInterface, MapPropsInterface, MyMapParams } from 'interfaces/Map';
 import getBbox from 'utils/getBbox';
 
 import MarkerButton from 'components/MarkerButton';
 
 import styles from './MyMap.module.scss';
 import ClusterMarker, { cluster as clusterInterface } from './ClusterMarker';
+import { withRouter } from 'react-router-dom';
+import getRoute from 'utils/getRoute';
 
 const ACCESS_TOKEN ='pk.eyJ1IjoieXVsaWEtYXZkZWV2YSIsImEiOiJjazh0enUyOGEwNTR1M29va3I0YXMweXR5In0.6S0Dy1MTrzcgLlQEHtF2Aw';
 const PAGES_RESOURCE = '/_api/heritage/?action=search&format=json&limit=5000&srcountry=ru&&props=id|name|address|municipality|lat|lon|image|source&bbox=';
 const MIN_ZOOM_LEVEL = 0;
 
-interface MyMapProps {
-  viewport: {
-    latitude: number;
-    longitude: number;
-    zoom: number;
-    bearing: number;
-    pitch: number;
-    width?: number;
-    height?: number;
-  };
-  searchValue: string;
-  monuments: [];
-  loading: boolean;
-}
-
-class MyMap extends Component<{ alert: AlertManager }> {
-  state = {
+class MyMap extends Component<MapPropsInterface> {
+  state: MyMapParams = {
     viewport: {
       latitude: 55.7522,
       longitude: 37.6155,
@@ -63,10 +50,33 @@ class MyMap extends Component<{ alert: AlertManager }> {
   }, 1000);
 
   componentDidMount() {
+    const { lat, lon } = this.props.match.params;
+
+    if (lat && lon) {
+      this.setState(
+        (prevState: MyMapParams) => (
+          {
+            viewport: {
+              ...prevState.viewport,
+              latitude: lat,
+              longitude: lon,
+              zoom: 17, // TODO: брать пользовательский
+            }
+          }
+        )
+      );
+
+      return;
+    }
+
     const viewport = window.localStorage.getItem('viewport');
 
     if (viewport) {
-      this.setState({ viewport: JSON.parse(viewport) });
+      const { latitude, longitude } = JSON.parse(viewport);
+
+      this.props.history.push(
+        getRoute({ lat: latitude, lon: longitude }),
+      );
     }
   }
 
@@ -78,7 +88,7 @@ class MyMap extends Component<{ alert: AlertManager }> {
     const width = document.body.offsetWidth;
     const height = document.body.offsetHeight;
     const { longitude, latitude, zoom } = viewport;
-    const bbox = getBbox({ longitude, latitude, width, height, zoom: Math.max(MIN_ZOOM_LEVEL, zoom) });
+    const bbox = getBbox({ longitude, latitude, width, height, zoom: Math.max(MIN_ZOOM_LEVEL, Number(zoom)) });
 
     this.setState({ viewport, zoom: Math.max(MIN_ZOOM_LEVEL, zoom) });
 
@@ -94,7 +104,7 @@ class MyMap extends Component<{ alert: AlertManager }> {
 
       // @ts-ignore
       const { longitude, latitude, zoom } = JSON.parse(window.localStorage.getItem('viewport'));
-      const bbox = getBbox({ longitude, latitude, width, height, zoom: Math.max(MIN_ZOOM_LEVEL, zoom) });
+      const bbox = getBbox({ longitude, latitude, width, height, zoom: Math.max(MIN_ZOOM_LEVEL, Number(zoom)) });
       this.loadPoints(bbox);
       return;
     };
@@ -111,13 +121,13 @@ class MyMap extends Component<{ alert: AlertManager }> {
       const { zoom } = this.state.viewport;
 
       this.setState((prevState: { viewport: ViewportInterface }) => {
-        const viewport = { ...prevState.viewport, longitude, latitude, zoom: Math.max(MIN_ZOOM_LEVEL, zoom) };
+        const viewport = { ...prevState.viewport, longitude, latitude, zoom: Math.max(MIN_ZOOM_LEVEL, Number(zoom)) };
         window.localStorage.setItem('viewport', JSON.stringify(viewport));
 
         return ({ viewport });
       })
 
-      const bbox = getBbox({ longitude, latitude, width, height, zoom: Math.max(MIN_ZOOM_LEVEL, zoom) });
+      const bbox = getBbox({ longitude, latitude, width, height, zoom: Math.max(MIN_ZOOM_LEVEL, Number(zoom)) });
       this.loadPointsWithDebounce(bbox);
     });
   }
@@ -129,7 +139,7 @@ class MyMap extends Component<{ alert: AlertManager }> {
     const supercluster = this.cluster.current.getCluster();
     const zoom = supercluster.getClusterExpansionZoom(clusterId);
 
-    this.setState((prevState: MyMapProps) => {
+    this.setState((prevState: MyMapParams) => {
       return {
         viewport: {
           ...prevState.viewport,
@@ -236,4 +246,5 @@ class MyMap extends Component<{ alert: AlertManager }> {
   }
 }
 
-export default withAlert()(MyMap);
+// @ts-ignore
+export default withRouter(withAlert()(MyMap));
diff --git a/src/components/MarkerButton/index.tsx b/src/components/MarkerButton/index.tsx
@@ -1,22 +1,23 @@
-import React, { FC, useContext } from 'react';
-import { SidebarContext } from 'contexts/sidebarContext';
-import SidebarContextInterface from 'interfaces/SidebarContext';
-import MonumentInterface from 'interfaces/Monument';
+import React, { FC } from 'react';
+import { useHistory, useParams } from "react-router-dom";
 
+import MonumentInterface from 'interfaces/Monument';
+import getRoute from 'utils/getRoute';
 import styles from './MarkerButton.module.scss';
 
 interface MarkerButtonProps {
   item: MonumentInterface;
 }
 
 const MarkerButton: FC<MarkerButtonProps> = ({ item }) => {
-  // @ts-ignore
-  const { sidebarIsOpen, setCurrentMonument, onOpen, monument } : SidebarContextInterface | {} = useContext(SidebarContext);
-  const isActive = sidebarIsOpen && monument.id === item.id;
+  const params: { id?: string } = useParams();
+  const isActive = params?.id === item.id;
+  const history = useHistory();
 
   const handleMarkerClick = () => {
-    setCurrentMonument(item);
-    onOpen();
+    history.push(
+      getRoute({ lat: item.lat, lon: item.lon, id: item.id }),
+    );
   }
 
   return (