feat: start internatinalization

frontend/src/pages/Chat/index.js

@@ -7,6 +7,8 @@ import { makeStyles } from "@material-ui/core/styles";
 import Tickets from "../../components/Tickets/";
 import MessagesList from "../../components/MessagesList/";
 
+import { i18n } from "../../translate/i18n";
+
 const useStyles = makeStyles(theme => ({
 	chatContainer: {
 		flex: 1,
@@ -61,7 +63,7 @@ const Chat = () => {
 							</>
 						) : (
 							<Paper square variant="outlined" className={classes.welcomeMsg}>
-								<span>Selecione um contato para começar a conversar</span>
+								<span>{i18n.t("chat.noTicketMessage")}</span>
 							</Paper>
 						)}
 					</Grid>

frontend/src/pages/Contacts/index.js

@@ -28,7 +28,7 @@ import ContactsSekeleton from "../../components/ContactsSekeleton";
 import ContactModal from "../../components/ContactModal";
 import ConfirmationModal from "../../components/ConfirmationModal/";
 
-let socket;
+import { i18n } from "../../translate/i18n";
 
 const useStyles = makeStyles(theme => ({
 	mainContainer: {
@@ -105,13 +105,7 @@ const Contacts = () => {
 	}, [searchParam, page, rowsPerPage]);
 
 	useEffect(() => {
-		socket = openSocket(process.env.REACT_APP_BACKEND_URL);
-		return () => {
-			socket.disconnect();
-		};
-	}, []);
-
-	useEffect(() => {
+		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 		socket.on("contact", data => {
 			if ((data.action === "update" || data.action === "create") && !loading) {
 				updateContacts(data.contact);
@@ -121,6 +115,10 @@ const Contacts = () => {
 				deleteContact(data.contactId);
 			}
 		});
+
+		return () => {
+			socket.disconnect();
+		};
 	}, [loading]);
 
 	const updateContacts = contact => {
@@ -206,8 +204,10 @@ const Contacts = () => {
 			<ConfirmationModal
 				title={
 					deletingContact
-						? `Deletar ${deletingContact.name}?`
-						: `Importar contatos`
+						? `${i18n.t("contacts.confirmationModal.deleteTitle")} ${
+								deletingContact.name
+						  }?`
+						: `${i18n.t("contacts.confirmationModal.importTitlte")}`
 				}
 				open={confirmOpen}
 				setOpen={setConfirmOpen}
@@ -218,17 +218,17 @@ const Contacts = () => {
 				}
 			>
 				{deletingContact
-					? "Tem certeza que deseja deletar este contato? Todos os tickets relacionados serão perdidos."
-					: "Deseja importas todos os contatos do telefone? Essa função é experimental, você terá que recarregar a página após a importação "}
+					? `${i18n.t("contacts.confirmationModal.deleteMessage")}`
+					: `${i18n.t("contacts.confirmationModal.importMessage")}`}
 			</ConfirmationModal>
 			<div className={classes.contactsHeader}>
 				<Typography variant="h5" gutterBottom>
-					Contatos
+					{i18n.t("contacts.title")}
 				</Typography>
 
 				<div className={classes.actionButtons}>
 					<TextField
-						placeholder="Pesquisar..."
+						placeholder={i18n.t("contacts.searchPlaceholder")}
 						type="search"
 						value={searchParam}
 						onChange={handleSearch}
@@ -245,14 +245,14 @@ const Contacts = () => {
 						color="primary"
 						onClick={e => setConfirmOpen(true)}
 					>
-						Importar contatos
+						{i18n.t("contacts.buttons.import")}
 					</Button>
 					<Button
 						variant="contained"
 						color="primary"
 						onClick={handleOpenContactModal}
 					>
-						Adicionar contato
+						{i18n.t("contacts.buttons.add")}
 					</Button>
 				</div>
 			</div>
@@ -261,10 +261,12 @@ const Contacts = () => {
 					<TableHead>
 						<TableRow>
 							<TableCell padding="checkbox" />
-							<TableCell>Nome</TableCell>
-							<TableCell>Whatsapp</TableCell>
-							<TableCell>Email</TableCell>
-							<TableCell align="right">Ações</TableCell>
+							<TableCell>{i18n.t("contacts.table.name")}</TableCell>
+							<TableCell>{i18n.t("contacts.table.whatsapp")}</TableCell>
+							<TableCell>{i18n.t("contacts.table.email")}</TableCell>
+							<TableCell align="right">
+								{i18n.t("contacts.table.actions")}
+							</TableCell>
 						</TableRow>
 					</TableHead>
 					<TableBody>

frontend/src/pages/Dashboard/Chart.js

@@ -11,6 +11,8 @@ import {
 } from "recharts";
 import { startOfHour, parseISO, format } from "date-fns";
 
+import { i18n } from "../../translate/i18n";
+
 import Title from "./Title";
 import api from "../../services/api";
 
@@ -69,7 +71,9 @@ const Chart = () => {
 
 	return (
 		<React.Fragment>
-			<Title>{`Tickets hoje: ${tickets.length}`}</Title>
+			<Title>{`${i18n.t("dashboard.charts.perDay.title")}${
+				tickets.length
+			}`}</Title>
 			<ResponsiveContainer>
 				<BarChart
 					data={chartData}

frontend/src/pages/Login/index.js

@@ -5,8 +5,6 @@ import Avatar from "@material-ui/core/Avatar";
 import Button from "@material-ui/core/Button";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import TextField from "@material-ui/core/TextField";
-// import FormControlLabel from "@material-ui/core/FormControlLabel";
-// import Checkbox from "@material-ui/core/Checkbox";
 import Link from "@material-ui/core/Link";
 import Grid from "@material-ui/core/Grid";
 import Box from "@material-ui/core/Box";
@@ -15,13 +13,15 @@ import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
 
+import { i18n } from "../../translate/i18n";
+
 import { AuthContext } from "../../context/Auth/AuthContext";
 
 const Copyright = () => {
 	return (
 		<Typography variant="body2" color="textSecondary" align="center">
 			{"Copyright © "}
-			<Link color="inherit" href="https://material-ui.com/">
+			<Link color="inherit" href="https://economicros.com.br/">
 				Canove
 			</Link>{" "}
 			{new Date().getFullYear()}
@@ -50,7 +50,7 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-const Login = ({ showToast }) => {
+const Login = () => {
 	const classes = useStyles();
 
 	const [user, setUser] = useState({ email: "", password: "" });
@@ -69,7 +69,7 @@ const Login = ({ showToast }) => {
 					<LockOutlinedIcon />
 				</Avatar>
 				<Typography component="h1" variant="h5">
-					Login
+					{i18n.t("login.title")}
 				</Typography>
 				<form
 					className={classes.form}
@@ -82,7 +82,7 @@ const Login = ({ showToast }) => {
 						required
 						fullWidth
 						id="email"
-						label="Email"
+						label={i18n.t("login.form.email")}
 						name="email"
 						value={user.email}
 						onChange={handleChangeInput}
@@ -95,17 +95,13 @@ const Login = ({ showToast }) => {
 						required
 						fullWidth
 						name="password"
-						label="Senha"
+						label={i18n.t("login.form.password")}
 						type="password"
 						id="password"
 						value={user.password}
 						onChange={handleChangeInput}
 						autoComplete="current-password"
 					/>
-					{/* <FormControlLabel
-						control={<Checkbox value="remember" color="primary" />}
-						label="Lembrar"
-					/> */}
 					<Button
 						type="submit"
 						fullWidth
@@ -113,14 +109,9 @@ const Login = ({ showToast }) => {
 						color="primary"
 						className={classes.submit}
 					>
-						Entrar
+						{i18n.t("login.buttons.submit")}
 					</Button>
 					<Grid container>
-						{/* <Grid item xs>
-							<Link href="#" variant="body2">
-								Forgot password?
-							</Link>
-						</Grid> */}
 						<Grid item>
 							<Link
 								href="#"
@@ -128,7 +119,7 @@ const Login = ({ showToast }) => {
 								component={RouterLink}
 								to="/signup"
 							>
-								{"Não tem uma conta? Cadastre-se!"}
+								{i18n.t("login.buttons.register")}
 							</Link>
 						</Grid>
 					</Grid>

frontend/src/pages/Signup/index.js

@@ -16,6 +16,8 @@ import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
 
+import { i18n } from "../../translate/i18n";
+
 import api from "../../services/api";
 
 const Copyright = () => {
@@ -65,10 +67,10 @@ const SignUp = () => {
 		e.preventDefault();
 		try {
 			await api.post("/auth/signup", user);
-			toast.success("Usuário criado com sucesso! Faça seu login.");
+			toast.success(i18n.t("signup.toast.success"));
 			history.push("/login");
 		} catch (err) {
-			toast.error("Erro ao criar usuário. Verifique os dados informados.");
+			toast.error(i18n.t("signup.toast.fail"));
 		}
 	};
 
@@ -80,7 +82,7 @@ const SignUp = () => {
 					<LockOutlinedIcon />
 				</Avatar>
 				<Typography component="h1" variant="h5">
-					Cadastre-se
+					{i18n.t("signup.title")}
 				</Typography>
 				<form className={classes.form} noValidate onSubmit={handleSignUp}>
 					<Grid container spacing={2}>
@@ -92,7 +94,7 @@ const SignUp = () => {
 								required
 								fullWidth
 								id="name"
-								label="Nome"
+								label={i18n.t("signup.form.name")}
 								value={user.name}
 								onChange={handleChangeInput}
 								autoFocus
@@ -105,7 +107,7 @@ const SignUp = () => {
 								required
 								fullWidth
 								id="email"
-								label="Email"
+								label={i18n.t("signup.form.email")}
 								name="email"
 								autoComplete="email"
 								value={user.email}
@@ -118,7 +120,7 @@ const SignUp = () => {
 								required
 								fullWidth
 								name="password"
-								label="Senha"
+								label={i18n.t("signup.form.password")}
 								type="password"
 								id="password"
 								autoComplete="current-password"
@@ -134,12 +136,12 @@ const SignUp = () => {
 						color="primary"
 						className={classes.submit}
 					>
-						Cadastrar
+						{i18n.t("signup.buttons.submit")}
 					</Button>
 					<Grid container justify="flex-end">
 						<Grid item>
 							<Link href="#" variant="body2" component={RouterLink} to="/login">
-								Já tem uma conta? Entre!
+								{i18n.t("signup.buttons.login")}
 							</Link>
 						</Grid>
 					</Grid>

frontend/src/pages/WhatsAuth/WhatsAuth.js

@@ -10,8 +10,6 @@ import Paper from "@material-ui/core/Paper";
 import SessionInfo from "../../components/SessionInfo";
 import Qrcode from "../../components/Qrcode";
 
-let socket;
-
 const useStyles = makeStyles(theme => ({
 	root: {
 		display: "flex",
@@ -55,14 +53,8 @@ const WhatsAuth = () => {
 	}, []);
 
 	useEffect(() => {
-		socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 
-		return () => {
-			socket.disconnect();
-		};
-	}, []);
-
-	useEffect(() => {
 		socket.on("qrcode", data => {
 			if (data.action === "update") {
 				setQrCode(data.qr);
@@ -76,6 +68,10 @@ const WhatsAuth = () => {
 				history.push("/chat");
 			}
 		});
+
+		return () => {
+			socket.disconnect();
+		};
 	}, [history]);
 
 	return (