From ed97111f4940a39652044ef39d4bf7ee7ad9ee65 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Sun, 7 Mar 2021 22:45:29 -0500 Subject: [PATCH 01/11] Start moving visFtrs to id-based lookup instead of duplicating objects. --- src/lib/components/App.js | 25 +++++++++++++++++-------- src/lib/components/FeatureList.js | 12 ++++++------ src/lib/components/FeatureListItem.js | 2 +- src/lib/components/InteractiveMap.js | 11 +++++++---- 4 files changed, 31 insertions(+), 19 deletions(-) diff --git a/src/lib/components/App.js b/src/lib/components/App.js index 63adb0f..b1b6ac7 100644 --- a/src/lib/components/App.js +++ b/src/lib/components/App.js @@ -28,6 +28,7 @@ export default class App extends React.Component { /** Array of visible feature points in maps and lists. (visibleFeatures) */ allFeatures: [], visFtrs: [], + visFtrsNew: [], /** The type of view. * Options: list, detail, map, filter * Last two only display differently on mobile. */ @@ -78,7 +79,7 @@ export default class App extends React.Component { if (!isArtwork(f)) return null return f }).filter(Boolean) - this.setState({ allFeatures: visFtrs, visFtrs }, + this.setState({ allFeatures: visFtrs.map((f, i) => Object.assign({index: i}, f)), visFtrs, visFtrsNew: [...visFtrs.keys()] }, // Sort after first load. () => { this.sortList() } ); @@ -105,7 +106,7 @@ export default class App extends React.Component { setVisibleFeatures = (visFtrs) => { this.setState( - {visFtrs: visFtrs}, + {visFtrsNew: visFtrs}, () => { this.sortList() } ); } @@ -152,7 +153,7 @@ export default class App extends React.Component { return keepForYear && keepForWard && keepForProgram; }) - this.setVisibleFeatures(visibleFeatures); + this.setVisibleFeatures(visibleFeatures.map(f => f.index)); } handleSelectYears = (selectedOptions) => { @@ -212,19 +213,19 @@ export default class App extends React.Component { switch(this.state.sortType) { case 'artist-asc': default: - sortedList = sort(this.state.visFtrs).asc(u => u.properties.title ? u.properties.title.toLowerCase() : u.properties.title) + sortedList = sort(this.state.visFtrsNew).asc(i => this.state.allFeatures[i].properties?.title.toLowerCase()) break case 'artist-desc': - sortedList = sort(this.state.visFtrs).desc(u => u.properties.title ? u.properties.title.toLowerCase() : u.properties.title) + sortedList = sort(this.state.visFtrsNew).desc(i => this.state.allFeatures[i].properties?.title.toLowerCase()) break case 'year-asc': - sortedList = sort(this.state.visFtrs).asc(u => u.properties.year) + sortedList = sort(this.state.visFtrsNew).asc(i => this.state.allFeatures[i].properties?.year) break case 'year-desc': - sortedList = sort(this.state.visFtrs).desc(u => u.properties.year) + sortedList = sort(this.state.visFtrsNew).desc(i => this.state.allFeatures[i].properties?.year) break } - this.setState({visFtrs: sortedList}) + this.setState({visFtrsNew: sortedList}) } handleMapClick = (feature) => { @@ -275,7 +276,9 @@ export default class App extends React.Component { render() { const { showSplash, + allFeatures, visFtrs, + visFtrsNew, activeFeature, isMobileView, isFiltered, @@ -299,7 +302,9 @@ export default class App extends React.Component { }> @@ -319,7 +324,9 @@ export default class App extends React.Component { /> @@ -331,7 +338,9 @@ export default class App extends React.Component { { +const FeatureList = ({ allFeatures, features = [], featuresNew = [], onItemClick, isMobile, activeFeature }) => { useEffect(() => { forceCheck() }); return (
-

{features.length} Results

+

{featuresNew.length} Results

    - {features.map(feature => + {featuresNew.map(i => { - features.map((feature, i) => { + featuresNew.map((i) => { + const feature = allFeatures[i]; const validPrograms = ["StART Support", "Partnership Program", "Outside the Box"] const program = validPrograms.includes(feature.properties.program) ? feature.properties.program : "Other" const isSelected = activeFeature && feature.properties.uid === activeFeature.properties.uid From 7008d2a81cefb23abe7db8ec4404a4b9d31129ae Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Sun, 7 Mar 2021 22:50:59 -0500 Subject: [PATCH 02/11] Removed references to object-based visFtrs. --- src/lib/components/App.js | 5 ----- src/lib/components/FeatureList.js | 4 ++-- src/lib/components/InteractiveMap.js | 1 - 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/lib/components/App.js b/src/lib/components/App.js index b1b6ac7..9409396 100644 --- a/src/lib/components/App.js +++ b/src/lib/components/App.js @@ -27,7 +27,6 @@ export default class App extends React.Component { state = { /** Array of visible feature points in maps and lists. (visibleFeatures) */ allFeatures: [], - visFtrs: [], visFtrsNew: [], /** The type of view. * Options: list, detail, map, filter @@ -277,7 +276,6 @@ export default class App extends React.Component { const { showSplash, allFeatures, - visFtrs, visFtrsNew, activeFeature, isMobileView, @@ -303,7 +301,6 @@ export default class App extends React.Component { { +const FeatureList = ({ allFeatures = [], featuresNew = [], onItemClick, isMobile, activeFeature }) => { useEffect(() => { forceCheck() }); @@ -29,7 +29,7 @@ const FeatureList = ({ allFeatures, features = [], featuresNew = [], onItemClick FeatureListItem.propTypes = { - features: PropTypes.arrayOf(PropTypes.object), + featuresNew: PropTypes.arrayOf(PropTypes.number), onItemClick: PropTypes.func, } diff --git a/src/lib/components/InteractiveMap.js b/src/lib/components/InteractiveMap.js index 3dc0876..8f967e7 100644 --- a/src/lib/components/InteractiveMap.js +++ b/src/lib/components/InteractiveMap.js @@ -19,7 +19,6 @@ class InteractiveMap extends React.Component { this.state = { prevActiveFeature: {}, allFeatures: this.props.allFeatures, - features: this.props.features, featuresNew: this.props.featuresNew, wards: {}, } From 86e9d5935988323ed060d474a40bb544cb2ffa4f Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Sun, 7 Mar 2021 23:41:35 -0500 Subject: [PATCH 03/11] Store index of activeFeature instead of full object. --- src/lib/components/App.js | 20 +++++++++++--------- src/lib/components/FeatureListItem.js | 2 +- src/lib/components/InteractiveMap.js | 2 +- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/lib/components/App.js b/src/lib/components/App.js index 9409396..53ecd6a 100644 --- a/src/lib/components/App.js +++ b/src/lib/components/App.js @@ -32,8 +32,8 @@ export default class App extends React.Component { * Options: list, detail, map, filter * Last two only display differently on mobile. */ viewType: "map", - /** Full object representing active artwork. */ - activeFeature: null, + /** Integer representing active artwork. */ + activeFeatureIndex: null, /** Keep track of whether any filters are applied. */ isFiltered: false, /** Array of year OptionTypes to filter features by. */ @@ -227,32 +227,32 @@ export default class App extends React.Component { this.setState({visFtrsNew: sortedList}) } - handleMapClick = (feature) => { + handleMapClick = (featureIndex) => { ReactGA.event({ category: 'Map', action: 'Clicked feature', label: 'ward or artwork', }) - this.setActiveFeature(feature) + this.setActiveFeature(featureIndex) } - setActiveFeature = (feature) => { + setActiveFeature = (featureIndex) => { this.setState({ - activeFeature: feature, + activeFeatureIndex: featureIndex, }); } handleCloseFeature = () => { - const uid = this.state.activeFeature.properties.uid + const uid = this.state.allFeatures[this.state.activeFeatureIndex].properties.uid if (typeof(document) !== 'undefined') { const featureBtn = document.getElementById(uid) featureBtn.scrollIntoView() featureBtn.focus() } this.setState({ - activeFeature: null + activeFeatureIndex: null }) } @@ -277,13 +277,15 @@ export default class App extends React.Component { showSplash, allFeatures, visFtrsNew, - activeFeature, + activeFeatureIndex, isMobileView, isFiltered, viewType, showWardLayer, } = this.state; + const activeFeature = allFeatures[activeFeatureIndex] + return (
    diff --git a/src/lib/components/FeatureListItem.js b/src/lib/components/FeatureListItem.js index 68308b4..906acab 100644 --- a/src/lib/components/FeatureListItem.js +++ b/src/lib/components/FeatureListItem.js @@ -16,7 +16,7 @@ const FeatureListItem = ({ feature, onClick, isMobile, activeFeature }) => { value: uid, }) - onClick(feature) + onClick(feature.index) } const handleKeyPress = (event) => { diff --git a/src/lib/components/InteractiveMap.js b/src/lib/components/InteractiveMap.js index 8f967e7..a457451 100644 --- a/src/lib/components/InteractiveMap.js +++ b/src/lib/components/InteractiveMap.js @@ -164,7 +164,7 @@ class InteractiveMap extends React.Component { key={feature.properties.uid} icon={icon} position={{ lng: feature.geometry.coordinates[0], lat: feature.geometry.coordinates[1] }} - onClick={ () => onFeatureMapClick(feature) } + onClick={ () => onFeatureMapClick(feature.index) } zIndex={isSelected ? 2 : 1} /> ) From db605a34ac13f5781225b047c7753cd5558cb576 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Sun, 7 Mar 2021 23:59:12 -0500 Subject: [PATCH 04/11] Sort list artworks by key. --- package-lock.json | 5 +++++ package.json | 1 + src/lib/components/App.js | 9 +++++---- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 71fe6e8..0f2f6ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9275,6 +9275,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==" }, + "lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "lodash._reinterpolate": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", diff --git a/package.json b/package.json index 2e3e8fd..47e8816 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "fast-sort": "^1.5.6", + "lodash-es": "^4.17.21", "node-sass": "^4.13.1", "react-app-polyfill": "^1.0.6", "react-ga": "^2.7.0", diff --git a/src/lib/components/App.js b/src/lib/components/App.js index 53ecd6a..ba37b25 100644 --- a/src/lib/components/App.js +++ b/src/lib/components/App.js @@ -3,6 +3,7 @@ import ReactGA from 'react-ga'; import sort from 'fast-sort'; import runtimeEnv from '@mars/heroku-js-runtime-env'; import { forceCheck } from 'react-lazyload'; +import * as _ from 'lodash'; import BetaBanner from "./BetaBanner"; import Splash from "./Splash"; @@ -212,16 +213,16 @@ export default class App extends React.Component { switch(this.state.sortType) { case 'artist-asc': default: - sortedList = sort(this.state.visFtrsNew).asc(i => this.state.allFeatures[i].properties?.title.toLowerCase()) + sortedList = sort(this.state.visFtrsNew).asc(i => _.find(this.state.allFeatures, { index: i }).properties?.title.toLowerCase()) break case 'artist-desc': - sortedList = sort(this.state.visFtrsNew).desc(i => this.state.allFeatures[i].properties?.title.toLowerCase()) + sortedList = sort(this.state.visFtrsNew).desc(i => _.find(this.state.allFeatures, { index: i }).properties?.title.toLowerCase()) break case 'year-asc': - sortedList = sort(this.state.visFtrsNew).asc(i => this.state.allFeatures[i].properties?.year) + sortedList = sort(this.state.visFtrsNew).asc(i => _.find(this.state.allFeatures, { index: i }).properties?.year) break case 'year-desc': - sortedList = sort(this.state.visFtrsNew).desc(i => this.state.allFeatures[i].properties?.year) + sortedList = sort(this.state.visFtrsNew).desc(i => _.find(this.state.allFeatures, { index: i }).properties?.year) break } this.setState({visFtrsNew: sortedList}) From dfe1364df46cc327f5d06ea3dd907cee0eecfd7a Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Mon, 8 Mar 2021 00:20:29 -0500 Subject: [PATCH 05/11] Select visible artworks by ID. --- src/lib/components/App.js | 32 +++++++++++++-------------- src/lib/components/FeatureList.js | 12 +++++----- src/lib/components/FeatureListItem.js | 2 +- src/lib/components/InteractiveMap.js | 7 +++--- 4 files changed, 28 insertions(+), 25 deletions(-) diff --git a/src/lib/components/App.js b/src/lib/components/App.js index ba37b25..3f20c43 100644 --- a/src/lib/components/App.js +++ b/src/lib/components/App.js @@ -33,8 +33,8 @@ export default class App extends React.Component { * Options: list, detail, map, filter * Last two only display differently on mobile. */ viewType: "map", - /** Integer representing active artwork. */ - activeFeatureIndex: null, + /** Integer representing active artwork ID. */ + activeFeatureId: null, /** Keep track of whether any filters are applied. */ isFiltered: false, /** Array of year OptionTypes to filter features by. */ @@ -79,7 +79,7 @@ export default class App extends React.Component { if (!isArtwork(f)) return null return f }).filter(Boolean) - this.setState({ allFeatures: visFtrs.map((f, i) => Object.assign({index: i}, f)), visFtrs, visFtrsNew: [...visFtrs.keys()] }, + this.setState({ allFeatures: visFtrs, visFtrsNew: visFtrs.map(f => f.id) }, // Sort after first load. () => { this.sortList() } ); @@ -153,7 +153,7 @@ export default class App extends React.Component { return keepForYear && keepForWard && keepForProgram; }) - this.setVisibleFeatures(visibleFeatures.map(f => f.index)); + this.setVisibleFeatures(visibleFeatures.map(f => f.id)); } handleSelectYears = (selectedOptions) => { @@ -213,47 +213,47 @@ export default class App extends React.Component { switch(this.state.sortType) { case 'artist-asc': default: - sortedList = sort(this.state.visFtrsNew).asc(i => _.find(this.state.allFeatures, { index: i }).properties?.title.toLowerCase()) + sortedList = sort(this.state.visFtrsNew).asc(id => _.find(this.state.allFeatures, { id }).properties?.title.toLowerCase()) break case 'artist-desc': - sortedList = sort(this.state.visFtrsNew).desc(i => _.find(this.state.allFeatures, { index: i }).properties?.title.toLowerCase()) + sortedList = sort(this.state.visFtrsNew).desc(id => _.find(this.state.allFeatures, { id }).properties?.title.toLowerCase()) break case 'year-asc': - sortedList = sort(this.state.visFtrsNew).asc(i => _.find(this.state.allFeatures, { index: i }).properties?.year) + sortedList = sort(this.state.visFtrsNew).asc(id => _.find(this.state.allFeatures, { id }).properties?.year) break case 'year-desc': - sortedList = sort(this.state.visFtrsNew).desc(i => _.find(this.state.allFeatures, { index: i }).properties?.year) + sortedList = sort(this.state.visFtrsNew).desc(id => _.find(this.state.allFeatures, { id }).properties?.year) break } this.setState({visFtrsNew: sortedList}) } - handleMapClick = (featureIndex) => { + handleMapClick = (featureId) => { ReactGA.event({ category: 'Map', action: 'Clicked feature', label: 'ward or artwork', }) - this.setActiveFeature(featureIndex) + this.setActiveFeature(featureId) } - setActiveFeature = (featureIndex) => { + setActiveFeature = (featureId) => { this.setState({ - activeFeatureIndex: featureIndex, + activeFeatureId: featureId, }); } handleCloseFeature = () => { - const uid = this.state.allFeatures[this.state.activeFeatureIndex].properties.uid + const uid = this.state.allFeatures[this.state.activeFeatureId].properties.uid if (typeof(document) !== 'undefined') { const featureBtn = document.getElementById(uid) featureBtn.scrollIntoView() featureBtn.focus() } this.setState({ - activeFeatureIndex: null + activeFeatureId: null }) } @@ -278,14 +278,14 @@ export default class App extends React.Component { showSplash, allFeatures, visFtrsNew, - activeFeatureIndex, + activeFeatureId, isMobileView, isFiltered, viewType, showWardLayer, } = this.state; - const activeFeature = allFeatures[activeFeatureIndex] + const activeFeature = allFeatures[activeFeatureId] return (
    diff --git a/src/lib/components/FeatureList.js b/src/lib/components/FeatureList.js index 2626018..ac67fe1 100644 --- a/src/lib/components/FeatureList.js +++ b/src/lib/components/FeatureList.js @@ -1,6 +1,7 @@ import React, { useEffect } from 'react'; import PropTypes from "prop-types"; import { forceCheck } from 'react-lazyload'; +import * as _ from 'lodash'; import FeatureListItem from './FeatureListItem'; @@ -13,15 +14,16 @@ const FeatureList = ({ allFeatures = [], featuresNew = [], onItemClick, isMobile

    {featuresNew.length} Results

      - {featuresNew.map(i => - { + const feature = _.find(allFeatures, { id }) + return - )} + })}
    ); diff --git a/src/lib/components/FeatureListItem.js b/src/lib/components/FeatureListItem.js index 906acab..83dc99a 100644 --- a/src/lib/components/FeatureListItem.js +++ b/src/lib/components/FeatureListItem.js @@ -16,7 +16,7 @@ const FeatureListItem = ({ feature, onClick, isMobile, activeFeature }) => { value: uid, }) - onClick(feature.index) + onClick(feature.id) } const handleKeyPress = (event) => { diff --git a/src/lib/components/InteractiveMap.js b/src/lib/components/InteractiveMap.js index a457451..7d7c45a 100644 --- a/src/lib/components/InteractiveMap.js +++ b/src/lib/components/InteractiveMap.js @@ -1,6 +1,7 @@ import React, { createRef, lazy, Suspense } from 'react'; import PropTypes from "prop-types"; import { Map, Marker, GoogleApiWrapper } from '@nomadiclabs/google-maps-react'; +import * as _ from 'lodash'; import * as constants from "../constants"; @@ -147,8 +148,8 @@ class InteractiveMap extends React.Component { > { - featuresNew.map((i) => { - const feature = allFeatures[i]; + featuresNew.map((id) => { + const feature = _.find(allFeatures, { id }); const validPrograms = ["StART Support", "Partnership Program", "Outside the Box"] const program = validPrograms.includes(feature.properties.program) ? feature.properties.program : "Other" const isSelected = activeFeature && feature.properties.uid === activeFeature.properties.uid @@ -164,7 +165,7 @@ class InteractiveMap extends React.Component { key={feature.properties.uid} icon={icon} position={{ lng: feature.geometry.coordinates[0], lat: feature.geometry.coordinates[1] }} - onClick={ () => onFeatureMapClick(feature.index) } + onClick={ () => onFeatureMapClick(feature.id) } zIndex={isSelected ? 2 : 1} /> ) From 6c63650302edbe90386d62e168b502e6ea091fd0 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Mon, 8 Mar 2021 14:37:34 -0500 Subject: [PATCH 06/11] Bugfix: Clicking map now worked well. --- src/lib/components/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/App.js b/src/lib/components/App.js index 3f20c43..ba01e0d 100644 --- a/src/lib/components/App.js +++ b/src/lib/components/App.js @@ -285,7 +285,7 @@ export default class App extends React.Component { showWardLayer, } = this.state; - const activeFeature = allFeatures[activeFeatureId] + const activeFeature = _.find(allFeatures, { id: activeFeatureId }) return (
    From cfc6e20a8c423e70a9cf103e81825a0653e4b7b0 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Mon, 8 Mar 2021 14:38:00 -0500 Subject: [PATCH 07/11] Removed unneeded state in InteractiveMap component. --- src/lib/components/InteractiveMap.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/components/InteractiveMap.js b/src/lib/components/InteractiveMap.js index 7d7c45a..6f9f841 100644 --- a/src/lib/components/InteractiveMap.js +++ b/src/lib/components/InteractiveMap.js @@ -18,7 +18,6 @@ class InteractiveMap extends React.Component { constructor(props) { super(props) this.state = { - prevActiveFeature: {}, allFeatures: this.props.allFeatures, featuresNew: this.props.featuresNew, wards: {}, From 642fbd9dd9278943f7fd8653de9942ae1d13a94f Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Mon, 8 Mar 2021 14:38:37 -0500 Subject: [PATCH 08/11] Bugfix with feature ID. --- src/lib/components/MapMarkers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/MapMarkers.js b/src/lib/components/MapMarkers.js index a1a4559..48c4bed 100644 --- a/src/lib/components/MapMarkers.js +++ b/src/lib/components/MapMarkers.js @@ -67,7 +67,7 @@ const MapMarkers = ({ features, activeFeature, onFeatureMapClick }) => { key={feature.properties.uid} position={[feature.geometry.coordinates[1], feature.geometry.coordinates[0]]} icon={icon} - onClick={() => onFeatureMapClick(feature) } + onClick={() => onFeatureMapClick(feature.id) } zIndexOffset={isSelected ? 9999 : 0} /> ) From 6e3f7ba03af0062e4f260106469cc33c8ef860aa Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Mon, 8 Mar 2021 17:13:48 -0500 Subject: [PATCH 09/11] Renamed vars and funcs for consistency. --- src/lib/components/App.js | 41 ++++++++++++++-------------- src/lib/components/FeatureList.js | 8 +++--- src/lib/components/InteractiveMap.js | 10 +++---- 3 files changed, 30 insertions(+), 29 deletions(-) diff --git a/src/lib/components/App.js b/src/lib/components/App.js index ba01e0d..b792006 100644 --- a/src/lib/components/App.js +++ b/src/lib/components/App.js @@ -26,9 +26,10 @@ const Footer = lazy(() => import('./Footer')); export default class App extends React.Component { state = { - /** Array of visible feature points in maps and lists. (visibleFeatures) */ + /** Array of all artwork objects that may show in maps and lists. */ allFeatures: [], - visFtrsNew: [], + /** Array of visible artwork IDs in maps and lists. */ + visibleFeatureIds: [], /** The type of view. * Options: list, detail, map, filter * Last two only display differently on mobile. */ @@ -75,11 +76,11 @@ export default class App extends React.Component { fetch(this.props.featuresDataSource) .then(response => response.json()) .then(json => { - const visFtrs = json.features.map(f => { + const allFeatures = json.features.map(f => { if (!isArtwork(f)) return null return f }).filter(Boolean) - this.setState({ allFeatures: visFtrs, visFtrsNew: visFtrs.map(f => f.id) }, + this.setState({ allFeatures, visibleFeatureIds: allFeatures.map(f => f.id) }, // Sort after first load. () => { this.sortList() } ); @@ -104,9 +105,9 @@ export default class App extends React.Component { }) } - setVisibleFeatures = (visFtrs) => { + setVisibleFeatureIds = (visibleFeatureIds) => { this.setState( - {visFtrsNew: visFtrs}, + { visibleFeatureIds }, () => { this.sortList() } ); } @@ -153,7 +154,7 @@ export default class App extends React.Component { return keepForYear && keepForWard && keepForProgram; }) - this.setVisibleFeatures(visibleFeatures.map(f => f.id)); + this.setVisibleFeatureIds(visibleFeatures.map(f => f.id)); } handleSelectYears = (selectedOptions) => { @@ -213,19 +214,19 @@ export default class App extends React.Component { switch(this.state.sortType) { case 'artist-asc': default: - sortedList = sort(this.state.visFtrsNew).asc(id => _.find(this.state.allFeatures, { id }).properties?.title.toLowerCase()) + sortedList = sort(this.state.visibleFeatureIds).asc(id => _.find(this.state.allFeatures, { id }).properties?.title.toLowerCase()) break case 'artist-desc': - sortedList = sort(this.state.visFtrsNew).desc(id => _.find(this.state.allFeatures, { id }).properties?.title.toLowerCase()) + sortedList = sort(this.state.visibleFeatureIds).desc(id => _.find(this.state.allFeatures, { id }).properties?.title.toLowerCase()) break case 'year-asc': - sortedList = sort(this.state.visFtrsNew).asc(id => _.find(this.state.allFeatures, { id }).properties?.year) + sortedList = sort(this.state.visibleFeatureIds).asc(id => _.find(this.state.allFeatures, { id }).properties?.year) break case 'year-desc': - sortedList = sort(this.state.visFtrsNew).desc(id => _.find(this.state.allFeatures, { id }).properties?.year) + sortedList = sort(this.state.visibleFeatureIds).desc(id => _.find(this.state.allFeatures, { id }).properties?.year) break } - this.setState({visFtrsNew: sortedList}) + this.setState({ visibleFeatureIds: sortedList }) } handleMapClick = (featureId) => { @@ -234,11 +235,11 @@ export default class App extends React.Component { action: 'Clicked feature', label: 'ward or artwork', }) - this.setActiveFeature(featureId) + this.setActiveFeatureId(featureId) } - setActiveFeature = (featureId) => { + setActiveFeatureId = (featureId) => { this.setState({ activeFeatureId: featureId, }); @@ -277,7 +278,7 @@ export default class App extends React.Component { const { showSplash, allFeatures, - visFtrsNew, + visibleFeatureIds, activeFeatureId, isMobileView, isFiltered, @@ -304,8 +305,8 @@ export default class App extends React.Component { @@ -325,8 +326,8 @@ export default class App extends React.Component { @@ -338,7 +339,7 @@ export default class App extends React.Component { isMobile={isMobileView} onFeatureMapClick={this.handleMapClick} allFeatures={allFeatures} - featuresNew={visFtrsNew} + visibleFeatureIds={visibleFeatureIds} activeFeature={activeFeature} showWardLayer={showWardLayer} googleApiKey={this.props.googleApiKey} diff --git a/src/lib/components/FeatureList.js b/src/lib/components/FeatureList.js index ac67fe1..974ba79 100644 --- a/src/lib/components/FeatureList.js +++ b/src/lib/components/FeatureList.js @@ -5,16 +5,16 @@ import * as _ from 'lodash'; import FeatureListItem from './FeatureListItem'; -const FeatureList = ({ allFeatures = [], featuresNew = [], onItemClick, isMobile, activeFeature }) => { +const FeatureList = ({ allFeatures = [], featureIds = [], onItemClick, isMobile, activeFeature }) => { useEffect(() => { forceCheck() }); return (
    -

    {featuresNew.length} Results

    +

    {featureIds.length} Results

      - {featuresNew.map(id => { + {featureIds.map(id => { const feature = _.find(allFeatures, { id }) return { - featuresNew.map((id) => { + visibleFeatureIds.map((id) => { const feature = _.find(allFeatures, { id }); const validPrograms = ["StART Support", "Partnership Program", "Outside the Box"] const program = validPrograms.includes(feature.properties.program) ? feature.properties.program : "Other" From b94b8c65ad6dede5bf675cf2dd52ae524102547e Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Mon, 8 Mar 2021 20:47:11 -0500 Subject: [PATCH 10/11] Added debug code to test issue on heroku. --- src/lib/components/InteractiveMap.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/components/InteractiveMap.js b/src/lib/components/InteractiveMap.js index edbd0ce..d635226 100644 --- a/src/lib/components/InteractiveMap.js +++ b/src/lib/components/InteractiveMap.js @@ -149,6 +149,7 @@ class InteractiveMap extends React.Component { { visibleFeatureIds.map((id) => { const feature = _.find(allFeatures, { id }); + if (!feature) { console.log(feature) } const validPrograms = ["StART Support", "Partnership Program", "Outside the Box"] const program = validPrograms.includes(feature.properties.program) ? feature.properties.program : "Other" const isSelected = activeFeature && feature.properties.uid === activeFeature.properties.uid From c01a20eb4e8ca3cfd849bcbc267fd2f95be74258 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Tue, 9 Mar 2021 08:23:53 -0500 Subject: [PATCH 11/11] More debug. --- src/lib/components/InteractiveMap.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/components/InteractiveMap.js b/src/lib/components/InteractiveMap.js index d635226..8762105 100644 --- a/src/lib/components/InteractiveMap.js +++ b/src/lib/components/InteractiveMap.js @@ -148,6 +148,7 @@ class InteractiveMap extends React.Component { { visibleFeatureIds.map((id) => { + console.log(id) const feature = _.find(allFeatures, { id }); if (!feature) { console.log(feature) } const validPrograms = ["StART Support", "Partnership Program", "Outside the Box"]