From f020936859860d6962eac580a8d635a3faaa9e15 Mon Sep 17 00:00:00 2001
From: freshavocado7 <nikidimitriou97@gmail.com>
Date: Tue, 7 May 2024 14:43:35 +0200
Subject: [PATCH] fix: Maintain full title name when reloading page

---
 frontend/src/components/Breadcrumbs.jsx | 17 ++++-------------
 frontend/src/views/HomeView.jsx         |  2 +-
 2 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Breadcrumbs.jsx b/frontend/src/components/Breadcrumbs.jsx
index ca40448..b6e6299 100644
--- a/frontend/src/components/Breadcrumbs.jsx
+++ b/frontend/src/components/Breadcrumbs.jsx
@@ -9,14 +9,6 @@ export const Breadcrumbs = () => {
   const location = useLocation();
   const [breadcrumbLabels, setBreadcrumbLabels] = useState({});
   const pathnames = location.pathname.split("/").filter((x) => x);
-  const [error, setError] = useState(null);
-  const [initialTitle, setInitialTitle] = useState("");
-
-  useEffect(() => {
-    if (!initialTitle) {
-      setInitialTitle(document.title);
-    }
-  }, [initialTitle]);
 
   const fetchModelInfo = async () => {
     const response = await fetch(API_BASE_URL + `/model-info`);
@@ -57,15 +49,14 @@ export const Breadcrumbs = () => {
           labels[to] = pathnames[i];
         }
       }
-      console.log(labels);
 
       setBreadcrumbLabels(labels);
-      const lastBreadcrumb = Object.values(labels).pop();
-      document.title = `${lastBreadcrumb} | ${initialTitle} Model Explorer`;
+      const modelName = Object.values(labels)[0];
+      const instanceName = Object.values(labels).pop();
+      document.title = `${instanceName} - ${modelName} - Model Explorer`;
     };
-
     updateLabels();
-  }, [location, initialTitle]);
+  }, [location, document.title]);
 
   const visible_pathnames = [
     breadcrumbLabels["/"],
diff --git a/frontend/src/views/HomeView.jsx b/frontend/src/views/HomeView.jsx
index 5690f2f..0060162 100644
--- a/frontend/src/views/HomeView.jsx
+++ b/frontend/src/views/HomeView.jsx
@@ -16,7 +16,7 @@ export const HomeView = () => {
         const response = await fetch(API_BASE_URL + "/model-info");
         const data = await response.json();
         setModelInfo(data);
-        document.title = `${data.title} Model Explorer`; // Closes #8, not related with screen size changes
+        document.title = `${data.title} - Model Explorer`;
       } catch (err) {
         setError("Failed to fetch model info: " + err.message);
       }