Merge pull request #7 from corpus-synodalium/refactor

Refactor components

src/App.js

@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import queryString from 'query-string';
+import axios from 'axios';
+import './styles/App.css';
+import TopMenuBar from './components/TopMenuBar';
+import Map from './Map';
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    const query = queryString.parse(window.location.search);
+    this.state = {
+      searchTerm: null,
+      mappingData: null,
+      loading: false,
+      inputURL: query.url ? query.url : '',
+    };
+  }
+
+  componentDidMount() {
+    if (this.state.inputURL) {
+      this.handleInputURL(this.state.inputURL);
+    }
+  }
+
+  handleInputURL = (url) => {
+    const testURL = url.replace('end=0', 'end=1').concat('&format=json');
+    let query = null;
+    this.setState({ loading: true });
+    axios
+      .get(testURL)
+      .then((response) => response.data)
+      .then((data) => {
+        query = data.query;
+        query.end = data.results_length;
+        this.fetchData(query, testURL);
+      })
+      .catch((error) => {
+        console.error(error);
+        this.setState({ loading: false, searchTerm: null });
+      });
+  };
+
+  fetchData = (query, testURL) => {
+    const i = testURL.indexOf('/query');
+    const baseURL = testURL.substring(0, i + 6);
+    axios
+      .get(baseURL, { params: query })
+      .then((response) => response.data)
+      .then((data) => {
+        //console.log(data);
+        this.setState({ searchTerm: query.q });
+        this.processData(data);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
+  processData = ({ results }) => {
+    const dioceseMap = {};
+    const mappingData = {};
+    mappingData.searchTerm = this.state.searchTerm;
+    results.forEach((result) => {
+      const { context, metadata_fields: metadata } = result;
+      const { record_id, diocese_id } = metadata;
+      if (diocese_id) {
+        if (dioceseMap.hasOwnProperty(diocese_id)) {
+          if (!dioceseMap[diocese_id].has(record_id)) {
+            dioceseMap[diocese_id].add(record_id);
+            mappingData[diocese_id].push({ metadata, context });
+          }
+        } else {
+          dioceseMap[diocese_id] = new Set([record_id]);
+          mappingData[diocese_id] = [{ metadata, context }];
+        }
+      }
+    });
+    //console.log(mappingData);
+    this.setState({
+      mappingData,
+      loading: false,
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <TopMenuBar
+          inputURL={this.state.inputURL}
+          handleInputURL={this.handleInputURL}
+          searchTerm={this.state.searchTerm}
+        />
+        <Map mappingData={this.state.mappingData} />
+        {this.state.loading && (
+          <div className="center">
+            <div className="loading-circle" />
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+export default App;

src/Map.js

@@ -0,0 +1,104 @@
+import React, { Component } from 'react';
+import { Map as LeafletMap, ScaleControl } from 'react-leaflet';
+import mapConfig from './assets/map_config';
+import './styles/Map.css';
+import MapBoxLayer from './components/MapBoxLayer';
+import ControlPanel from './components/ControlPanel';
+import InfoPanel from './components/InfoPanel';
+import ColorLegend from './components/ColorLegend';
+import RecordsModal from './components/RecordsModal';
+import GeoJSONLayer from './components/GeoJSONLayer';
+
+class LocalLegislationMap extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      config: mapConfig,
+      currentColorScheme: 'color1',
+      info: null,
+      recordsModalOpen: false,
+      searchResults: null,
+    };
+    this.mapRef = React.createRef();
+  }
+
+  showRecordsModal = (searchResults) => {
+    this.setState({
+      searchResults: searchResults,
+      recordsModalOpen: true,
+    });
+  };
+
+  closeRecordsModal = () => {
+    this.setState({ recordsModalOpen: false });
+  };
+
+  changeColorScheme = (colorScheme) => {
+    this.setState({
+      currentColorScheme: colorScheme,
+    });
+  };
+
+  updateInfo = (info) => {
+    this.setState({
+      info: info,
+    });
+  };
+
+  getMaxNumEntries = () => {
+    const { mappingData } = this.props;
+    let maxNumEntries = 0;
+    for (const prop in mappingData) {
+      if (mappingData.hasOwnProperty(prop)) {
+        const numEntries = mappingData[prop].length;
+        if (numEntries > maxNumEntries) {
+          maxNumEntries = numEntries;
+        }
+      }
+    }
+    return maxNumEntries;
+  };
+
+  render() {
+    const config = this.state.config;
+    const maxNumEntries = this.getMaxNumEntries();
+    return (
+      <div>
+        <InfoPanel info={this.state.info} />
+        <ControlPanel changeColorScheme={this.changeColorScheme} />
+        <ColorLegend
+          mappingData={this.props.mappingData}
+          config={config}
+          maxNumEntries={maxNumEntries}
+          currentColorScheme={this.state.currentColorScheme}
+        />
+        <RecordsModal
+          recordsModalOpen={this.state.recordsModalOpen}
+          closeRecordsModal={this.closeRecordsModal}
+          searchResults={this.state.searchResults}
+        />
+        <LeafletMap
+          id="mapid"
+          ref={this.mapRef}
+          center={config.params.center}
+          zoom={config.params.zoom}
+          minZoom={config.params.minZoom}
+          maxZoom={config.params.maxZoom}
+        >
+          <ScaleControl />
+          <MapBoxLayer config={config} />
+          <GeoJSONLayer
+            config={config}
+            updateInfo={this.updateInfo}
+            currentColorScheme={this.state.currentColorScheme}
+            mappingData={this.props.mappingData}
+            maxNumEntries={maxNumEntries}
+            showRecordsModal={this.showRecordsModal}
+          />
+        </LeafletMap>
+      </div>
+    );
+  }
+}
+
+export default LocalLegislationMap;

src/assets/map_config.js

@@ -5,7 +5,7 @@ config.params = {
   zoomControl: false,
   zoom: 5,
   maxZoom: 9,
-  minZoom: 5,
+  minZoom: 4,
   scrollwheel: false,
   legends: true,
   infoControl: false,