feat: finished settings page

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;