Setup notifications

package.json

@@ -1,12 +1,10 @@
 {
 	"name": "preview-generator",
 	"version": "1.0.0",
-	"description":
-		"A landing page for creating IIS virtual directories and applications using NodeJS.",
+	"description": "A landing page for creating IIS virtual directories and applications using NodeJS.",
 	"main": "index.js",
 	"scripts": {
-		"dev":
-			"webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js",
+		"dev": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js",
 		"start": "node index.js",
 		"build": "webpack --config webpack.build.config.js",
 		"watch": "webpack --config webpack.build.config.js --watch"
@@ -15,7 +13,11 @@
 		"type": "git",
 		"url": "git+https://github.com/C-Rodg/IIS-Preview-Generator.git"
 	},
-	"keywords": ["NodeJS", "express", "IIS"],
+	"keywords": [
+		"NodeJS",
+		"express",
+		"IIS"
+	],
 	"author": "C-Rodg",
 	"license": "MIT",
 	"bugs": {
@@ -24,7 +26,8 @@
 	"homepage": "https://github.com/C-Rodg/IIS-Preview-Generator#readme",
 	"dependencies": {
 		"axios": "^0.17.1",
-		"express": "^4.16.2"
+		"express": "^4.16.2",
+		"react-toastify": "^3.0.0"
 	},
 	"devDependencies": {
 		"babel-core": "^6.26.0",

src/components/App.js

@@ -1,20 +1,51 @@
 import React, { Component } from "react";
 import axios from "axios";
+import { ToastContainer, toast } from "react-toastify";
 
 import Header from "./Header";
 import Card from "./Card";
+import Loading from "./Loading";
+import { setTimeout } from "timers";
+
+const successToast = {
+	className: "success-toast",
+	bodyClassName: "toast-msg"
+};
+
+const errorToast = {
+	className: "error-toast",
+	bodyClassName: "toast-msg"
+};
 
 class App extends Component {
+	state = {
+		loading: false
+	};
 	createPreview = () => {
-		// send to node backend
+		// Set loading = true
+
+		this.setState({ loading: true }, () => {
+			// Call backend node service
+			// OnSuccess =>
+			//toast.success("Preview created successfully!", successToast);
+			//this.setState({ loading: false });
+			// OnError =>
+			//toast.success("Unable to create preview..", errorToast);
+			//this.setState({ loading: false });
+		});
 	};
 
 	render() {
 		return (
 			<div className="app">
+				<ToastContainer autoClose={100000000} />
 				<Header />
 				<main className="container">
-					<Card onCreatePreview={this.createPreview} />
+					{!this.state.loading ? (
+						<Card onCreatePreview={this.createPreview} />
+					) : (
+						<Loading />
+					)}
 				</main>
 			</div>
 		);