leumas-private-shared/src/Cards/CategoryCard.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React, { useState, useEffect } from 'react';
import { getItemById, deleteItem } from '../../helpers/LMS-WildCard-Helpers/UniversalCrud/UniversalCrudHelpers';
import defaultSVG from '../../assets/SharedSVG/AI.svg';
import ToggleStatus from '../../helpers/LMS-WildCard-Helpers/UniversalCrud/ToggleStatus';
import { useAuthUser } from 'react-auth-kit';
import { FaClock, FaTrash } from 'react-icons/fa'; 
import ViewCategory from '../../Library/ViewCategory';
import useIsOwner from '../../helpers/useIsOwner';
import { friendlyTime } from '../../helpers/friendlyTime';
const CategoryCard = ({ model, setMode, svg = defaultSVG }) => {
    const [details, setDetails] = useState(null);
    const [isPublished, setIsPublished] = useState(details?.public);
    const auth = useAuthUser();
    const isOwner = useIsOwner(details?.owner)
    useEffect(() => {
        if (model) {
            getItemById("Category", model, "LeumasAPI", auth()?.token)
                .then(data => {
                    setDetails(data);
                })
                .catch(error => {
                    console.error("Error fetching category details:", error);
                });
        }
    }, [model]);

    useEffect(() => {
        setIsPublished(model?.public);
    }, [model]);

    const glowColor = model?.public ? 'border-blue-500' : 'border-red-500';

    const handleClick = (e) => {
        e.stopPropagation();
        setMode(<ViewCategory model={model} setMode={setMode} />);
    };

    const handleTitleClick = (e) => {
        e.stopPropagation();
        // Handle title click - maybe expand details or navigate to category details
    };

    const handleToggleChange = (newStatus) => {
        setIsPublished(newStatus);
    };

    const handleDeleteClick = async (e) => {
        e.stopPropagation();
        const isConfirmed = window.confirm('Are you sure you want to delete this category and all associated library items?');
        
        if (isConfirmed) {
            const libraryItemsIds = details?.libraryItems;
    
            // Delete each library item associated with the category
            for (let itemId of libraryItemsIds) {
                try {
                 const deletedItem =  await deleteItem('LibraryItem', itemId, 'LeumasAPI', auth().token);
                 console.log(deletedItem)
                } catch (error) {
                    console.error(`Failed to delete library item with ID ${itemId}:`, error);
                }
            }
    
            // Delete the category itself
            try {
                await deleteItem('Category', model, 'LeumasAPI', auth().token);
                // Refresh the category list or navigate after deletion.
            } catch (error) {
                console.error("Failed to delete the category:", error);
            }
        }
    };
    


    return (
        <div className="relative w-200 h-full flex flex-col justify-between rounded-xl overflow-hidden">
            <div 
                onClick={handleClick}
                className={`h-full relative flex flex-col w-full border-2 p-4 rounded-xl backdrop-blur-md hover:${glowColor} shadow-lg transition-transform transform hover:scale-105 cursor-pointer text-white`}
                style={{
                    backgroundImage: `url(${details?.image || svg})`,
                    backgroundSize: 'cover',
                    backgroundPosition: 'center'
                }}
            >
                <div className="absolute inset-0 bg-black bg-opacity-40 rounded-lg"></div>
                
                <div className="flex flex-col justify-start mb-2 flex-grow z-10">
                    <h2 
                        onClick={handleTitleClick} 
                        className="font-bold text-lg hover:text-blue-500 cursor-pointer z-10"
                    >
                        {details?.name}
                    </h2>
                    <p className="text-sm mt-2 line-clamp-2">{details?.libraryItems?.length || 0} library items</p>
                </div>
    
                <div className="absolute bottom-2 right-2 flex items-center text-xs z-10">
                    <FaClock size={12} className="mr-1" />
                    Updated: {friendlyTime(details?.updatedAt)}
                </div>
            </div>
    
            {auth()?.id && isOwner && (  // Consider using a condition to check if the current user is the owner.
                <>
                    <div className="absolute bottom-2 left-2 flex items-center z-50">
                        <ToggleStatus 
                            isPublished={details?.public} 
                            model="Category" 
                            endpoint="LeumasAPI" 
                            itemId={details?._id} 
                            token={auth().token} 
                            onToggleChange={handleToggleChange}
                        />
                    </div>
                    <div className="absolute top-2 right-2 flex items-center z-50">
                        <button onClick={handleDeleteClick} className="p-1 bg-red-500 rounded hover:bg-red-600">
                            <FaTrash />
                        </button>
                    </div>
                </>
            )}
        </div>
    );
    
    
}

export default CategoryCard;