dzNavitski

[{"type":4,"data":{"href":"http://127.0.0.1:8080/","width":1136,"height":856},"timestamp":1676893801472},{"type":2,"data":{"node":{"type":0,"childNodes":[{"type":2,"tagName":"html","attributes":{},"childNodes":[{"type":2,"tagName":"head","attributes":{},"childNodes":[{"type":2,"tagName":"link","attributes":{"rel":"stylesheet","href":"https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"},"childNodes":[],"id":4},{"type":3,"textContent":"\n","id":5},{"type":2,"tagName":"script","attributes":{"src":"https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"},"childNodes":[],"id":6},{"type":3,"textContent":"\n","id":7},{"type":2,"tagName":"script","attributes":{"type":"module"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":9}],"id":8},{"type":3,"textContent":"\n\n","id":10}],"id":3},{"type":2,"tagName":"body","attributes":{},"childNodes":[{"type":2,"tagName":"popup-info","attributes":{"img":"img/alt.png","data-text":"Your card validation code (CVC) is an extra security feature — it is 

dzNavitski

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
<script type="module">
  // @ts-ignore
  const events = [];

  const stopFn = rrweb.record({

dzNavitski

TypeScript supports Pick to allow you to get a "subset" object type of a given type, but there is no built-in Pick for deeper nested fields.

If you have a function that takes a large object as argument, but you don't use all of its fields, you can use Pick, Pick2, Pick3, etc to narrow down the input type to be only just what you need. This will make it easier to test your function, because when mocking the input object, you don't need to pass all fields of the "large" object.

dzNavitski

import React from 'react';

function onlyChild(children) {
  return Array.isArray(children) ? children[0] : children;
}

export function combineContext(contexts) {
  class Provider extends React.Component {
    render() {
      const init = this.props.children;

dzNavitski

NGRX Data

A higher-order service abstraction for NGRX. It eliminates the boilerplate for CRUD operations with lists.

provideStore({ pizza: entityReducer('pizza') })

const entity = thie.entityService<Pizza>('pizza', this.pizzaService);
entity.query();

const collection$ = this.store.select(state =&gt; state.pizza.collection);

dzNavitski

module.exports = {
  root: true, // make to not take in any user specified rules in parent folders
  parser: 'babel-eslint',
  extends: ['airbnb', 'prettier', 'prettier/flowtype', 'prettier/react'],
  env: {
    browser: true,
    node: true,
    jest: true,
  },
  plugins: ['react', 'import', 'flowtype'],

dzNavitski

/**
 * Prevent body scroll and overscroll.
 * Tested on mac, iOS chrome / Safari, Android Chrome.
 *
 * Based on: https://benfrain.com/preventing-body-scroll-for-modals-in-ios/
 *           https://stackoverflow.com/a/41601290
 *
 * Use in combination with:
 * html, body {overflow: hidden;}
 *

dzNavitski

export const apiValidate = action$ => {
    return action$.ofType(validateRequestAction)
        .debounceTime(250)
        .switchMap((action) => (
            Observable.ajax({
                url: url,
                method: 'GET',
                crossDomain: true,
                headers: {
                    "Content-Type": 'application/json'

dzNavitski

const uploadDocumentEpic = action$ =>
    action$.ofType(UPLOAD_DOCUMENT).switchMap(action => {
        const {id, data} = action.payload
        const sub = new Subject()
        const requester = Observable.fromPromise(
            axios({
                url: 'https://api.foo.com',
                data: {
                    file: data
                },

dzNavitski

const editEpic = (action$, store) => action$
    .ofType(t.EDIT_UPDATE)
    .debounceTime(100)
    .mergeMap((action) => {
        const { path } = action.meta;

        return validate$()
            .delay(3000)
            .map(() => modelActions.modelSetPendingValidation({ value: false, path: path }))
            .takeUntil(