feat: finished settings page

backend/src/controllers/SettingController.js

@@ -1,6 +1,5 @@
-const Sequelize = require("sequelize");
-
 const Setting = require("../models/Setting");
+const { getIO } = require("../libs/socket");
 
 exports.index = async (req, res) => {
 	const settings = await Setting.findAll();
@@ -9,8 +8,8 @@ exports.index = async (req, res) => {
 };
 
 exports.update = async (req, res) => {
+	const io = getIO();
 	const { settingKey } = req.params;
-
 	const setting = await Setting.findByPk(settingKey);
 
 	if (!setting) {
@@ -19,5 +18,10 @@ exports.update = async (req, res) => {
 
 	await setting.update(req.body);
 
+	io.emit("settings", {
+		action: "update",
+		setting,
+	});
+
 	return res.status(200).json(setting);
 };

backend/src/controllers/TicketController.js

@@ -121,7 +121,7 @@ exports.store = async (req, res) => {
 		ticket: serializaedTicket,
 	});
 
-	res.status(200).json(ticket);
+	return res.status(200).json(ticket);
 };
 
 exports.update = async (req, res) => {
@@ -149,7 +149,7 @@ exports.update = async (req, res) => {
 		ticket: ticket,
 	});
 
-	res.status(200).json(ticket);
+	return res.status(200).json(ticket);
 };
 
 exports.delete = async (req, res) => {
@@ -169,5 +169,5 @@ exports.delete = async (req, res) => {
 		ticketId: ticket.id,
 	});
 
-	res.status(200).json({ message: "ticket deleted" });
+	return res.status(200).json({ message: "ticket deleted" });
 };

frontend/src/pages/Contacts/index.js

@@ -53,9 +53,10 @@ const reducer = (state, action) => {
 
 		if (contactIndex !== -1) {
 			state[contactIndex] = contact;
+			return [...state];
+		} else {
+			return [contact, ...state];
 		}
-
-		return [contact, ...state];
 	}
 
 	if (action.type === "DELETE_CONTACT") {
@@ -67,6 +68,10 @@ const reducer = (state, action) => {
 		}
 		return [...state];
 	}
+
+	if (action.type === "RESET") {
+		return [];
+	}
 };
 
 const useStyles = makeStyles(theme => ({
@@ -91,6 +96,11 @@ const Contacts = () => {
 	const [confirmOpen, setConfirmOpen] = useState(false);
 	const [hasMore, setHasMore] = useState(false);
 
+	useEffect(() => {
+		dispatch({ type: "RESET" });
+		setPageNumber(1);
+	}, [searchParam]);
+
 	useEffect(() => {
 		setLoading(true);
 		const delayDebounceFn = setTimeout(() => {

frontend/src/pages/Settings/index.js

@@ -1,15 +1,14 @@
 import React, { useState, useEffect } from "react";
-import { useHistory } from "react-router-dom";
-import api from "../../services/api";
 import openSocket from "socket.io-client";
 
 import { makeStyles } from "@material-ui/core/styles";
-
 import Paper from "@material-ui/core/Paper";
-
-import Switch from "@material-ui/core/Switch";
 import Typography from "@material-ui/core/Typography";
 import Container from "@material-ui/core/Container";
+import Select from "@material-ui/core/Select";
+import { toast } from "react-toastify";
+
+import api from "../../services/api";
 
 const useStyles = makeStyles(theme => ({
 	root: {
@@ -24,50 +23,97 @@ const useStyles = makeStyles(theme => ({
 		alignItems: "center",
 	},
 
-	switch: {
+	settingOption: {
 		marginLeft: "auto",
 	},
+	margin: {
+		margin: theme.spacing(1),
+	},
 }));
 
-const WhatsAuth = () => {
+const Settings = () => {
 	const classes = useStyles();
-	// const history = useHistory();
 
 	const [settings, setSettings] = useState([]);
 
-	// useEffect(() => {
-	// 	const fetchSession = async () => {
-	// 		try {
-	// 			const { data } = await api.get("/whatsapp/session/1");
-	// 			setQrCode(data.qrcode);
-	// 			setSession(data);
-	// 		} catch (err) {
-	// 			console.log(err);
-	// 		}
-	// 	};
-	// 	fetchSession();
-	// }, []);
+	useEffect(() => {
+		const fetchSession = async () => {
+			try {
+				const { data } = await api.get("/settings");
+				setSettings(data);
+			} catch (err) {
+				console.log(err);
+			}
+		};
+		fetchSession();
+	}, []);
+
+	useEffect(() => {
+		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+		socket.on("settings", data => {
+			if (data.action === "update") {
+				// dispatch({ type: "UPDATE_USERS", payload: data.user });
+				setSettings(prevState => {
+					const aux = [...prevState];
+					const settingIndex = aux.findIndex(s => s.key === data.setting.key);
+					aux[settingIndex].value = data.setting.value;
+					return aux;
+				});
+			}
+		});
+
+		return () => {
+			socket.disconnect();
+		};
+	}, []);
+
+	const handleChangeSetting = async e => {
+		const selectedValue = e.target.value;
+		const settingKey = e.target.name;
+
+		try {
+			await api.put(`/settings/${settingKey}`, {
+				value: selectedValue,
+			});
+			toast.success("Setting updated");
+		} catch (err) {
+			alert(err);
+			console.log(err);
+		}
+	};
+
+	const getSettingValue = key => {
+		const setting = settings.find(s => s.key === key);
+		return setting.value;
+	};
 
 	return (
 		<div className={classes.root}>
 			<Container className={classes.container} maxWidth="sm">
-				<Typography variant="subtitle1" gutterBottom>
+				<Typography variant="body2" gutterBottom>
 					Settings
 				</Typography>
 				<Paper className={classes.paper}>
-					<Typography variant="body2">Enable user creation</Typography>
-					<Switch
-						size="small"
-						className={classes.switch}
-						checked={true}
-						// onChange={() => setShowAllTickets(prevState => !prevState)}
-						name="showAllTickets"
-						color="primary"
-					/>
+					<Typography variant="body1">User creation</Typography>
+					<Select
+						margin="dense"
+						variant="outlined"
+						native
+						id="userCreation-setting"
+						name="userCreation"
+						value={
+							settings && settings.length > 0 && getSettingValue("userCreation")
+						}
+						className={classes.settingOption}
+						onChange={handleChangeSetting}
+					>
+						<option value="enabled">Enabled</option>
+						<option value="disabled">Disabled</option>
+					</Select>
 				</Paper>
 			</Container>
 		</div>
 	);
 };
 
-export default WhatsAuth;
+export default Settings;

frontend/src/pages/Users/index.js

@@ -51,9 +51,10 @@ const reducer = (state, action) => {
 
 		if (userIndex !== -1) {
 			state[userIndex] = user;
+			return [...state];
+		} else {
+			return [user, ...state];
 		}
-
-		return [user, ...state];
 	}
 
 	if (action.type === "DELETE_USER") {
@@ -65,6 +66,10 @@ const reducer = (state, action) => {
 		}
 		return [...state];
 	}
+
+	if (action.type === "RESET") {
+		return [];
+	}
 };
 
 const useStyles = makeStyles(theme => ({
@@ -89,6 +94,11 @@ const Users = () => {
 	const [searchParam, setSearchParam] = useState("");
 	const [users, dispatch] = useReducer(reducer, []);
 
+	useEffect(() => {
+		dispatch({ type: "RESET" });
+		setPageNumber(1);
+	}, [searchParam]);
+
 	useEffect(() => {
 		setLoading(true);
 		const delayDebounceFn = setTimeout(() => {