From 90fb7fbc06865c6a0d69179420428353ddbb3fd2 Mon Sep 17 00:00:00 2001
From: Poovizhi99 <poovizhi@hexrfactory.com>
Date: Mon, 8 Sep 2025 11:59:16 +0530
Subject: [PATCH] refactor: Clean up DashboardMain, SidePannel, and
 ProjectSocketRes components by removing unused imports and optimizing code
 structure

---
 .../components/Dashboard/DashboardMain.tsx    | 424 ++++++++----------
 app/src/components/Dashboard/SidePannel.tsx   |  46 +-
 .../Dashboard/socket/projectSocketRes.tsx     | 131 +++---
 3 files changed, 275 insertions(+), 326 deletions(-)

diff --git a/app/src/components/Dashboard/DashboardMain.tsx b/app/src/components/Dashboard/DashboardMain.tsx
index c8f6ea7..d10a18b 100644
--- a/app/src/components/Dashboard/DashboardMain.tsx
+++ b/app/src/components/Dashboard/DashboardMain.tsx
@@ -15,258 +15,220 @@ import { generateUniqueId } from "../../functions/generateUniqueId";
 import ProjectSocketRes from "./socket/projectSocketRes";
 
 interface Project {
-  _id: string;
-  projectName: string;
-  thumbnail: string;
-  createdBy: { _id: string; userName: string };
-  projectUuid?: string;
-  createdAt?: string;
-  DeletedAt?: string;
+    _id: string;
+    projectName: string;
+    thumbnail: string;
+    createdBy: { _id: string; userName: string };
+    projectUuid?: string;
+    createdAt?: string;
+    DeletedAt?: string;
 }
 
 interface ProjectCollection {
-  [key: string]: Project[];
+    [key: string]: Project[];
 }
 
 type Folder = "home" | "projects" | "shared" | "trash";
 
 interface DashboardMainProps {
-  activeFolder: Folder;
+    activeFolder: Folder;
 }
 
 const DashboardMain: React.FC<DashboardMainProps> = ({ activeFolder }) => {
-  const [activeSubFolder, setActiveSubFolder] = useState("myProjects");
-  const [projectsData, setProjectsData] = useState<ProjectCollection>({});
-  const [isSearchActive, setIsSearchActive] = useState<boolean>(false);
-  const [duplicateData, setDuplicateData] = useState<Object>({});
-  const [openKebabProjectId, setOpenKebabProjectId] = useState<string | null>(
-    null
-  );
-  const [projectsCache, setProjectsCache] = useState<{
-    [key: string]: ProjectCollection;
-  }>({});
+    const [activeSubFolder, setActiveSubFolder] = useState("myProjects");
+    const [projectsData, setProjectsData] = useState<ProjectCollection>({});
+    const [isSearchActive, setIsSearchActive] = useState<boolean>(false);
+    const [duplicateData, setDuplicateData] = useState<Object>({});
+    const [openKebabProjectId, setOpenKebabProjectId] = useState<string | null>(null);
+    const [projectsCache, setProjectsCache] = useState<{
+        [key: string]: ProjectCollection;
+    }>({});
 
-  const { userId, organization } = getUserData();
-  const { projectSocket } = useSocketStore();
+    const { userId, organization } = getUserData();
+    const { projectSocket } = useSocketStore();
 
-  // #region API Fetchers
-  const fetchData = async () => {
-    const cacheKey =
-      activeFolder + (activeFolder === "projects" ? `-${activeSubFolder}` : "");
+    // #region API Fetchers
+    const fetchData = async () => {
+        const cacheKey = activeFolder + (activeFolder === "projects" ? `-${activeSubFolder}` : "");
 
-    if (projectsCache[cacheKey] && !isSearchActive) {
-      setProjectsData(projectsCache[cacheKey]);
-      return;
-    }
-
-    try {
-      let projects: ProjectCollection = {}; // initialize as empty object
-
-      switch (activeFolder) {
-        case "home":
-          projects = await recentlyViewed(organization, userId);
-          break;
-        case "projects":
-          if (activeSubFolder === "myProjects") {
-            projects = await getAllProjects(userId, organization);
-          } else {
-            projects = await sharedWithMeProjects();
-          }
-          break;
-        case "trash":
-          projects = await getTrash(organization);
-          break;
-      }
-
-      // Only update cache if projects is not empty
-      if (
-        projects &&
-        JSON.stringify(projects) !== JSON.stringify(projectsData)
-      ) {
-        setProjectsCache((prev) => ({ ...prev, [cacheKey]: projects }));
-        setProjectsData(projects);
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  // #region Search Handlers
-  const handleSearch = async (inputValue: string) => {
-    if (!inputValue.trim()) {
-      setIsSearchActive(false);
-      return;
-    }
-
-    let results;
-    if (activeFolder === "trash") {
-      results = await trashSearchProject(organization, userId, inputValue);
-    } else {
-      results = await searchProject(organization, userId, inputValue);
-    }
-
-    setIsSearchActive(true);
-    setProjectsData(results?.message ? {} : results);
-  };
-
-  // #region Socket Actions
-  const handleDelete = async (projectId: string): Promise<void> => {
-    if (projectSocket) {
-      projectSocket.emit("v1:project:delete", {
-        projectId,
-        organization,
-        userId,
-      });
-    }
-    updateStateAfterRemove(projectId);
-  };
-
-  const handlePermanentDelete = async (projectId: string): Promise<void> => {
-    if (projectSocket) {
-      projectSocket.emit("v1:trash:delete", {
-        projectId,
-        organization,
-        userId,
-      });
-    }
-    updateStateAfterRemove(projectId);
-  };
-
-  const handleRestore = async (projectId: string): Promise<void> => {
-    await restoreTrash(organization, projectId);
-    updateStateAfterRemove(projectId);
-  };
-
-  const handleDuplicate = async (
-    projectId: string,
-    projectName: string,
-    thumbnail: string
-  ): Promise<void> => {
-    if (projectSocket) {
-      projectSocket.emit("v1:project:Duplicate", {
-        userId,
-        thumbnail,
-        organization,
-        projectUuid: generateUniqueId(),
-        refProjectID: projectId,
-        projectName,
-      });
-    }
-  };
-
-  // #region Project Map
-  const updateStateAfterRemove = (projectId: string) => {
-    setProjectsData((prev: ProjectCollection) => {
-      const key = Object.keys(prev)[0];
-      const updatedList = prev[key]?.filter((p) => p._id !== projectId) || [];
-      return { ...prev, [key]: updatedList };
-    });
-    setIsSearchActive(false);
-  };
-
-  const renderProjects = () => {
-    const key = Object.keys(projectsData)[0];
-    const projectList = projectsData[key];
-
-    if (!projectList?.length) {
-      return <div className="empty-state">No projects found</div>;
-    }
-
-    return projectList.map((project) => (
-      <DashboardCard
-        key={project._id}
-        projectName={project.projectName}
-        thumbnail={project.thumbnail}
-        projectId={project._id}
-        createdBy={project.createdBy}
-        createdAt={
-          activeFolder === "trash" ? project.DeletedAt : project.createdAt
+        if (projectsCache[cacheKey] && !isSearchActive) {
+            setProjectsData(projectsCache[cacheKey]);
+            return;
         }
-        {...(activeFolder === "home" && {
-          handleDeleteProject: handleDelete,
-          handleDuplicateRecentProject: handleDuplicate,
-          setRecentDuplicateData: setDuplicateData,
-        })}
-        {...(activeSubFolder === "myProjects" && {
-          handleDeleteProject: handleDelete,
-          handleDuplicateWorkspaceProject: handleDuplicate,
-          setProjectDuplicateData: setDuplicateData,
-        })}
-        {...(activeSubFolder === "shared" && {
-          handleDuplicateWorkspaceProject: handleDuplicate,
-          setProjectDuplicateData: setDuplicateData,
-          active: "shared",
-        })}
-        {...(activeFolder === "trash" && {
-          handleRestoreProject: handleRestore,
-          handleTrashDeleteProject: handlePermanentDelete,
-          active: "trash",
-        })}
-        openKebabProjectId={openKebabProjectId}
-        setOpenKebabProjectId={setOpenKebabProjectId}
-      />
-    ));
-  };
 
-  // #region Use Effects
-  useEffect(() => {
-    if (!isSearchActive) fetchData();
-    // eslint-disable-next-line
-  }, [activeFolder, isSearchActive, activeSubFolder]);
+        try {
+            let projects: ProjectCollection = {}; // initialize as empty object
 
-  return (
-    <div className="dashboard-home-container">
-      <DashboardNavBar
-        page={activeFolder}
-        {...(activeFolder === "trash"
-          ? { handleTrashSearch: handleSearch }
-          : {
-              handleProjectsSearch: handleSearch,
-              handleRecentProjectSearch: handleSearch,
-            })}
-      />
+            switch (activeFolder) {
+                case "home":
+                    projects = await recentlyViewed(organization, userId);
+                    break;
+                case "projects":
+                    if (activeSubFolder === "myProjects") {
+                        projects = await getAllProjects(userId, organization);
+                    } else {
+                        projects = await sharedWithMeProjects();
+                    }
+                    break;
+                case "trash":
+                    projects = await getTrash(organization);
+                    break;
+            }
 
-      {activeFolder === "home" && <MarketPlaceBanner />}
+            // Only update cache if projects is not empty
+            if (projects && JSON.stringify(projects) !== JSON.stringify(projectsData)) {
+                setProjectsCache((prev) => ({ ...prev, [cacheKey]: projects }));
+                setProjectsData(projects);
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    };
 
-      <div
-        className="dashboard-container"
-        style={{ height: "calc(100% - 87px)" }}
-      >
-        {activeFolder === "projects" && (
-          <div
-            className="header-wrapper"
-            style={{ display: "flex", gap: "7px" }}
-          >
-            <button
-              className={`header ${
-                activeSubFolder === "myProjects" && "active"
-              }`}
-              onClick={() => setActiveSubFolder("myProjects")}
-            >
-              My Projects
-            </button>
-            <button
-              className={`header ${activeSubFolder === "shared" && "active"}`}
-              onClick={() => setActiveSubFolder("shared")}
-            >
-              Shared with me
-            </button>
-          </div>
-        )}
+    // #region Search Handlers
+    const handleSearch = async (inputValue: string) => {
+        if (!inputValue.trim()) {
+            setIsSearchActive(false);
+            return;
+        }
 
-        <div className="cards-container">{renderProjects()}</div>
+        let results;
+        if (activeFolder === "trash") {
+            results = await trashSearchProject(organization, userId, inputValue);
+        } else {
+            results = await searchProject(organization, userId, inputValue);
+        }
 
-        {duplicateData && Object.keys(duplicateData).length > 0 && (
-          <ProjectSocketRes
-            setIsSearchActive={setIsSearchActive}
-            {...(activeFolder === "home"
-              ? { setRecentProjects: setProjectsData }
-              : { setWorkspaceProjects: setProjectsData })}
-          />
-        )}
-      </div>
-    </div>
-  );
+        setIsSearchActive(true);
+        setProjectsData(results?.message ? {} : results);
+    };
+
+    // #region Socket Actions
+    const handleDelete = async (projectId: string): Promise<void> => {
+        if (projectSocket) {
+            projectSocket.emit("v1:project:delete", {
+                projectId,
+                organization,
+                userId,
+            });
+        }
+        updateStateAfterRemove(projectId);
+    };
+
+    const handlePermanentDelete = async (projectId: string): Promise<void> => {
+        if (projectSocket) {
+            projectSocket.emit("v1:trash:delete", {
+                projectId,
+                organization,
+                userId,
+            });
+        }
+        updateStateAfterRemove(projectId);
+    };
+
+    const handleRestore = async (projectId: string): Promise<void> => {
+        await restoreTrash(organization, projectId);
+        updateStateAfterRemove(projectId);
+    };
+
+    const handleDuplicate = async (projectId: string, projectName: string, thumbnail: string): Promise<void> => {
+        if (projectSocket) {
+            projectSocket.emit("v1:project:Duplicate", {
+                userId,
+                thumbnail,
+                organization,
+                projectUuid: generateUniqueId(),
+                refProjectID: projectId,
+                projectName,
+            });
+        }
+    };
+
+    // #region Project Map
+    const updateStateAfterRemove = (projectId: string) => {
+        setProjectsData((prev: ProjectCollection) => {
+            const key = Object.keys(prev)[0];
+            const updatedList = prev[key]?.filter((p) => p._id !== projectId) || [];
+            return { ...prev, [key]: updatedList };
+        });
+        setIsSearchActive(false);
+    };
+
+    const renderProjects = () => {
+        const key = Object.keys(projectsData)[0];
+        const projectList = projectsData[key];
+
+        if (!projectList?.length) {
+            return <div className="empty-state">No projects found</div>;
+        }
+
+        return projectList.map((project) => (
+            <DashboardCard
+                key={project._id}
+                projectName={project.projectName}
+                thumbnail={project.thumbnail}
+                projectId={project._id}
+                createdBy={project.createdBy}
+                createdAt={activeFolder === "trash" ? project.DeletedAt : project.createdAt}
+                {...(activeFolder === "home" && {
+                    handleDeleteProject: handleDelete,
+                    handleDuplicateRecentProject: handleDuplicate,
+                    setRecentDuplicateData: setDuplicateData,
+                })}
+                {...(activeSubFolder === "myProjects" && {
+                    handleDeleteProject: handleDelete,
+                    handleDuplicateWorkspaceProject: handleDuplicate,
+                    setProjectDuplicateData: setDuplicateData,
+                })}
+                {...(activeSubFolder === "shared" && {
+                    handleDuplicateWorkspaceProject: handleDuplicate,
+                    setProjectDuplicateData: setDuplicateData,
+                    active: "shared",
+                })}
+                {...(activeFolder === "trash" && {
+                    handleRestoreProject: handleRestore,
+                    handleTrashDeleteProject: handlePermanentDelete,
+                    active: "trash",
+                })}
+                openKebabProjectId={openKebabProjectId}
+                setOpenKebabProjectId={setOpenKebabProjectId}
+            />
+        ));
+    };
+
+    // #region Use Effects
+    useEffect(() => {
+        if (!isSearchActive) fetchData();
+        // eslint-disable-next-line
+    }, [activeFolder, isSearchActive, activeSubFolder]);
+
+    return (
+        <div className="dashboard-home-container">
+            <DashboardNavBar
+                page={activeFolder}
+                {...(activeFolder === "trash" ? { handleTrashSearch: handleSearch } : { handleProjectsSearch: handleSearch, handleRecentProjectSearch: handleSearch })}
+            />
+
+            {activeFolder === "home" && <MarketPlaceBanner />}
+
+            <div className="dashboard-container" style={{ height: "calc(100% - 87px)" }}>
+                {activeFolder === "projects" && (
+                    <div className="header-wrapper" style={{ display: "flex", gap: "7px" }}>
+                        <button className={`header ${activeSubFolder === "myProjects" && "active"}`} onClick={() => setActiveSubFolder("myProjects")}>
+                            My Projects
+                        </button>
+                        <button className={`header ${activeSubFolder === "shared" && "active"}`} onClick={() => setActiveSubFolder("shared")}>
+                            Shared with me
+                        </button>
+                    </div>
+                )}
+
+                <div className="cards-container">{renderProjects()}</div>
+
+                <ProjectSocketRes setIsSearchActive={setIsSearchActive} {...(activeFolder === "home" ? { setRecentProjects: setProjectsData } : { setWorkspaceProjects: setProjectsData })} />
+            </div>
+        </div>
+    );
 };
 
 export default DashboardMain;
diff --git a/app/src/components/Dashboard/SidePannel.tsx b/app/src/components/Dashboard/SidePannel.tsx
index b612ba6..f384d99 100644
--- a/app/src/components/Dashboard/SidePannel.tsx
+++ b/app/src/components/Dashboard/SidePannel.tsx
@@ -13,7 +13,7 @@ import darkThemeImage from "../../assets/image/darkThemeProject.png";
 import lightThemeImage from "../../assets/image/lightThemeProject.png";
 import { SettingsIcon, TrashIcon } from "../icons/ExportCommonIcons";
 import { getUserData } from "../../functions/getUserData";
-import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
+import { useSocketStore } from "../../store/builder/store";
 
 // import { createProject } from "../../services/dashboard/createProject";
 
@@ -25,23 +25,20 @@ interface SidePannelProps {
 const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
     const { email, userName, userId, organization } = getUserData();
     const navigate = useNavigate();
-    const { setLoadingProgress } = useLoadingProgress();
     const { projectSocket, initializeSocket } = useSocketStore();
     const savedTheme = localStorage.getItem("theme") ?? "light";
 
     function generateProjectId() {
         const randomBytes = new Uint8Array(12);
         crypto.getRandomValues(randomBytes);
-        return Array.from(randomBytes, (byte) =>
-            byte.toString(16).padStart(2, "0")
-        ).join("");
+        return Array.from(randomBytes, (byte) => byte.toString(16).padStart(2, "0")).join("");
     }
 
     const handleCreateNewProject = async () => {
         const token = localStorage.getItem("token");
         const refreshToken = localStorage.getItem("refreshToken");
         if (!token || !refreshToken) {
-            console.error('token expired');
+            console.error("token expired");
             return;
         }
 
@@ -56,15 +53,8 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
                 organization: organization,
                 projectUuid: projectId,
             };
-            const handleResponse = (data: any) => {
-                if (data.message === "Project created successfully") {
-                    setLoadingProgress(1);
-                    navigate(`/projects/${data.data.projectId}`);
-                }
-                projectSocket.off("v1-project:response:add", handleResponse);
-            };
-            projectSocket.on("v1-project:response:add", handleResponse);
 
+            console.log('addProject: ', addProject);
             projectSocket.emit("v1:project:add", addProject);
         } else {
             // API
@@ -81,11 +71,11 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
         <div className="side-pannel-container">
             <div className="side-pannel-header">
                 <div className="user-container">
-                    <div className="user-profile">
-                        {userName?.charAt(0).toUpperCase()}
-                    </div>
+                    <div className="user-profile">{userName?.charAt(0).toUpperCase()}</div>
                     <div className="user-name">
-                        {userName ? userName.charAt(0).toUpperCase() + userName.slice(1).toLowerCase() : "Anonymous"}
+                        {userName
+                            ? userName.charAt(0).toUpperCase() + userName.slice(1).toLowerCase()
+                            : "Anonymous"}
                     </div>
                 </div>
                 <div className="notifications-container">
@@ -98,18 +88,14 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
             <div className="side-bar-content-container">
                 <div className="side-bar-options-container">
                     <button
-                        className={
-                            activeTab === "Home" ? "option-list active" : "option-list"
-                        }
+                        className={activeTab === "Home" ? "option-list active" : "option-list"}
                         onClick={() => setActiveTab("Home")}
                     >
                         <HomeIcon />
                         Home
                     </button>
                     <button
-                        className={
-                            activeTab === "Projects" ? "option-list active" : "option-list"
-                        }
+                        className={activeTab === "Projects" ? "option-list active" : "option-list"}
                         title="Projects"
                         onClick={() => setActiveTab("Projects")}
                     >
@@ -117,9 +103,7 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
                         Projects
                     </button>
                     <button
-                        className={
-                            activeTab === "Trash" ? "option-list active" : "option-list"
-                        }
+                        className={activeTab === "Trash" ? "option-list active" : "option-list"}
                         title="Trash"
                         onClick={() => setActiveTab("Trash")}
                     >
@@ -127,9 +111,7 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
                         Trash
                     </button>
                     <button
-                        className={
-                            activeTab === "Tutorials" ? "option-list active" : "option-list"
-                        }
+                        className={activeTab === "Tutorials" ? "option-list active" : "option-list"}
                         title="coming soon"
                         disabled
                         onClick={() => {
@@ -142,9 +124,7 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
                     </button>
                     <button
                         className={
-                            activeTab === "Documentation"
-                                ? "option-list active"
-                                : "option-list"
+                            activeTab === "Documentation" ? "option-list active" : "option-list"
                         }
                         title="coming soon"
                         disabled
diff --git a/app/src/components/Dashboard/socket/projectSocketRes.tsx b/app/src/components/Dashboard/socket/projectSocketRes.tsx
index 49285c2..b25eee3 100644
--- a/app/src/components/Dashboard/socket/projectSocketRes.tsx
+++ b/app/src/components/Dashboard/socket/projectSocketRes.tsx
@@ -1,90 +1,97 @@
 import React, { useEffect } from "react";
-import { useSocketStore } from "../../../store/builder/store";
+import { useLoadingProgress, useSocketStore } from "../../../store/builder/store";
 import { getUserData } from "../../../functions/getUserData";
 import { getAllProjects } from "../../../services/dashboard/getAllProjects";
 import { recentlyViewed } from "../../../services/dashboard/recentlyViewed";
+import { useNavigate } from "react-router-dom";
 
 interface Project {
-  _id: string;
-  projectName: string;
-  thumbnail: string;
-  createdBy: { _id: string; userName: string };
-  projectUuid?: string;
-  createdAt?: string;
-  DeletedAt?: string;
-  isViewed?: string;
+    _id: string;
+    projectName: string;
+    thumbnail: string;
+    createdBy: { _id: string; userName: string };
+    projectUuid?: string;
+    createdAt?: string;
+    DeletedAt?: string;
+    isViewed?: string;
 }
 
 interface ProjectCollection {
-  [key: string]: Project[];
+    [key: string]: Project[];
 }
 
 interface ProjectSocketResProps {
-  setRecentProjects?: React.Dispatch<React.SetStateAction<ProjectCollection>>;
-  setWorkspaceProjects?: React.Dispatch<React.SetStateAction<ProjectCollection>>;
-  setIsSearchActive?: React.Dispatch<React.SetStateAction<boolean>>;
+    setRecentProjects?: React.Dispatch<React.SetStateAction<ProjectCollection>>;
+    setWorkspaceProjects?: React.Dispatch<React.SetStateAction<ProjectCollection>>;
+    setIsSearchActive?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const ProjectSocketRes = ({
-  setRecentProjects,
-  setWorkspaceProjects,
-  setIsSearchActive,
+    setRecentProjects,
+    setWorkspaceProjects,
+    setIsSearchActive,
 }: ProjectSocketResProps) => {
-  const { projectSocket } = useSocketStore();
-  const { userId, organization } = getUserData();
+    const navigate = useNavigate();
+    const { projectSocket } = useSocketStore();
+    const { userId, organization } = getUserData();
+    const { setLoadingProgress } = useLoadingProgress();
 
-  useEffect(() => {
-    if (!projectSocket) return;
+    useEffect(() => {
+        console.log('projectSocket: ', projectSocket);
+        if (!projectSocket) return;
 
-    const handleAdd = (data: any) => {
-      // console.log("Add:", data);
-    };
+        const handleAdd = (data: any) => {
+            console.log('data: ', data);
+            if (data.message === "Project created successfully") {
+                setLoadingProgress(1);
+                navigate(`/projects/${data.data.projectId}`);
+            }
+        };
 
-    const handleDelete = (data: any) => {
-      // console.log("Delete:", data);
-    };
+        const handleDelete = (data: any) => {
+            // console.log("Delete:", data);
+        };
 
-    const handleUpdate = (data: any) => {
-      // console.log("Update:", data);
-    };
+        const handleUpdate = (data: any) => {
+            // console.log("Update:", data);
+        };
 
-    const handleTrashDelete = (data: any) => {
-      // console.log("Trash Delete:", data);
-    };
+        const handleTrashDelete = (data: any) => {
+            // console.log("Trash Delete:", data);
+        };
 
-    const handleDuplicate = async (data: any) => {
-      console.log("Project duplicate response:", data);
-      if (data?.message === "Project Duplicated successfully") {
-        if (setWorkspaceProjects) {
-          const allProjects = await getAllProjects(userId, organization);
-          setWorkspaceProjects(allProjects);
-        } else if (setRecentProjects) {
-          const recentProjects = await recentlyViewed(organization, userId);
-          setRecentProjects(recentProjects);
-        }
-        setIsSearchActive && setIsSearchActive(false);
-      } else {
-        console.warn("Duplication failed or unexpected response.");
-      }
-    };
+        const handleDuplicate = async (data: any) => {
+            if (data?.message === "Project Duplicated successfully") {
+                if (setWorkspaceProjects) {
+                    const allProjects = await getAllProjects(userId, organization);
+                    setWorkspaceProjects(allProjects);
+                } else if (setRecentProjects) {
+                    const recentProjects = await recentlyViewed(organization, userId);
+                    setRecentProjects(recentProjects);
+                }
+                setIsSearchActive && setIsSearchActive(false);
+            } else {
+                console.warn("Duplication failed or unexpected response.");
+            }
+        };
 
-    projectSocket.on("v1-project:response:add", handleAdd);
-    projectSocket.on("v1-project:response:delete", handleDelete);
-    projectSocket.on("v1-project:response:update", handleUpdate);
-    projectSocket.on("v1-project:response:Duplicate", handleDuplicate);
-    projectSocket.on("v1:trash:response:delete", handleTrashDelete);
+        projectSocket.on("v1-project:response:add", handleAdd);
+        projectSocket.on("v1-project:response:delete", handleDelete);
+        projectSocket.on("v1-project:response:update", handleUpdate);
+        projectSocket.on("v1-project:response:Duplicate", handleDuplicate);
+        projectSocket.on("v1:trash:response:delete", handleTrashDelete);
 
-    return () => {
-      projectSocket.off("v1-project:response:add", handleAdd);
-      projectSocket.off("v1-project:response:delete", handleDelete);
-      projectSocket.off("v1-project:response:update", handleUpdate);
-      projectSocket.off("v1-project:response:Duplicate", handleDuplicate);
-      projectSocket.off("v1:trash:response:delete", handleTrashDelete);
-    };
-    // eslint-disable-next-line
-  }, [projectSocket, userId, organization]);
+        return () => {
+            projectSocket.off("v1-project:response:add", handleAdd);
+            projectSocket.off("v1-project:response:delete", handleDelete);
+            projectSocket.off("v1-project:response:update", handleUpdate);
+            projectSocket.off("v1-project:response:Duplicate", handleDuplicate);
+            projectSocket.off("v1:trash:response:delete", handleTrashDelete);
+        };
+        // eslint-disable-next-line
+    }, [projectSocket, userId, organization]);
 
-  return null;
+    return null;
 };
 
 export default ProjectSocketRes;