Refactor DashboardCard component: add active prop handling and improve option click logic
This commit is contained in:
parent
0184abdd7a
commit
c8627e0249
|
@ -13,6 +13,7 @@ interface DashBoardCardProps {
|
||||||
projectId: string;
|
projectId: string;
|
||||||
handleDeleteProject?: (projectId: string) => Promise<void>;
|
handleDeleteProject?: (projectId: string) => Promise<void>;
|
||||||
handleRestoreProject?: (projectId: string) => Promise<void>;
|
handleRestoreProject?: (projectId: string) => Promise<void>;
|
||||||
|
active?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const DashboardCard: React.FC<DashBoardCardProps> = ({
|
const DashboardCard: React.FC<DashBoardCardProps> = ({
|
||||||
|
@ -21,6 +22,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
|
||||||
thumbnail,
|
thumbnail,
|
||||||
projectId,
|
projectId,
|
||||||
handleRestoreProject,
|
handleRestoreProject,
|
||||||
|
active
|
||||||
}) => {
|
}) => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { setProjectName } = useProjectName();
|
const { setProjectName } = useProjectName();
|
||||||
|
@ -42,7 +44,6 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOptionClick = async (option: string) => {
|
const handleOptionClick = async (option: string) => {
|
||||||
console.log('option: ', option);
|
|
||||||
switch (option) {
|
switch (option) {
|
||||||
case "delete":
|
case "delete":
|
||||||
if (handleDeleteProject) {
|
if (handleDeleteProject) {
|
||||||
|
@ -54,7 +55,13 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
|
||||||
await handleRestoreProject(projectId);
|
await handleRestoreProject(projectId);
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "openInNewTab":
|
case "open in new tab":
|
||||||
|
try {
|
||||||
|
await viewProject(organization, projectId, userId);
|
||||||
|
setProjectName(projectName); // optional depending on scope
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error opening project in new tab:", error);
|
||||||
|
}
|
||||||
window.open(`/${projectId}`, "_blank");
|
window.open(`/${projectId}`, "_blank");
|
||||||
break;
|
break;
|
||||||
case "rename":
|
case "rename":
|
||||||
|
@ -111,9 +118,9 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{isKebabOpen && (
|
{isKebabOpen && active !== "trash" && (
|
||||||
<div className="kebab-options-wrapper">
|
<div className="kebab-options-wrapper">
|
||||||
{["rename", "restore", "delete", "duplicate", "open in new tab"].map((option) => (
|
{["rename", "delete", "duplicate", "open in new tab"].map((option) => (
|
||||||
<button
|
<button
|
||||||
key={option}
|
key={option}
|
||||||
className="option"
|
className="option"
|
||||||
|
@ -128,7 +135,25 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</button>
|
{isKebabOpen && active && active == "trash" && (
|
||||||
|
< div className="kebab-options-wrapper">
|
||||||
|
{["restore", "delete"].map((option) => (
|
||||||
|
<button
|
||||||
|
key={option}
|
||||||
|
className="option"
|
||||||
|
onClick={(e) => {
|
||||||
|
console.log(option);
|
||||||
|
e.stopPropagation();
|
||||||
|
handleOptionClick(option);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{option}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</button >
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -96,6 +96,7 @@ const DashboardTrash: React.FC = () => {
|
||||||
thumbnail={project.thumbnail}
|
thumbnail={project.thumbnail}
|
||||||
projectId={project._id}
|
projectId={project._id}
|
||||||
handleRestoreProject={handleRestoreProject}
|
handleRestoreProject={handleRestoreProject}
|
||||||
|
active={"trash"}
|
||||||
/>
|
/>
|
||||||
));
|
));
|
||||||
};
|
};
|
||||||
|
|
|
@ -7,9 +7,9 @@ export const recentlyViewed = async (organization: string, userId: string) => {
|
||||||
{
|
{
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: {
|
headers: {
|
||||||
Authorization: "Bearer <access_token>", // Replace with actual token
|
Authorization: "Bearer <access_token>", // Replace with actual token
|
||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
token: localStorage.getItem("token") || "", // Coerce null to empty string
|
token: localStorage.getItem("token") || "", // Coerce null to empty string
|
||||||
refresh_token: localStorage.getItem("refreshToken") || "",
|
refresh_token: localStorage.getItem("refreshToken") || "",
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
@ -19,8 +19,6 @@ export const recentlyViewed = async (organization: string, userId: string) => {
|
||||||
throw new Error("Failed to fetch project");
|
throw new Error("Failed to fetch project");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
console.log('response: ', response);
|
|
||||||
return await response.json();
|
return await response.json();
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
console.error("Failed to get project");
|
console.error("Failed to get project");
|
||||||
|
|
|
@ -4,7 +4,7 @@ const url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_
|
||||||
export const restoreTrash = async (organization: string, projectId: string) => {
|
export const restoreTrash = async (organization: string, projectId: string) => {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(
|
const response = await fetch(
|
||||||
`${url_Backend_dwinzo}api/v2/Trash/restore?projectId=${projectId}`,
|
`${url_Backend_dwinzo}/api/v2/Trash/restore?projectId=${projectId}`,
|
||||||
{
|
{
|
||||||
method: "PATCH",
|
method: "PATCH",
|
||||||
headers: {
|
headers: {
|
||||||
|
|
Loading…
Reference in New Issue