leumas-universal-crud-react/src/LMS-WildCard-Helpers/UniversalCrud/SaveButton.jsx

Leumas Universal CRUD to a dynamic Endpoint, Setup your own Dynamic Endpoint and Use Leumas API to send to your MONGO clusters

import React, { useState } from 'react';
import useAuthUser from 'react-auth-kit/hooks/useAuthUser';
import { createItem, editItem } from "./UniversalCrudHelpers";
import { AtomSpinner } from 'react-epic-spinners';
import { useTheme } from "../../Theme/ThemeContext";

const lightThemeColors = {
  background: '#FAFAFA',
  primary: '#0077C0',
  secondary: '#C7EEFF',
  text: '#1D242B',
};

const darkThemeColors = {
  background: '#1D242B',
  primary: '#0077C0',
  secondary: '#2A3B4D',
  text: '#FAFAFA',
  cardText: '#E0E0E0',
};

const useColors = (theme) => {
  return theme === 'dark' ? darkThemeColors : lightThemeColors;
};

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 { theme } = useTheme();
  const colors = useColors(theme);

  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);
      alert("Did Not Save");
      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
    };
    console.log("Here is the data passed in ", data);
    console.log("Here is the edit data we are sending ", dataToSubmit);
    try {
      const res = await editItem(model, selectedItemId, dataToSubmit, "LeumasAPI", auth?.token);
      console.log(res);
      setStatus('success');
      alert("Edit Successful");
      if (onSuccess && typeof onSuccess === 'function') {
        onSuccess();  // Call the onSuccess method passed as prop
      }
    } catch (err) {
      console.log(err);
      alert("Did Not Edit \n Reason: " + JSON.stringify(err, null, 2));
      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
    }
  };

  const buttonStyle = {
    backgroundColor: colors.primary,
    color: colors.text,
    borderRadius: '10px',
    padding: '8px 20px',
    fontSize: '1.2rem',
    border: `1px solid ${colors.secondary}`,
    width: '100%',
    maxWidth: '150px',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  };

  return (
    <button
      className={`${styles} mt-3`}
      style={buttonStyle}
      onClick={editMode ? handleEdit : handleSubmit}
    >
      {isLoading ? (
        <>
          Saving...
          <AtomSpinner />
        </>
      ) : (
        "Save"
      )}
    </button>
  );
}

export default SaveButton;