leumas-private-shared/src/LMS-WildCard-Helpers/UniversalCrud/ToggleStatus.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 } from 'react';
import { togglePublishStatus } from "./UniversalCrudHelpers";
import React from 'react';
const ToggleStatus = ({ model, isPublished: initialIsPublished, endpoint, itemId, token, onToggleChange }) => {
  const [isPublishing, setIsPublishing] = useState(false);
  const [isPublished, setIsPublished] = useState(initialIsPublished);

  const handleToggle = async (e) => {
    e.stopPropagation();
    setIsPublishing(true);
    confirm("Are you sure you want to change public status to " ,  isPublishing)
    try {
        await togglePublishStatus(model, endpoint, itemId, token);  // Here, we're using the 'model' prop
        const newStatus = !isPublished;
        setIsPublished(newStatus);
        onToggleChange(newStatus);
    } catch (error) {
        console.error("Error toggling status:", error);
    } finally {
        setIsPublishing(false);
    }
  };

  return (
<div 
  className={`relative w-12 h-4 transition-colors duration-300 ${isPublished ? 'bg-blue-400' : 'bg-black'} rounded-full`}
>
  <button 
    onClick={handleToggle} 
    className={`absolute top-0 left-0 h-4 w-4 bg-white rounded-full shadow-md transition-transform duration-300`}
    disabled={isPublishing}
    style={{
      transform: isPublished ? 'translateX(2rem)' : 'translateX(0)',
      transition: 'transform 0.3s ease-in-out'
    }}
  >
    {isPublishing && <span className="loader"></span>}
  </button>
</div>

  );
};

export default ToggleStatus;