selbekk

const path = require('path');

const config = {
    // First, let's define an entry point for webpack to start its crawling.
    entry: './src/index.js',
    // Second, we define where the files webpack produce, are placed
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },

selbekk

const withApiState = TargetComponent =>
  class extends React.Component {
    state = {
      current: "idle"
    };

    apiState = {
      pending: () => this.setState({ current: "pending" }),
      success: () => this.setState({ current: "success" }),
      error: () => this.setState({ current: "error" }),

selbekk

class SomePage extends React.Component {
  async componentDidMount() {
    const { apiState } = this.props;
    apiState.pending();
    try {
      const res = await fetch('/api/some-data');
      const data = await res.json();
      apiState.success();
    } catch (e) {
      apiState.error();

selbekk

class SomePage extends React.Component {
  async componentDidMount() {
    const { apiState } = this.props;
    apiState.next();
    try {
      const res = await fetch('/api/some-data');
      const data = await res.json();
      apiState.next(true);
    } catch (e) {
      apiState.next(false);

selbekk

const withApiState = TargetComponent => class extends React.Component {
  state = {
    current: 'idle',
  };
  next = (input) => {
    let nextState;
    switch (this.state.current) {
      case 'idle': nextState = 'pending'; break;
      case 'pending': nextState = input ? 'success' : 'error'; break;
      default: nextState = 'idle';

selbekk

class ApiStateMachine {
  state = {
    current: 'idle',
  };
  next(input) {
    let nextState;
    switch (this.state.current) {
      case 'idle': nextState = 'pending'; break;
      case 'pending': nextState = input ? 'success' : 'error'; break;
      default: nextState = 'idle';

selbekk

class SomePage extends React.Component {
  state = {
    isPending: false,
    error: null,
    result: null,
  };
  async componentDidMount() {
    this.setState({ isPending: true, error: null, result: null });
    try {
      const res = await fetch('/api/some-data');

selbekk

// @flow
import * as React from 'react';

import { TertiaryButton } from '@sb1/ffe-buttons-react';
import { Paragraph } from '@sb1/ffe-core-react';
import Dropdown from '@sb1/ffe-dropdown-react';
import Spinner from '@sb1/ffe-spinner-react';

import withApiState from '../../hocs/with-api-state';
import type { StateMachine } from '../../hocs/with-api-state';

selbekk

// @flow
import * as React from 'react';

const states = {
    IDLE: 'idle',
    PENDING: 'pending',
    ERROR: 'error',
    SUCCESS: 'success',
};

selbekk

const date = new Date();
date + date
// "Tue Jun 12 2018 21:38:21 GMT+0200 (CEST)Tue Jun 12 2018 21:38:21 GMT+0200 (CEST)"
date - date
// 0
date * date
// 2.3373282061373058e+24
date / date
// 1
+date