istarkov

// promise
const sleep = (timeout, v) => new Promise(r => setTimeout(() => r(v), timeout));
// series to call
const series = [() => sleep(1000, 1), () => sleep(1000, 2), () => sleep(1000, 3)];

// serialize
const r = series
  .reduce(
    (m, p) => m.then(v => Promise.all([...v, p()])),
    Promise.resolve([])

istarkov

The problem: old ubuntu does not support chrome http2 as chrome uses APLN which is exists in openssl ^1.0.2h

create file /etc/apt/sources.list.d/nginx.list and add lines

deb http://nginx.org/packages/mainline/ubuntu/ trusty nginx
deb-src http://nginx.org/packages/mainline/ubuntu/ trusty nginx

istarkov

I want to hold ordering of some items in SQL, like field in a table index: 0,1,2,3,4,... and I have operation moveItem

If I want to move item from index: 1 to index: 3 I can do

delete from table where index = 1;
update table set index = index - 1 where index > 1
update table set index = index + 1 where index >=3
insert into table (index) values (3)

istarkov

How to style React components

If you use sass and css-modules and want to restyle some base component without changing its code. (base component already use css-modules and exposes styles property)

I know two way how to do it.

1. Using composes css-modules operator. Just extend classes you need, then in javascript code combine both styles as {...baseStyle, ...myStyleSimple}

istarkov

/* @flow */
import * as React from 'react'
import { compose, withProps } from 'recompose'
import type { HOC } from 'recompose'
// Example of very dirty written fetcher enhancer
function fetcher<Response: {}, Base: {}>(
  dest: string,
  nullRespType: ?Response
): HOC<{ ...$Exact<Base>, data?: Response }, Base> {
  return BaseComponent =>

istarkov

/* @flow */
import * as React from 'react'
import { compose, withProps } from 'recompose'
import type { HOC } from 'recompose'

function mapProps<BaseProps: {}, EnhancedProps>(
  mapperFn: EnhancedProps => BaseProps
): (React.ComponentType<BaseProps>) => React.ComponentType<EnhancedProps> {
  return Component => props => <Component {...mapperFn(props)} />
}

istarkov

type MyComponentProps = HOCBase<typeof myEnhancer>

class MyComponent extends React.Component<MyComponentProps> {
  render() ...
}

const MyEnhancedComponent = myEnhancer(MyComponent)

istarkov

// Extract type from any enhancer
type HOCBase_<A, B, C: HOC<A, B>> = A
type HOCBase<C> = HOCBase_<*, *, C>

istarkov

/* @flow */
import React from 'react'
import { compose, defaultProps, withProps } from 'recompose'
import type { HOC } from 'recompose';

// type of Enhanced component props
type EnhancedComponentProps = {
  text?: string,
};

istarkov

// change output type of withProps
// from `HOC<A & B, B>` to `HOC<{ ...$Exact<B>, ...A }, B>`
type EnhancedCompProps = { b: number }

const enhancer2: HOC<*, EnhancedCompProps> = compose(
  withProps(({ b }) => ({
    b: `${b}`,
  })),
  withProps(({ b }) => ({
    // $ExpectError The operand of an arithmetic operation must be a number