[Improvement] handle close snackbar

.firebaserc

@@ -1,5 +1,5 @@
 {
   "projects": {
-    "default": "love-social"
+    "default": "test-4515a"
   }
 }

src/components/findPeople/FindPeopleComponent.tsx

@@ -57,7 +57,7 @@ export class FindPeopleComponent extends Component<IFindPeopleComponentProps, IF
                 loadMore={this.scrollLoad}
                 hasMore={hasMorePeople}
                 useWindow={true}
-                loader={<LoadMoreProgressComponent />}
+                loader={<LoadMoreProgressComponent key='find-people-load-more-progress' />}
                 >
 
                 <div className='tracks'>

src/components/master/IMasterComponentProps.ts

@@ -114,4 +114,9 @@ export interface IMasterComponentProps {
    */
   sendFeedbackStatus?: boolean
 
+  /**
+   * Hide global message
+   */
+  hideMessage?: () => any
+
 }

src/components/master/MasterComponent.tsx

@@ -125,7 +125,7 @@ export class MasterComponent extends Component<IMasterComponentProps, IMasterCom
    */
   public render () {
 
-    const { progress, global, loaded, guest, uid, sendFeedbackStatus } = this.props
+    const { progress, global, loaded, guest, uid, sendFeedbackStatus, hideMessage } = this.props
     const { loading, isVerifide } = this.state
 
     return (
@@ -142,6 +142,7 @@ export class MasterComponent extends Component<IMasterComponentProps, IMasterCom
         <Snackbar
           open={this.props.global.messageOpen}
           message={this.props.global.message}
+          onClose={hideMessage}
           autoHideDuration={4000}
           style={{ left: '1%', transform: 'none' }}
         />
@@ -185,7 +186,8 @@ const mapDispatchToProps = (dispatch: any, ownProps: IMasterComponentProps) => {
       dispatch(globalActions.loadDataGuest())
     },
     showMasterLoading: () => dispatch(globalActions.showMasterLoading()),
-    hideMasterLoading: () => dispatch(globalActions.hideMasterLoading())
+    hideMasterLoading: () => dispatch(globalActions.hideMasterLoading()),
+    hideMessage: () => dispatch(globalActions.hideMessage())
   }
 
 }

src/layouts/loadMoreProgress/LoadMoreProgressComponent.tsx

@@ -14,7 +14,7 @@ export default class LoadMoreProgressComponent extends Component<{},{}> {
    */
   render () {
     return (
-      <div className='g-load-more'><CircularProgress size={30} thickness={5} style={{color: teal['A400'] }} /></div>
+      <div key='load-more-progress' className='g-load-more'><CircularProgress size={30} thickness={5} style={{color: teal['A400'] }} /></div>
     )
   }
 }