From ea400847a45e5f5b3d7a8d775d61cd7015df8e95 Mon Sep 17 00:00:00 2001 From: Poovizhi99 Date: Wed, 4 Jun 2025 11:48:49 +0530 Subject: [PATCH] Refactor Dashboard components: add createdAt prop to Project interfaces, implement ProjectSocketRes for socket event handling, and remove unused handleDuplicateProjects function. --- .../components/Dashboard/DashboardCard.tsx | 188 +++++++----------- .../components/Dashboard/DashboardHome.tsx | 77 +++---- .../Dashboard/DashboardProjects.tsx | 64 +++--- .../components/Dashboard/DashboardTrash.tsx | 17 +- app/src/components/Dashboard/SidePannel.tsx | 91 ++++++--- .../functions/handleDuplicateProject.ts | 117 ----------- .../Dashboard/socket/projectSocket.dev.tsx | 102 ---------- .../Dashboard/socket/projectSocketRes.dev.tsx | 88 ++++++++ 8 files changed, 309 insertions(+), 435 deletions(-) delete mode 100644 app/src/components/Dashboard/functions/handleDuplicateProject.ts delete mode 100644 app/src/components/Dashboard/socket/projectSocket.dev.tsx create mode 100644 app/src/components/Dashboard/socket/projectSocketRes.dev.tsx diff --git a/app/src/components/Dashboard/DashboardCard.tsx b/app/src/components/Dashboard/DashboardCard.tsx index 63815de..83c9ef2 100644 --- a/app/src/components/Dashboard/DashboardCard.tsx +++ b/app/src/components/Dashboard/DashboardCard.tsx @@ -12,17 +12,26 @@ interface DashBoardCardProps { projectName: string; thumbnail: any; projectId: string; - createdAt?: string + createdAt?: string; handleDeleteProject?: (projectId: string) => Promise; handleTrashDeleteProject?: (projectId: string) => Promise; handleRestoreProject?: (projectId: string) => Promise; - handleDuplicateWorkspaceProject?: (projectId: string, projectName: string, thumbnail: string) => Promise; - handleDuplicateRecentProject?: (projectId: string, projectName: string, thumbnail: string) => Promise; + handleDuplicateWorkspaceProject?: ( + projectId: string, + projectName: string, + thumbnail: string + ) => Promise; + handleDuplicateRecentProject?: ( + projectId: string, + projectName: string, + thumbnail: string + ) => Promise; active?: string; setIsSearchActive?: React.Dispatch>; + setRecentDuplicateData?: React.Dispatch>; + setProjectDuplicateData?: React.Dispatch>; } -type RelativeTimeFormatUnit = any - +type RelativeTimeFormatUnit = any; const DashboardCard: React.FC = ({ projectName, @@ -34,7 +43,9 @@ const DashboardCard: React.FC = ({ handleTrashDeleteProject, handleDuplicateWorkspaceProject, handleDuplicateRecentProject, - createdAt + createdAt, + setRecentDuplicateData, + setProjectDuplicateData, }) => { const navigate = useNavigate(); const { setProjectName } = useProjectName(); @@ -44,9 +55,9 @@ const DashboardCard: React.FC = ({ const [isRenaming, setIsRenaming] = useState(false); const { projectSocket } = useSocketStore(); const kebabRef = useRef(null); - const savedTheme = localStorage.getItem("theme") ?? "light"; + const navigateToProject = async (e: any) => { - if (active && active == "trash") return + if (active && active == "trash") return; try { const viewedProject = await viewProject(organization, projectId, userId); console.log("Viewed project:", viewedProject); @@ -63,8 +74,7 @@ const DashboardCard: React.FC = ({ case "delete": if (handleDeleteProject) { await handleDeleteProject(projectId); - } - else if (handleTrashDeleteProject) { + } else if (handleTrashDeleteProject) { await handleTrashDeleteProject(projectId); } break; @@ -76,7 +86,7 @@ const DashboardCard: React.FC = ({ case "open in new tab": try { await viewProject(organization, projectId, userId); - setProjectName(projectName); // optional depending on scope + setProjectName(projectName); setIsKebabOpen(false); } catch (error) { console.error("Error opening project in new tab:", error); @@ -85,50 +95,25 @@ const DashboardCard: React.FC = ({ break; case "rename": setIsRenaming(true); - // setRenameValue(projectName); - // Add rename logic here break; case "duplicate": if (handleDuplicateWorkspaceProject) { + setProjectDuplicateData && + setProjectDuplicateData({ + projectId, + projectName, + thumbnail, + }); await handleDuplicateWorkspaceProject(projectId, projectName, thumbnail); } else if (handleDuplicateRecentProject) { + setRecentDuplicateData && + setRecentDuplicateData({ + projectId, + projectName, + thumbnail, + }); await handleDuplicateRecentProject(projectId, projectName, thumbnail); } - // try { - // // const project = await duplicateProject( - // // projectId, - // // savedTheme === "dark" ? darkThemeImage : lightThemeImage, - // // projectName - // // ); - // // console.log('project: ', project); - // // const duplicateProjectData = { - // // userId, - // // thumbnail: savedTheme === "dark" ? darkThemeImage : lightThemeImage, - // // organization, - // // projectUuid: projectId, - // // projectName, - // // }; - // // if (projectSocket) { - // // // console.log('addProject: ', addProject); - // // const handleResponse = (data: any) => { - // // console.log('Project add response:', data); - // // projectSocket.off("v1-project:response:Duplicate", handleResponse); // Clean up - // // }; - // // projectSocket.on("v1-project:response:Duplicate", handleResponse); - - // // console.log('duplicate: ', duplicateProjectData); - // // projectSocket.emit("v1:project:Duplicate", duplicateProjectData); - - // // const projects = await getAllProjects(userId, organization); - // // console.log("after duplicate", projects); - - // // setIsSearchActive && setIsSearchActive(false) - // // } - - // } catch (error) { - // console.error("Error creating project:", error); - // } - // Add duplication logic here break; default: break; @@ -140,49 +125,28 @@ const DashboardCard: React.FC = ({ contextClassName: ["kebab-wrapper", "kebab-options-wrapper"], setMenuVisible: () => setIsKebabOpen(false), }); - const handleProjectName = async (projectName: string) => { - // setProjectName(projectName); - setRenameValue(projectName) - if (!projectId) return - // localStorage.setItem("projectName", newName); - try { - const projects = await getAllProjects( - userId, organization + const handleProjectName = async (projectName: string) => { + setRenameValue(projectName); + if (!projectId) return; + try { + const projects = await getAllProjects(userId, organization); + console.log("projects: ", projects); + let projectUuid = projects.Projects.find( + (val: any) => val.projectUuid === projectId || val._id === projectId ); - console.log('projects: ', projects); - let projectUuid = projects.Projects.find((val: any) => val.projectUuid === projectId || val._id === projectId) const updateProjects = { projectId: projectUuid, organization, userId, projectName, - thumbnail: undefined - } + thumbnail: undefined, + }; if (projectSocket) { - const handleResponse = (data: any) => { - console.log('Project update response:', data); - projectSocket.off("v1-project:response:update", handleResponse); // Clean up - }; - - projectSocket.on("v1-project:response:update", handleResponse); - projectSocket.emit("v1:project:update", updateProjects); } - - //API for projects rename - // const updatedProjectName = await updateProject( - // projectId, - // userId, - // organization, - // undefined, - // projectName - // ); - // - } catch (error) { - - } + } catch (error) { } }; function getRelativeTime(dateString: string): string { @@ -200,7 +164,7 @@ const DashboardCard: React.FC = ({ second: 1, }; - const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' }); + const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" }); for (const key in intervals) { const unit = key as RelativeTimeFormatUnit; @@ -209,10 +173,9 @@ const DashboardCard: React.FC = ({ return rtf.format(-diff, unit); } } - return 'just now'; + return "just now"; } - return ( - ))} + {["rename", "delete", "duplicate", "open in new tab"].map( + (option) => ( + + ) + )} )} {isKebabOpen && active && active == "trash" && ( - < div className="kebab-options-wrapper"> +
{["restore", "delete"].map((option) => ( ))}
- ) - } - + )} + ); }; -export default DashboardCard; +export default DashboardCard; \ No newline at end of file diff --git a/app/src/components/Dashboard/DashboardHome.tsx b/app/src/components/Dashboard/DashboardHome.tsx index 8da0571..2627a65 100644 --- a/app/src/components/Dashboard/DashboardHome.tsx +++ b/app/src/components/Dashboard/DashboardHome.tsx @@ -7,7 +7,7 @@ import { useSocketStore } from "../../store/builder/store"; import { recentlyViewed } from "../../services/dashboard/recentlyViewed"; import { searchProject } from "../../services/dashboard/searchProjects"; import { deleteProject } from "../../services/dashboard/deleteProject"; -import { handleDuplicateProjects } from "./functions/handleDuplicateProject"; +import ProjectSocketRes from "./socket/projectSocketRes.dev"; interface Project { _id: string; @@ -15,6 +15,7 @@ interface Project { thumbnail: string; createdBy: string; projectUuid?: string; + createdAt: string; } interface RecentProjectsData { @@ -26,11 +27,13 @@ const DashboardHome: React.FC = () => { const [isSearchActive, setIsSearchActive] = useState(false); const { userId, organization } = getUserData(); const { projectSocket } = useSocketStore(); + const [recentDuplicateData, setRecentDuplicateData] = useState({}); + console.log("duplicateData: ", recentDuplicateData); const fetchRecentProjects = async () => { try { const projects = await recentlyViewed(organization, userId); - console.log('RecentlyViewed: ', projects); + console.log("RecentlyViewed: ", projects); if (JSON.stringify(projects) !== JSON.stringify(recentProjects)) { setRecentProjects(projects); @@ -50,13 +53,12 @@ const DashboardHome: React.FC = () => { userId, inputValue ); - console.log('filterRecentProcess: ', filterRecentProcess); setIsSearchActive(true); setRecentProjects(filterRecentProcess.message ? {} : filterRecentProcess); }; const handleDeleteProject = async (projectId: any) => { - console.log('projectId:delete ', projectId); + console.log("projectId:delete ", projectId); try { //API for delete project // const deletedProject = await deleteProject( @@ -74,12 +76,6 @@ const DashboardHome: React.FC = () => { }; if (projectSocket) { - const handleResponse = (data: any) => { - console.log("Project add response:", data); - projectSocket.off("v1-project:response:delete", handleResponse); - }; - - projectSocket.on("v1-project:response:delete", handleResponse); projectSocket.emit("v1:project:delete", deleteProject); } @@ -101,20 +97,20 @@ const DashboardHome: React.FC = () => { } }; - const handleDuplicateRecentProject = async (projectId: string, projectName: string, thumbnail: string) => { - - await handleDuplicateProjects({ + const handleDuplicateRecentProject = async ( + projectId: string, + projectName: string, + thumbnail: string + ) => { + const duplicateRecentProjectData = { userId, - organization, - projectId, - projectName, - projectSocket, thumbnail, - setRecentProjects, - setIsSearchActive - }); - - } + organization, + projectUuid: projectId, + projectName, + }; + projectSocket.emit("v1:project:Duplicate", duplicateRecentProjectData); + }; const renderProjects = () => { const projectList = recentProjects[Object.keys(recentProjects)[0]]; @@ -123,16 +119,21 @@ const DashboardHome: React.FC = () => { return
No recent projects found
; } - return projectList && projectList.map((project) => ( - - )); + return ( + projectList && + projectList.map((project) => ( + + )) + ); }; useEffect(() => { @@ -147,17 +148,19 @@ const DashboardHome: React.FC = () => { page="home" handleRecentProjectSearch={handleRecentProjectSearch} /> - -

Recents

{renderProjects()}
+ {recentDuplicateData && Object.keys(recentDuplicateData).length > 0 && ( + + )} ); }; -export default DashboardHome; - - +export default DashboardHome; \ No newline at end of file diff --git a/app/src/components/Dashboard/DashboardProjects.tsx b/app/src/components/Dashboard/DashboardProjects.tsx index 2199f19..98a79f7 100644 --- a/app/src/components/Dashboard/DashboardProjects.tsx +++ b/app/src/components/Dashboard/DashboardProjects.tsx @@ -6,7 +6,7 @@ import { useSocketStore } from "../../store/builder/store"; import { getAllProjects } from "../../services/dashboard/getAllProjects"; import { searchProject } from "../../services/dashboard/searchProjects"; import { deleteProject } from "../../services/dashboard/deleteProject"; -import { handleDuplicateProjects } from "./functions/handleDuplicateProject"; +import ProjectSocketRes from "./socket/projectSocketRes.dev"; interface Project { _id: string; @@ -14,6 +14,7 @@ interface Project { thumbnail: string; createdBy: string; projectUuid?: string; + createdAt: string; } interface WorkspaceProjects { @@ -24,9 +25,9 @@ const DashboardProjects: React.FC = () => { const [workspaceProjects, setWorkspaceProjects] = useState( {} ); - console.log('workspaceProjects: ', workspaceProjects); + const [projectDuplicateData, setProjectDuplicateData] = useState({}); + console.log("projectDuplicateData: ", projectDuplicateData); const [isSearchActive, setIsSearchActive] = useState(false); - const [activeFolder, setActiveFolder] = useState("myProjects"); const { projectSocket } = useSocketStore(); const { userId, organization } = getUserData(); @@ -50,11 +51,7 @@ const DashboardProjects: React.FC = () => { } if (!setWorkspaceProjects || !setIsSearchActive) return; - const searchedProject = await searchProject( - organization, - userId, - inputValue - ); + const searchedProject = await searchProject(organization, userId, inputValue); setIsSearchActive(true); setWorkspaceProjects(searchedProject.message ? {} : searchedProject); }; @@ -75,13 +72,6 @@ const DashboardProjects: React.FC = () => { //socket for deleting the project if (projectSocket) { - const handleResponse = (data: any) => { - console.log("Project add response:", data); - projectSocket.off("v1-project:response:delete", handleResponse); // Clean up - }; - - projectSocket.on("v1-project:response:delete", handleResponse); - projectSocket.emit("v1:project:delete", deleteProjects); } else { console.error("Socket is not connected."); @@ -104,20 +94,30 @@ const DashboardProjects: React.FC = () => { } }; - const handleDuplicateWorkspaceProject = async (projectId: string, projectName: string, thumbnail: string) => { - - await handleDuplicateProjects({ + const handleDuplicateWorkspaceProject = async ( + projectId: string, + projectName: string, + thumbnail: string + ) => { + // await handleDuplicateProjects({ + // userId, + // organization, + // projectId, + // projectName, + // projectSocket, + // thumbnail, + // setWorkspaceProjects, + // setIsSearchActive + // }); + const duplicateProjectData = { userId, - organization, - projectId, - projectName, - projectSocket, thumbnail, - setWorkspaceProjects, - setIsSearchActive - }); - - } + organization, + projectUuid: projectId, + projectName, + }; + projectSocket.emit("v1:project:Duplicate", duplicateProjectData); + }; const renderProjects = () => { if (activeFolder !== "myProjects") return null; @@ -134,9 +134,11 @@ const DashboardProjects: React.FC = () => { projectName={project.projectName} thumbnail={project.thumbnail} projectId={project._id} + createdAt={project.createdAt} handleDeleteProject={handleDeleteProject} setIsSearchActive={setIsSearchActive} handleDuplicateWorkspaceProject={handleDuplicateWorkspaceProject} + setProjectDuplicateData={setProjectDuplicateData} /> )); }; @@ -170,9 +172,15 @@ const DashboardProjects: React.FC = () => {
{renderProjects()}
+ {projectDuplicateData && Object.keys(projectDuplicateData).length > 0 && ( + + )} ); }; -export default DashboardProjects; +export default DashboardProjects; \ No newline at end of file diff --git a/app/src/components/Dashboard/DashboardTrash.tsx b/app/src/components/Dashboard/DashboardTrash.tsx index 1aeae11..e1329fc 100644 --- a/app/src/components/Dashboard/DashboardTrash.tsx +++ b/app/src/components/Dashboard/DashboardTrash.tsx @@ -14,6 +14,7 @@ interface Project { thumbnail: string; createdBy: string; projectUuid?: string; + DeletedAt: string; } interface DiscardedProjects { @@ -28,7 +29,6 @@ const DashboardTrash: React.FC = () => { const { userId, organization } = getUserData(); const { projectSocket } = useSocketStore(); - const fetchTrashProjects = async () => { try { const projects = await getTrash(organization); @@ -40,6 +40,7 @@ const DashboardTrash: React.FC = () => { console.error("Error fetching trash projects:", error); } }; + const handleTrashSearch = async (inputValue: string) => { if (!inputValue.trim()) { setIsSearchActive(false); @@ -57,8 +58,9 @@ const DashboardTrash: React.FC = () => { filterTrashedProcess.message ? {} : filterTrashedProcess ); }; + const handleRestoreProject = async (projectId: any) => { - console.log('projectId: ', projectId); + console.log("projectId: ", projectId); try { const restoreProject = await restoreTrash(organization, projectId); // console.log('restoreProject: ', restoreProject); @@ -82,25 +84,19 @@ const DashboardTrash: React.FC = () => { console.error("Error deleting project:", error); } }; + const handleTrashDeleteProject = async (projectId: any) => { try { // const deletedProject = await deleteTrash( // organization, projectId // ); - const deleteProjectTrash = { projectId, organization, userId, }; if (projectSocket) { - const handleResponse = (data: any) => { - console.log('data:deleteTrash ', data); - projectSocket.off("v1:trash:response:delete", handleResponse); - }; - projectSocket.on("v1:trash:response:delete", handleResponse); - console.log("duplicate: ", deleteProjectTrash); projectSocket.emit("v1:trash:delete", deleteProjectTrash); } setDiscardedProjects((prevDiscardedProjects: DiscardedProjects) => { @@ -138,6 +134,7 @@ const DashboardTrash: React.FC = () => { handleRestoreProject={handleRestoreProject} handleTrashDeleteProject={handleTrashDeleteProject} active={"trash"} + createdAt={project.DeletedAt} /> )); }; @@ -160,4 +157,4 @@ const DashboardTrash: React.FC = () => { ); }; -export default DashboardTrash; +export default DashboardTrash; \ No newline at end of file diff --git a/app/src/components/Dashboard/SidePannel.tsx b/app/src/components/Dashboard/SidePannel.tsx index 4bb7f61..d1786a1 100644 --- a/app/src/components/Dashboard/SidePannel.tsx +++ b/app/src/components/Dashboard/SidePannel.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React from "react"; import { DocumentationIcon, HelpIcon, @@ -15,33 +15,35 @@ import { SettingsIcon, TrashIcon } from "../icons/ExportCommonIcons"; import { getUserData } from "./functions/getUserData"; import { useLoadingProgress, useSocketStore } from "../../store/builder/store"; import { createProject } from "../../services/dashboard/createProject"; + interface SidePannelProps { setActiveTab: React.Dispatch>; - activeTab: string + activeTab: string; } const SidePannel: React.FC = ({ setActiveTab, activeTab }) => { const { email, userName, userId, organization } = getUserData(); const navigate = useNavigate(); - const { loadingProgress, setLoadingProgress } = useLoadingProgress(); - const { dashBoardSocket, projectSocket } = useSocketStore(); + const { setLoadingProgress } = useLoadingProgress(); + const { projectSocket } = 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(""); + byte.toString(16).padStart(2, "0") + ).join(""); } - const handleCreateNewProject = async () => { const token = localStorage.getItem("token"); try { const projectId = generateProjectId(); useSocketStore.getState().initializeSocket(email, organization, token); - console.log('projectId: ', projectId); + console.log("projectId: ", projectId); navigate(`/${projectId}`); - setLoadingProgress(1) + setLoadingProgress(1); //API for creating new Project // const project = await createProject( // projectId, @@ -56,18 +58,8 @@ const SidePannel: React.FC = ({ setActiveTab, activeTab }) => { organization: organization, projectUuid: projectId, }; - // socket for creating new project - // console.log('dashBoardSocket: ', dashBoardSocket); - console.log('projectSocket: ', projectSocket); + console.log("projectSocket: ", projectSocket); if (projectSocket) { - // console.log('addProject: ', addProject); - const handleResponse = (data: any) => { - console.log('Project add response:', data); - projectSocket.off("v1-project:response:add", handleResponse); // Clean up - }; - projectSocket.on("v1-project:response:add", handleResponse); - - console.log('addProject: ', addProject); projectSocket.emit("v1:project:add", addProject); } else { console.error("Socket is not connected."); @@ -81,33 +73,76 @@ const SidePannel: React.FC = ({ setActiveTab, activeTab }) => {
-
{userName?.charAt(0).toUpperCase()}
-
{userName ? userName.charAt(0).toUpperCase() + userName.slice(1).toLowerCase() : "Anonymous"}
+
+ {userName?.charAt(0).toUpperCase()} +
+
+ {userName + ? userName.charAt(0).toUpperCase() + userName.slice(1).toLowerCase() + : "Anonymous"} +
-
+ New project
+
+ + New project +
-
setActiveTab("Home")}> +
setActiveTab("Home")} + > Home
-
setActiveTab("Projects")}> +
setActiveTab("Projects")} + > Projects
-
setActiveTab("Trash")}> +
setActiveTab("Trash")} + > Trash
-
setActiveTab("Tutorials")}> +
setActiveTab("Tutorials")} + > Tutorials
-
setActiveTab("Documentation")}> +
setActiveTab("Documentation")} + > Documentation
@@ -131,4 +166,4 @@ const SidePannel: React.FC = ({ setActiveTab, activeTab }) => { ); }; -export default SidePannel; +export default SidePannel; \ No newline at end of file diff --git a/app/src/components/Dashboard/functions/handleDuplicateProject.ts b/app/src/components/Dashboard/functions/handleDuplicateProject.ts deleted file mode 100644 index c17c9a3..0000000 --- a/app/src/components/Dashboard/functions/handleDuplicateProject.ts +++ /dev/null @@ -1,117 +0,0 @@ -// import { getAllProjects } from "../../../services/dashboard/getAllProjects"; - -// interface HandleDuplicateProjectsParams { -// userId: string; -// organization: string; -// projectId: string; -// projectName: string; -// projectSocket: any; -// thumbnail: string; -// setWorkspaceProjects?: React.Dispatch>; -// setRecentProjects?: React.Dispatch>; -// setIsSearchActive: React.Dispatch>; -// } - -// export const handleDuplicateProjects = async ({ -// userId, -// organization, -// projectId, -// projectName, -// projectSocket, -// thumbnail, -// setWorkspaceProjects, -// setRecentProjects, -// setIsSearchActive, -// }: HandleDuplicateProjectsParams): Promise => { -// const duplicateProjectData = { -// userId, -// thumbnail, -// organization, -// projectUuid: projectId, -// projectName, -// }; - -// if (projectSocket) { -// const handleResponse = (data: any) => { -// console.log("Project add response:", data); -// projectSocket.off("v1-project:response:Duplicate", handleResponse); // Clean up -// }; - -// projectSocket.on("v1-project:response:Duplicate", handleResponse); -// console.log("duplicate: ", duplicateProjectData); -// projectSocket.emit("v1:project:Duplicate", duplicateProjectData); - -// const projects = await getAllProjects(userId, organization); -// console.log("projects: works", projects); -// if (setIsSearchActive) { -// if (setWorkspaceProjects) { -// setWorkspaceProjects(projects); -// } else if (setRecentProjects) { -// setRecentProjects(projects); -// } -// setIsSearchActive(false); -// } -// } -// }; - -import { getAllProjects } from "../../../services/dashboard/getAllProjects"; -import { recentlyViewed } from "../../../services/dashboard/recentlyViewed"; - -interface HandleDuplicateProjectsParams { - userId: string; - organization: string; - projectId: string; - projectName: string; - projectSocket: any; - thumbnail: string; - setWorkspaceProjects?: React.Dispatch>; - setRecentProjects?: React.Dispatch>; - setIsSearchActive: React.Dispatch>; -} - -export const handleDuplicateProjects = async ({ - userId, - organization, - projectId, - projectName, - projectSocket, - thumbnail, - setWorkspaceProjects, - setRecentProjects, - setIsSearchActive, -}: HandleDuplicateProjectsParams): Promise => { - const duplicateProjectData = { - userId, - thumbnail, - organization, - projectUuid: projectId, - projectName, - }; - - if (projectSocket) { - const handleResponse = async (data: any) => { - console.log("Project add 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); - console.log('recentProjects: ', recentProjects); - setRecentProjects(recentProjects); - } - - setIsSearchActive(false); - } else { - console.warn("Duplication failed or unexpected response."); - } - - projectSocket.off("v1-project:response:Duplicate", handleResponse); // Clean up - }; - - projectSocket.on("v1-project:response:Duplicate", handleResponse); - console.log("Emitting duplicate:", duplicateProjectData); - projectSocket.emit("v1:project:Duplicate", duplicateProjectData); - } -}; diff --git a/app/src/components/Dashboard/socket/projectSocket.dev.tsx b/app/src/components/Dashboard/socket/projectSocket.dev.tsx deleted file mode 100644 index 02404e7..0000000 --- a/app/src/components/Dashboard/socket/projectSocket.dev.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import React, { useEffect } from 'react'; -import { useSocketStore } from '../../../store/builder/store'; -import { getAllProjects } from '../../../services/dashboard/getAllProjects'; -import { recentlyViewed } from '../../../services/dashboard/recentlyViewed'; -import { data } from 'react-router-dom'; -interface HandleDuplicateProjectsParams { - userId: string; - organization: string; - projectId: string; - projectName: string; - projectSocket: any; - thumbnail: string; - setWorkspaceProjects?: React.Dispatch>; - setRecentProjects?: React.Dispatch>; - setIsSearchActive: React.Dispatch>; -} -const ProjectSocketDev = () => { - - const { projectSocket } = useSocketStore(); - - useEffect(() => { - - if (projectSocket) { - - projectSocket.on("v1-project:response:add", (data: any) => { - // console.log('data: ', data); - }) - projectSocket.on("v1-project:response:delete", (data: any) => { - // console.log('data: ', data) - }) - projectSocket.on("v1-project:response:update", (data: any) => { - // console.log('data: ', data); - }); - projectSocket.on("v1-project:response:Duplicate", (data: any) => { - // console.log('data: ', data); - }) - projectSocket.on("v1:trash:response:delete", (data: any) => { - // console.log('data: ', data); - }) - - } - return (() => { - projectSocket.off("v1-project:response:add"); - projectSocket.off("v1-project:response:delete"); - projectSocket.off("v1-project:response:update"); - projectSocket.off("v1-project:response:Duplicate"); - projectSocket.off("v1:trash:response:delete"); - - }) - }, [projectSocket]) - - // const handleDuplicateProjects = async ({ - // userId, - // organization, - // projectId, - // projectName, - // projectSocket, - // thumbnail, - // setWorkspaceProjects, - // setRecentProjects, - // setIsSearchActive, - // }: HandleDuplicateProjectsParams): Promise => { - // const duplicateProjectData = { - // userId, - // thumbnail, - // organization, - // projectUuid: projectId, - // projectName, - // }; - - // if (projectSocket) { - // const handleResponse = async (data: any) => { - // console.log("Project add response:", data); - - // if (data?.message === "Project Duplicated successfully") { - // if (setWorkspaceProjects) { - // const allProjects = await getAllProjects(userId, organization); - // console.log("allProjects: ", allProjects); - // setWorkspaceProjects(allProjects); - // } else if (setRecentProjects) { - // const recentProjects = await recentlyViewed(organization, userId); - // console.log("recentProjects: ", recentProjects); - // setRecentProjects(recentProjects); - // } - - // setIsSearchActive(false); - // } else { - // console.warn("Duplication failed or unexpected response."); - // } - - // projectSocket.off("v1-project:response:Duplicate", handleResponse); // Clean up - // }; - - // projectSocket.on("v1-project:response:Duplicate", handleResponse); - // console.log("Emitting duplicate:", duplicateProjectData); - - // } - // }; - return <> -} - -export default ProjectSocketDev; diff --git a/app/src/components/Dashboard/socket/projectSocketRes.dev.tsx b/app/src/components/Dashboard/socket/projectSocketRes.dev.tsx new file mode 100644 index 0000000..6ab556b --- /dev/null +++ b/app/src/components/Dashboard/socket/projectSocketRes.dev.tsx @@ -0,0 +1,88 @@ + +import React, { useEffect } from 'react'; +import { useSocketStore } from '../../../store/builder/store'; +import { getUserData } from '../functions/getUserData'; +import { getAllProjects } from '../../../services/dashboard/getAllProjects'; +import { recentlyViewed } from '../../../services/dashboard/recentlyViewed'; + +interface Project { + _id: string; + projectName: string; + thumbnail: string; + createdBy: string; + projectUuid?: string; + createdAt: string; +} + +interface ProjectsData { + [key: string]: Project[]; +} +interface ProjectSocketResProps { + setRecentProjects?: React.Dispatch>; + setWorkspaceProjects?: React.Dispatch>; + setIsSearchActive?: React.Dispatch>; +} + +const ProjectSocketRes = ({ + setRecentProjects, + setWorkspaceProjects, + setIsSearchActive, +}: ProjectSocketResProps) => { + const { projectSocket } = useSocketStore(); + const { userId, organization } = getUserData(); + + useEffect(() => { + if (!projectSocket) return; + + const handleAdd = (data: any) => { + // console.log('Add:', data); + }; + + const handleDelete = (data: any) => { + // console.log('Delete:', data); + }; + + const handleUpdate = (data: any) => { + // console.log('Update:', 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); + console.log('allProjects: ', allProjects); + setWorkspaceProjects(allProjects); + } else if (setRecentProjects) { + const recentProjects = await recentlyViewed(organization, userId); + setRecentProjects && 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); + + 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); + }; + }, [projectSocket, userId, organization]); + + return null; +}; + +export default ProjectSocketRes;