From 6a21410709e8b9797350d12dc015579908eb6c7e Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Tue, 22 Sep 2020 11:34:03 +0200
Subject: [PATCH] hide snackbar after 5 seconds

---
 src/components/Snackbar.js | 38 +++++++++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/Snackbar.js b/src/components/Snackbar.js
index e3763d1..16fd4c2 100644
--- a/src/components/Snackbar.js
+++ b/src/components/Snackbar.js
@@ -21,21 +21,49 @@ const styles = (theme) => ({
 
 class Snackbar extends Component {
 
+  constructor(props){
+    super(props);
+    this.state = {
+      open: props.open
+    };
+    this.timeout = null;
+  }
+
+  componentDidMount(){
+    if(this.state.open){
+      this.autoHideDuration();
+    }
+  }
+
+  componentWillUnmount(){
+    if(this.state.open){
+      clearTimeout(this.timeout);
+    }
+  }
+
+  onClose = () => {
+    this.setState({open: false});
+  }
+
+  autoHideDuration = () => {
+    this.timeout = setTimeout(() => {
+      this.onClose();
+    }, 5000);
+  }
+
   render() {
     return (
       <MaterialUISnackbar
         anchorOrigin={{vertical: 'bottom', horizontal: 'left' }}
-        open={this.props.open}
-        onClose={this.props.onClose}
-        key={Date.now()+this.props.message}
-        autoHideDuration={5000}
+        open={this.state.open}
+        key={this.props.key}
         style={{left: '22px', bottom: '40px', width: '300px', zIndex: '100'}}
       >
         <SnackbarContent
           style={{flexWrap: 'nowrap'}}
           className={this.props.type === 'error' ? this.props.classes.error : this.props.classes.success}
           action={
-            <IconButton onClick={this.props.onClose} style={{color: 'inherit'}}>
+            <IconButton onClick={this.onClose} style={{color: 'inherit'}}>
               <FontAwesomeIcon icon={faTimes} size="xs"/>
             </IconButton>
           }