glendaviesnz

// where the form is declared a simple string is used to indicated validation type
<input name="firstName" validation="required" />


// an object map is used in the form library to map this string name to a validation method and message
export const validationTypes = {
    required: { validate: validateRequired, message: 'Field is required' },
    email: { validate: validateEmail, message: 'Valid email address required' }
}

glendaviesnz

const componentStates = {
    name: 'userApproval',
    states: {
        [actionTypes.loadUnapprovedUsers]: {
            [ComponentStates.Idle]: { to: ComponentStates.Processing, action: PassthroughAction }
        },
        [actionTypes.loadUnapprovedUsersSuccess]: {
            [ComponentStates.Processing]: { to: ComponentStates.Idle, action: PassthroughAction }
        },
        [actionTypes.loadUnapprovedUsersError]: {

glendaviesnz

export class ChunkingService {
    public chunkSize = 1024 * 1024;
    private _chunkQueue$ = new Subject();
    private _maxConnections = 3;

    constructor(
        private _apiService: apiService,
        private _store: Store<any>) {
        Guard.notNothing(_apiService, '_apiService');
        Guard.notNothing(_store, '_store');

glendaviesnz

export class ChunkingService {
    public chunkSize = 1024 * 1024;
    private _chunkQueue$ = new Subject();
    private _maxConnections = 3;

    constructor(
        private _apiService: apiService,
        private _store: Store<any>) {
        Guard.notNothing(_apiService, '_apiService');
        Guard.notNothing(_store, '_store');

glendaviesnz

// Instead of this ....
const componentStates = {
    name: 'userApproval',
    states: {
        [actionTypes.loadUnapprovedUsers]: {
            [ComponentStates.Idle]: { to: ComponentStates.Processing, action: PassthroughAction }
        },
        [actionTypes.loadUnapprovedUsersSuccess]: {
            [ComponentStates.Processing]: { to: ComponentStates.Idle, action: PassthroughAction }
        },

glendaviesnz

// the component uses an injected componentStateService to register its state transitions

this._componentStateService.addComponentStates(componentStates);

// the component state service is reasonably simple and just maintains a lookup object of all the registered
// state transitions, and also has methods for cleaning these up when components are destroyed

@Injectable()
export class ComponentStateService {
    public componentStates: any = {};

glendaviesnz

chunkQueue$
    .pipe(mergeMap((data) => data, null, maxConnections))
    .subscribe();

glendaviesnz

export function httpUpload(file) {
    return Observable.create((observer) => {
        var config = {
            onUploadProgress: (progressEvent)  => {
                var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                observer.next({ progress: percentCompleted });
            }
        };
        axios.post(`${appConfig.apiUrl}/upload`, file, config)
            .then((response) => {

glendaviesnz

function transform_new_gallery_block_to_unordered_list( $parsed_block ) {
	if ( $parsed_block['blockName'] === 'core/gallery' && strpos( $parsed_block['innerHTML'], 'has-nested-images' ) ) {
		forEach( $parsed_block['innerBlocks'] as &$value ) {
			$value['innerHTML'] = '<li class="blocks-gallery-item">' . $value['innerHTML'] . '</li>';
			$value['innerContent'][0] = '<li class="blocks-gallery-item">' . $value['innerContent'][0] . '</li>';
			$value['innerHTML'] = preg_replace( '/(class="wp-image-(\d+)")/', '$1 data-d="$2"', $parsed_block['innerHTML'] );
			$value['innerContent'][0] = preg_replace( '/(class="wp-image-(\d+)")/', '$1 data-id="$2"', $value['innerContent'][0] );
		}
		$parsed_block['innerHTML'] = preg_replace( '/(<figure.*>)/', '$1<ul ul class="blocks-gallery-grid">', $parsed_block['innerHTML'] );
		$parsed_block['innerHTML'] = preg_replace( '/<\/figure>/', '</ul></figure>', $parsed_block['innerHTML'] );

glendaviesnz

/**
 * External dependencies
 */
import classnames from 'classnames';
import { map, some } from 'lodash';

/**
 * WordPress dependencies
 */
import { RichText, useBlockProps } from '@wordpress/block-editor';