deployment configuration

backend/.env.example

@@ -0,0 +1,7 @@
+NODE_ENV=development
+PORT=8080
+
+DB_HOST=
+DB_USER=
+DB_PASS=
+DB_NAME=

backend/.gitignore

@@ -1,2 +1,3 @@
 node_modules
-public/*
+public/*
+.env

backend/app.js

@@ -1,3 +1,4 @@
+require("dotenv/config");
 const express = require("express");
 const path = require("path");
 const cors = require("cors");
@@ -46,7 +47,7 @@ app.use((error, req, res, next) => {
 sequelize
 	.sync()
 	.then(() => {
-		const server = app.listen(8080);
+		const server = app.listen(process.env.PORT);
 		const io = require("./socket").init(server);
 		io.on("connection", socket => {
 			console.log("Client Connected");
@@ -64,11 +65,11 @@ sequelize
 			});
 		});
 
-		wBot.init().then(res => {
+		wBot.init().then(() => {
 			wbotMessageListener();
 			wbotMonitor();
 		});
-		console.log("Server started");
+		console.log("Server started on", process.env.PORT);
 	})
 	.catch(err => {
 		console.log(err);

backend/controllers/message.js

@@ -82,7 +82,7 @@ exports.getContactMessages = async (req, res, next) => {
 				...message.dataValues,
 				mediaUrl: `${
 					message.mediaUrl
-						? `http://localhost:8080/public/${message.mediaUrl}`
+						? `http://localhost:${process.env.PORT}/public/${message.mediaUrl}`
 						: ""
 				}`,
 			};

backend/controllers/wbotMessageListener.js

@@ -82,7 +82,7 @@ const wbotMessageListener = () => {
 							...newMessage.dataValues,
 							mediaUrl: `${
 								newMessage.mediaUrl
-									? `http://localhost:8080/public/${newMessage.mediaUrl}`
+									? `http://localhost:${process.env.PORT}/public/${newMessage.mediaUrl}`
 									: ""
 							}`,
 						},

backend/package-lock.json

@@ -754,6 +754,11 @@
         "is-obj": "^2.0.0"
       }
     },
+    "dotenv": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
+      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
+    },
     "dottie": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/dottie/-/dottie-2.0.2.tgz",

backend/package.json

@@ -17,6 +17,7 @@
 	"dependencies": {
 		"bcryptjs": "^2.4.3",
 		"cors": "^2.8.5",
+		"dotenv": "^8.2.0",
 		"express": "^4.17.1",
 		"express-validator": "^6.5.0",
 		"jsonwebtoken": "^8.5.1",

backend/util/database.js

@@ -1,13 +1,17 @@
+require("dotenv/config");
 const Sequelize = require("sequelize");
 
-const sequelize = new Sequelize("econo_whatsbot", "root", "nodecomplete", {
+const sequelize = new Sequelize({
 	define: {
 		charset: "utf8mb4",
 		collate: "utf8mb4_bin",
 	},
 	dialect: "mysql",
 	timezone: "-03:00",
-	host: "localhost",
+	host: process.env.DB_HOST,
+	database: process.env.DB_NAME,
+	username: process.env.DB_USER,
+	password: process.env.DB_PASS,
 	logging: false,
 });
 

frontend/src/pages/WhatsAuth/WhatsAuth.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useHistory } from "react-router-dom";
 import api from "../../util/api";
-import clsx from "clsx";
 import MainDrawer from "../../components/Layout/MainDrawer";
 import openSocket from "socket.io-client";
 
@@ -84,12 +83,10 @@ const WhatsAuth = () => {
 		return () => {
 			socket.disconnect();
 		};
-	}, []);
+	}, [history]);
 
 	console.log(session);
 
-	const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
-
 	return (
 		<div>
 			<MainDrawer appTitle="QR Code">

frontend/src/pages/WhatsAuth/components/Qrcode.js

@@ -1,17 +1,8 @@
 import React from "react";
 import QRCode from "qrcode.react";
-import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 
-const useStyles = makeStyles({
-	main: {
-		flex: 1,
-	},
-});
-
 const Qrcode = ({ qrCode }) => {
-	const classes = useStyles();
-
 	return (
 		<div>
 			<Typography component="h2" variant="h6" color="primary" gutterBottom>