leumas-private-shared/src/LMS-WildCard-Helpers/UniversalCrud/CreateItem.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 { createItem } from "./UniversalCrudHelpers";
import { AtomSpinner } from 'react-epic-spinners';
import { glassmorphic, glassButton, neuromorphicInput2 } from "../../../styles/tailwindStyles";
import {LeumasBaseStyle} from "../../../styles/baseStyles"
import {useAuthUser} from "react-auth-kit"
import React from 'react';

const CreateItem = ({ model, endpoint, propData , token }) => {

  const [createdItem, setCreatedItem] = useState(null);

  const [formData, setFormData] = useState({
    model: model || '',
    endpoint: endpoint || 'LeumasAPI',
    data: propData || {}
  });
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
const auth = useAuthUser();

  useEffect(() => {
    if (!token) {
      // Handle unauthenticated scenario here
      console.log("No token you must login")
    }
  }, [token]);

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

  const [isVisible, setIsVisible] = useState(true); // New state for visibility control

  const handleCreate = async () => {

    const confirmation = window.confirm("Are you sure you want to create?");

    if (!confirmation) {
      return; // Early return if user clicked on "Cancel"
    }


    setIsLoading(true);
    setError(null);
    setIsVisible(true); // Ensure that the message is visible initially

    try {
      console.log("Sending model:", formData);
      const result = await createItem(`${formData.model}`, formData.endpoint || "LeumasAPI", formData, token);

      setIsLoading(false);
      setCreatedItem(result);
      
      // Set up a timer to hide the messages after 15 seconds
      setTimeout(() => {
        setIsVisible(false);
      }, 15000);
    } catch (error) {
      setIsLoading(false);
      setError("Failed to create the item.");
      console.error("Failed to create the item:", error);

      // Set up a timer to hide the messages after 15 seconds
      setTimeout(() => {
        setIsVisible(false);
      }, 15000);
    }
  };

  
 
  useEffect(() => {
    setFormData(propData);
  }, [propData]);


  return (
    <div className='flex flex-col gap-2'>
      {
        (!model || !endpoint || !propData) && (
          <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="endpoint" placeholder="Endpoint" value={formData.endpoint} onChange={handleChange} />
            <textarea className={neuromorphicInput2} name="data" placeholder="Data" value={JSON.stringify(formData.data, null, 2)} disabled />

          </div>
        )
      }
      <button className={`${LeumasBaseStyle} ${glassButton}`} onClick={handleCreate}>Create</button>

      {isLoading && (
        <div className="mt-4 flex justify-center">
          <AtomSpinner color="blue" />
        </div>
      )}
{createdItem && isVisible && (
  <div className={`relative mt-4 bg-green-200 text-green-700 max-w-[150px] min-w-full p-3 rounded-md transition-opacity duration-1000 ease-out ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
    <div className="absolute top-0 right-0 h-2 w-full bg-blue-500 animate-decreaseBorder" style={{ animationDuration: '15s' }}></div>
    <pre>{JSON.stringify(createdItem, null, 2)}</pre>
  </div>
)}

{error && isVisible && (
  <div className={`relative mt-4 bg-red-200 text-red-700 p-3 rounded-md transition-opacity duration-1000 ease-out ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
    <div className="absolute top-0 right-0 h-2 w-full bg-blue-500 animate-decreaseBorder" style={{ animationDuration: '15s' }}></div>
    {error}
  </div>
)}



    </div>
  )
}

export default CreateItem;