import React from 'react' import { Helmet } from 'react-helmet' import { connect } from 'react-redux' import ActivityCardHeader from './ActivityCardHeader' import ActivityCharts from './ActivityCharts' import ActivityDetails from './ActivityDetails' import ActivityMap from './ActivityMap' import ActivityNoMap from './ActivityNoMap' import ActivityNotes from './ActivityNotes' import ActivitySegments from './ActivitySegments' import CustomModal from '../../Common/CustomModal' import { getOrUpdateData } from '../../../actions' import { deleteActivity } from '../../../actions/activities' class ActivityDisplay extends React.Component { constructor(props, context) { super(props, context) this.state = { displayModal: false, coordinates: { latitude: null, longitude: null, }, } } componentDidMount() { this.props.loadActivity(this.props.match.params.activityId) } componentDidUpdate(prevProps) { if (prevProps.match.params.activityId !== this.props.match.params.activityId) { this.props.loadActivity(this.props.match.params.activityId) } } displayModal(value) { this.setState(prevState => ({ ...prevState, displayModal: value })) } updateCoordinates(activePayload) { const coordinates = (activePayload && activePayload.length > 0) ? { latitude: activePayload[0].payload.latitude, longitude: activePayload[0].payload.longitude, } : { latitude: null, longitude: null, } this.setState(prevState => ({ ...prevState, coordinates })) } render() { const { activities, message, onDeleteActivity, sports, user } = this.props const { coordinates, displayModal } = this.state const [activity] = activities const title = activity ? activity.title : 'Activity' const [sport] = activity ? sports.filter(s => s.id === activity.sport_id) : [] const segmentId = parseInt(this.props.match.params.segmentId) const dataType = segmentId >= 0 ? 'segment' : 'activity' return (
FitTrackee - {title} {message ? ( {message} ) : (
{displayModal && { onDeleteActivity(activity.id) this.displayModal(false) }} close={() => this.displayModal(false)} />} {activity && sport && activities.length === 1 && (
this.displayModal(true)} />
{activity.with_gpx ? ( ) : ( )}
{activity.with_gpx && (
Chart
this.updateCoordinates(e) } />
)} {dataType === 'activity' && ( <> {activity.segments.length > 1 && ( )} )}
)}
)}
) } } export default connect( state => ({ activities: state.activities.data, message: state.message, sports: state.sports.data, user: state.user, }), dispatch => ({ loadActivity: activityId => { dispatch(getOrUpdateData('getData', 'activities', { id: activityId })) }, onDeleteActivity: activityId => { dispatch(deleteActivity(activityId)) }, }) )(ActivityDisplay)