Client: delete an activity
confirmation displayed in modal
This commit is contained in:
parent
c6b7003af8
commit
939746722f
@ -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}`)))
|
||||||
|
@ -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'))
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
42
mpwo_client/src/components/Others/CustomModal.jsx
Normal file
42
mpwo_client/src/components/Others/CustomModal.jsx
Normal 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">×</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>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user