Andrew Goldis agoldis

## invoice.html
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, user-scalable=yes" />
    <title>Invoice INV0002</title>
    <!-- Fonts loading -->
<link
  href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap"
  rel="stylesheet"

## gist:e5bc91870b975939b91cc0299b942dbf
#!/bin/sh

dateDir=`date +%Y-%m-%d-%H-%M`
baseDir="/tmp/$dateDir"

mkdir -p $baseDir

for specName in `find ./cypress/integration/ -type f -printf "%f\n"`; do
  rm -rf ./test-results/mochawesome
  workDir=$baseDir/$specName

## gist:e82d12a5782b1c7cbdc6f08af8344740
User types "a"             User types "b"                                             Client's value is "ab"
                                                                                      ^
    +----------------------------+------------------------------------------------------------------------------>
    +                            +                                                    |
                                                                                      |
    +--------------------------+ +--------------------------+                         |
        debounce rate          |     debounce rate          |                         |
                               |                            |                         |
                               |                            |                         +
                               v                            v                   this.isSaving = false

## deriveState.js
import {
  booksSummarySelector,
  usersSummarySelector,
  userDetailsSelector,
  bookDetailsSelector
} from "./selectors";

class NotRealState {
  constructor(state) {
    Object.defineProperty(this, "_state", {

## deriveStateSelectors.js
import { compose } from "redux";
import { createSelector } from "reselect";

const getBooks = state => state.books;
const getUsers = state => state.users;
const getComments = state => state.comments;

const usersSummary = createSelector(
  [getUsers, getComments],
  (users, comments) =>

## deriveState.js
/* other derived state methods */

const moveToApp = state =>
  Object.defineProperties(state, {
    users: {
      get: function() {
        return this.app.users;
      },
      enumerable: false,
      configurable: true

## deriveState.js
import { compose } from "redux";

const usersSummary = function() {
  return this.users.map(user => ({
    ...user,
    booksCount: user.books.length,
    commentsCount: this.comments.filter(c => c.user === user.id).length
  }));
};

## storeEnhancer.js
import { deriveState } from "./deriveState";

export const enhanceStore = createStore => (
  reducer,
  preloadedState,
  enhancer
) => {
  const store = createStore(reducer, preloadedState, enhancer);
  const _getState = store.getState;
  store.getState = () => deriveState(_getState());

## deriveState.js
import { compose } from "redux";

const usersSummary = function() {
  return this.users.map(user => ({
    ...user,
    booksCount: user.books.length,
    commentsCount: this.comments.filter(c => c.user === user.id).length
  }));
};

## store.js
import { createStore, applyMiddleware, compose } from "redux";
import { initialState } from "./initialState";
import { reducer } from "./reducer";
import { enhanceStore } from "./storeEnhancer";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export const store = createStore(
  reducer,
  initialState,
	<!DOCTYPE html>
	<html lang="en-US">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1, user-scalable=yes" />
	<title>Invoice INV0002</title>
	<!-- Fonts loading -->
	<link
	href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap"
	rel="stylesheet"
	#!/bin/sh

	dateDir=`date +%Y-%m-%d-%H-%M`
	baseDir="/tmp/$dateDir"

	mkdir -p $baseDir

	for specName in `find ./cypress/integration/ -type f -printf "%f\n"`; do
	rm -rf ./test-results/mochawesome
	workDir=$baseDir/$specName
	User types "a" User types "b" Client's value is "ab"
	^
	+----------------------------+------------------------------------------------------------------------------>
	+ + \|
	\|
	+--------------------------+ +--------------------------+ \|
	debounce rate \| debounce rate \| \|
	\| \| \|
	\| \| +
	v v this.isSaving = false
	import {
	booksSummarySelector,
	usersSummarySelector,
	userDetailsSelector,
	bookDetailsSelector
	} from "./selectors";

	class NotRealState {
	constructor(state) {
	Object.defineProperty(this, "_state", {
	import { compose } from "redux";
	import { createSelector } from "reselect";

	const getBooks = state => state.books;
	const getUsers = state => state.users;
	const getComments = state => state.comments;

	const usersSummary = createSelector(
	[getUsers, getComments],
	(users, comments) =>
	/* other derived state methods */

	const moveToApp = state =>
	Object.defineProperties(state, {
	users: {
	get: function() {
	return this.app.users;
	},
	enumerable: false,
	configurable: true
	import { compose } from "redux";

	const usersSummary = function() {
	return this.users.map(user => ({
	...user,
	booksCount: user.books.length,
	commentsCount: this.comments.filter(c => c.user === user.id).length
	}));
	};
	import { deriveState } from "./deriveState";

	export const enhanceStore = createStore => (
	reducer,
	preloadedState,
	enhancer
	) => {
	const store = createStore(reducer, preloadedState, enhancer);
	const _getState = store.getState;
	store.getState = () => deriveState(_getState());
	import { createStore, applyMiddleware, compose } from "redux";
	import { initialState } from "./initialState";
	import { reducer } from "./reducer";
	import { enhanceStore } from "./storeEnhancer";

	const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ \|\| compose;

	export const store = createStore(
	reducer,
	initialState,