// @flow

function concat(a: string, b: string) {
  return a + b;
}

concat("A", "B"); // Works!
concat(1, 2); // Error!


function acceptsBoolean(value: boolean) {
  // ...
}

acceptsBoolean(true);  // Works!
acceptsBoolean(false); // Works!
acceptsBoolean("foo"); // Error!

// @flow

function add(one: any, two: any): number {
  return one + two;
}

add(1, 2);     // Works.
add("1", "2"); // Works.
add({}, []);   // Works.


function getNestedProperty(obj: any) {
// Runtime errors BUT not caught by Flow
  return obj.foo.bar.baz;
}

getNestedProperty({});

// @flow

function stringify(value: mixed) {
  return "" + value; // Error!
}

stringify("foo");

// Figure out the type before any usage
function stringify(value: mixed) {
  if (typeof value === 'string') {
    return "" + value; // Works!
  } else {
    return "";
  }
}

stringify("foo");

// @flow

function identity(value: string): string {
  return value;
}

function identity<T>(value: T): T {
  return value;
}

function identity(func: <T>(param: T) => T) {
  // ...
}

function identity<T>(value: T): T {
  value = "foo"; // Error!
  return value;  // Error!
}

type Item<T> = {
  foo: T,
  bar: T,
};

// @flow

declare module 'aws-sdk/dynamodb/document_client' {
  import type { Request } from 'aws-sdk/request';

  declare type AttributeMap = { [key: string]: AttributeValue };
  declare type AttributeName = string;
  declare type AttributeValue = mixed;
  declare type ConditionExpression = string;
  declare type ConsistentRead = boolean;
  declare type ExpressionAttributeNameMap = { [key: string]: AttributeName };
  declare type ExpressionAttributeValueMap = { [key: string]: AttributeValue };
  declare type IndexName = string;
  declare type ItemList = AttributeMap[];
  declare type Key = { [key: string]: AttributeValue };
  declare type KeyExpression = string;
  declare type ReturnValue = 'NONE'|'ALL_OLD'|'UPDATED_OLD'|'ALL_NEW'|'UPDATED_NEW'|string;
  declare type TableName = string;
  declare type UpdateExpression = string;

  declare interface DocumentClient {
    constructor(): void;
    query(params: QueryInput, cb?: (err: Error, data: QueryOutput) => void): Request<QueryOutput>;
    update(params: UpdateItemInput, cb?: (err: Error, data: UpdateItemOutput) => void): Request<UpdateItemOutput>;
  }

  declare interface QueryInput {
    TableName: TableName;
    IndexName?: IndexName;
    Limit?: number;
    ConsistentRead?: ConsistentRead;
    KeyConditionExpression?: KeyExpression;
    ExpressionAttributeNames?: ExpressionAttributeNameMap;
    ExpressionAttributeValues?: ExpressionAttributeValueMap;
  }

  declare interface QueryOutput {
    Items?: ItemList;
    Count?: number;
    ScannedCount?: number;
    LastEvaluatedKey?: Key;
  }

  declare interface UpdateItemInput {
    TableName: TableName;
    Key: Key;
    ReturnValues?: ReturnValue;
    UpdateExpression?: UpdateExpression;
    ConditionExpression?: ConditionExpression;
    ExpressionAttributeNames?: ExpressionAttributeNameMap;
    ExpressionAttributeValues?: ExpressionAttributeValueMap;
  }

  declare interface UpdateItemOutput {
    Attributes?: AttributeMap;
  }
}

// @flow

// Names
type foo = string;
type myFoo = string;
type JSONApiEntity = {};

// Functions
type HttpFn = () => Promise<Object>;
type DoProfilePressFn = (profile: Object) => void;

// Interfaces
interface Serializable {
  serialize(): string;
}

class Foo implements Serializable {
  serialize() {
    return '[Foo]';
  }
}

// webpack

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production')
}),

new webpack.optimize.UglifyJsPlugin()

componentDidMount() {
  window.requestAnimationFrame(() => {
    window.requestAnimationFrame(() => this.setState({ shouldRender: true }));
  });
}

...

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

...

...
handleClick() {
  this.setState(state => ({
    words: [...state.words, 'marklar'],
  }));
};
...

const SomeRecord = Immutable.Record({ foo: null });

const x = new SomeRecord({ foo: 'bar' });
const y = x.set('foo', 'baz');
const z = x.set('foo', 'bar');
x === y; // false
x === z; // true

return () {
 <Button onClick={() => console.log('Hello, World!')}>
   Click Me
 </Button>
}

// Fast:
<DisplayName person={person} />

// Slower:
<DisplayName name={person.name} />

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

...
it('should match to the snapshot', () => {
  sut = shallow(<Component {...props} />);

  expect(sut).toMatchSnapshot();
});
...

import React from 'react';
import { shallow } from 'enzyme';
import Component from './component';

jest.mock('./path/module/to/mock');
const mock = require('./path/module/to/mock');

describe('BasicInfo component: ', () => {
  let sut;

  beforeEach(() => {
    jest.resetAllMocks();
    mock.method.mockReturnValue(jest.fn());
  });

  it('should show toaster notification for success', () => {
    sut = shallow(<Component {...props} />);
    sut.setState({ key: 'value' });
    sut.instance().onHandler();
    expect(notification.notify).toHaveBeenCalled();
  });
});

import React from 'react';
import { storiesOf } from '@storybook/react';
import { text } from '@storybook/addon-knobs';
import { withInfo } from '@storybook/addon-info';

import Component from './Component';
import Item from './Item';

storiesOf('Component', module)
  .add('Story #01',
    withInfo('story #01 info')(() => (
      <Component data={[...]}>
        <Item title={text('Title1')}>
      </Component>
    ))
  );

import { configure, addDecorator } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';

addDecorator(
  withOptions({
    name: 'Refining React',
    goFullScreen: true,
    showAddonsPanel: true,
    showSearchBox: false
  })
);

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Provider } from 'react-redux';
import { browserHistory } from 'react-router';
import configureStore from './store/configureStore';
​
const store = configureStore(browserHistory);
​
storiesOf('Component', module)
  .addDecorator(story => (
    <Provider store={store}>
      { story() }
    </Provider>
  ))
  .add('Story #01', () => (
    <Component {...props} />
  ));

import initStoryshots, { multiSnapshotWithOptions, imageSnapshot } from '@storybook/addon-storyshots';

initStoryshots({
  suite: 'Structural Storyshots',
  integrityOptions: { cwd: __dirname },
  test: multiSnapshotWithOptions({})
});

initStoryshots({
  suite: 'Image Storyshots',
  test: imageSnapshot({ storybookUrl: 'http://localhost:9001', getMatchOptions }),
});

function getMatchOptions({ context: { fileName } }) {
  const customSnapshotsDir = `${fileName.slice(0, fileName.lastIndexOf('/'))}/__image_snapshots__`;
  return { customSnapshotsDir };
}

module.exports = {
    NoWork: 0,
    SynchronousPriority: 1, // user input
    TaskPriority: 2,        // hover
    AnimationPriority: 3,   // dimensions, sizes 
    HighPriority: 4,        // scrolling
    LowPriority: 5,         // component re-rendering after new data from store arrived
    OffscreenPriority: 6    // not visible elements
};

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children; 
  }
}

// Create portal
ReactDOM.createPortal(child, container);

// Render elements
render() {
  // React mounts a new div and renders the children into it
  return (
    <div>
      {this.props.children}
    </div>
  );
}

// Render portal
render() {
  // React does *not* create a new div. It renders the children into `domNode`.
  // `domNode` is any valid DOM node, regardless of its location in the DOM.
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

// React.createContext
const ThemeContext = React.createContext('light');

class ThemeProvider extends React.Component {
  state = { theme: 'light' };

  render() {
    return (
      // *Context.Provider
      <ThemeContext.Provider value={this.state.theme}>
        { this.props.children }
      </ThemeContext.Provider>
    );
  }
}

class ThemedButton extends React.Component {
  render() {
    return (
      // *Context.Consumer
      <ThemeContext.Consumer>
        { theme => <Button theme={theme} /> }
      </ThemeContext.Consumer>
    );
  }
}

// React.createRef
class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }
}

// React.forwardRef
const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    { props.children }
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

class Component extends React.Component {
  state = { externalData: null };

  static getDerivedStateFromProps(props, state) {
    // Store prevId in state so we can compare when props change.
    // Clear out previously-loaded data (so we don't render stale stuff).
    if (props.id !== state.prevId) {
      return {
        externalData: null,
        prevId: props.id,
      };
    }

    // No state update necessary
    return null;
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.externalData === null) {
      this._loadAsyncData(this.props.id);
    }
  }
}

import React from 'react';

function App() {
  return (
    <React.StrictMode>
      <Component />
    </React.StrictMode>
  );
}

// React.memo
const MyComponent = React.memo(function MyComponent(props) {
  /* only rerenders if props change */
});


// React.lazy
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function MyComponent() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
    );
  }
}

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>

        {/*
          Instead of providing a static representation of what <Mouse> renders,
          use the `render` prop to dynamically determine what to render.
        */}
        {this.props.render(this.state)}
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

// This function takes a component...
function withSubscription(WrappedComponent, selectData) {
  // ...and returns another component...
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = {
        data: selectData(DataSource, props)
      };
    }

    componentDidMount() {
      // ... that takes care of the subscription...
      DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
      DataSource.removeChangeListener(this.handleChange);
    }

    handleChange() {
      this.setState({
        data: selectData(DataSource, this.props)
      });
    }

    render() {
      // ... and renders the wrapped component with the fresh data!
      // Notice that we pass through any additional props
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}