setting

blocks.js

/* eslint-disable camelcase */
/**
 * WordPress dependencies
 */
import apiFetch from '@wordpress/api-fetch';
import { Fragment, useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
 * Components
 */
import SingleBlock from './single-block';

const API_PATH = '/wp/v2/settings';
const DEMO_LINK = 'https://gutslider.com/demos';

const BlocksControls = () => {
    const [fixedContentStatus, setFixedContentStatus] = useState(null);
    const [anyContentStatus, setAnyContentStatus] = useState(null);
    const [testimonialSliderStatus, settestimonialSliderStatus] = useState(null);
    const [postSliderStatus, setPostSliderStatus] = useState(null);
    const [photoCarouselStatus, setPhotoCarouselStatus] = useState(null);
    const [logoCarouselStatus, setLogoCarouselStatus] = useState(null);

    const [dataSaveNotice, setDataSaveNotice] = useState(false);

    const updateStatus = async (newStatus, type) => {
        try {
            const response = await apiFetch({
                path: API_PATH,
                method: 'POST',
                data: { [type]: newStatus }
            });

            setFixedContentStatus(response.gut_fixed_content_slider);
            setAnyContentStatus(response.gut_any_content_slider);
            settestimonialSliderStatus(response.gut_testimonial_slider);
            setPostSliderStatus(response.gut_post_slider);
            setPhotoCarouselStatus(response.gut_photo_carousel);
            setLogoCarouselStatus(response.gut_logo_carousel);
            setDataSaveNotice(true);
        } catch (error) {
            console.error('Error updating content slider status', error);
        }
    };

    // Get the current status of the content slider
    useEffect(() => {
        apiFetch({ path: API_PATH }).then(
            ({
                gut_fixed_content_slider,
                gut_any_content_slider,
                gut_testimonial_slider,
                gut_post_slider,
                gut_photo_carousel,
                gut_logo_carousel
            }) => {
                setFixedContentStatus(gut_fixed_content_slider);
                setAnyContentStatus(gut_any_content_slider);
                settestimonialSliderStatus(gut_testimonial_slider);
                setPostSliderStatus(gut_post_slider);
                setPhotoCarouselStatus(gut_photo_carousel);
                setLogoCarouselStatus(gut_logo_carousel);
            }
        );
    }, []);

    useEffect(() => {
        const timeout = setTimeout(() => {
            setDataSaveNotice(false);
        }, 2000);
        return () => clearTimeout(timeout);
    }, [dataSaveNotice]);

    return (
        <Fragment>
            {dataSaveNotice && (
                <div className="gutslider-data-update-notice">
                    <span className="notice-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                            <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z" />
                        </svg>
                    </span>
                    {__('Changes saved successfully.', 'slider-blocks')}
                    <button
                        className="notice-close"
                        onClick={() => {
                            setDataSaveNotice(false);
                        }}
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                        </svg>
                    </button>
                </div>
            )}

            <div className="blocks-controls">
                <SingleBlock
                    name="Any Content Slider"
                    description={__(
                        'Create sliders with any content you want. You can add images, videos, text, buttons, and more.',
                        'slider-blocks'
                    )}
                    demoLink={DEMO_LINK}
                    activeBlock={anyContentStatus}
                    onClick={() => updateStatus(!anyContentStatus, 'gut_any_content_slider')}
                />
                <SingleBlock
                    name="Fixed Content Slider"
                    description={__('Create sliders with fixed content. You can add images, text and button', 'slider-blocks')}
                    demoLink={DEMO_LINK}
                    activeBlock={fixedContentStatus}
                    onClick={() => updateStatus(!fixedContentStatus, 'gut_fixed_content_slider')}
                />
                <SingleBlock
                    name="Testimonial Slider"
                    description={__('Showcase your custom testimonials or reviews in sliding mode easily.', 'slider-blocks')}
                    demoLink={DEMO_LINK}
                    activeBlock={testimonialSliderStatus}
                    onClick={() => updateStatus(!testimonialSliderStatus, 'gut_testimonial_slider')}
                />
                <SingleBlock
                    name="Post Slider"
                    description={__('Showcase your blog posts in sliding mode easily and customize it as per your need.', 'slider-blocks')}
                    demoLink={DEMO_LINK}
                    activeBlock={postSliderStatus}
                    onClick={() => updateStatus(!postSliderStatus, 'gut_post_slider')}
                />
                <SingleBlock
                    name="Photo Carousel"
                    description={__('Create an awesome carousel with your photos very easily in a short time.', 'slider-blocks')}
                    demoLink={DEMO_LINK}
                    activeBlock={photoCarouselStatus}
                    onClick={() => updateStatus(!photoCarouselStatus, 'gut_photo_carousel')}
                />
                <SingleBlock
                    name="Logo Carousel"
                    description={__('Create an awesome carousel with your client logos very easily in a short time.', 'slider-blocks')}
                    demoLink={DEMO_LINK}
                    activeBlock={logoCarouselStatus}
                    onClick={() => updateStatus(!logoCarouselStatus, 'gut_logo_carousel')}
                />
            </div>
        </Fragment>
    );
};

export default BlocksControls;

single-block.js

/**
 * WordPress dependencies
 */
import { ToggleControl } from '@wordpress/components';

const SingleAsset = ({ name, description, active, onClick }) => {
    return (
        <div className="single-asset-wrapper">
            <div className="single-block-head flex">
                <h3 className="single-block-title">{name}</h3>
                <ToggleControl checked={active} onChange={onClick} />
            </div>

            <p className="single-block-description">{description}</p>
        </div>
    );
};

export default SingleAsset;