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

2025-09-08 11:59:16 +05:30
parent 80a672adf0
commit 90fb7fbc06
3 changed files with 275 additions and 326 deletions
--- a/app/src/components/Dashboard/DashboardMain.tsx
+++ b/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>(
-    null
-  );
+    const [openKebabProjectId, setOpenKebabProjectId] = useState<string | 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 =
-      activeFolder + (activeFolder === "projects" ? `-${activeSubFolder}` : "");
+        const cacheKey = 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 (
-        projects &&
-        JSON.stringify(projects) !== JSON.stringify(projectsData)
-      ) {
+            if (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 (
-    projectId: string,
-    projectName: string,
-    thumbnail: string
-  ): Promise<void> => {
+    const handleDuplicate = async (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={
-          activeFolder === "trash" ? project.DeletedAt : project.createdAt
-        }
+                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"
-          ? { handleTrashSearch: handleSearch }
-          : {
-              handleProjectsSearch: handleSearch,
-              handleRecentProjectSearch: handleSearch,
-            })}
+                {...(activeFolder === "trash" ? { handleTrashSearch: handleSearch } : { handleProjectsSearch: handleSearch, handleRecentProjectSearch: handleSearch })}
            />

            {activeFolder === "home" && <MarketPlaceBanner />}

-      <div
-        className="dashboard-container"
-        style={{ height: "calc(100% - 87px)" }}
-      >
+            <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")}
-            >
+                    <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")}
-            >
+                        <button 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>
    );
--- 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
--- a/app/src/components/Dashboard/socket/projectSocketRes.tsx
+++ b/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);