145 lines
4.1 KiB
TypeScript
145 lines
4.1 KiB
TypeScript
|
import React, { useEffect, useState } from "react";
|
||
|
import DashboardCard from "./DashboardCard";
|
||
|
import DashboardNavBar from "./DashboardNavBar";
|
||
|
import MarketPlaceBanner from "./MarketPlaceBanner";
|
||
|
import { getUserData } from "./functions/getUserData";
|
||
|
import { useSocketStore } from "../../store/builder/store";
|
||
|
import { recentlyViewed } from "../../services/dashboard/recentlyViewed";
|
||
|
import { searchProject } from "../../services/dashboard/searchProjects";
|
||
|
import { deleteProject } from "../../services/dashboard/deleteProject";
|
||
|
|
||
|
interface Project {
|
||
|
_id: string;
|
||
|
projectName: string;
|
||
|
thumbnail: string;
|
||
|
createdBy: string;
|
||
|
projectUuid?: string;
|
||
|
}
|
||
|
|
||
|
interface RecentProjectsData {
|
||
|
[key: string]: Project[];
|
||
|
}
|
||
|
|
||
|
const DashboardHome: React.FC = () => {
|
||
|
const [recentProjects, setRecentProjects] = useState<RecentProjectsData>({});
|
||
|
const [isSearchActive, setIsSearchActive] = useState<boolean>(false);
|
||
|
const { userId, organization } = getUserData();
|
||
|
const { dashBoardSocket } = useSocketStore();
|
||
|
|
||
|
const fetchRecentProjects = async () => {
|
||
|
try {
|
||
|
const projects = await recentlyViewed(organization, userId);
|
||
|
console.log('RecentlyViewed: ', projects);
|
||
|
|
||
|
if (JSON.stringify(projects) !== JSON.stringify(recentProjects)) {
|
||
|
setRecentProjects(projects);
|
||
|
}
|
||
|
} catch (error) {
|
||
|
console.error("Error fetching recent projects:", error);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
const handleRecentProjectSearch = async (inputValue: string) => {
|
||
|
if (!inputValue.trim()) {
|
||
|
setIsSearchActive(false);
|
||
|
return;
|
||
|
}
|
||
|
const filterRecentProcess = await searchProject(
|
||
|
organization,
|
||
|
userId,
|
||
|
inputValue
|
||
|
);
|
||
|
setIsSearchActive(true);
|
||
|
setRecentProjects(filterRecentProcess.message ? {} : filterRecentProcess);
|
||
|
};
|
||
|
|
||
|
const handleDeleteProject = async (projectId: any) => {
|
||
|
try {
|
||
|
//API for delete project
|
||
|
const deletedProject = await deleteProject(
|
||
|
projectId,
|
||
|
userId,
|
||
|
organization
|
||
|
);
|
||
|
|
||
|
//socket for delete Project
|
||
|
// const deleteProject = {
|
||
|
// projectId,
|
||
|
// organization,
|
||
|
// userId,
|
||
|
// };
|
||
|
|
||
|
// if (dashBoardSocket) {
|
||
|
// const handleResponse = (data: any) => {
|
||
|
// console.log("Project add response:", data);
|
||
|
// dashBoardSocket.off("v1-project:response:delete", handleResponse);
|
||
|
// };
|
||
|
|
||
|
// dashBoardSocket.on("v1-project:response:delete", handleResponse);
|
||
|
// dashBoardSocket.emit("v1:project:delete", deleteProject);
|
||
|
// }
|
||
|
|
||
|
setRecentProjects((prevDiscardedProjects: RecentProjectsData) => {
|
||
|
if (!Array.isArray(prevDiscardedProjects?.RecentlyViewed)) {
|
||
|
return prevDiscardedProjects;
|
||
|
}
|
||
|
const updatedProjectDatas = prevDiscardedProjects.RecentlyViewed.filter(
|
||
|
(project) => project._id !== projectId
|
||
|
);
|
||
|
return {
|
||
|
...prevDiscardedProjects,
|
||
|
RecentlyViewed: updatedProjectDatas,
|
||
|
};
|
||
|
});
|
||
|
setIsSearchActive(false);
|
||
|
} catch (error) {
|
||
|
console.error("Error deleting project:", error);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
const renderProjects = () => {
|
||
|
const projectList = recentProjects[Object.keys(recentProjects)[0]];
|
||
|
|
||
|
if (!projectList?.length) {
|
||
|
return <div className="empty-state">No recent projects found</div>;
|
||
|
}
|
||
|
|
||
|
return projectList && projectList.map((project) => (
|
||
|
<DashboardCard
|
||
|
key={project._id}
|
||
|
projectName={project.projectName}
|
||
|
thumbnail={project.thumbnail}
|
||
|
projectId={project._id}
|
||
|
handleDeleteProject={handleDeleteProject}
|
||
|
/>
|
||
|
));
|
||
|
};
|
||
|
|
||
|
useEffect(() => {
|
||
|
console.log('isSearchActive: ', isSearchActive);
|
||
|
if (!isSearchActive) {
|
||
|
fetchRecentProjects();
|
||
|
}
|
||
|
}, [isSearchActive]);
|
||
|
|
||
|
return (
|
||
|
<div className="dashboard-home-container">
|
||
|
<DashboardNavBar
|
||
|
page="home"
|
||
|
handleRecentProjectSearch={handleRecentProjectSearch}
|
||
|
/>
|
||
|
|
||
|
<MarketPlaceBanner />
|
||
|
|
||
|
<div className="container">
|
||
|
<h2 className="section-header">Recents</h2>
|
||
|
<div className="cards-container">{renderProjects()}</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default DashboardHome;
|
||
|
|
||
|
|