UNPKG

leumas-private-shared

Version:

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

118 lines (92 loc) 3.95 kB
import React, { useState, useEffect } from 'react'; import { getItemsByOwner } from "./UniversalCrudHelpers"; import { AtomSpinner } from 'react-epic-spinners'; import { glassmorphic, neuromorphicInput2, glassButton } from "../../styles/tailwindStyles"; import useAuthUser from 'react-auth-kit/hooks/useAuthUser'; import { ItemRenderer } from './ItemRenderer'; // Import the ItemRenderer component import SchemaSelector from "../Schemas/SchemaSelector.jsx"; const GetAllByOwner = ({ model, id, endpoint, token, CardComponent, setMode , handleSchemaSelect }) => { const auth = useAuthUser(); // console.log("Getting all for the owner " , model , id) const [formData, setFormData] = useState({ model: model || '', id: auth?.id || auth?.user?._id || id || 'Please Login', endpoint: endpoint || 'LeumasAPI' || '', token: token || auth?.token || '', card: <div>model.id</div> }); // console.log("Default data to send " , formData , ) 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.id && formData.endpoint) { handleGetById(); } }, [formData]); const handleChange = (e) => { setFormData(prevState => ({ ...prevState, [e.target.name]: e.target.value })); } const handleGetById = async () => { setIsLoading(true); setError(null); try { const item = await getItemsByOwner(model, auth?.id || auth?.user?._id, "LeumasAPI", auth?.token); console.log(item); setItemData(item); setIsLoading(false); } catch (error) { setIsLoading(false); setError("Failed to fetch the item by ID."); console.error("Failed to fetch the item by ID:", error); } }; return ( <div className='flex flex-col gap-2'> {/* Ignore this , this is meant for LeumasAI and Admin Applications only */} {/* {handleSchemaSelect ? <div className='flex p-2'> <SchemaSelector onSchemaSelect={handleSchemaSelect} /> <button className={glassButton} onClick={handleGetById}> {modelIcon && <modelIcon className='mr-2' />} Fetch </button> </div> : <div> </div>} */} {(!formData.id || !formData.endpoint) && ( <div className={glassmorphic + " p-4 space-y-4 max-w-xs text-xs"}> {/* Use SchemaSelector instead of an input for model */} <input className={neuromorphicInput2} name="id" placeholder="ID" value={formData.id} onChange={handleChange} /> <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 GetAllByOwner;