Client: delete an activity

confirmation displayed in modal

mpwo_client/src/actions/activities.js

@@ -1,3 +1,4 @@
+import mpwoGenericApi from '../mwpoApi'
 import mpwoApi from '../mwpoApi/activities'
 import { history } from '../index'
 import { setError } from './index'
@@ -46,3 +47,13 @@ export const getActivityGpx = activityId => dispatch => {
   }
   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}`)))

mpwo_client/src/components/Activities/ActivityDisplay.jsx

@@ -3,16 +3,27 @@ import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
 
 import ActivityMap from './ActivityMap'
+import CustomModal from './../Others/CustomModal'
 import { getData } from '../../actions/index'
+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.location.pathname.replace('/activities/', '')
     )
   }
+
   render() {
-    const { activities, message, sports } = this.props
+    const { activities, message, onDeleteActivity, sports } = this.props
+    const { displayModal } = this.state
     const [activity] = activities
     return (
       <div>
@@ -26,6 +37,16 @@ class ActivityDisplay extends React.Component {
           <code>{message}</code>
         ) : (
           <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 && (
             <div className="row">
             <div className="col-md-6">
@@ -33,7 +54,13 @@ class ActivityDisplay extends React.Component {
                 <div className="card-header">
                   {sports.filter(sport => sport.id === activity.sport_id)
                          .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 className="card-body">
                   <p>
@@ -103,6 +130,9 @@ export default connect(
     user: state.user,
   }),
   dispatch => ({
+    onDeleteActivity: activityId => {
+      dispatch(deleteActivity(activityId))
+    },
     loadActivity: activityId => {
       dispatch(getData('activities', activityId))
       dispatch(getData('sports'))

mpwo_client/src/components/App.css

@@ -72,3 +72,22 @@ input, textarea {
 .radioLabel {
   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;
+}

mpwo_client/src/components/Others/CustomModal.jsx

@@ -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>
+  )
+}