Merge pull request #94 from reapit/task/cld-363-fix-behaviour-update-…

…status

[CLD-363] Fix close modal update status success

src/components/ui/modal/__tests__/__snapshots__/update-status-success.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`UpdateStatus should match snapshot 1`] = `
+exports[`UpdateStatusSuccess should match snapshot 1`] = `
 <Fragment>
   <p>
     Success. The ID Status has been updated

src/components/ui/modal/__tests__/update-status-success.tsx

@@ -1,14 +1,24 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import { UpdateStatusSuccess } from '../update-status-success'
+import { UpdateStatusSuccess, mapDispatchToProps } from '../update-status-success'
 import { History } from 'history'
 
-describe('UpdateStatus', () => {
+describe('UpdateStatusSuccess', () => {
   it('should match snapshot', () => {
     const mockProps = {
+      hideModal: jest.fn(),
       history: {} as History
     }
     const wrapper = shallow(<UpdateStatusSuccess {...mockProps} />)
     expect(wrapper).toMatchSnapshot()
   })
+
+  describe('mapDispatchToProps', () => {
+    it('hideModal', () => {
+      const mockDispatch = jest.fn()
+      const { hideModal } = mapDispatchToProps(mockDispatch)
+      hideModal()
+      expect(mockDispatch).toBeCalled()
+    })
+  })
 })

src/components/ui/modal/update-status-success.tsx

@@ -2,22 +2,40 @@ import React from 'react'
 import { History } from 'history'
 import { Button } from '@reapit/elements'
 import styles from '@/styles/pages/checklist-detail.scss?mod'
+import { Dispatch } from 'redux'
+import { connect } from 'react-redux'
+import { checklistDetailHideModal } from '@/actions/checklist-detail'
 
 export type UpdateStatusSuccessProps = {
   history: History
-}
+} & DispatchProps
 
-export const UpdateStatusSuccess: React.FC<UpdateStatusSuccessProps> = ({ history }) => {
+export const UpdateStatusSuccess: React.FC<UpdateStatusSuccessProps> = ({ history, hideModal }) => {
+  const handleClose = () => {
+    hideModal()
+    history.replace('/')
+  }
   return (
     <>
       <p>Success. The ID Status has been updated</p>
       <div className={styles.footerBtn}>
-        <Button type="button" variant="primary" onClick={() => history.replace('/')}>
+        <Button type="button" variant="primary" onClick={handleClose}>
           Close
         </Button>
       </div>
     </>
   )
 }
 
-export default UpdateStatusSuccess
+export interface DispatchProps {
+  hideModal: () => void
+}
+
+export const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
+  hideModal: () => dispatch(checklistDetailHideModal())
+})
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(UpdateStatusSuccess)