Dwinzo_dev/app/src/components/layout/Dashboard/DashboardTrash.tsx

import React, { useEffect, useState } from 'react';
import { getTrash } from '../../../services/dashboard/getTrash';
import DashboardCard from './DashboardCard';
import DashboardNavBar from './DashboardNavBar';
import { getUserData } from './functions/getUserData';
import { trashSearchProject } from '../../../services/dashboard/trashSearchProject';
import { restoreTrash } from '../../../services/dashboard/restoreTrash';

interface Project {
    _id: string;
    projectName: string;
    thumbnail: string;
    createdBy: string;
    projectUuid?: string;
}

interface DiscardedProjects {
    [key: string]: Project[];
}

const DashboardTrash: React.FC = () => {
    const [discardedProjects, setDiscardedProjects] = useState<DiscardedProjects>({});
    console.log('discardedProjects: ', discardedProjects);
    const [isSearchActive, setIsSearchActive] = useState(false);
    const { userId, organization } = getUserData();

    const fetchTrashProjects = async () => {
        try {
            const projects = await getTrash(organization);
            console.log('organization: ', organization);
            console.log('trashedprojects: ', projects);

            if (JSON.stringify(projects) !== JSON.stringify(discardedProjects)) {
                setDiscardedProjects(projects);
            }
        } catch (error) {
            console.error('Error fetching trash projects:', error);
        }
    };
    const handleTrashSearch = async (
        inputValue: string
    ) => {
        if (!inputValue.trim()) {
            setIsSearchActive(false);
            return;
        }
        if (!setDiscardedProjects || !setIsSearchActive) return;

        const filterTrashedProcess = await trashSearchProject(organization, userId, inputValue);
        setIsSearchActive(true);
        setDiscardedProjects(filterTrashedProcess.message ? {} : filterTrashedProcess);
    };
    const handleRestoreProject = async (projectId: any) => {
        try {
            const Organization = organization;
            const restoreProject = await restoreTrash(
                Organization,
                projectId
            );

            setDiscardedProjects((prevDiscardedProjects: DiscardedProjects) => {
                // Check if TrashDatas exists and is an array
                if (!Array.isArray(prevDiscardedProjects?.TrashDatas)) {
                    console.error('TrashDatas is not an array', prevDiscardedProjects);
                    return prevDiscardedProjects;
                }
                const updatedTrashDatas = prevDiscardedProjects.TrashDatas.filter(
                    (project) => project._id !== projectId
                );
                return {
                    ...prevDiscardedProjects,
                    TrashDatas: updatedTrashDatas
                };
            });
            setIsSearchActive(false)
        } catch (error) {
            console.error('Error deleting project:', error);
        }
    };
    const renderTrashProjects = () => {
        const projectList = discardedProjects[Object.keys(discardedProjects)[0]];

        if (!projectList?.length) {
            return <div className="empty-state">No deleted projects found</div>;
        }

        return projectList.map((project) => (
            <DashboardCard
                key={project._id}
                projectName={project.projectName}
                thumbnail={project.thumbnail}
                projectId={project._id}
                handleRestoreProject={handleRestoreProject}
            />
        ));
    };

    useEffect(() => {
        console.log('isSearchActive:trash ', isSearchActive);
        if (!isSearchActive) {
            fetchTrashProjects();
        }
    }, [isSearchActive]);

    return (
        <div className="dashboard-home-container">
            <DashboardNavBar
                page="trash"
                handleTrashSearch={handleTrashSearch}
            />

            <div className="container">
                <div className="header" style={{ display: 'flex', gap: '7px' }}></div>
                <div className="cards-container">
                    {renderTrashProjects()}
                </div>
            </div>
        </div>
    );
};

export default DashboardTrash;