Client: delete an activity

confirmation displayed in modal
This commit is contained in:
Sam 2018-05-10 13:11:44 +02:00
parent c6b7003af8
commit 939746722f
4 changed files with 110 additions and 8 deletions

View File

@ -1,3 +1,4 @@
import mpwoGenericApi from '../mwpoApi'
import mpwoApi from '../mwpoApi/activities' import mpwoApi from '../mwpoApi/activities'
import { history } from '../index' import { history } from '../index'
import { setError } from './index' import { setError } from './index'
@ -46,3 +47,13 @@ export const getActivityGpx = activityId => dispatch => {
} }
dispatch(setGpx(null)) dispatch(setGpx(null))
} }
export const deleteActivity = id => dispatch => mpwoGenericApi
.deleteData('activities', id)
.then(ret => {
if (ret.status === 204) {
history.push('/')
}
dispatch(setError(`activities: ${ret.status}`))
})
.catch(error => dispatch(setError(`activities: ${error}`)))

View File

@ -3,16 +3,27 @@ import { Helmet } from 'react-helmet'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import ActivityMap from './ActivityMap' import ActivityMap from './ActivityMap'
import CustomModal from './../Others/CustomModal'
import { getData } from '../../actions/index' import { getData } from '../../actions/index'
import { deleteActivity } from '../../actions/activities'
class ActivityDisplay extends React.Component { class ActivityDisplay extends React.Component {
constructor(props, context) {
super(props, context)
this.state = {
displayModal: false,
}
}
componentDidMount() { componentDidMount() {
this.props.loadActivity( this.props.loadActivity(
this.props.location.pathname.replace('/activities/', '') this.props.location.pathname.replace('/activities/', '')
) )
} }
render() { render() {
const { activities, message, sports } = this.props const { activities, message, onDeleteActivity, sports } = this.props
const { displayModal } = this.state
const [activity] = activities const [activity] = activities
return ( return (
<div> <div>
@ -26,6 +37,16 @@ class ActivityDisplay extends React.Component {
<code>{message}</code> <code>{message}</code>
) : ( ) : (
<div className="container"> <div className="container">
{ displayModal &&
<CustomModal
title="Confirmation"
text="Are you sure you want to delete this activity?"
confirm={() => {
onDeleteActivity(activity.id)
this.setState({ displayModal: false })
}}
close={() => this.setState({ displayModal: false })}
/>}
{activity && sports.length > 0 && ( {activity && sports.length > 0 && (
<div className="row"> <div className="row">
<div className="col-md-6"> <div className="col-md-6">
@ -33,7 +54,13 @@ class ActivityDisplay extends React.Component {
<div className="card-header"> <div className="card-header">
{sports.filter(sport => sport.id === activity.sport_id) {sports.filter(sport => sport.id === activity.sport_id)
.map(sport => sport.label)} -{' '} .map(sport => sport.label)} -{' '}
{activity.activity_date} {activity.activity_date}{' '}
<i className="fa fa-edit" aria-hidden="true" />{' '}
<i
className="fa fa-trash"
aria-hidden="true"
onClick={() => this.setState({ displayModal: true })}
/>{' '}
</div> </div>
<div className="card-body"> <div className="card-body">
<p> <p>
@ -103,6 +130,9 @@ export default connect(
user: state.user, user: state.user,
}), }),
dispatch => ({ dispatch => ({
onDeleteActivity: activityId => {
dispatch(deleteActivity(activityId))
},
loadActivity: activityId => { loadActivity: activityId => {
dispatch(getData('activities', activityId)) dispatch(getData('activities', activityId))
dispatch(getData('sports')) dispatch(getData('sports'))

View File

@ -23,15 +23,15 @@
} }
.App-nav-profile-img { .App-nav-profile-img {
max-width: 35px; max-width: 35px;
max-height: 35px; max-height: 35px;
border-radius: 50%; border-radius: 50%;
} }
.App-profile-img-small { .App-profile-img-small {
max-width: 150px; max-width: 150px;
max-height: 150px; max-height: 150px;
border-radius: 50%; border-radius: 50%;
} }
@keyframes App-logo-spin { @keyframes App-logo-spin {
@ -72,3 +72,22 @@ input, textarea {
.radioLabel { .radioLabel {
text-align: center; text-align: center;
} }
.custom-modal {
background-color: #fff;
border-radius: 5px;
max-width: 500px;
margin: 20% auto;
z-index: 1050;
}
.custom-modal-backdrop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.3);
padding: 50px;
z-index: 1040;
}

View File

@ -0,0 +1,42 @@
import React from 'react'
export default function CustomModal(props) {
return (
<div className="custom-modal-backdrop">
<div className="custom-modal">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">{props.title}</h5>
<button
type="button"
className="close"
aria-label="Close"
onClick={() => props.close}
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div className="modal-body">
<p>{props.text}</p>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-primary"
onClick={() => props.confirm()}
>
Yes
</button>
<button
type="button"
className="btn btn-secondary"
onClick={() => props.close()}
>
No
</button>
</div>
</div>
</div>
</div>
)
}