Merge pull request #197 from canyener/add-delete-activity-action

Add delete activity action

Author: canyener

src/app/layout/App.tsx

@@ -1,34 +1,16 @@
-import React, { useState, useEffect, Fragment, SyntheticEvent, useContext } from 'react'
+import React, { useEffect, Fragment, useContext } from 'react'
 import { Container } from 'semantic-ui-react'
 import { observer } from 'mobx-react-lite'
 
-import { IActivity } from '../models/activity'
-
 import NavBar from '../../features/nav/NavBar'
 import ActivityDashboard from '../../features/activities/dashboard/ActivityDashboard'
 import LoadingComponent from './LoadingComponent'
 
-import agent from '../api/agent'
-
 import ActivityStore from '../stores/activityStore'
 
 const App = () => {
 
   const activityStore = useContext(ActivityStore)
-  const [activities, setActivities] = useState<IActivity[]>([])
-  const [selectedActivity, setSelectedActivity] = useState<IActivity | null>(null)
-  const [editMode, setEditMode] = useState(false)
-  const [submitting, setSubmitting] = useState(false)
-  const [target, setTarget] = useState('')
-
-  const handleDeleteActivity = (event: SyntheticEvent<HTMLButtonElement>, id: string) => {
-    setSubmitting(true)
-    setTarget(event.currentTarget.name)
-    agent.Activities.delete(id).then(() => {
-      setActivities([...activities.filter(activity => activity.id !== id)])
-    })
-      .then(() => setSubmitting(false))
-  }
 
   useEffect(() => {
     activityStore.loadActivities()
@@ -40,11 +22,7 @@ const App = () => {
     <Fragment>
       <NavBar />
       <Container style={{ marginTop: '7em' }}>
-        <ActivityDashboard
-          deleteActivity={handleDeleteActivity}
-          submitting={submitting}
-          target={target}
-        />
+        <ActivityDashboard />
       </Container>
     </Fragment>
   )

src/app/stores/activityStore.ts

@@ -1,5 +1,5 @@
 import { makeObservable, observable, action, computed } from "mobx"
-import { createContext } from 'react'
+import { createContext, SyntheticEvent } from 'react'
 
 import { IActivity } from "../models/activity"
 import agent from '../api/agent'
@@ -16,6 +16,7 @@ class ActivityStore {
   @observable loadingInitial = false
   @observable editMode = false
   @observable submitting = false
+  @observable target = ''
 
   @computed get activitiesByDate() {
     return Array.from(this.activityRegistry.values()).slice().sort((a, b) => Date.parse(a.date) - Date.parse(b.date))
@@ -65,6 +66,22 @@ class ActivityStore {
     }
   }
 
+  @action deleteActivity = async (event: SyntheticEvent<HTMLButtonElement>, id: string) => {
+    this.submitting = true
+    this.target = event.currentTarget.name
+    try {
+      await agent.Activities.delete(id)
+      this.activityRegistry.delete(id)
+      this.submitting = false
+      this.target = ''
+
+    } catch (error) {
+      this.submitting = false
+      this.target = ''
+      console.log(error)
+    }
+  }
+
   @action openEditForm = async (id: string) => {
     this.selectedActivity = this.activityRegistry.get(id)
     this.editMode = true

src/features/activities/dashboard/ActivityDashboard.tsx

@@ -1,4 +1,4 @@
-import React, { SyntheticEvent, useContext } from 'react'
+import React, { useContext } from 'react'
 import { Grid } from 'semantic-ui-react'
 import { observer } from 'mobx-react-lite'
 
@@ -8,27 +8,13 @@ import ActivityList from './ActivityList'
 import ActivityDetails from '../details/ActivityDetails'
 import { ActivityForm } from '../form/ActivityForm'
 
-interface IProps {
-  deleteActivity: (event: SyntheticEvent<HTMLButtonElement>, id: string) => void
-  submitting: boolean,
-  target: string
-}
-
-const ActivityDashboard: React.FC<IProps> = ({
-  deleteActivity,
-  submitting,
-  target
-}) => {
+const ActivityDashboard: React.FC = () => {
   const activityStore = useContext(ActivityStore)
   const { editMode, selectedActivity } = activityStore
   return (
     <Grid>
       <Grid.Column width={10}>
-        <ActivityList
-          deleteActivity={deleteActivity}
-          submitting={submitting}
-          target={target}
-        />
+        <ActivityList />
       </Grid.Column>
       <Grid.Column width={6}>
         {

src/features/activities/dashboard/ActivityList.tsx

@@ -1,22 +1,12 @@
 import { observer } from 'mobx-react-lite'
-import React, { SyntheticEvent, useContext } from 'react'
+import React, { useContext } from 'react'
 import { Item, Button, Label, Segment } from 'semantic-ui-react'
 
 import ActivityStore from '../../../app/stores/activityStore'
 
-interface IProps {
-  deleteActivity: (event: SyntheticEvent<HTMLButtonElement>, id: string) => void
-  submitting: boolean
-  target: string
-}
-
-const ActivityList: React.FC<IProps> = ({
-  deleteActivity,
-  submitting,
-  target
-}) => {
+const ActivityList: React.FC = () => {
   const activityStore = useContext(ActivityStore)
-  const { activitiesByDate, selectActivity } = activityStore
+  const { activitiesByDate, selectActivity, deleteActivity, submitting, target } = activityStore
   return (
     <Segment clearing>
       <Item.Group divided>