leumas-private-shared/src/LMS-WildCard-Helpers/UniversalCrud/SaveButton.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 {LeumasBaseStyle} from "../../../styles/baseStyles";
import {useAuthUser} from "react-auth-kit";
import {createItem , editItem} from "./UniversalCrudHelpers"
import Spinner2 from "../../../components/Loaders/Spinner2"
import {useState} from "react"
import React from 'react';
const SaveButton = ({ model, data, isLoading, setIsLoading, setMessage, setMessageType, onSuccess , editMode , selectedItemId , styles }) => {
    const auth = useAuthUser();
    const [status, setStatus] = useState(null);  // "success", "error", or null

    const handleSubmit = async () => {

        const dataToSubmit={
            "model" : model,
            "owner" : auth()?.id,
            "endpoint": "LeumasAPI",
            data
        }
        try {
            const res = await createItem(model, "LeumasAPI", dataToSubmit, auth()?.token);
            console.log(res);
            setStatus('success');
            if (onSuccess && typeof onSuccess === 'function') {
                onSuccess();  // Call the onSuccess method passed as prop
              }
          } catch (err) {
            console.log(err);
            setStatus('error');
            setMessageType("error");
            setMessage("Error creating model " + err);
          } finally {
            if (status === 'success') {
              setMessageType("success");
              setMessage("Success in creating model, please refresh to view");
            }
            setIsLoading(false);
            setTimeout(() => {
              setMessageType(null);
              setMessage(null);
            }, 30000);  // Hide message after 30 seconds
          }
    }

    const handleEdit = async() => {
      const dataToSubmit={
        "model" : model,
        "owner" : auth()?.id,
        "endpoint": "LeumasAPI",
        data
    }
    try {
        const res = await editItem(model, selectedItemId , "LeumasAPI", dataToSubmit, auth()?.token);
        console.log(res);
        setStatus('success');
        if (onSuccess && typeof onSuccess === 'function') {
            onSuccess();  // Call the onSuccess method passed as prop
          }
      } catch (err) {
        console.log(err);
        setStatus('error');
        setMessageType("error");
        setMessage("Error editing model " + err);
      } finally {
        if (status === 'success') {
          setMessageType("success");
          setMessage("Success in edit model, please refresh");
        }
        setIsLoading(false);
        setTimeout(() => {
          setMessageType(null);
          setMessage(null);
        }, 30000);  // Hide message after 30 seconds
      }
    }

    return (
      <button className={`border-2 w-full max-w-[50px] max-h-[50px] rounded-lg p-2 bg-black text-white hover:border-electric-blue hover:text-electric-blue ${styles} `} 
      onClick={editMode ? handleEdit : handleSubmit}>
        {isLoading ? (
          <>
            Saving... 
            <Spinner2 loading={isLoading} />
          </>
        ) : (
          "Save"
        )}
      </button>
    );
}

export default SaveButton;