leumas-private-shared/src/LMS-WildCard-Helpers/UniversalCrud/GetAllItems.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 { getAllItems } from "./UniversalCrudHelpers";  // Assuming you have a function like this for getting all items
import { AtomSpinner } from 'react-epic-spinners';
import { glassmorphic, neuromorphicInput2, glassButton } from "../../../styles/tailwindStyles";
import { useAuthUser } from "react-auth-kit";
import { ItemRenderer } from '../../ItemRenderer'; // Import the ItemRenderer component
import SchemaSelector from "../Schemas/SchemaSelector.jsx";

const GetAllItems = ({ model, endpoint, token, CardComponent, setMode, handleSchemaSelect }) => {
    const auth = useAuthUser();

    const [formData, setFormData] = useState({
        model: model || '',
        endpoint: endpoint || 'LeumasAPI' || '',
        token: token || auth()?.token || '',
        card: <div>model.id</div>
    });
    
    const [itemData, setItemData] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);
    const [modelIcon, setModelIcon] = useState(null);

    useEffect(() => {
        if (!token) {
            // Handle unauthenticated scenario here
        }
    }, [token]);

    useEffect(() => {
        if (formData.model && formData.endpoint) {
            handleGetAll();
        }
    }, [formData , auth()?.id]);

    const handleChange = (e) => {
        setFormData(prevState => ({ ...prevState, [e.target.name]: e.target.value }));
    }

    const handleGetAll = async () => {
        setIsLoading(true);
        setError(null);
        try {
            const items = await getAllItems(model, "LeumasAPI", auth()?.token);  // This assumes you have a function to get all items
            console.log(items);
            setItemData(items);
            setIsLoading(false);
        } catch (error) {
            setIsLoading(false);
            setError("Failed to fetch all items.");
            console.error("Failed to fetch all items:", error);
        }
    };

    return (
        <div className='flex flex-col gap-2'>
            <div className='flex p-2'>
                <SchemaSelector onSchemaSelect={handleSchemaSelect} />
                <button className={glassButton} onClick={handleGetAll}>
                    {modelIcon && <modelIcon className='mr-2' />} 
                    Fetch
                </button>
            </div>

            {(!formData.endpoint) && (
                <div className={glassmorphic + " p-4 space-y-4 max-w-xs text-xs"}>
                    <input className={neuromorphicInput2} name="endpoint" placeholder="Endpoint" value={formData.endpoint} onChange={handleChange} />
                </div>
            )}

            {isLoading && (
                <div className="mt-4 flex justify-center">
                    <AtomSpinner color="blue" />
                </div>
            )}

            {error && (
                <div className="mt-4 bg-red-200 text-red-700 p-3 rounded-md">
                    {error}
                    <div className="mt-2 flex justify-center">
                        <AtomSpinner color="red" />
                    </div>
                </div>
            )}

            <ItemRenderer 
                model={model} 
                renderData={itemData} 
                setMode={setMode} 
                setIcon={setModelIcon} 
                token={auth()?.token}
            />
        </div>
    )
}

export default GetAllItems;