refactor: Simplify imports and clean up DashboardCard component for improved readability and maintainability

This commit is contained in:
2025-09-08 16:35:22 +05:30
parent c7408f07b9
commit cac9d69539

View File

@@ -3,11 +3,7 @@ import { createPortal } from "react-dom";
import { useNavigate } from "react-router-dom";
import img from "../../assets/image/image.png";
import { getUserData } from "../../functions/getUserData";
import {
useLoadingProgress,
useProjectName,
useSocketStore,
} from "../../store/builder/store";
import { useLoadingProgress, useProjectName, useSocketStore } from "../../store/builder/store";
import OuterClick from "../../utils/outerClick";
import { KebabIcon } from "../icons/ExportCommonIcons";
import { getAllProjects } from "../../services/dashboard/getAllProjects";
@@ -24,17 +20,8 @@ interface DashBoardCardProps {
handleDeleteProject?: (projectId: string) => Promise<void>;
handleTrashDeleteProject?: (projectId: string) => Promise<void>;
handleRestoreProject?: (projectId: string) => Promise<void>;
handleDuplicateWorkspaceProject?: (
projectId: string,
projectName: string,
thumbnail: string,
userId?: string
) => Promise<void>;
handleDuplicateRecentProject?: (
projectId: string,
projectName: string,
thumbnail: string
) => Promise<void>;
handleDuplicateWorkspaceProject?: (projectId: string, projectName: string, thumbnail: string, userId?: string) => Promise<void>;
handleDuplicateRecentProject?: (projectId: string, projectName: string, thumbnail: string) => Promise<void>;
active?: "shared" | "trash" | "recent" | string;
setIsSearchActive?: React.Dispatch<React.SetStateAction<boolean>>;
setRecentDuplicateData?: React.Dispatch<React.SetStateAction<object>>;
@@ -44,14 +31,7 @@ interface DashBoardCardProps {
setOpenKebabProjectId: React.Dispatch<React.SetStateAction<string | null>>;
}
type RelativeTimeFormatUnit =
| "year"
| "month"
| "week"
| "day"
| "hour"
| "minute"
| "second";
type RelativeTimeFormatUnit = "year" | "month" | "week" | "day" | "hour" | "minute" | "second";
const kebabOptionsMap: Record<string, string[]> = {
default: ["rename", "delete", "duplicate", "open in new tab"],
@@ -101,14 +81,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
setLoadingProgress(1);
setProjectName(projectName);
navigate(`/projects/${projectId}`);
}, [
active,
projectId,
projectName,
navigate,
setLoadingProgress,
setProjectName,
]);
}, [active, projectId, projectName, navigate, setLoadingProgress, setProjectName]);
const getOptions = useCallback(() => {
if (active === "trash") return kebabOptionsMap.trash;
@@ -125,9 +98,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
try {
const projects = await getAllProjects(userId, organization);
const projectUuid = projects?.Projects?.find(
(val: any) => val.projectUuid === projectId || val._id === projectId
);
const projectUuid = projects?.Projects?.find((val: any) => val.projectUuid === projectId || val._id === projectId);
if (!projectUuid) return;
const updatePayload = {
@@ -151,8 +122,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
async (option: string) => {
switch (option) {
case "delete":
await (handleDeleteProject?.(projectId) ??
handleTrashDeleteProject?.(projectId));
await (active === "trash" ? handleTrashDeleteProject?.(projectId) : handleDeleteProject?.(projectId));
break;
case "restore":
await handleRestoreProject?.(projectId);
@@ -167,12 +137,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
case "duplicate":
if (handleDuplicateWorkspaceProject) {
setProjectDuplicateData?.({ projectId, projectName, thumbnail });
await handleDuplicateWorkspaceProject(
projectId,
projectName,
thumbnail,
userId
);
await handleDuplicateWorkspaceProject(projectId, projectName, thumbnail, userId);
if (active === "shared") {
setActiveFolder?.("myProjects");
}
@@ -183,11 +148,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
thumbnail,
userId,
});
await handleDuplicateRecentProject(
projectId,
projectName,
thumbnail
);
await handleDuplicateRecentProject(projectId, projectName, thumbnail);
}
break;
}
@@ -246,20 +207,13 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
}, [isKebabOpen]);
return (
<div
className="dashboard-card-container"
onClick={navigateToProject}
title={projectName}
>
<div className="dashboard-card-container" onClick={navigateToProject} title={projectName}>
<div className="dashboard-card-wrapper">
<div className="preview-container">
<img src={thumbnail || img} alt={`${projectName} thumbnail`} />
</div>
<div
className="project-details-container"
onClick={(e) => e.stopPropagation()}
>
<div className="project-details-container" onClick={(e) => e.stopPropagation()}>
<div className="project-details">
{isRenaming ? (
<input
@@ -283,16 +237,13 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
)}
{createdAt && (
<div className="project-data">
{active === "trash" ? "Trashed" : "Edited"}{" "}
{getRelativeTime(createdAt)}
{active === "trash" ? "Trashed" : "Edited"} {getRelativeTime(createdAt)}
</div>
)}
</div>
<div className="users-list-container" ref={kebabRef}>
<div className="user-profile">
{(createdBy?.userName || userName || "A").charAt(0).toUpperCase()}
</div>
<div className="user-profile">{(createdBy?.userName || userName || "A").charAt(0).toUpperCase()}</div>
<button
className="kebab-wrapper"
onClick={(e) => {
@@ -311,10 +262,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
{isKebabOpen &&
createPortal(
<div
className={`kebab-options-wrapper tag-${projectId}`}
style={{ position: "fixed", zIndex: 9999, ...kebabPosition }}
>
<div className={`kebab-options-wrapper tag-${projectId}`} style={{ position: "fixed", zIndex: 9999, ...kebabPosition }}>
{getOptions().map((option) => (
<button
key={option}