leumas-private-shared/src/LMS-WildCard-Helpers/UniversalCrud/CustomDropdown.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, { useEffect, useState } from 'react';
import { getAllItems } from './UniversalCrudHelpers';
import ToggleStatus from './ToggleStatus';
import DeleteItem from "./DeleteItem"
import {LeumasBaseStyle} from "../../../styles/baseStyles"
import { useAuthUser } from "react-auth-kit";


const CustomDropdown = ({ model, modelArray, endpoint, token, onSelectedChange , color = "blue"}) => {
    const [isOpen, setIsOpen] = useState(false);
    const [selected, setSelected] = useState("--Select a boilerplate--");
    const [models, setModels] = useState([]);
    const auth = useAuthUser();
    console.log("Model array : ",modelArray , model)
    useEffect(() => {
        const fetchItems = async () => {
            try {
                const items = await getAllItems(model, endpoint, token);
                setModels(items);
            } catch (error) {
                console.error("Error fetching boilerplates:", error);
            }
        };

        if (!modelArray) {
            fetchItems();
        } else {
            setModels(modelArray);
        }

    }, [model, endpoint, token, modelArray]);

    const handleSelect = (item) => {
        setSelected(item?.title || item?.name);
        setIsOpen(false);
        onSelectedChange(item);
    };

    return (
        <div className={`relative w-full  `}>
            <fieldset 
                className={`w-full border p-2 cursor-pointer rounded-lg px-4 `}
                onClick={() => setIsOpen(!isOpen)}
            >
                <legend className='text-xl font-bold'>{model}(s)</legend>
                {selected}
            </fieldset>
            {isOpen && (
                <div className={`absolute top-full left-0 w-full border mt-2 z-50 bg-white text-black rounded-lg max-h-[150px] overflow-y-scroll  ${LeumasBaseStyle}`}>
                    {models.map((modelItem, index) => (
                        <div 
                            key={index} 
                            className="p-2 border-2 rounded-lg hover:border-electric-blue text-black  flex justify-between cursor-pointer"
                            onClick={() => handleSelect(modelItem)}
                        >


                        <div className='flex flex-col gap-2'>
                            {modelItem?.title || modelItem?.name || modelItem?.collectionName || modelItem?.gptPrompt?.substring(0,10)}...
                            
                            {modelItem?.owner?._id === auth()?.id && (
                                <ToggleStatus 
                                    model={model}
                                    isPublished={modelItem?.isPublished || modelItem?.public}
                                    endpoint={endpoint}
                                    itemId={modelItem._id} 
                                    token={token}
                                    onToggleChange={() => {}}
                                />
                            )}
                        </div>
                            {modelItem?.owner?._id === auth()?.id && (
                                <DeleteItem 
                                    model={model}
                                    isPublished={modelItem?.isPublished || modelItem?.public}
                                    endpoint={endpoint}
                                    id={modelItem._id} 
                                    token={token}
                                    onToggleChange={() => {}}
                                />
                            )}

                            


                        </div>
                    ))}
                </div>
            )}
        </div>
    );
};

export default CustomDropdown;