From 6cfcd976473638c659742afa9badad990b18a641 Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Tue, 22 Sep 2020 11:35:29 +0200
Subject: [PATCH] key prop to ensure independent treatment

---
 src/components/Tutorial/Builder/Builder.js | 13 +++++--------
 src/components/WorkspaceFunc.js            | 13 +++++--------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/components/Tutorial/Builder/Builder.js b/src/components/Tutorial/Builder/Builder.js
index 462ad6e..051f3e4 100644
--- a/src/components/Tutorial/Builder/Builder.js
+++ b/src/components/Tutorial/Builder/Builder.js
@@ -37,6 +37,7 @@ class Builder extends Component {
       content: '',
       string: false,
       snackbar: false,
+      key: '',
       message: ''
     };
     this.inputRef = React.createRef();
@@ -49,7 +50,7 @@ class Builder extends Component {
   submit = () => {
     var isError = this.props.checkError();
     if(isError){
-      this.setState({ snackbar: true, message: `Die Angaben für das Tutorial sind nicht vollständig.`, type: 'error'});
+      this.setState({ snackbar: true, key: Date.now(), message: `Die Angaben für das Tutorial sind nicht vollständig.`, type: 'error'});
       window.scrollTo(0, 0);
     }
     else{
@@ -65,7 +66,7 @@ class Builder extends Component {
 
   reset = () => {
     this.props.resetTutorial();
-    this.setState({ snackbar: true, message: `Das Tutorial wurde erfolgreich zurückgesetzt.`, type: 'success'});
+    this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial wurde erfolgreich zurückgesetzt.`, type: 'success'});
     window.scrollTo(0, 0);
   }
 
@@ -95,7 +96,7 @@ class Builder extends Component {
         result.steps = [{}];
       }
       this.props.readJSON(result);
-      this.setState({ snackbar: true, message: `${isFile ? 'Die übergebene JSON-Datei' : 'Der übergebene JSON-String'} wurde erfolgreich übernommen.`, type: 'success'});
+      this.setState({ snackbar: true, key: Date.now(), message: `${isFile ? 'Die übergebene JSON-Datei' : 'Der übergebene JSON-String'} wurde erfolgreich übernommen.`, type: 'success'});
     } catch(err){
       console.log(err);
       this.props.progress(false);
@@ -115,10 +116,6 @@ class Builder extends Component {
     this.setState({ open: !this.state });
   }
 
-  toggleSnackbar = () => {
-    this.setState({ snackbar: !this.state, message: '', type: null });
-  }
-
 
   render() {
     return (
@@ -185,9 +182,9 @@ class Builder extends Component {
 
         <Snackbar
           open={this.state.snackbar}
-          onClose={this.toggleSnackbar}
           message={this.state.message}
           type={this.state.type}
+          key={this.state.key}
         />
 
       </div>
diff --git a/src/components/WorkspaceFunc.js b/src/components/WorkspaceFunc.js
index 62380f5..ab2945c 100644
--- a/src/components/WorkspaceFunc.js
+++ b/src/components/WorkspaceFunc.js
@@ -62,6 +62,7 @@ class WorkspaceFunc extends Component {
       saveXml: false,
       name: props.name,
       snackbar: false,
+      key: '',
       message: ''
     };
   }
@@ -76,10 +77,6 @@ class WorkspaceFunc extends Component {
     this.setState({ open: !this.state });
   }
 
-  toggleSnackbar = () => {
-    this.setState({ snackbar: !this.state, message: '' });
-  }
-
   saveXmlFile = () => {
     var code = this.props.xml;
     this.toggleDialog();
@@ -128,7 +125,7 @@ class WorkspaceFunc extends Component {
               var extensionPosition = xmlFile.name.lastIndexOf('.');
               this.props.workspaceName(xmlFile.name.substr(0, extensionPosition));
             }
-            this.setState({ snackbar: true, message: 'Das Projekt aus gegebener XML-Datei wurde erfolgreich eingefügt.' });
+            this.setState({ snackbar: true, key: Date.now(), message: 'Das Projekt aus gegebener XML-Datei wurde erfolgreich eingefügt.' });
           }
         } catch(err){
           this.setState({ open: true, file: false, title: 'Ungültige XML', content: 'Die XML-Datei konnte nicht in Blöcke zerlegt werden. Bitte überprüfe den XML-Code und versuche es erneut.' });
@@ -140,7 +137,7 @@ class WorkspaceFunc extends Component {
   renameWorkspace = () => {
     this.props.workspaceName(this.state.name);
     this.toggleDialog();
-    this.setState({ snackbar: true, message: `Das Projekt wurde erfolgreich in '${this.state.name}' umbenannt.` });
+    this.setState({ snackbar: true, key: Date.now(), message: `Das Projekt wurde erfolgreich in '${this.state.name}' umbenannt.` });
   }
 
   resetWorkspace = () => {
@@ -156,7 +153,7 @@ class WorkspaceFunc extends Component {
     if(!this.props.solutionCheck){
       this.props.workspaceName(null);
     }
-    this.setState({ snackbar: true, message: 'Das Projekt wurde erfolgreich zurückgesetzt.' });
+    this.setState({ snackbar: true, key: Date.now(), message: 'Das Projekt wurde erfolgreich zurückgesetzt.' });
   }
 
   render() {
@@ -226,9 +223,9 @@ class WorkspaceFunc extends Component {
 
         <Snackbar
           open={this.state.snackbar}
-          onClose={this.toggleSnackbar}
           message={this.state.message}
           type='success'
+          key={this.state.key}
         />
 
       </div>