updated

app/src/components/templates/CollaborationPopup.tsx

@@ -6,6 +6,7 @@ import RegularDropDown from "../ui/inputs/RegularDropDown";
 import { access } from "fs";
 import MultiEmailInvite from "../ui/inputs/MultiEmailInvite";
 import { useActiveUsers } from "../../store/builder/store";
+import { getUserData } from "../../functions/getUserData";
 
 interface UserListTemplateProps {
   user: User;
@@ -59,10 +60,10 @@ const CollaborationPopup: React.FC<CollaborateProps> = ({
   setUserManagement,
 }) => {
   const { activeUsers } = useActiveUsers();
+  const { userName } = getUserData();
   useEffect(() => {
-    console.log("activeUsers: ", activeUsers);
+    // console.log("activeUsers: ", activeUsers);
   }, [activeUsers]);
-  const userName = localStorage.getItem("userName") || "Anonymous";
   const users = [
     {
       name: "Alice Johnson",
@@ -140,7 +141,7 @@ const CollaborationPopup: React.FC<CollaborateProps> = ({
               <div className="users-list-container">
                 <div className="you-container">
                   <div className="your-name">
-                    <div className="user-profile">{userName[0].toUpperCase()}</div>
+                    <div className="user-profile">{userName && userName[0].toUpperCase()}</div>
                     {userName}
                   </div>
                   <div className="indicater">you</div>

app/src/components/templates/LoadingPage.tsx

@@ -5,6 +5,7 @@ import { useParams } from "react-router-dom";
 import { useProjectName } from "../../store/builder/store";
 import { getAllProjects } from "../../services/dashboard/getAllProjects";
 import { useComparisonProduct } from "../../store/simulation/useSimulationStore";
+import { getUserData } from "../../functions/getUserData";
 
 interface LoadingPageProps {
   progress: number; // Expect progress as a percentage (0-100)
@@ -14,42 +15,28 @@ const LoadingPage: React.FC<LoadingPageProps> = ({ progress }) => {
   const { projectName, setProjectName } = useProjectName();
   const { projectId } = useParams();
   const { comparisonProduct } = useComparisonProduct();
+  const { userId, organization } = getUserData();
 
   const validatedProgress = Math.min(100, Math.max(0, progress));
-  const generateThumbnail = async () => {
-    const email = localStorage.getItem("email");
-    const userId = localStorage.getItem("userId");
-    try {
-      if (!email || !userId) {
-        console.error("User data not found in localStorage");
-        return;
-      }
 
-      const emailParts = email.split("@");
-      if (emailParts.length < 2) {
-        console.error("Invalid email format");
-        return;
-      }
-
-      const domainParts = emailParts[1].split(".");
-      const Organization = domainParts[0];
-      const projects = await getAllProjects(userId, Organization);
-      const filterProject = projects?.Projects.find(
-        (val: any) => val.projectUuid === projectId || val._id === projectId
-      );
-
-      setProjectName(filterProject.projectName);
-    } catch {}
-  };
   useEffect(() => {
-    generateThumbnail();
+    if (!userId) return;
+
+    getAllProjects(userId, organization).then((projects) => {
+      const filterProject = projects?.Projects.find((val: any) => val.projectUuid === projectId || val._id === projectId);
+      if (filterProject) {
+        setProjectName(filterProject.projectName);
+      }
+    }).catch((error) => {
+      console.log(error);
+    })
   }, []);
+
   return (
     <RenderOverlay>
       <div
-        className={`loading-wrapper ${
-          comparisonProduct != null ? "comparisionLoading" : ""
-        }`}
+        className={`loading-wrapper ${comparisonProduct != null ? "comparisionLoading" : ""
+          }`}
       >
         <div className="loading-container">
           <div className="project-name">{projectName}</div>