Separate Layout (#1)

Author: martitasea

.storybook/main.js

@@ -19,6 +19,7 @@ module.exports = {
           ...config.resolve.alias,
           '@emotion/core': toPath('node_modules/@emotion/react'),
           'emotion-theming': toPath('node_modules/@emotion/react'),
+          '@geomatico/geocomponents': toPath('node_modules/@geomatico/geocomponents/dist'),
         }
       }
     };

src/components/Layout.js

@@ -0,0 +1,58 @@
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+
+import styled from '@mui/styles/styled';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Box from '@mui/material/Box';
+
+import ResponsiveHeader from '@geomatico/geocomponents/ResponsiveHeader';
+import SidePanel from '@geomatico/geocomponents/SidePanel';
+
+import {WIDESCREEN_STEP, DRAWER_WIDTH} from '../config';
+
+const MainContent = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'leftDrawer'
+})(({theme, leftDrawer}) => ({
+  flexGrow: 1,
+  padding: 0,
+  position: 'absolute',
+  top: theme.mixins.toolbar.minHeight,
+  bottom: 0,
+  right: 0,
+  left: leftDrawer ? DRAWER_WIDTH : 0
+}));
+
+const Layout = ({mainContent, sidePanelContent}) => {
+  const widescreen = useMediaQuery(`(min-width: ${WIDESCREEN_STEP})`, {noSsr: true});
+  const [isSidePanelOpen, setIsSidePanelOpen] = useState(true);
+
+  const handleClose = () => setIsSidePanelOpen(!isSidePanelOpen);
+  return (
+    <>
+      <ResponsiveHeader
+        onStartIconClick={widescreen ? undefined : handleClose}
+        title='ROMA CITÁ APERTA'
+      >
+      </ResponsiveHeader>
+      <SidePanel
+        drawerWidth={DRAWER_WIDTH}
+        anchor='left'
+        isOpen={isSidePanelOpen}
+        onClose={handleClose}
+        widescreen={widescreen}
+      >
+        {sidePanelContent}
+      </SidePanel>
+      <MainContent leftDrawer={isSidePanelOpen && widescreen}>
+        {mainContent}
+      </MainContent>
+    </>
+  );
+};
+
+Layout.propTypes = {
+  sidePanelContent: PropTypes.element.isRequired,
+  mainContent: PropTypes.element.isRequired
+};
+
+export default Layout;

src/components/MainContent.js

@@ -0,0 +1,83 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import PropTypes from 'prop-types';
+
+import Map from '@geomatico/geocomponents/Map';
+
+import {INITIAL_VIEWPORT, LAYERS} from '../config';
+import styled from '@mui/styles/styled';
+import {Popup} from 'react-map-gl';
+
+import PopupInfo from '../components/PopupInfo';
+import {useDispatch, useSelector} from 'react-redux';
+import {getFeatures} from '../modules/api/selectors';
+import {apiGetFeatures} from '../modules/api/actions';
+
+const CustomPopup = styled(Popup)({
+  '& .mapboxgl-popup-content': {
+    padding: 0
+  }
+});
+
+const MainContent = ({mapStyle}) => {
+  const [viewport, setViewport] = useState(INITIAL_VIEWPORT);
+  const [featureClicked, setFeatureClicked] = useState(undefined);
+  const dispatch = useDispatch();
+  const data = useSelector(getFeatures);
+  const sources = useMemo (() => ({
+    data: {
+      type: 'geojson',
+      data: data
+    },
+    quartieri: {
+      type: 'geojson',
+      data: 'carto/quartieri-roma.geojson'
+    }
+  })
+  );
+  const layers = useMemo (() => LAYERS, []);
+  useEffect(() => {
+    dispatch(apiGetFeatures());
+  }, []);
+  const onViewportChange = (viewport) =>
+    setViewport({
+      ...viewport
+    });
+  const handleOnClick = (e) => setFeatureClicked(e.features && e.features[0]);
+  return <Map
+    mapStyle={mapStyle}
+    viewport={viewport}
+    onViewportChange={onViewportChange}
+    sources={sources}
+    layers={layers}
+    interactiveLayerIds={layers.map(({id}) => id)}
+    onClick={handleOnClick}
+    // mapboxAccessToken={process.env.MAPBOX_ACCESS_TOKEN} // Token necesario para ver datos de mapbox o usar mapbox-gl-js v2 (react-map-gl 6)
+  >
+    {
+      featureClicked &&
+    <CustomPopup
+      longitude={featureClicked.geometry.coordinates[0]}
+      latitude={featureClicked.geometry.coordinates[1]}
+      anchor="bottom"
+      closeButton={false}
+    >
+      <PopupInfo
+        name={featureClicked.properties.name}
+        style={featureClicked.properties.style}
+        author={featureClicked.properties.author}
+        description={featureClicked.properties.description}
+        price={featureClicked.properties.price}
+        other={featureClicked.properties.other}
+        image={featureClicked.properties.image}
+        plan={featureClicked.properties.plan}
+      />
+    </CustomPopup>
+    }
+  </Map>;
+};
+
+MainContent.propTypes = {
+  mapStyle: PropTypes.string.isRequired
+};
+
+export default MainContent;

src/components/SidePanelContent.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+
+import BaseMapList from '@geomatico/geocomponents/BaseMapList';
+import MapLegend from '@geomatico/geocomponents/MapLegend';
+
+import SectionTitle from './SectionTitle';
+
+import {LEGEND, MAPSTYLES} from '../config';
+
+const SidePanelContent = ({mapStyle, onMapStyleChanged}) => {
+  return <Stack justifyContent='space-between' sx={{height: '93.5vh'}}>
+    <Box>
+      <Box mb={2}>
+        <SectionTitle titleKey="Estilo Mapa Base"/>
+        <BaseMapList
+          styles={MAPSTYLES}
+          selectedStyleUrl={mapStyle}
+          onStyleChange={onMapStyleChanged}
+          typographyStyleProps={{fontSize: 14}}
+        />
+      </Box>
+      <Box mb={2}>
+        <SectionTitle titleKey="Leyenda"/>
+        <MapLegend fields={LEGEND}
+          sx={{
+            '& .MapLegend-swatch': {
+              margin: '0px 8px 0px 0px',
+              width: 20,
+            },
+            '& .MapLegend-text': {
+              fontSize: 14
+            }}
+          }
+        />
+      </Box>
+    </Box>
+  </Stack>;
+};
+
+SidePanelContent.propTypes = {
+  mapStyle: PropTypes.string.isRequired,
+  onMapStyleChanged: PropTypes.func.isRequired
+};
+
+export default SidePanelContent;

src/config.js

@@ -113,6 +113,15 @@ export const LEGEND = [
   },
 ];
 export const LAYERS = [
+  {
+    id: 'quartieri',
+    source: 'quartieri',
+    type: 'line',
+    paint: {
+      'line-color': '#000',
+      'line-width': 2
+    }
+  },
   {
     id: 'data',
     source: 'data',
@@ -131,13 +140,5 @@ export const LAYERS = [
       ]
     }
   },
-  /*{
-    id: 'quartieri',
-    source: 'quartieri',
-    type: 'line',
-    paint: {
-      'line-color': '#000',
-      'line-width': 2
-    }
-  }*/
+
 ];

src/routes/routes.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import {HashRouter, Routes, Route} from 'react-router-dom';
-import Viewer from '../views/Home';
+import Home from '../views/Home';
 
 const AppRoutes = () =>
   <HashRouter>
     <Routes>
-      <Route exact path='/' element={<Viewer/>}/>
+      <Route exact path='/' element={<Home/>}/>
     </Routes>
   </HashRouter>;