Merge pull request #38 from MLH-Fellowship/notistack-integration

Notistack integration
MLH-Fellowship · Nov 25, 2020 · 28c2e25 · 28c2e25
2 parents 575478c + e8241e1
commit 28c2e25
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 27 deletions.
diff --git a/.eslintcache b/.eslintcache
@@ -0,0 +1 @@
+[{"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\index.js":"1","C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\App.js":"2","C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\theme.js":"3","C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\BoilerGalleryContainer.js":"4","C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\UploadForm.js":"5","C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\BoilerCard.js":"6","C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\BoilerHeader.js":"7","C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\BoilerGallery.js":"8"},{"size":218,"mtime":1606264136329,"results":"9","hashOfConfig":"10"},{"size":579,"mtime":1606340153915,"results":"11","hashOfConfig":"10"},{"size":265,"mtime":1606264136330,"results":"12","hashOfConfig":"10"},{"size":1150,"mtime":1606340081665,"results":"13","hashOfConfig":"10"},{"size":3217,"mtime":1606264136328,"results":"14","hashOfConfig":"10"},{"size":2958,"mtime":1606340997677,"results":"15","hashOfConfig":"10"},{"size":301,"mtime":1606264136327,"results":"16","hashOfConfig":"10"},{"size":497,"mtime":1606340170040,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1kq2473",{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\index.js",[],"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\App.js",[],"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\theme.js",[],"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\BoilerGalleryContainer.js",[],"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\UploadForm.js",[],"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\BoilerCard.js",[],"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\BoilerHeader.js",[],"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\BoilerGallery.js",[]]
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
   "dependencies": {
     "@material-ui/core": "^4.11.1",
     "@material-ui/icons": "^4.9.1",
+    "component-emitter": "^1.3.0",
     "cors": "^2.8.5",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
@@ -38,6 +39,7 @@
     "multer": "^1.4.2",
     "multer-gridfs-storage": "^4.2.0",
     "node": "^15.2.1",
+    "notistack": "^1.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",

diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,5 @@
 import "./App.css";
-import { render } from "react-dom";
-import theme from "./theme";
+import { SnackbarProvider } from 'notistack'; import theme from "./theme";
 import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
 
 import BoilerHeader from "./components/BoilerHeader";
@@ -9,10 +8,12 @@ import BoilerGalleryContainer from "./components/BoilerGalleryContainer";
 function App() {
   return (
     <MuiThemeProvider theme={theme}>
-      <body>
-        <BoilerHeader />
-        <BoilerGalleryContainer />
-      </body>
+      <SnackbarProvider maxSnack={3}>
+        <body>
+          <BoilerHeader />
+          <BoilerGalleryContainer />
+        </body>
+      </SnackbarProvider>
     </MuiThemeProvider>
   );
 }

diff --git a/src/components/BoilerCard.js b/src/components/BoilerCard.js
@@ -1,35 +1,27 @@
 import React from "react";
 import Snackbar from "material-ui/Snackbar";
+import { withSnackbar } from 'notistack';
 import "./Library.css";
 import { MuiThemeProvider } from "material-ui/styles";
 
 class BoilerCard extends React.Component {
     constructor(props) {
         super(props);
-        this.state = { snackbarOpen: false, snackbarContent: ''};
         this.onButtonFunctionComplete = this.onButtonFunctionComplete.bind(this);
-        this.updateSnackbar = this.updateSnackbar.bind(this);
     }
 
     // Function runs after git repo is successfully downloaded
     async onButtonFunctionComplete(snackbarOpen, snackbarContent, id, path, commands) {
-        this.updateSnackbar(snackbarOpen, snackbarContent);
+        this.props.enqueueSnackbar(snackbarContent);
         for await (let i of commands) {
-            console.log(commands.indexOf(i));
+            // console.log(commands.indexOf(i));
+            // console.log("Command", i);       
             let snackbarUpdate = await secondFetch(id, path, commands.indexOf(i));
-            this.updateSnackbar(false, " ");
-            this.updateSnackbar(true, snackbarUpdate.message);     
-            console.log("Command", i);       
+            this.props.enqueueSnackbar(snackbarUpdate.message)
         }
-        this.updateSnackbar(true, "Commands are finished!");    
+        this.props.enqueueSnackbar('Commands finished!')
      };
 
-    // Updates snackbar message
-    updateSnackbar = (snackbarOpen, snackbarContent) => {
-        console.log("Snackbar:", snackbarOpen, "SnackbarContent:", snackbarContent);
-        this.setState({snackbarOpen: snackbarOpen, snackbarContent: snackbarContent});
-    };
-
     render() {
         let element =
             <article className="boiler-card">
@@ -42,22 +34,17 @@ class BoilerCard extends React.Component {
                     <div className="card-button-array">
                         <FavoriteButton id={this.props._id}></FavoriteButton>
                         <DeployButton callback={this.onButtonFunctionComplete} id={this.props._id}></DeployButton>
-                        {/* <DownloadButton id={ this.props._id }></DownloadButton> */}
                     </div>
                 </section>
-                <MuiThemeProvider>
-                        <Snackbar open={this.state.snackbarOpen} anchorOrigin={{vertical: 'bottom', horizontal: 'left'}} autoHideDuration={6000} className="card-snackbar"message={this.state.snackbarContent}></Snackbar>
-                </MuiThemeProvider>
             </article>;
         return element
     }
 }
 
 // Fetches commands
 async function secondFetch(id, path, command) {
-    console.log("Test");
     let response = await (await fetch(`http://localhost:5000/boilers/setup/${id}/${command}/${path}`)).json();
-    console.log("Path", response.path);
+    // console.log("Path", response.path);
     return({success: true, message: response.message, path: response.path});
     }
 
@@ -90,4 +77,4 @@ class DownloadButton extends React.Component {
     }
 }
 
-export default BoilerCard;
+export default withSnackbar(BoilerCard);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		[{"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\index.js":"1","C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\App.js":"2","C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\theme.js":"3","C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\BoilerGalleryContainer.js":"4","C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\UploadForm.js":"5","C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\BoilerCard.js":"6","C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\BoilerHeader.js":"7","C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\BoilerGallery.js":"8"},{"size":218,"mtime":1606264136329,"results":"9","hashOfConfig":"10"},{"size":579,"mtime":1606340153915,"results":"11","hashOfConfig":"10"},{"size":265,"mtime":1606264136330,"results":"12","hashOfConfig":"10"},{"size":1150,"mtime":1606340081665,"results":"13","hashOfConfig":"10"},{"size":3217,"mtime":1606264136328,"results":"14","hashOfConfig":"10"},{"size":2958,"mtime":1606340997677,"results":"15","hashOfConfig":"10"},{"size":301,"mtime":1606264136327,"results":"16","hashOfConfig":"10"},{"size":497,"mtime":1606340170040,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1kq2473",{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\index.js",[],"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\App.js",[],"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\theme.js",[],"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\BoilerGalleryContainer.js",[],"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\UploadForm.js",[],"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\BoilerCard.js",[],"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\BoilerHeader.js",[],"C:\\Users\\dgavi\\Documents\\code\\boiler.js\\src\\components\\BoilerGallery.js",[]]