DEV to PPR

package.json

@@ -4,7 +4,7 @@
   "version": "1.1.0",
   "private": true,
   "dependencies": {
-    "ama-design-system": "^1.1.21",
+    "ama-design-system": "^1.1.42",
     "axios": "^1.6.8",
     "bootstrap": "^5.3.3",
     "classnames": "^2.5.1",

src/App.jsx

@@ -1,5 +1,6 @@
 import "./styles/theme.css";
 import "./styles/fontStyle.css";
+import "./styles/main.css";
 
 import { useState } from "react";
 import { ThemeProvider } from "./context/ThemeContext";

src/config/api.js

@@ -1,15 +1,31 @@
-// import axios from "axios";
-
-// export const api = axios.create({
-//   baseURL: "http://10.55.37.16:/api/amp",
-// });
-
 import axios from "axios";
 
+import dataJSON from '../utils/data.json'
+
 const baseURLDEV = process.env.REACT_APP_AMP_DEV_SERVER;
 const baseURLPPR = process.env.REACT_APP_AMP_PPR_SERVER;
 const baseURLPRD = process.env.REACT_APP_AMP_PRD_SERVER;
 
 export const api = axios.create({
-  baseURL: baseURLPPR,
+  baseURL: baseURLDEV,
 });
+
+export const getEvalData = async (content, currentURL) => {
+  const response = await getEvalDataByAPI(content, currentURL);
+  //const response = await getEvalDataByLocal(content, currentURL);
+
+  return response;
+}
+
+const getEvalDataByAPI = async (content, currentURL) => {
+  const response = content === "html" ? 
+      await api.post("/eval/html", { html: currentURL })
+    : await api.get(`/eval/${encodeURIComponent(currentURL)}`);
+
+  return response;
+}
+
+const getEvalDataByLocal = async (content, currentURL) => {
+  const response = dataJSON
+  return response;
+}

src/pages/Details/index.js

@@ -7,7 +7,8 @@ import { useTranslation } from "react-i18next";
 import { ThemeContext } from "../../context/ThemeContext";
 import { Breadcrumb, Icon, LoadingComponent } from "ama-design-system";
 
-import { api } from "../../config/api";
+// Api
+import { getEvalData } from "../../config/api";
 
 import { useParams, useNavigate, useLocation } from "react-router-dom";
 
@@ -28,12 +29,13 @@ export default function Details({ allData, setAllData }) {
 
   const themeClass = theme === "light" ? "" : "dark_mode-details";
 
+  const url = allData?.rawUrl;
   const handleGoBack = () => {
     const test = location.pathname.split("/")
-    navigate(`${pathURL}results/${test[3]}`);
+
+    navigate(`${pathURL}results/${test[test.length-2]}`);
   };
 
-  const url = allData?.rawUrl;
   const textHeading = t(`ELEMS.${details}`);
   const [dataTable, setDataTable] = useState([]);
 
@@ -54,10 +56,6 @@ export default function Details({ allData, setAllData }) {
     },
   ];
 
-  const removeProtocol = (url) => {
-    return url.replace(/^(https?:\/\/)?(www\.)?/, "");
-  };
-
   function getDetailsData(data, tt) {
     const response = getTestResults(details, data, tt);
     setDataTable(response);
@@ -75,8 +73,10 @@ export default function Details({ allData, setAllData }) {
         }
         const storedData = localStorage.getItem("evaluation");
         const storedUrl = localStorage.getItem("evaluationUrl");
-        const url = location.pathname.split("/")[3]
-        const currentUrl = removeProtocol(url.split("%2F")[2])
+        const test = location.pathname.split("/")
+        let url = test[test.length-2]
+
+        const currentUrl = decodeURIComponent(url)
 
         if (storedData && storedUrl === currentUrl) {
           const parsedStoredData = JSON.parse(storedData);
@@ -86,18 +86,18 @@ export default function Details({ allData, setAllData }) {
           setLoadingProgress(false);
           return;
         }
-        const response = await api.get(`/eval/${currentUrl}`)
+        const response = await getEvalData(false, currentUrl);
+
         if (url !== "html") {
           localStorage.setItem("evaluation", JSON.stringify(response.data));
           localStorage.setItem("evaluationUrl", currentUrl);
         }
-
+        
         tot2 = response?.data?.result?.data.tot;
         setAllData(response.data?.result?.data);
         getDetailsData(response.data?.result?.data);
         setLoadingProgress(false);
       } catch (error) {
-        console.error("Erro", error);
         setLoadingProgress(false);
       }
     };

src/pages/Error/index.js

@@ -1,13 +1,15 @@
 import { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { ThemeContext } from "../../context/ThemeContext";
-import { Icon } from 'ama-design-system'
+import { useNavigate } from "react-router-dom";
+import { Button, Icon } from 'ama-design-system'
 import "./styles.css";
 
 import { pathURL } from "../../App";
 
 export default function Resume() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
 
   const { theme } = useContext(ThemeContext);
   const themeClass = theme === "light" ? "" : "dark_mode-error";
@@ -16,10 +18,14 @@ export default function Resume() {
     <div className={`container_error ${themeClass}`}>
       <h1>{t("MISC._404.title")}</h1>
       <p>{t("MISC._404.description")}</p>
-      <a href={`${pathURL}`}>
-        <span>{t("MISC._404.homepage")}</span>
-        <Icon name="AMA-Entrar-Line" />
-      </a>
+      <Button
+        darkTheme={theme}
+        text={t("MISC._404.homepage")}
+        size="small"
+        id="btn-url"
+        onClick={() => navigate(`${pathURL}`)}
+        iconRight={<Icon name="AMA-Entrar-Line" />}
+      />
     </div>
   );
 }

src/pages/Error/styles.css

@@ -1,9 +1,9 @@
 .container_error {
-    height: 30vh; /* This ensures the container takes up the full height of the viewport */
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    height: 100%;
 }
 
 .container_error a {

src/pages/Layout/index.js

@@ -35,6 +35,7 @@ export default function Layout({ children }) {
         changeLanguage={toggleLanguage}
         changeTheme={toggleTheme}
         linkTo={`${pathURL}`}
+        ariaLabel={t("HEADER.header_arial_label")}
       />
       <main
         className={`main ${mainDark}`}

src/pages/PageCode/_components/styles.css

@@ -31,25 +31,39 @@
 
 /* Dark Mode */
 .dark_mode-code button {
-  background-color: #b6dcf6 !important;
-  border-color: #b6dcf6 !important;
-  color: #2c3241;
+  background-color: var(--ama-color-text-blue) !important;
+  color: var(--ama-color-background-dark-lighter);
+}
+
+.dark_mode-code button:not(:focus) {
+  border-color: var(--ama-color-text-blue);
+}
+
+.dark_mode-code button:active {
+  background-color: var(--ama-color-text-blue) !important;
+  color: var(--ama-color-background-dark-lighter) !important;
 }
 
 .dark_mode-code button:hover {
   background-color: transparent !important;
-  border-color: #b6dcf6 !important;
-  color: #b6dcf6;
+  border-color: var(--ama-color-text-blue);
+  color: var(--ama-color-text-blue);
+}
+
+.dark_mode-code button:focus {
+  color: var(--ama-color-text-grey) !important;
+}
+
+.dark_mode-code .other button:focus {
+  color: var(--ama-color-text-blue) !important;
 }
 
 .dark_mode-code .other button {
-  background-color: #2c3241 !important;
-  border-color: #2c3241 !important;
-  color: #b6dcf6;
+  background-color: var(--ama-color-background-dark-lighter) !important;
+
+  color: var(--ama-color-text-blue);
 }
 
-.dark_mode-code .other button:hover {
-  background-color: #b6dcf6 !important;
-  border-color: #b6dcf6 !important;
-  color: #2c3241;
+.dark_mode-code .other button:not(:focus) {
+  border-color: var(--ama-color-background-dark-lighter);
 }

src/pages/PageCode/index.js

@@ -3,7 +3,8 @@ import "./styles.css";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Breadcrumb, LoadingComponent } from 'ama-design-system'
 import { processData } from "../../services";
-import { api } from "../../config/api";
+// Api
+import { getEvalData } from "../../config/api";
 
 import { useTranslation } from "react-i18next";
 import { useContext, useState, useEffect } from "react";
@@ -33,11 +34,8 @@ export default function Resume() {
 
   const handleGoBack = () => {
     const test = location.pathname.split("/")
-    navigate(`${pathURL}results/${test[3]}`);
-  };
 
-  const removeProtocol = (url) => {
-    return url.replace(/^(https?:\/\/)?(www\.)?/, "");
+    navigate(`${pathURL}results/${test[test.length-2]}`);
   };
 
   useEffect(() => {
@@ -54,8 +52,9 @@ export default function Resume() {
         }
         const storedData = localStorage.getItem("evaluation");
         const storedUrl = localStorage.getItem("evaluationUrl");
-        const url = location.pathname.split("/")[3]
-        const currentUrl = removeProtocol(url.split("%2F")[2])
+        const test = location.pathname.split("/")
+        let url = test[test.length-2]
+        const currentUrl = decodeURIComponent(url)
         if (storedData && storedUrl === currentUrl) {
           const parsedStoredData = JSON.parse(storedData);
           setOriginalData(parsedStoredData);
@@ -64,7 +63,7 @@ export default function Resume() {
           setLoadingProgress(false);
           return;
         }
-        const response = await api.get(`/eval/${currentUrl}`)
+        const response = await getEvalData(false, currentUrl);
         if (url !== "html") {
           localStorage.setItem("evaluation", JSON.stringify(response.data));
           localStorage.setItem("evaluationUrl", currentUrl);

src/pages/Resume/_components/styles.css

@@ -94,30 +94,38 @@
 .dark_mode-resume .deskGroupMobile button,
 .dark_mode-resume .group_mobile button {
   background-color: var(--ama-color-text-blue) !important;
-  border-color: var(--ama-color-text-blue) !important;
   color: var(--ama-color-background-dark-lighter);
 }
 
+.dark_mode-resume .deskGroupMobile button:not(:focus),
+.dark_mode-resume .group_mobile button:not(:focus) {
+  border-color: var(--ama-color-text-blue);
+}
+
 .dark_mode-resume .deskGroupMobile button:active,
 .dark_mode-resume .group_mobile button:active {
   background-color: var(--ama-color-text-blue) !important;
-  border-color: var(--ama-color-text-blue) !important;
   color: var(--ama-color-background-dark-lighter) !important;
 }
 
 .dark_mode-resume .deskGroupMobile button:hover,
 .dark_mode-resume .group_mobile button:hover {
   background-color: transparent !important;
-  border-color: var(--ama-color-text-blue) !important;
+  border-color: var(--ama-color-text-blue);
   color: var(--ama-color-text-blue);
 }
 
 .dark_mode-resume .other button {
   background-color: var(--ama-color-background-dark-lighter) !important;
-  border-color: var(--ama-color-background-dark-lighter) !important;
+
   color: var(--ama-color-text-blue);
 }
 
+.dark_mode-resume .other button:not(:focus) {
+  border-color: var(--ama-color-background-dark-lighter);
+}
+
+
 .dark_mode-resume .dropdown-content {
   width: fit-content;
 }
@@ -127,6 +135,5 @@
 .dark_mode-resume .dropdown-content li button,
 .dark_mode-resume .dropdown-content a {
   background-color: var(--ama-color-text-blue) !important;
-  border-color: var(--ama-color-text-blue) !important;
   color: var(--ama-color-background-dark-lighter);
 }

src/pages/Resume/index.js

@@ -1,7 +1,9 @@
 import { useContext, useEffect, useState } from "react";
 import { Breadcrumb, Gauge, LoadingComponent, StatsTable, TableComponent } from "ama-design-system";
 
-import { api } from "../../config/api";
+// Api
+import { getEvalData } from "../../config/api";
+
 import { processData } from "../../services";
 import { ButtonsActions } from "./_components/buttons-revalidation";
 import { useNavigate, useParams, useLocation } from "react-router-dom";
@@ -31,12 +33,6 @@ export default function Resume({ setAllData, setEle }) {
   const { theme } = useContext(ThemeContext);
   const themeClass = theme === "light" ? "" : "dark_mode-resume";
 
-  const removeProtocol = (url) => {
-    return url.replace(/^(https?:\/\/)?(www\.)?/, "");
-  };
-
-  const decodedUrl = removeProtocol(content);
-
   useEffect(() => {
     const fetchData = async () => {
       setLoadingProgress(true);
@@ -45,7 +41,7 @@ export default function Resume({ setAllData, setEle }) {
         const storedData = localStorage.getItem("evaluation");
         const storedUrl = localStorage.getItem("evaluationUrl");
 
-        const currentUrl = content === "html" ? contentHtml : decodedUrl;
+        const currentUrl = content === "html" ? contentHtml : content;
 
         if (storedData && storedUrl === currentUrl) {
           const parsedStoredData = JSON.parse(storedData);
@@ -58,11 +54,8 @@ export default function Resume({ setAllData, setEle }) {
 
           return;
         }
-
-        const response =
-          content === "html"
-            ? await api.post("/eval/html", { html: contentHtml })
-            : await api.get(`/eval/${decodedUrl}`);
+
+        const response = await getEvalData(content, currentUrl);
 
 
         if (content !== "html") {
@@ -84,7 +77,7 @@ export default function Resume({ setAllData, setEle }) {
     };
 
     fetchData();
-  }, [content, contentHtml, decodedUrl]);
+  }, [content, contentHtml]);
 
   const reRequest = () => {
     if (content === "html") {