refactor: Clean up DashboardMain, SidePannel, and ProjectSocketRes components by removing unused imports and optimizing code structure

app/src/components/Dashboard/DashboardMain.tsx

@@ -39,9 +39,7 @@ const DashboardMain: React.FC<DashboardMainProps> = ({ activeFolder }) => {
     const [projectsData, setProjectsData] = useState<ProjectCollection>({});
     const [isSearchActive, setIsSearchActive] = useState<boolean>(false);
     const [duplicateData, setDuplicateData] = useState<Object>({});
-  const [openKebabProjectId, setOpenKebabProjectId] = useState<string | null>(
+    const [openKebabProjectId, setOpenKebabProjectId] = useState<string | null>(null);
-    null
-  );
     const [projectsCache, setProjectsCache] = useState<{
         [key: string]: ProjectCollection;
     }>({});
@@ -51,8 +49,7 @@ const DashboardMain: React.FC<DashboardMainProps> = ({ activeFolder }) => {
 
     // #region API Fetchers
     const fetchData = async () => {
-    const cacheKey =
+        const cacheKey = activeFolder + (activeFolder === "projects" ? `-${activeSubFolder}` : "");
-      activeFolder + (activeFolder === "projects" ? `-${activeSubFolder}` : "");
 
         if (projectsCache[cacheKey] && !isSearchActive) {
             setProjectsData(projectsCache[cacheKey]);
@@ -79,10 +76,7 @@ const DashboardMain: React.FC<DashboardMainProps> = ({ activeFolder }) => {
             }
 
             // Only update cache if projects is not empty
-      if (
+            if (projects && JSON.stringify(projects) !== JSON.stringify(projectsData)) {
-        projects &&
-        JSON.stringify(projects) !== JSON.stringify(projectsData)
-      ) {
                 setProjectsCache((prev) => ({ ...prev, [cacheKey]: projects }));
                 setProjectsData(projects);
             }
@@ -137,11 +131,7 @@ const DashboardMain: React.FC<DashboardMainProps> = ({ activeFolder }) => {
         updateStateAfterRemove(projectId);
     };
 
-  const handleDuplicate = async (
+    const handleDuplicate = async (projectId: string, projectName: string, thumbnail: string): Promise<void> => {
-    projectId: string,
-    projectName: string,
-    thumbnail: string
-  ): Promise<void> => {
         if (projectSocket) {
             projectSocket.emit("v1:project:Duplicate", {
                 userId,
@@ -179,9 +169,7 @@ const DashboardMain: React.FC<DashboardMainProps> = ({ activeFolder }) => {
                 thumbnail={project.thumbnail}
                 projectId={project._id}
                 createdBy={project.createdBy}
-        createdAt={
+                createdAt={activeFolder === "trash" ? project.DeletedAt : project.createdAt}
-          activeFolder === "trash" ? project.DeletedAt : project.createdAt
-        }
                 {...(activeFolder === "home" && {
                     handleDeleteProject: handleDelete,
                     handleDuplicateRecentProject: handleDuplicate,
@@ -218,37 +206,18 @@ const DashboardMain: React.FC<DashboardMainProps> = ({ activeFolder }) => {
         <div className="dashboard-home-container">
             <DashboardNavBar
                 page={activeFolder}
-        {...(activeFolder === "trash"
+                {...(activeFolder === "trash" ? { handleTrashSearch: handleSearch } : { handleProjectsSearch: handleSearch, handleRecentProjectSearch: handleSearch })}
-          ? { handleTrashSearch: handleSearch }
-          : {
-              handleProjectsSearch: handleSearch,
-              handleRecentProjectSearch: handleSearch,
-            })}
             />
 
             {activeFolder === "home" && <MarketPlaceBanner />}
 
-      <div
+            <div className="dashboard-container" style={{ height: "calc(100% - 87px)" }}>
-        className="dashboard-container"
-        style={{ height: "calc(100% - 87px)" }}
-      >
                 {activeFolder === "projects" && (
-          <div
+                    <div className="header-wrapper" style={{ display: "flex", gap: "7px" }}>
-            className="header-wrapper"
+                        <button className={`header ${activeSubFolder === "myProjects" && "active"}`} onClick={() => setActiveSubFolder("myProjects")}>
-            style={{ display: "flex", gap: "7px" }}
-          >
-            <button
-              className={`header ${
-                activeSubFolder === "myProjects" && "active"
-              }`}
-              onClick={() => setActiveSubFolder("myProjects")}
-            >
                             My Projects
                         </button>
-            <button
+                        <button className={`header ${activeSubFolder === "shared" && "active"}`} onClick={() => setActiveSubFolder("shared")}>
-              className={`header ${activeSubFolder === "shared" && "active"}`}
-              onClick={() => setActiveSubFolder("shared")}
-            >
                             Shared with me
                         </button>
                     </div>
@@ -256,14 +225,7 @@ const DashboardMain: React.FC<DashboardMainProps> = ({ activeFolder }) => {
 
                 <div className="cards-container">{renderProjects()}</div>
 
-        {duplicateData && Object.keys(duplicateData).length > 0 && (
+                <ProjectSocketRes setIsSearchActive={setIsSearchActive} {...(activeFolder === "home" ? { setRecentProjects: setProjectsData } : { setWorkspaceProjects: setProjectsData })} />
-          <ProjectSocketRes
-            setIsSearchActive={setIsSearchActive}
-            {...(activeFolder === "home"
-              ? { setRecentProjects: setProjectsData }
-              : { setWorkspaceProjects: setProjectsData })}
-          />
-        )}
             </div>
         </div>
     );

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) =>
+        return Array.from(randomBytes, (byte) => byte.toString(16).padStart(2, "0")).join("");
-            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">
+                    <div className="user-profile">{userName?.charAt(0).toUpperCase()}</div>
-                        {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={
+                        className={activeTab === "Home" ? "option-list active" : "option-list"}
-                            activeTab === "Home" ? "option-list active" : "option-list"
-                        }
                         onClick={() => setActiveTab("Home")}
                     >
                         <HomeIcon />
                         Home
                     </button>
                     <button
-                        className={
+                        className={activeTab === "Projects" ? "option-list active" : "option-list"}
-                            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={
+                        className={activeTab === "Trash" ? "option-list active" : "option-list"}
-                            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={
+                        className={activeTab === "Tutorials" ? "option-list active" : "option-list"}
-                            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"
+                            activeTab === "Documentation" ? "option-list active" : "option-list"
-                                ? "option-list active"
-                                : "option-list"
                         }
                         title="coming soon"
                         disabled

app/src/components/Dashboard/socket/projectSocketRes.tsx

@@ -1,8 +1,9 @@
 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;
@@ -30,14 +31,21 @@ const ProjectSocketRes = ({
     setWorkspaceProjects,
     setIsSearchActive,
 }: ProjectSocketResProps) => {
+    const navigate = useNavigate();
     const { projectSocket } = useSocketStore();
     const { userId, organization } = getUserData();
+    const { setLoadingProgress } = useLoadingProgress();
 
     useEffect(() => {
+        console.log('projectSocket: ', projectSocket);
         if (!projectSocket) return;
 
         const handleAdd = (data: any) => {
-      // console.log("Add:", data);
+            console.log('data: ', data);
+            if (data.message === "Project created successfully") {
+                setLoadingProgress(1);
+                navigate(`/projects/${data.data.projectId}`);
+            }
         };
 
         const handleDelete = (data: any) => {
@@ -53,7 +61,6 @@ const ProjectSocketRes = ({
         };
 
         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);