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

const EditItem = ({ model, id, endpoint, data: propData , token }) => {


  const [formData, setFormData] = useState({
    model: model || "Endpoint",
    id: id || '',
    endpoint: "LeumasAPI",
    data: propData || {}
  });
  
  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 handleEdit = async () => {
    setIsLoading(true);
    setError(null);
    console.log("form data to submit " , formData)
    try {
      const editedItem = await editItem(formData.model, formData.id, formData.data, formData.endpoint, token);
      setIsLoading(false);
      console.log(editedItem);
    } catch (error) {
      setIsLoading(false);
      setError("Failed to edit the item.");
      console.error("Failed to edit the item:", error);
    }
  };

  return (
    <div className='flex flex-col gap-2'>
      {
        (!model || !id || !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="id" placeholder="ID" value={formData.id} onChange={handleChange} />
            <input className={neuromorphicInput2} name="endpoint" placeholder="Endpoint" value={formData.endpoint} onChange={handleChange} />
            <input className={neuromorphicInput2} name="data" placeholder="Data" value={formData.data} onChange={handleChange} />
          </div>
        )
      }
      <button className={LeumasBaseStyle} onClick={handleEdit}>Edit</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>
      )}
    </div>
  )
}

export default EditItem;