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 CustomModal from './../../Others/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, } } 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({ displayModal: value }) } render() { const { activities, message, onDeleteActivity, sports, user } = this.props const { displayModal } = this.state const [activity] = activities const title = activity ? activity.title : 'Activity' const [sport] = activity ? sports.filter(s => s.id === activity.sport_id) : [] 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
)}
)}
)}
) } } 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)