leumas-private-shared/src/Cards/Helpers/handleCardClick.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

// useHandleCardClick.js

import { useCallback } from 'react';
import { useAuthUser } from 'react-auth-kit';

/**
 * A custom hook that creates a click handler function for card components.
 *
 * @param {React.ComponentType<any>} Component - The component to be rendered.
 * @param {object} props - The props to pass to the component.
 * @param {Function} setMode - The state setter function to set the mode.
 * @returns {Function} - The click handler function.
 */
const useHandleCardClick = (Component, props, setMode) => {
    const auth = useAuthUser(); // Get auth details from react-auth-kit

    const handleClick = useCallback((e) => {
        e.stopPropagation(); // To prevent event bubbling if necessary

        // Check if the user is logged in with valid id and token
        if (auth()?.id && auth()?.token) {
            setMode(<Component {...props} />);
        } else {
            // Handle the case when the user is not logged in or does not have valid credentials
            alert('You must be logged in to view this content.');
        }
    }, [auth()?.id, Component, props, setMode]);

    return handleClick;
};

export default useHandleCardClick;