leumas-private-shared/src/Cards/LibraryItemCard.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 } from '../../helpers/LMS-WildCard-Helpers/UniversalCrud/UniversalCrudHelpers';
import defaultSVG from '../../assets/SharedSVG/AI.svg';
import { useAuthUser } from 'react-auth-kit';
import { FaClock , FaTrash } from 'react-icons/fa'; 
import ViewLibraryItem from '../../Library/ViewLibraryItem';  // Make sure you have this component or adapt accordingly
import useIsOwner from '../../helpers/useIsOwner';
import {friendlyTime} from "../../helpers/friendlyTime"
import {AtomSpinner} from "react-epic-spinners"
import { deleteItem } from '../../helpers/LMS-WildCard-Helpers/UniversalCrud/UniversalCrudHelpers';
import ToggleStatus from '../../helpers/LMS-WildCard-Helpers/UniversalCrud/ToggleStatus';
const LibraryItemCard = ({ model, setMode, svg = '' }) => {
    const [details, setDetails] = useState(null);
    const auth = useAuthUser();
    const [isLoading, setIsLoading] = useState(false);
    const [isPublished, setIsPublished] = useState(details?.public);
    const isOwner = useIsOwner(details?.owner);

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

    const handleDeleteClick = async (e) => {
        e.stopPropagation();
        const isConfirmed = window.confirm('Are you sure you want to delete this item?');
        if (isConfirmed) {
            handleDelete(e);
        }
    };

    const handleDelete = async (e) => {
        e.stopPropagation();
        setIsLoading(true);
        try {
            await deleteItem('LibraryItem', model._id, 'LeumasAPI', auth().token);
        } catch (error) {
            console.error("Failed to delete the library item:", error);
        } finally {
            setIsLoading(false);
        }
    };
    useEffect(() => {
        if (model) {
            getItemById("LibraryItem", model, "LeumasAPI", auth()?.token) // Changed from "Category" to "LibraryItem"
                .then(data => {
                    setDetails(data);
                    setIsPublished(data?.public)
                })
                .catch(error => {
                    console.error("Error fetching library item details:", error); // Updated the error message accordingly
                });
        }
    }, [model]);

    const glowColor = model?.public ? 'border-blue-500' : 'border-red-500';  // assuming model has a property 'public'

    const handleClick = () => {
        console.log("clicking a library item, so now we need to go to the library item's details") // Updated the console log message
        setMode(<ViewLibraryItem model={model} setMode={setMode} />);  // Updated to ViewLibraryItem
    };


    return (
        <>
        {isLoading ? (
            <div className="flex justify-center items-center h-full w-full absolute z-60">
                <AtomSpinner color="blue" />
            </div>
        ) : (
            <div 
                onClick={handleClick} 
                className={`h-full relative flex flex-col w-200 border-2 p-4 rounded-xl backdrop-blur-md hover:${glowColor} shadow-lg transition-transform transform hover:scale-105 cursor-pointer`}
                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 className="font-bold text-lg hover:text-blue-500 cursor-pointer">{details?.name}</h2>
    <p className="text-sm mt-2 line-clamp-2">{details?.description}</p>  {/* Assuming library item has a description */}
</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>

                {auth()?.id && isOwner && (  
                    <>
                        <div className="absolute bottom-2 left-2 flex items-center z-50">
                            <ToggleStatus 
                                isPublished={isPublished} 
                                model="LibraryItem"
                                endpoint="LeumasAPI" 
                                itemId={model} 
                                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 LibraryItemCard;