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

const DeleteItem = ({ model, id, endpoint , token , onToggleChange }) => {
    const auth = useAuthUser();
    const userId = auth()?.id;
  const [formData, setFormData] = useState({ model: model || '', id: id || '', endpoint: endpoint || 'LeumasAPI' , userId: userId });
  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 handleDelete = async () => {
    setIsLoading(true);
    setError(null);
    confirm("Are you sure you want to delete this item")
    try {
      const deletedItem = await deleteItem(formData.model, formData.id, formData.endpoint, token);
      setIsLoading(false);
      console.log(deletedItem);
    } catch (error) {
      setIsLoading(false);
      setError("Failed to delete the item.");
      console.error("Failed to delete the item:", 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={`border-2 p-2 rounded-lg shadow-xl`} onClick={handleDelete}>Delete</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 DeleteItem;