Add Separador API e Add Documentação Internamente

rtenorioh · Mar 20, 2022 · 8dddb9a · 8dddb9a
1 parent 4e4a9fa
commit 8dddb9a
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 4 deletions.
diff --git a/frontend/src/layout/MainListItems.js b/frontend/src/layout/MainListItems.js
@@ -16,6 +16,7 @@ import ContactPhoneOutlinedIcon from "@material-ui/icons/ContactPhoneOutlined";
 import AccountTreeOutlinedIcon from "@material-ui/icons/AccountTreeOutlined";
 import QuestionAnswerOutlinedIcon from "@material-ui/icons/QuestionAnswerOutlined";
 import CodeIcon from '@material-ui/icons/Code';
+import MenuBookIcon from '@material-ui/icons/MenuBook';
 
 import { i18n } from "../translate/i18n";
 import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext";
@@ -126,18 +127,29 @@ const MainListItems = (props) => {
               primary={i18n.t("mainDrawer.listItems.settings")}
               icon={<SettingsOutlinedIcon />}
             />
+            <Divider />
+            <ListSubheader inset>
+              {i18n.t("mainDrawer.listItems.apititle")}
+            </ListSubheader>
             <ListItemLink
               to="/api"
               primary={i18n.t("mainDrawer.listItems.api")}
               icon={
                 <CodeIcon />
               }
             />
+            <ListItemLink
+              to="/apidocs"
+              primary={i18n.t("mainDrawer.listItems.apidocs")}
+              icon={
+                <MenuBookIcon />
+              }
+            />
           </>
         )}
       />
     </div>
   );
 };
 
-export default MainListItems;
+export default MainListItems;
diff --git a/frontend/src/pages/ApiDocs/index.js b/frontend/src/pages/ApiDocs/index.js
@@ -0,0 +1,49 @@
+import React, { useEffect } from "react";
+import openSocket from "socket.io-client";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(theme => ({
+	root: {
+		display: "flex",
+		alignItems: "center",
+		padding: theme.spacing(1)
+	},
+
+	paper: {
+		padding: theme.spacing(2),
+		display: "flex",
+		alignItems: "center",
+	},
+
+	settingOption: {
+		marginLeft: "auto",
+	},
+	margin: {
+		margin: theme.spacing(1),
+	},
+}));
+
+
+const ApiDocs = () => {
+	const classes = useStyles();
+
+	useEffect(() => {
+		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+		return () => {
+			socket.disconnect();
+		};
+	}, []);
+
+    const back = process.env.REACT_APP_BACKEND_URL;
+    const endapi = "/api-docs";
+    const urlapi = back.concat(endapi);
+
+    return (
+
+		<div className={classes.root}> 
+		<iframe title="Doc da API" src={urlapi} height='800' width='100%' frameBorder="0"/>  
+		</div>
+	);
+};
+
+export default ApiDocs;
diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js
@@ -14,6 +14,7 @@ import Contacts from "../pages/Contacts/";
 import QuickAnswers from "../pages/QuickAnswers/";
 import Queues from "../pages/Queues/";
 import Api from "../pages/Api/";
+import ApiDocs from "../pages/ApiDocs/";
 
 import { AuthProvider } from "../context/Auth/AuthContext";
 import { WhatsAppsProvider } from "../context/WhatsApp/WhatsAppsContext";
@@ -51,6 +52,7 @@ const Routes = () => {
               />
               <Route exact path="/Settings" component={Settings} isPrivate />
               <Route exact path="/api" component={Api} isPrivate />
+              <Route exact path="/apidocs" component={ApiDocs} isPrivate />
               <Route exact path="/Queues" component={Queues} isPrivate />
             </LoggedInLayout>
           </WhatsAppsProvider>

diff --git a/frontend/src/translate/languages/en.js b/frontend/src/translate/languages/en.js
@@ -285,6 +285,8 @@ const messages = {
           users: "Users",
           settings: "Settings",
           api: "API usage",
+          apidocs: "Documentation",
+          apititle: "API",
         },
         appBar: {
           user: {
@@ -457,4 +459,4 @@ const messages = {
   },
 };
 
-export { messages };
+export { messages };
diff --git a/frontend/src/translate/languages/es.js b/frontend/src/translate/languages/es.js
@@ -289,6 +289,8 @@ const messages = {
           users: "Usuarios",
           settings: "Configuración",
           api: "uso de la API",
+          apidocs: "Documentación",
+          apititle: "API",
         },
         appBar: {
           user: {
@@ -464,4 +466,4 @@ const messages = {
   },
 };
 
-export { messages };
+export { messages };
diff --git a/frontend/src/translate/languages/pt.js b/frontend/src/translate/languages/pt.js
@@ -288,9 +288,11 @@ const messages = {
           administration: "Administração",
           users: "Usuários",
           settings: "Configurações",
-          api: "Uso da API",
           sendMsg: "Envio de Mensagens",
           sendMedia: "Envio de Mídia",
+          api: "Uso da API",
+          apidocs: "Documentação",
+          apititle: "API",
           Groups: "Grupos",
           SMS: "SMS",
           VoiceCall: "Chamada Telefônica",