leumas-private-shared/src/LMS-WildCard-Helpers/UniversalCrud/GetItemById.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 { useState, useEffect } from 'react';
import { AtomSpinner } from 'react-epic-spinners';
import { glassmorphic, neuromorphicInput2, glassButton } from "../../../styles/tailwindStyles";
import { getItemById } from './UniversalCrudHelpers';
import React from 'react';

const GetItemById = ({ model, id, endpoint , token}) => {

  const [formData, setFormData] = useState({
    model: model || '',
    id: id || "LeumasAPI" || '',
    endpoint: endpoint || ''
  });
  const [itemData, setItemData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);


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

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

  const handleGetById = async () => {
    setIsLoading(true);
    setError(null);
    try {
      const item = await getItemById(formData.model, formData.id, formData.endpoint, token);
      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'>
      {
        (!model || !id || !endpoint) && (
          <div className={glassmorphic + " p-4 space-y-4 max-w-xs text-xs"} >
            <input className={neuromorphicInput2} name="model" placeholder="Model" value={formData.model} onChange={handleChange} />
            <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>
        )
      }
      <button className={glassButton} onClick={handleGetById}>Fetch ID</button>

      {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>
      )}

      {itemData && (
        <div>
          {/* Display the fetched item data. Adjust accordingly based on the structure of your data */}
          <pre>{JSON.stringify(itemData, null, 2)}</pre>
        </div>
      )}
    </div>
  )
}

export default GetItemById;