improvement: all app strings now using i18n

frontend/src/App.js

@@ -1,20 +1,32 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Routes from "./routes";
 import "react-toastify/dist/ReactToastify.css";
 
 import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
 import { ptBR } from "@material-ui/core/locale";
 
-const theme = createMuiTheme(
-	{
-		palette: {
-			primary: { main: "#1976d2" },
-		},
-	},
-	ptBR
-);
-
 const App = () => {
+	const [locale, setLocale] = useState();
+
+	const theme = createMuiTheme(
+		{
+			palette: {
+				primary: { main: "#1976d2" },
+			},
+		},
+		locale
+	);
+
+	useEffect(() => {
+		const i18nlocale = localStorage.getItem("i18nextLng");
+		const browserLocale =
+			i18nlocale.substring(0, 2) + i18nlocale.substring(3, 5);
+
+		if (browserLocale === "ptBR") {
+			setLocale(ptBR);
+		}
+	}, []);
+
 	return (
 		<ThemeProvider theme={theme}>
 			<Routes />

frontend/src/components/ContactDrawer/index.js

@@ -11,6 +11,7 @@ import Avatar from "@material-ui/core/Avatar";
 import Button from "@material-ui/core/Button";
 import Paper from "@material-ui/core/Paper";
 
+import { i18n } from "../../translate/i18n";
 import LinkifyWithTargetBlank from "../LinkifyWithTargetBlank";
 import ContactModal from "../ContactModal";
 import ContactDrawerSkeleton from "../ContactDrawerSkeleton";
@@ -123,7 +124,7 @@ const ContactDrawer = ({ open, handleDrawerClose, contact, loading }) => {
 					<CloseIcon />
 				</IconButton>
 				<Typography style={{ justifySelf: "center" }}>
-					Dados do contato
+					{i18n.t("contactDrawer.header")}
 				</Typography>
 			</div>
 			{loading ? (
@@ -146,7 +147,7 @@ const ContactDrawer = ({ open, handleDrawerClose, contact, loading }) => {
 							color="primary"
 							onClick={e => setModalOpen(true)}
 						>
-							Editar contato
+							{i18n.t("contactDrawer.buttons.edit")}
 						</Button>
 					</Paper>
 					<Paper square variant="outlined" className={classes.contactDetails}>
@@ -156,7 +157,9 @@ const ContactDrawer = ({ open, handleDrawerClose, contact, loading }) => {
 							aria-labelledby="form-dialog-title"
 							contactId={contact.id}
 						></ContactModal>
-						<Typography variant="subtitle1">Outras informações</Typography>
+						<Typography variant="subtitle1">
+							{i18n.t("contactDrawer.extraInfo")}
+						</Typography>
 						{contact &&
 							contact.extraInfo &&
 							contact.extraInfo.map(info => (

frontend/src/components/MessageInput/index.js

@@ -18,6 +18,7 @@ import MicIcon from "@material-ui/icons/Mic";
 import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline";
 import HighlightOffIcon from "@material-ui/icons/HighlightOff";
 
+import { i18n } from "../../translate/i18n";
 import api from "../../services/api";
 import RecordingTimer from "./RecordingTimer";
 
@@ -310,7 +311,7 @@ const MessageInput = () => {
 					<InputBase
 						inputRef={input => input && input.focus()}
 						className={classes.messageInput}
-						placeholder="Escreva uma mensagem"
+						placeholder={i18n.t("messagesInput.placeholder")}
 						multiline
 						rowsMax={5}
 						value={inputMessage}

frontend/src/components/MessagesList/index.js

@@ -23,6 +23,7 @@ import Skeleton from "@material-ui/lab/Skeleton";
 import IconButton from "@material-ui/core/IconButton";
 import MoreVertIcon from "@material-ui/icons/MoreVert";
 
+import { i18n } from "../../translate/i18n";
 import api from "../../services/api";
 import ContactDrawer from "../ContactDrawer";
 import whatsBackground from "../../assets/wa-background.png";
@@ -569,7 +570,10 @@ const MessagesList = () => {
 							loading ? (
 								<Skeleton animation="wave" width={80} />
 							) : (
-								ticket.user && `Atribuído à: ${ticket.user.name}`
+								ticket.user &&
+								`${i18n.t("messagesList.header.assignedTo")} ${
+									ticket.user.name
+								}`
 							)
 						}
 					/>
@@ -581,7 +585,7 @@ const MessagesList = () => {
 									size="small"
 									onClick={e => handleUpdateTicketStatus(e, "open", userId)}
 								>
-									Reabrir
+									{i18n.t("messagesList.header.buttons.reopen")}
 								</Button>
 							) : (
 								<>
@@ -590,7 +594,7 @@ const MessagesList = () => {
 										size="small"
 										onClick={e => handleUpdateTicketStatus(e, "pending", null)}
 									>
-										Retornar
+										{i18n.t("messagesList.header.buttons.return")}
 									</Button>
 									<Button
 										size="small"
@@ -598,7 +602,7 @@ const MessagesList = () => {
 										color="primary"
 										onClick={e => handleUpdateTicketStatus(e, "closed", userId)}
 									>
-										Resolver
+										{i18n.t("messagesList.header.buttons.resolve")}
 									</Button>
 								</>
 							)}

frontend/src/components/TicketOptionsMenu/index.js

@@ -5,6 +5,7 @@ import { toast } from "react-toastify";
 import MenuItem from "@material-ui/core/MenuItem";
 import Menu from "@material-ui/core/Menu";
 
+import { i18n } from "../../translate/i18n";
 import api from "../../services/api";
 import ConfirmationModal from "../ConfirmationModal";
 
@@ -47,8 +48,12 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 				open={menuOpen}
 				onClose={handleClose}
 			>
-				<MenuItem onClick={handleOpenConfirmationModal}>Deletar</MenuItem>
-				<MenuItem onClick={handleTransferTicket}>Transferir</MenuItem>
+				<MenuItem onClick={handleOpenConfirmationModal}>
+					{i18n.t("ticketOptionsMenu.delete")}
+				</MenuItem>
+				<MenuItem onClick={handleTransferTicket}>
+					{i18n.t("ticketOptionsMenu.transfer")}
+				</MenuItem>
 			</Menu>
 			<ConfirmationModal
 				title={`Deletar o ticket #${ticket.id} do contato ${ticket.contact.name}?`}

frontend/src/translate/languages/pt.js

@@ -147,6 +147,30 @@ const messages = {
 					contacts: "Contatos",
 				},
 			},
+			messagesList: {
+				header: {
+					assignedTo: "Atribuído à:",
+					buttons: {
+						return: "Retornar",
+						resolve: "Resolver",
+						reopen: "Reabrir",
+					},
+				},
+			},
+			messagesInput: {
+				placeholder: "Digite uma mensagem",
+			},
+			contactDrawer: {
+				header: "Dados do contato",
+				buttons: {
+					edit: "Editar contato",
+				},
+				extraInfo: "Outras informações",
+			},
+			ticketOptionsMenu: {
+				delete: "Deletar",
+				transfer: "Transferir",
+			},
 		},
 	},
 };