feat: Add delete observation action

[BREAKING]: Requires a prop of onDeleteObservation to handle the delete action
digidem · Oct 31, 2019 · 9688317 · 9688317
1 parent fa5c45b
commit 9688317
Show file tree

Hide file tree

Showing 13 changed files with 186 additions and 51 deletions.
diff --git a/messages/ObservationDialog/en.json b/messages/ObservationDialog/en.json
@@ -7,18 +7,27 @@
     "description": "Cancel button once observation has been edited",
     "message": "Cancel"
   },
-  "ObservationDialog.ObservationDialog.confirmButtonCancel": {
+  "ObservationDialog.ObservationDialog.confirmCloseButtonCancel": {
     "message": "Cancel"
   },
-  "ObservationDialog.ObservationDialog.confirmButtonConfirm": {
+  "ObservationDialog.ObservationDialog.confirmCloseButtonConfirm": {
     "message": "Discard changes"
   },
-  "ObservationDialog.ObservationDialog.confirmDescription": {
+  "ObservationDialog.ObservationDialog.confirmCloseDescription": {
     "message": "You have made some changes, closing without saving will loose the changes you make"
   },
-  "ObservationDialog.ObservationDialog.confirmTitle": {
+  "ObservationDialog.ObservationDialog.confirmCloseTitle": {
     "message": "Close without saving changes?"
   },
+  "ObservationDialog.ObservationDialog.confirmDeleteButtonCancel": {
+    "message": "Cancel"
+  },
+  "ObservationDialog.ObservationDialog.confirmDeleteButtonConfirm": {
+    "message": "Yes, delete"
+  },
+  "ObservationDialog.ObservationDialog.confirmDeleteTitle": {
+    "message": "Delete observation?"
+  },
   "ObservationDialog.ObservationDialog.detailsHeader": {
     "description": "Header for section that includes the additional details for an observation",
     "message": "Details"

diff --git a/messages/ObservationDialog/es.json b/messages/ObservationDialog/es.json
@@ -7,18 +7,27 @@
     "description": "Cancel button once observation has been edited",
     "message": "Cancelar"
   },
-  "ObservationDialog.ObservationDialog.confirmButtonCancel": {
+  "ObservationDialog.ObservationDialog.confirmCloseButtonCancel": {
     "message": "Cancelar"
   },
-  "ObservationDialog.ObservationDialog.confirmButtonConfirm": {
+  "ObservationDialog.ObservationDialog.confirmCloseButtonConfirm": {
     "message": "Cerrar sin guardar"
   },
-  "ObservationDialog.ObservationDialog.confirmDescription": {
+  "ObservationDialog.ObservationDialog.confirmCloseDescription": {
     "message": "Has editado la observación. Cerrar sin guardar borraría a los cambios."
   },
-  "ObservationDialog.ObservationDialog.confirmTitle": {
+  "ObservationDialog.ObservationDialog.confirmCloseTitle": {
     "message": "¿Cerrar sin guardar?"
   },
+  "ObservationDialog.ObservationDialog.confirmDeleteButtonCancel": {
+    "message": "Cancelar"
+  },
+  "ObservationDialog.ObservationDialog.confirmDeleteButtonConfirm": {
+    "message": "Sí, Borrar"
+  },
+  "ObservationDialog.ObservationDialog.confirmDeleteTitle": {
+    "message": "¿Borrar Observación?"
+  },
   "ObservationDialog.ObservationDialog.detailsHeader": {
     "description": "Header for section that includes the additional details for an observation",
     "message": "Detalles"

diff --git a/messages/ObservationDialog/fr.json b/messages/ObservationDialog/fr.json
@@ -7,16 +7,25 @@
     "description": "Cancel button once observation has been edited",
     "message": ""
   },
-  "ObservationDialog.ObservationDialog.confirmButtonCancel": {
+  "ObservationDialog.ObservationDialog.confirmCloseButtonCancel": {
     "message": ""
   },
-  "ObservationDialog.ObservationDialog.confirmButtonConfirm": {
+  "ObservationDialog.ObservationDialog.confirmCloseButtonConfirm": {
     "message": ""
   },
-  "ObservationDialog.ObservationDialog.confirmDescription": {
+  "ObservationDialog.ObservationDialog.confirmCloseDescription": {
     "message": ""
   },
-  "ObservationDialog.ObservationDialog.confirmTitle": {
+  "ObservationDialog.ObservationDialog.confirmCloseTitle": {
+    "message": ""
+  },
+  "ObservationDialog.ObservationDialog.confirmDeleteButtonCancel": {
+    "message": ""
+  },
+  "ObservationDialog.ObservationDialog.confirmDeleteButtonConfirm": {
+    "message": ""
+  },
+  "ObservationDialog.ObservationDialog.confirmDeleteTitle": {
     "message": ""
   },
   "ObservationDialog.ObservationDialog.detailsHeader": {

diff --git a/messages/ObservationDialog/pt.json b/messages/ObservationDialog/pt.json
@@ -7,16 +7,25 @@
     "description": "Cancel button once observation has been edited",
     "message": ""
   },
-  "ObservationDialog.ObservationDialog.confirmButtonCancel": {
+  "ObservationDialog.ObservationDialog.confirmCloseButtonCancel": {
     "message": ""
   },
-  "ObservationDialog.ObservationDialog.confirmButtonConfirm": {
+  "ObservationDialog.ObservationDialog.confirmCloseButtonConfirm": {
     "message": ""
   },
-  "ObservationDialog.ObservationDialog.confirmDescription": {
+  "ObservationDialog.ObservationDialog.confirmCloseDescription": {
     "message": ""
   },
-  "ObservationDialog.ObservationDialog.confirmTitle": {
+  "ObservationDialog.ObservationDialog.confirmCloseTitle": {
+    "message": ""
+  },
+  "ObservationDialog.ObservationDialog.confirmDeleteButtonCancel": {
+    "message": ""
+  },
+  "ObservationDialog.ObservationDialog.confirmDeleteButtonConfirm": {
+    "message": ""
+  },
+  "ObservationDialog.ObservationDialog.confirmDeleteTitle": {
     "message": ""
   },
   "ObservationDialog.ObservationDialog.detailsHeader": {

diff --git a/src/MapView/MapView.js b/src/MapView/MapView.js
@@ -16,6 +16,7 @@ const MapView = (
   {
     observations,
     onUpdateObservation,
+    onDeleteObservation,
     presets,
     filter,
     getMediaUrl,
@@ -27,6 +28,7 @@ const MapView = (
     <ViewWrapper
       observations={observations}
       onUpdateObservation={onUpdateObservation}
+      onDeleteObservation={onDeleteObservation}
       presets={presets}
       filter={filter}
       getMediaUrl={getMediaUrl}>

diff --git a/src/MapView/MapView.stories.js b/src/MapView/MapView.stories.js
@@ -38,6 +38,7 @@ export const defaultStory = () => {
         observations={fixtureObs}
         filter={filters[value]}
         onUpdateObservation={action('update')}
+        onDeleteObservation={action('delete')}
         getMediaUrl={getMediaUrl}
         mapboxAccessToken="pk.eyJ1IjoiZ21hY2xlbm5hbiIsImEiOiJSaWVtd2lRIn0.ASYMZE2HhwkAw4Vt7SavEg"
       />
@@ -69,6 +70,7 @@ export const delayedLoad = () => {
       <MapView
         observations={obs}
         onUpdateObservation={action('update')}
+        onDeleteObservation={action('delete')}
         getMediaUrl={getMediaUrl}
         mapboxAccessToken="pk.eyJ1IjoiZ21hY2xlbm5hbiIsImEiOiJSaWVtd2lRIn0.ASYMZE2HhwkAw4Vt7SavEg"
       />

diff --git a/src/MediaView/MediaView.js b/src/MediaView/MediaView.js
@@ -7,6 +7,7 @@ import ViewWrapper, { type CommonViewProps } from '../ViewWrapper'
 const MapView = ({
   observations,
   onUpdateObservation,
+  onDeleteObservation,
   presets,
   filter,
   getMediaUrl,
@@ -16,6 +17,7 @@ const MapView = ({
     <ViewWrapper
       observations={observations}
       onUpdateObservation={onUpdateObservation}
+      onDeleteObservation={onDeleteObservation}
       presets={presets}
       filter={filter}
       getMediaUrl={getMediaUrl}>

diff --git a/src/MediaView/MediaView.stories.js b/src/MediaView/MediaView.stories.js
@@ -19,6 +19,7 @@ export const defaultStory = () => {
     <MediaView
       observations={fixtureObs}
       onUpdateObservation={action('update')}
+      onDeleteObservation={action('delete')}
       getMediaUrl={getMediaUrl}
       apiUrl="http://localhost:5000/"
     />

diff --git a/src/ObservationDialog/ObservationDialog.js b/src/ObservationDialog/ObservationDialog.js
@@ -22,6 +22,10 @@ import DialogActions from '@material-ui/core/DialogActions'
 import MuiDialogContent from '@material-ui/core/DialogContent'
 import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
+import MenuIcon from '@material-ui/icons/MoreVert'
+import Menu from '@material-ui/core/Menu'
+import MenuItem from '@material-ui/core/MenuItem'
+
 import { Typography } from '@material-ui/core'
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl'
 import clone from 'clone-deep'
@@ -40,11 +44,14 @@ import type {
 } from '../types'
 
 const m = defineMessages({
-  confirmTitle: 'Close without saving changes?',
-  confirmDescription:
+  confirmCloseTitle: 'Close without saving changes?',
+  confirmCloseDescription:
     'You have made some changes, closing without saving will loose the changes you make',
-  confirmButtonConfirm: 'Discard changes',
-  confirmButtonCancel: 'Cancel',
+  confirmCloseButtonConfirm: 'Discard changes',
+  confirmCloseButtonCancel: 'Cancel',
+  confirmDeleteTitle: 'Delete observation?',
+  confirmDeleteButtonConfirm: 'Yes, delete',
+  confirmDeleteButtonCancel: 'Cancel',
   // Header for section that includes the additional details for an observation
   detailsHeader: 'Details',
   // Header for section with additional fields that are not defined in the preset
@@ -63,6 +70,7 @@ type ImageMediaItem = {
 type Props = {
   open?: boolean,
   onRequestClose: () => void,
+  onDelete: (id: string) => void,
   observation: Observation,
   // The initial image to show in the media carousel
   initialImageIndex?: number,
@@ -94,33 +102,51 @@ function defaultGetMedia({ type, id }: Attachment) {
   }
 }
 
-const ConfirmDialog = ({ open, onCancel, onConfirm }) => {
-  return (
-    <Dialog
-      disableBackdropClick
-      open={open}
-      onClose={onCancel}
-      aria-labelledby="alert-dialog-title"
-      aria-describedby="alert-dialog-description">
-      <DialogTitle id="alert-dialog-title">
-        <FormattedMessage {...m.confirmTitle} />
-      </DialogTitle>
-      <MuiDialogContent>
-        <DialogContentText id="alert-dialog-description">
-          <FormattedMessage {...m.confirmDescription} />
-        </DialogContentText>
-      </MuiDialogContent>
-      <DialogActions>
-        <Button onClick={onCancel} color="primary">
-          <FormattedMessage {...m.confirmButtonCancel} />
-        </Button>
-        <Button onClick={onConfirm} color="primary" autoFocus>
-          <FormattedMessage {...m.confirmButtonConfirm} />
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}
+const ConfirmCloseDialog = ({ open, onCancel, onConfirm }) => (
+  <Dialog
+    disableBackdropClick
+    open={open}
+    onClose={onCancel}
+    aria-labelledby="close-dialog-title"
+    aria-describedby="close-dialog-description">
+    <DialogTitle id="close-dialog-title">
+      <FormattedMessage {...m.confirmCloseTitle} />
+    </DialogTitle>
+    <MuiDialogContent>
+      <DialogContentText id="close-dialog-description">
+        <FormattedMessage {...m.confirmCloseDescription} />
+      </DialogContentText>
+    </MuiDialogContent>
+    <DialogActions>
+      <Button onClick={onCancel} color="primary">
+        <FormattedMessage {...m.confirmCloseButtonCancel} />
+      </Button>
+      <Button onClick={onConfirm} color="primary" autoFocus>
+        <FormattedMessage {...m.confirmCloseButtonConfirm} />
+      </Button>
+    </DialogActions>
+  </Dialog>
+)
+
+const ConfirmDeleteDialog = ({ open, onCancel, onConfirm }) => (
+  <Dialog
+    disableBackdropClick
+    open={open}
+    onClose={onCancel}
+    aria-labelledby="delete-dialog-title">
+    <DialogTitle id="delete-dialog-title">
+      <FormattedMessage {...m.confirmDeleteTitle} />
+    </DialogTitle>
+    <DialogActions>
+      <Button onClick={onCancel} color="primary">
+        <FormattedMessage {...m.confirmDeleteButtonCancel} />
+      </Button>
+      <Button onClick={onConfirm} color="primary" autoFocus>
+        <FormattedMessage {...m.confirmDeleteButtonConfirm} />
+      </Button>
+    </DialogActions>
+  </Dialog>
+)
 
 const ExpansionPanel = withStyles({
   root: {
@@ -161,10 +187,59 @@ const ExpansionPanelDetails = withStyles({
   }
 })(MuiExpansionPanelDetails)
 
+const ObservationActions = ({ onDeleteClick }) => {
+  const [anchorEl, setAnchorEl] = React.useState(null)
+  const [confirm, setConfirm] = useState(null)
+
+  const handleOpenClick = event => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const createHandleItemClick = (action: () => any = () => {}) => () => {
+    // Can't setState to a function
+    setConfirm(state => didConfirm => {
+      setConfirm(null)
+      if (didConfirm) action()
+      handleClose()
+    })
+  }
+
+  return (
+    <>
+      <IconButton
+        aria-controls="simple-menu"
+        aria-haspopup="true"
+        onClick={handleOpenClick}>
+        <MenuIcon />
+      </IconButton>
+      <Menu
+        id="simple-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}>
+        <MenuItem onClick={createHandleItemClick(onDeleteClick)}>
+          Delete Observation
+        </MenuItem>
+      </Menu>
+      <ConfirmDeleteDialog
+        open={!!confirm}
+        onConfirm={() => confirm && confirm(true)}
+        onCancel={() => confirm && confirm(false)}
+      />
+    </>
+  )
+}
+
 const DialogContent = ({
   open = false,
   onRequestClose,
   onSave,
+  onDelete,
   observation,
   initialImageIndex,
   getPreset = defaultGetPreset,
@@ -190,6 +265,11 @@ const DialogContent = ({
     onRequestClose(dirty)
   }
 
+  const handleDeleteClick = () => {
+    onRequestClose(false)
+    onDelete(observation.id)
+  }
+
   const handleChange = (key: Key, newValue: any) => {
     setDirty(true)
     setValues(set(values, key, newValue))
@@ -242,6 +322,7 @@ const DialogContent = ({
           name={preset.name}
           coords={coords}
           createdAt={new Date(observation.created_at)}
+          action={<ObservationActions onDeleteClick={handleDeleteClick} />}
         />
         <TextField
           value={values[descriptionKey]}
@@ -346,7 +427,7 @@ const ObservationDialog = ({ open, onRequestClose, ...otherProps }: Props) => {
           <DialogContent {...otherProps} onRequestClose={handleRequestClose} />
         )}
       </Dialog>
-      <ConfirmDialog
+      <ConfirmCloseDialog
         open={!!confirm}
         onConfirm={() => confirm && confirm(true)}
         onCancel={() => confirm && confirm(false)}