hub-insurance/wp-content/plugins/visual-regression-tests/components/alert-actions/script.js

import Dropdown from '../../assets/scripts/dropdown';

class VrtsAlertActions extends window.HTMLElement {
	constructor() {
		super();
		this.dropdown = null;
		this.setAsReadTimeout = null;
		this.resolveElements();
		this.bindFunctions();
		this.bindEvents();
	}

	resolveElements() {
		this.$actionButtons = this.querySelectorAll(
			'[data-vrts-alert-action]'
		);
		this.$hideElementsForm = this.querySelector(
			'[data-vrts-hide-elements-form]'
		);
		this.$hideElementsModal = document.getElementById(
			'vrts-modal-hide-elements'
		);
		this.$spinner = this.querySelector( '.spinner' );
		this.$success = this.querySelector(
			'.vrts-alert-actions__modal-action-success'
		);
	}

	bindFunctions() {
		this.onActionClick = this.onActionClick.bind( this );
		this.onHideElementsFormSubmit =
			this.onHideElementsFormSubmit.bind( this );
		this.onHideElementsModalClose =
			this.onHideElementsModalClose.bind( this );
	}

	bindEvents() {
		this.$actionButtons.forEach( ( item ) => {
			item.addEventListener( 'click', this.onActionClick );
		} );
		this.$hideElementsForm.addEventListener(
			'submit',
			this.onHideElementsFormSubmit
		);
		this.$hideElementsModal.addEventListener(
			'hide',
			this.onHideElementsModalClose
		);
	}

	connectedCallback() {
		this.dropdown = Dropdown( this );
		this.setAsReadOnView();
	}

	setAsReadOnView() {
		this.$actionButtons.forEach( ( action ) => {
			const isReadStatusAction =
				action.getAttribute( 'data-vrts-alert-action' ) ===
				'read-status';
			const isUnread =
				action.getAttribute( 'data-vrts-action-state' ) === 'primary';

			if ( isReadStatusAction && isUnread ) {
				this.setAsReadTimeout = setTimeout( () => {
					action.click();
				}, 1000 );
			}
		} );
	}

	onHideElementsFormSubmit( e ) {
		e.preventDefault();
		const $form = e.currentTarget;
		const formData = new window.FormData( $form );
		const postId = formData.get( 'post_id' );

		this.$spinner.classList.add( 'is-active' );
		this.$success.classList.remove( 'is-active' );

		fetch( `${ window.vrts_admin_vars.rest_url }/tests/post/${ postId }`, {
			method: 'PUT',
			headers: {
				'X-WP-Nonce': window.vrts_admin_vars.rest_nonce,
			},
			body: new URLSearchParams( formData ),
		} )
			.then( ( response ) => {
				return response.json();
			} )
			.then( () => {
				this.$spinner.classList.remove( 'is-active' );
				this.$success.classList.add( 'is-active' );
			} );
	}

	onHideElementsModalClose() {
		this.$success.classList.remove( 'is-active' );
	}

	onActionClick( e ) {
		const $el = e.currentTarget;
		const isLoading = $el.getAttribute( 'data-vrts-loading' ) === 'true';
		const state = $el.getAttribute( 'data-vrts-action-state' );
		const isPrimary = state === 'primary';

		if ( isLoading ) {
			return;
		}

		const action = $el.getAttribute( 'data-vrts-alert-action' );
		const id = $el.getAttribute( 'data-vrts-alert-id' );

		this.handleAction( action, $el, id, isPrimary );
	}

	handleAction( action, $el, id, shouldSetAction ) {
		const restEndpoint = `${ window.vrts_admin_vars.rest_url }/alerts/${ id }/${ action }`;
		const method = shouldSetAction ? 'POST' : 'DELETE';

		let loadingElapsedTime = 0;
		let interval = null;

		const timeout = setTimeout( () => {
			$el.setAttribute( 'data-vrts-loading', 'true' );
			const loadingStartTime = window.Date.now();
			interval = setInterval( () => {
				loadingElapsedTime = window.Date.now() - loadingStartTime;
			}, 50 );
		}, 200 );

		fetch( restEndpoint, {
			method,
			headers: {
				'X-WP-Nonce': window.vrts_admin_vars.rest_nonce,
			},
		} )
			.then( ( response ) => {
				return response.json();
			} )
			.then( () => {
				const loadingTimeoutTime =
					loadingElapsedTime > 0
						? Math.abs( loadingElapsedTime - 400 )
						: 0;

				setTimeout( () => {
					$el.setAttribute( 'data-vrts-loading', 'false' );

					$el.setAttribute(
						'data-vrts-action-state',
						shouldSetAction ? 'secondary' : 'primary'
					);

					const $alert = document.getElementById(
						`vrts-alert-${ id }`
					);

					if ( $alert ) {
						if ( 'false-positive' === action ) {
							$alert.setAttribute(
								'data-vrts-false-positive',
								shouldSetAction ? 'true' : 'false'
							);
						}

						if ( 'read-status' === action ) {
							$alert.setAttribute(
								'data-vrts-state',
								shouldSetAction ? 'read' : 'unread'
							);
						}
					}
				}, loadingTimeoutTime );

				clearTimeout( timeout );
				clearInterval( interval );
			} );
	}

	disconnectedCallback() {
		this.dropdown?.();
		clearTimeout( this.setAsReadTimeout );
		this.$actionButtons?.forEach( ( item ) => {
			item.removeEventListener( 'click', this.onActionClick );
		} );
		this.$hideElementsForm?.removeEventListener(
			'submit',
			this.onHideElementsFormSubmit
		);
		this.$hideElementsModal?.removeEventListener(
			'hide',
			this.onHideElementsModalClose
		);
	}
}

window.customElements.define( 'vrts-alert-actions', VrtsAlertActions );