diff --git a/src/components/Widgets/ReviewNearbyTasksWidget/ReviewNearbyTasksWidget.js b/src/components/Widgets/ReviewNearbyTasksWidget/ReviewNearbyTasksWidget.js index 6a2a68af2..9c119a16b 100644 --- a/src/components/Widgets/ReviewNearbyTasksWidget/ReviewNearbyTasksWidget.js +++ b/src/components/Widgets/ReviewNearbyTasksWidget/ReviewNearbyTasksWidget.js @@ -11,16 +11,15 @@ import _pick from 'lodash/pick' import _omit from 'lodash/omit' import bbox from '@turf/bbox' import { point, featureCollection } from '@turf/helpers' -import { WidgetDataTarget, registerWidgetType } - from '../../../services/Widget/Widget' + +import { WidgetDataTarget, registerWidgetType } from '../../../services/Widget/Widget' import MapPane from '../../EnhancedMap/MapPane/MapPane' import TaskClusterMap from '../../TaskClusterMap/TaskClusterMap' import TaskPropertyFilter from '../../TaskFilters/TaskPropertyFilter' import TaskPriorityFilter from '../../TaskFilters/TaskPriorityFilter' import TaskReviewStatusFilter from '../../TaskFilters/TaskReviewStatusFilter' import TaskStatusFilter from '../../TaskFilters/TaskStatusFilter' -import WithSelectedClusteredTasks - from '../../HOCs/WithSelectedClusteredTasks/WithSelectedClusteredTasks' +import WithSelectedClusteredTasks from '../../HOCs/WithSelectedClusteredTasks/WithSelectedClusteredTasks' import WithBrowsedChallenge from '../../HOCs/WithBrowsedChallenge/WithBrowsedChallenge' import WithNearbyTasks from '../../HOCs/WithNearbyTasks/WithNearbyTasks' import WithTaskClusterMarkers from '../../HOCs/WithTaskClusterMarkers/WithTaskClusterMarkers' @@ -29,11 +28,9 @@ import WithClusteredTasks from '../../HOCs/WithClusteredTasks/WithClusteredTasks import WithFilterCriteria from '../../HOCs/WithFilterCriteria/WithFilterCriteria' import WithTaskPropertyKeys from '../../HOCs/WithTaskPropertyKeys/WithTaskPropertyKeys' import WithBoundedTasks from '../../HOCs/WithBoundedTasks/WithBoundedTasks' -import WithFilteredClusteredTasks - from '../../HOCs/WithFilteredClusteredTasks/WithFilteredClusteredTasks' +import WithFilteredClusteredTasks from '../../HOCs/WithFilteredClusteredTasks/WithFilteredClusteredTasks' import AsMappableTask from '../../../interactions/Task/AsMappableTask' -import WithWebSocketSubscriptions - from '../../HOCs/WithWebSocketSubscriptions/WithWebSocketSubscriptions' +import WithWebSocketSubscriptions from '../../HOCs/WithWebSocketSubscriptions/WithWebSocketSubscriptions' import { toLatLngBounds } from '../../../services/MapBounds/MapBounds' import QuickWidget from '../../QuickWidget/QuickWidget' import BusySpinner from '../../BusySpinner/BusySpinner' @@ -49,11 +46,11 @@ const descriptor = { defaultWidth: 7, minHeight: 10, defaultHeight: 11, -} +}; const ClusterMap = WithChallengeTaskClusters( WithTaskClusterMarkers(TaskClusterMap('taskBundling')) -) +); export default class ReviewNearbyTasksWidget extends Component { constructor(props) { @@ -61,7 +58,7 @@ export default class ReviewNearbyTasksWidget extends Component { // Define the initial state this.state = { - currentSelectedTasks: [] + currentSelectedTasks: [], }; } /** @@ -69,82 +66,95 @@ export default class ReviewNearbyTasksWidget extends Component { * and initially within bounds of "nearby" tasks as a starting point for the * widget map */ - initializeClusterFilters(prevProps={}) { - // If the nearby tasks loaded, update bounds - if (_get(this.props, 'nearbyTasks.tasks.length', 0) > 0 && - !_isEqual(this.props.nearbyTasks, prevProps.nearbyTasks)) { - this.setBoundsToNearbyTask() + initializeClusterFilters(prevProps = {}) { + if ( + _get(this.props, 'nearbyTasks.tasks.length', 0) > 0 && + !_isEqual(this.props.nearbyTasks, prevProps.nearbyTasks) + ) { + this.setBoundsToNearbyTask(); } } - initializeWebsocketSubscription(prevProps={}) { - const challengeId = _get(this.props.task, 'parent.id') - if (_isFinite(challengeId) && - (challengeId !== _get(prevProps.task, 'parent.id'))) { - this.props.subscribeToChallengeTaskMessages(challengeId) + initializeWebsocketSubscription(prevProps = {}) { + const challengeId = _get(this.props.task, 'parent.id'); + if ( + _isFinite(challengeId) && + challengeId !== _get(prevProps.task, 'parent.id') + ) { + this.props.subscribeToChallengeTaskMessages(challengeId); } } updateBounds = (challengeId, bounds, zoom) => { - this.props.updateTaskFilterBounds(bounds, zoom) - } + this.props.updateTaskFilterBounds(bounds, zoom); + }; setBoundsToNearbyTask = () => { - const taskList = _get(this.props, 'nearbyTasks.tasks') - - // Add the current task to the task list so that it always shows - // up in the bounds. - const mappableTask = AsMappableTask(this.props.task) - mappableTask.point = mappableTask.calculateCenterPoint() - taskList.push(mappableTask) + const taskList = _get(this.props, 'nearbyTasks.tasks'); + const mappableTask = AsMappableTask(this.props.task); + mappableTask.point = mappableTask.calculateCenterPoint(); + taskList.push(mappableTask); if (taskList.length === 0) { - return + return; } - const nearbyBounds = bbox(featureCollection( - taskList.map(t => point([t.point.lng, t.point.lat])) - )) + const nearbyBounds = bbox( + featureCollection( + taskList.map((t) => point([t.point.lng, t.point.lat])) + ) + ); this.updateBounds( this.props.challengeId, nearbyBounds, _get(this.props, 'mapBounds.zoom', 18) - ) - } + ); + }; componentDidMount() { - this.props.selectTasks(this.props.taskBundle ? this.props.taskBundle.tasks : [this.props.task]) + this.props.selectTasks( + this.props.taskBundle + ? this.props.taskBundle.tasks + : [this.props.task] + ); + if (!this.props.taskBundle) { - this.initializeClusterFilters() - this.initializeWebsocketSubscription() + this.initializeClusterFilters(); + this.initializeWebsocketSubscription(); } } componentDidUpdate(prevProps) { - if(this.state.currentSelectedTasks.length === 0) { - this.setState({currentSelectedTasks: this.props.selectedTasks}) + if (this.state.currentSelectedTasks.length === 0) { + this.setState({ currentSelectedTasks: this.props.selectedTasks }); } if (!this.props.taskBundle) { - this.initializeClusterFilters(prevProps) - this.initializeWebsocketSubscription(prevProps) + this.initializeClusterFilters(prevProps); + this.initializeWebsocketSubscription(prevProps); } } componentWillUnmount() { - const challengeId = _get(this.props.task, 'parent.id') + const challengeId = _get(this.props.task, 'parent.id'); if (_isFinite(challengeId)) { - this.props.unsubscribeFromChallengeTaskMessages(challengeId) + this.props.unsubscribeFromChallengeTaskMessages(challengeId); } - if (_isFinite(_get(this.props, 'task.id')) && - _isFinite(_get(prevProps, 'task.id')) && - this.props.task.id !== prevProps.task.id) { - this.props.resetSelectedTasks() + + if ( + _isFinite(_get(this.props, 'task.id')) && + _isFinite(_get(prevProps, 'task.id')) && + this.props.task.id !== prevProps.task.id + ) { + this.props.resetSelectedTasks(); + } else if ( + this.props.task && + this.props.selectedTasks && + !this.props.isTaskSelected(this.props.task.id) + ) { + this.props.selectTasks([this.props.task]); } - else if (this.props.task && this.props.selectedTasks && !this.props.isTaskSelected(this.props.task.id)) { - this.props.selectTasks([this.props.task]) -} } render() { @@ -159,26 +169,29 @@ export default class ReviewNearbyTasksWidget extends Component { /> - ) - } + ); + }; - const boundingBoxData = this.props.criteria.boundingBox ? 'criteria.boundingBox' : 'workspaceContext.taskMapBounds' - - const map = - + const boundingBoxData = this.props.criteria.boundingBox + ? 'criteria.boundingBox' + : 'workspaceContext.taskMapBounds'; + + const map = ( + + ); return ( -
- {this.props.taskBundle ?
-

- -

-
: null} -
- {this.props.loading ? - : - {map} - } -
-
-
    -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
+
+ {this.props.taskBundle ? ( +
+

+ +

+ ) : null} +
+ {this.props.loading ? ( + + ) : ( + {map} + )}
+
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+
+
- ) + ); } } @@ -240,8 +256,11 @@ registerWidgetType( ) ), 'nearbyTasks', - 'filteredClusteredTasks', - ), true, false, true + 'filteredClusteredTasks' + ), + true, + false, + true ) ), 'nearbyTasks', @@ -253,5 +272,6 @@ registerWidgetType( ) ) ) - ), descriptor -) + ), + descriptor +);