Update dynamic routes

.env

@@ -1,3 +1,7 @@
 REACT_APP_AMP_DEV_SERVER=http://10.55.37.16:/api/amp
 REACT_APP_AMP_PPR_SERVER=https://preprodaccessmonitor.acessibilidade.gov.pt/api/amp
-REACT_APP_AMP_PRD_SERVER=https://accessmonitor.acessibilidade.gov.pt/api/amp
+REACT_APP_AMP_PRD_SERVER=https://accessmonitor.acessibilidade.gov.pt/api/amp
+
+REACT_APP_DEV_SERVER_URL="/amp/"
+REACT_APP_PPR_SERVER_URL="/"
+REACT_APP_PRD_SERVER_URL="/"

src/App.jsx

@@ -13,35 +13,40 @@ import Detail from "./pages/Details";
 import PageCode from "./pages/PageCode";
 import Error from "./pages/Error";
 
+export const pathURL = process.env.REACT_APP_DEV_SERVER_URL;
+//export const pathURL = process.env.REACT_APP_PPR_SERVER_URL;
+//export const pathURL = process.env.REACT_APP_PRD_SERVER_URL;
+
 export default function App() {
   const [allData, setAllData] = useState([]);
   const [setEle] = useState([]);
+
   return (
     <ThemeProvider>
       <Router>
         <Layout>
-          <Routes basename="/amp">
-            <Route path="amp/" element={<Home />} />
+          <Routes basename={`${pathURL}`}>
+            <Route path={`${pathURL}`} element={<Home />} />
 
             <Route
-              path="/amp/results/:content"
+              path={`${pathURL}results/:content`}
               element={<Resume setAllData={setAllData} setEle={setEle} />}
             />
 
             <Route
-              path="/amp/results/:content/:details"
+              path={`${pathURL}results/:content/:details`}
               element={<Detail setAllData={setAllData} allData={allData} />}
             />
 
             <Route
-              path="/amp/results/:content/code"
+              path={`${pathURL}results/:content/code`}
               element={<PageCode setAllData={setAllData} setEle={setEle} />}
             />
 
             {/* Outras rotas */}
 
             {/* Error page needs to be last */}
-            <Route path="/amp/*" element={<Error />} />
+            <Route path={`${pathURL}*`} element={<Error />} />
           </Routes>
         </Layout>
       </Router>

src/pages/Details/index.js

@@ -7,13 +7,14 @@ import { useTranslation } from "react-i18next";
 import { ThemeContext } from "../../context/ThemeContext";
 import { Breadcrumb, Icon, LoadingComponent } from "ama-design-system";
 
-import { processData } from "../../services";
 import { api } from "../../config/api";
 
 import { useParams, useNavigate, useLocation } from "react-router-dom";
 
 import { tot } from '../Resume'
 
+import { pathURL } from "../../App";
+
 export let tot2;
 
 export default function Details({ allData, setAllData }) {
@@ -29,7 +30,7 @@ export default function Details({ allData, setAllData }) {
 
   const handleGoBack = () => {
     const test = location.pathname.split("/")
-    navigate(`/amp/results/${test[3]}`);
+    navigate(`${pathURL}results/${test[3]}`);
   };
 
   const url = allData?.rawUrl;
@@ -39,9 +40,9 @@ export default function Details({ allData, setAllData }) {
   const dataBreadCrumb = [
     {
       title: "Acessibilidade.gov.pt",
-      href: "/",
+      href: "https://www.acessibilidade.gov.pt/",
     },
-    { title: "Access Monitor", href: "/amp" },
+    { title: "Access Monitor", href: `${pathURL}` },
     {
       title: url || "html",
       href: "",
@@ -57,13 +58,8 @@ export default function Details({ allData, setAllData }) {
     return url.replace(/^(https?:\/\/)?(www\.)?/, "");
   };
 
-  function getDetails() {
-    const response = getTestResults(details, allData, tot);
-    setDataTable(response);
-  }
-
-  function getDetailsData(data) {
-    const response = getTestResults(details, data, tot2);
+  function getDetailsData(data, tt) {
+    const response = getTestResults(details, data, tt);
     setDataTable(response);
   }
 
@@ -73,7 +69,7 @@ export default function Details({ allData, setAllData }) {
 
       try {
         if(allData && allData.tot && allData.elems) {
-          getDetails();
+          getDetailsData(allData, tot);
           setLoadingProgress(false);
           return;
         }
@@ -86,7 +82,7 @@ export default function Details({ allData, setAllData }) {
           const parsedStoredData = JSON.parse(storedData);
           setAllData(parsedStoredData.result?.data);
           tot2 = parsedStoredData?.result?.data?.tot;
-          getDetailsData(parsedStoredData.result?.data);
+          getDetailsData(parsedStoredData.result?.data, tot2);
           setLoadingProgress(false);
           return;
         }
@@ -95,8 +91,8 @@ export default function Details({ allData, setAllData }) {
           localStorage.setItem("evaluation", JSON.stringify(response.data));
           localStorage.setItem("evaluationUrl", currentUrl);
         }
-        tot2 = response?.data?.result?.data.tot;
 
+        tot2 = response?.data?.result?.data.tot;
         setAllData(response.data?.result?.data);
         getDetailsData(response.data?.result?.data);
         setLoadingProgress(false);
@@ -109,10 +105,6 @@ export default function Details({ allData, setAllData }) {
     fetchData();
   }, []);
 
-  // useEffect(() => {
-  //   getDetailsData(allData);
-  // }, [allData]);
-
   let iconName;
 
   if (dataTable?.result === "R") {

src/pages/Error/index.js

@@ -4,6 +4,8 @@ import { ThemeContext } from "../../context/ThemeContext";
 import { Icon } from 'ama-design-system'
 import "./styles.css";
 
+import { pathURL } from "../../App";
+
 export default function Resume() {
   const { t } = useTranslation();
 
@@ -14,7 +16,7 @@ export default function Resume() {
     <div className={`container_error ${themeClass}`}>
       <h1>{t("MISC._404.title")}</h1>
       <p>{t("MISC._404.description")}</p>
-      <a href="/amp">
+      <a href={`${pathURL}`}>
         <span>{t("MISC._404.homepage")}</span>
         <Icon name="AMA-Entrar-Line" />
       </a>

src/pages/Home/_components/insert-html.js

@@ -6,6 +6,8 @@ import { ThemeContext } from "../../../context/ThemeContext";
 
 import { TextArea, Button, Icon } from 'ama-design-system'
 
+import { pathURL } from "../../../App";
+
 export function InsertHtml() {
   const { t } = useTranslation();
   const { theme } = useContext(ThemeContext);
@@ -15,7 +17,7 @@ export function InsertHtml() {
   async function handleSubmit() {
     try {
       const type = "html";
-      navigate(`/amp/results/${type}`, {
+      navigate(`${pathURL}results/${type}`, {
         state: { contentHtml: htmlValue },
       });
     } catch (error) {

src/pages/Home/_components/insert-upload-html.js

@@ -7,6 +7,8 @@ import { ThemeContext } from "../../../context/ThemeContext";
 
 import { Button, Icon } from 'ama-design-system'
 
+import { pathURL } from "../../../App";
+
 export function InsertHtmlUpload() {
   const { t } = useTranslation();
   const { theme } = useContext(ThemeContext);
@@ -40,7 +42,7 @@ export function InsertHtmlUpload() {
   async function handleSubmit() {
     try {
       const type = "html";
-      navigate(`/amp/results/${type}`, {
+      navigate(`${pathURL}results/${type}`, {
         state: { contentHtml: file },
       });
     } catch (error) {

src/pages/Home/_components/insert-url.js

@@ -9,6 +9,8 @@ import { ThemeContext } from "../../../context/ThemeContext";
 
 import { Button, Icon, Input } from 'ama-design-system'
 
+import { pathURL } from "../../../App";
+
 export function InsertUrl() {
   const [url, setURL] = useState("");
   const [error, setError] = useState(null);
@@ -25,7 +27,7 @@ export function InsertUrl() {
   const handleSubmit = () => {
     if (!error) {
       const encodedURL = encodeURIComponent(url);
-      navigate(`/amp/results/${encodedURL}`);
+      navigate(`${pathURL}results/${encodedURL}`);
     }
   };
 

src/pages/Home/index.js

@@ -9,6 +9,8 @@ import { Breadcrumb, Tabs } from "ama-design-system";
 
 import { useTranslation } from "react-i18next";
 
+import { pathURL } from "../../App";
+
 export default function Home({ changeState }) {
   const { t } = useTranslation();
 
@@ -35,13 +37,13 @@ export default function Home({ changeState }) {
       title: "Acessibilidade.gov.pt",
       href: "https://www.acessibilidade.gov.pt/",
     },
-    { title: "Access Monitor", href: "/amp" },
+    { title: "Access Monitor", href: `${pathURL}` },
   ];
 
   const { theme } = useContext(ThemeContext);
   const main_content_home = theme === "light" ? "" : "main_content_home";
   const imgUrl =
-    theme === "light" ? "/amp/img/verify.svg" : "/amp/img/verify-dark.svg";
+    theme === "light" ? `${pathURL}img/verify.svg` : `${pathURL}img/verify-dark.svg`;
 
   return (
     <>

src/pages/Layout/index.js

@@ -5,6 +5,8 @@ import { useLocation } from 'react-router-dom'
 import "./styles.css";
 import { useTranslation } from "react-i18next";
 
+import { pathURL } from "../../App";
+
 export default function Layout({ children }) {
   const { theme, toggleTheme } = useContext(ThemeContext);
   const location = useLocation()
@@ -26,13 +28,13 @@ export default function Layout({ children }) {
     <>
       <Header
         darkTheme={theme}
-        logo={theme === "light" ? "/amp/img/logo.svg" : "/amp/img/logo-dark.svg"}
+        logo={theme === "light" ? `${pathURL}img/logo.svg` : `${pathURL}img/logo-dark.svg`}
         description={t("HEADER.line_text")}
-        homePage={location.pathname === "/amp" ? true : false}
+        homePage={location.pathname === `${pathURL}` ? true : false}
         language={language}
         changeLanguage={toggleLanguage}
         changeTheme={toggleTheme}
-        linkTo={"/amp"}
+        linkTo={`${pathURL}`}
       />
       <main
         className={`main ${mainDark}`}

src/pages/PageCode/_components/buttons-revalidation.js

@@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import "./styles.css";
 
+import { pathURL } from "../../../App";
+
 export function ButtonsActions({ downloadCSV, handleGoBack, themeClass }) {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -15,7 +17,7 @@ export function ButtonsActions({ downloadCSV, handleGoBack, themeClass }) {
           size="md"
           text={t("HEADER.evaluate_new_page")}
           iconRight={<Icon name="AMA-Setalongaoficial-Line" />}
-          onClick={() => navigate("/amp")}
+          onClick={() => navigate(`${pathURL}`)}
         />
 
         <div className="d-flex flex-row gap-3 other">

src/pages/PageCode/index.js

@@ -11,7 +11,7 @@ import { ThemeContext } from "../../context/ThemeContext";
 
 import { downloadCSV } from "../../utils/utils";
 
-export let tot;
+import { pathURL } from "../../App";
 
 export default function Resume() {
   const location = useLocation();
@@ -33,7 +33,7 @@ export default function Resume() {
 
   const handleGoBack = () => {
     const test = location.pathname.split("/")
-    navigate(`/amp/results/${test[3]}`);
+    navigate(`${pathURL}results/${test[3]}`);
   };
 
   const removeProtocol = (url) => {
@@ -62,16 +62,14 @@ export default function Resume() {
           setDataProcess(processData(parsedStoredData?.result?.data?.tot));
           setPageCode(parsedStoredData?.result?.pagecode || "html");
           setLoadingProgress(false);
-
-          tot = parsedStoredData?.result?.data?.tot;
           return;
         }
         const response = await api.get(`/eval/${currentUrl}`)
         if (url !== "html") {
           localStorage.setItem("evaluation", JSON.stringify(response.data));
           localStorage.setItem("evaluationUrl", currentUrl);
         }
-        tot = response?.data?.result?.data.tot;
+
         setOriginalData(response.data);
         setDataProcess(processData(response.data?.result?.data?.tot));
         setPageCode(response.data?.result?.pagecode || "html");
@@ -90,7 +88,7 @@ export default function Resume() {
       title: "Acessibilidade.gov.pt",
       href: "https://www.acessibilidade.gov.pt/",
     },
-    { title: "Access Monitor", href: "/amp" },
+    { title: "Access Monitor", href: `${pathURL}` },
     {
       title: dataProcess?.metadata?.url || "html",
       href: "",

src/pages/Resume/_components/buttons-revalidation.js

@@ -5,6 +5,8 @@ import { useNavigate } from "react-router-dom";
 import { useState } from "react";
 import "./styles.css";
 
+import { pathURL } from "../../../App";
+
 export function ButtonsActions({
   reRequest,
   seeCode,
@@ -29,7 +31,7 @@ export function ButtonsActions({
           size="md"
           text={t("HEADER.evaluate_new_page")}
           iconRight={<Icon name="AMA-Setalongaoficial-Line" />}
-          onClick={() => navigate("/amp")}
+          onClick={() => navigate(`${pathURL}`)}
         />
 
         <div className="d-flex flex-row gap-3 other">
@@ -95,7 +97,7 @@ export function ButtonsActions({
             size="md"
             text={t("HEADER.evaluate_new_page")}
             iconRight={<Icon name="AMA-Setalongaoficial-Line" />}
-            onClick={() => navigate("/amp")}
+            onClick={() => navigate(`${pathURL}`)}
           />
 
           <div>