Merge pull request #181 from canyener/add-loading-indicator-for-submi…

…tting

Add loading indicator for submitting

src/app/layout/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, Fragment } from 'react'
+import React, { useState, useEffect, Fragment, SyntheticEvent } from 'react'
 import { Container } from 'semantic-ui-react'
 
 import { IActivity } from '../models/activity'
@@ -14,6 +14,8 @@ const App = () => {
   const [selectedActivity, setSelectedActivity] = useState<IActivity | null>(null)
   const [editMode, setEditMode] = useState(false)
   const [loading, setLoading] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
+  const [target, setTarget] = useState('')
 
   const handleSelectActivity = (id: string) => {
     setSelectedActivity(activities.filter(activity => activity.id === id)[0])
@@ -26,25 +28,32 @@ const App = () => {
   }
 
   const handleCreateActivity = (activity: IActivity) => {
+    setSubmitting(true)
     agent.Activities.create(activity).then(() => {
       setActivities([...activities, activity])
       setSelectedActivity(activity)
       setEditMode(false)
     })
+      .then(() => setSubmitting(false))
   }
 
   const handleEditActivity = (activity: IActivity) => {
+    setSubmitting(true)
     agent.Activities.update(activity).then(() => {
       setActivities([...activities.filter(item => item.id !== activity.id), activity])
       setSelectedActivity(activity)
       setEditMode(false)
     })
+      .then(() => setSubmitting(false))
   }
 
-  const handleDeleteActivity = (id: string) => {
+  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(() => {
@@ -62,7 +71,7 @@ const App = () => {
       .then(() => setLoading(false))
   }, [])
 
-  if(loading) return <LoadingComponent content="Loading Activities..."/>
+  if (loading) return <LoadingComponent content="Loading Activities..." />
 
   return (
     <Fragment>
@@ -78,6 +87,8 @@ const App = () => {
           createActivity={handleCreateActivity}
           editActivity={handleEditActivity}
           deleteActivity={handleDeleteActivity}
+          submitting={submitting}
+          target={target}
         />
       </Container>
     </Fragment>

src/features/activities/dashboard/ActivityDashboard.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { SyntheticEvent } from 'react'
 import { Grid } from 'semantic-ui-react'
 
 import { IActivity } from '../../../app/models/activity'
@@ -15,7 +15,9 @@ interface IProps {
   setSelectedActivity: (activity: IActivity | null) => void
   createActivity: (activity: IActivity) => void
   editActivity: (activity: IActivity) => void
-  deleteActivity: (id: string) => void
+  deleteActivity: (event: SyntheticEvent<HTMLButtonElement>,id: string) => void
+  submitting: boolean,
+  target: string
 }
 
 const ActivityDashboard: React.FC<IProps> = ({
@@ -27,14 +29,18 @@ const ActivityDashboard: React.FC<IProps> = ({
   setSelectedActivity,
   createActivity,
   editActivity,
-  deleteActivity
+  deleteActivity,
+  submitting,
+  target
 }) => (
     <Grid>
       <Grid.Column width={10}>
         <ActivityList 
           activities={activities} 
           selectActivity={selectActivity} 
           deleteActivity={deleteActivity}
+          submitting={submitting}
+          target={target}
         />
       </Grid.Column>
       <Grid.Column width={6}>
@@ -56,6 +62,7 @@ const ActivityDashboard: React.FC<IProps> = ({
             activity={selectedActivity}
             createActivity={createActivity}
             editActivity={editActivity}
+            submitting={submitting}
           />
         )}
       </Grid.Column>

src/features/activities/dashboard/ActivityList.tsx

@@ -1,15 +1,23 @@
-import React from 'react'
+import React, { SyntheticEvent } from 'react'
 import { Item, Button, Label, Segment } from 'semantic-ui-react'
 
 import { IActivity } from '../../../app/models/activity'
 
 interface IProps {
   activities: IActivity[]
   selectActivity: (id: string) => void
-  deleteActivity: (id: string) => void
+  deleteActivity: (event: SyntheticEvent<HTMLButtonElement>,id: string) => void
+  submitting: boolean
+  target: string
 }
 
-const ActivityList: React.FC<IProps> = ({ activities, selectActivity, deleteActivity }) => (
+const ActivityList: React.FC<IProps> = ({
+  activities,
+  selectActivity,
+  deleteActivity,
+  submitting,
+  target
+}) => (
   <Segment clearing>
     <Item.Group divided>
       {
@@ -30,7 +38,9 @@ const ActivityList: React.FC<IProps> = ({ activities, selectActivity, deleteActi
                   color='blue'
                 />
                 <Button
-                  onClick={() => deleteActivity(activity.id)}
+                  name={activity.id}
+                  loading={target === activity.id && submitting}
+                  onClick={(e) => deleteActivity(e, activity.id)}
                   floated='right'
                   content='Delete'
                   color='red'

src/features/activities/form/ActivityForm.tsx

@@ -8,13 +8,15 @@ interface IProps {
   activity: IActivity | null,
   createActivity: (activity: IActivity) => void
   editActivity: (activity: IActivity) => void
+  submitting: boolean
 }
 
 const ActivityForm: React.FC<IProps> = ({
   setEditMode,
   activity: initialFormState,
   createActivity,
-  editActivity
+  editActivity,
+  submitting
 }) => {
   const initializeForm = () => {
     if (initialFormState) {
@@ -91,7 +93,7 @@ const ActivityForm: React.FC<IProps> = ({
           name='venue'
           placeholder='Venue'
           value={activity.venue} />
-        <Button floated='right' positive type='submit' content='Submit' />
+        <Button loading={submitting} floated='right' positive type='submit' content='Submit' />
         <Button onClick={() => setEditMode(false)} floated='right' type='button' content='Cancel' />
       </Form>
     </Segment>

src/tests/components/ActivityDashboard.test.tsx

@@ -16,6 +16,8 @@ test('Should render ActivityDashboard correctly with editMode equals to false',
       createActivity={() => { }}
       editActivity={() => { }}
       deleteActivity={() => { }}
+      submitting={false}
+      target=''
     />
   )
 
@@ -34,6 +36,8 @@ test('Should render ActivityDashboard correctly with editMode equals to true', (
       createActivity={() => { }}
       editActivity={() => { }}
       deleteActivity={() => { }}
+      submitting={false}
+      target=''
     />
   )
 
@@ -52,6 +56,8 @@ test('Should render ActivityDashboard correctly with edit mode false and selecte
       createActivity={() => { }}
       editActivity={() => { }}
       deleteActivity={() => { }}
+      submitting={false}
+      target=''
     />
   )
 

src/tests/components/ActivityForm.test.tsx

@@ -12,6 +12,7 @@ test('Should render ActivityForm correctly when activity prop is null', () => {
       activity={null}
       createActivity={() => { }}
       editActivity={() => { }}
+      submitting={false}
     />
   )
 
@@ -25,6 +26,7 @@ test('Should render ActivityForm correctly with given activity', () => {
       activity={fakeActivities[0]}
       createActivity={() => { }}
       editActivity={() => { }}
+      submitting={false}
     />
   )
 
@@ -40,6 +42,7 @@ test('Should call setEditMode with false when Cancel button is clicked ', () =>
       activity={fakeActivities[0]}
       createActivity={() => { }}
       editActivity={() => { }}
+      submitting={false}
     />
   )
 

src/tests/components/ActivityList.test.tsx

@@ -10,7 +10,10 @@ test('Should render ActivityList correctly', () => {
       activities={fakeActivities}
       selectActivity={() => { }}
       deleteActivity={() => { }}
-    />)
+      submitting={false}
+      target=''
+    />
+  )
 
   expect(wrapper).toMatchSnapshot()
 })
@@ -23,7 +26,11 @@ test('Should call selectActivity once when button is clicked', () => {
       activities={fakeActivities}
       selectActivity={selectActivitySpy}
       deleteActivity={() => { }}
-    />)
+      submitting={false}
+      target=''
+    />
+  )
+
   wrapper.find('Button').first().simulate('click')
   expect(selectActivitySpy).toHaveBeenCalledTimes(1)
 })
@@ -35,8 +42,11 @@ test('Should call deleteActivity once when delete button is clicked', () => {
       activities={fakeActivities}
       selectActivity={() => { }}
       deleteActivity={deleteActivitySpy}
-    />)
+      submitting={false}
+      target=''
+    />
+  )
 
-    wrapper.find('Button').at(1).simulate('click')
-    expect(deleteActivitySpy).toHaveBeenCalledTimes(1)
+  wrapper.find('Button').at(1).simulate('click')
+  expect(deleteActivitySpy).toHaveBeenCalledTimes(1)
 })

src/tests/components/__snapshots__/ActivityDashboard.test.tsx.snap

@@ -30,6 +30,8 @@ exports[`Should render ActivityDashboard correctly with edit mode false and sele
       }
       deleteActivity={[Function]}
       selectActivity={[Function]}
+      submitting={false}
+      target=""
     />
   </GridColumn>
   <GridColumn
@@ -68,6 +70,8 @@ exports[`Should render ActivityDashboard correctly with editMode equals to false
       }
       deleteActivity={[Function]}
       selectActivity={[Function]}
+      submitting={false}
+      target=""
     />
   </GridColumn>
   <GridColumn
@@ -122,6 +126,8 @@ exports[`Should render ActivityDashboard correctly with editMode equals to true
       }
       deleteActivity={[Function]}
       selectActivity={[Function]}
+      submitting={false}
+      target=""
     />
   </GridColumn>
   <GridColumn
@@ -143,6 +149,7 @@ exports[`Should render ActivityDashboard correctly with editMode equals to true
       editActivity={[Function]}
       key="1"
       setEditMode={[Function]}
+      submitting={false}
     />
   </GridColumn>
 </Grid>

src/tests/components/__snapshots__/ActivityForm.test.tsx.snap

@@ -62,6 +62,7 @@ exports[`Should render ActivityForm correctly when activity prop is null 1`] = `
       as="button"
       content="Submit"
       floated="right"
+      loading={false}
       positive={true}
       type="submit"
     />
@@ -138,6 +139,7 @@ exports[`Should render ActivityForm correctly with given activity 1`] = `
       as="button"
       content="Submit"
       floated="right"
+      loading={false}
       positive={true}
       type="submit"
     />

src/tests/components/__snapshots__/ActivityList.test.tsx.snap

@@ -42,6 +42,8 @@ exports[`Should render ActivityList correctly 1`] = `
             color="red"
             content="Delete"
             floated="right"
+            loading={false}
+            name="1"
             onClick={[Function]}
           />
           <Label
@@ -86,6 +88,8 @@ exports[`Should render ActivityList correctly 1`] = `
             color="red"
             content="Delete"
             floated="right"
+            loading={false}
+            name="2"
             onClick={[Function]}
           />
           <Label