How to use fusion-react - 10 common examples

// @noflow

import React from 'react';
import Router, {Route, Switch, Link} from 'fusion-plugin-react-router';
import {split} from 'fusion-react';

const LoadingComponent = () =&gt; <div>;
const ErrorComponent = () =&gt; <div>;

const A = split({
  load() {
    return import('./split-a');
  },
  LoadingComponent,
  ErrorComponent,
});

const B = split({
  load() {
    return import('./split-b');
  },
  LoadingComponent,
  ErrorComponent,
});

export default function Root() {</div></div>

// @noflow
import React from 'react';
import {split} from 'fusion-react';

const LoadingComponent = () =&gt; <div>Loading...</div>;
const ErrorComponent = () =&gt; <div>Error</div>;

export default [
  {
    path: '/split1',
    component: split({
      load() {
        return import('./split1');
      },
      LoadingComponent,
      ErrorComponent,
    }),
    exact: true,
  },
  {
    path: '/split2',
    component: split({
      load() {
        return import(/* webpackChunkName: "named-chunk" */ './split2');
      },
      LoadingComponent,
      ErrorComponent,

message: e.message,
            // $FlowFixMe
            code: e.code,
            // $FlowFixMe
            meta: e.meta,
            initialArgs: {hello: 'world'},
          },
          'dispatches failure with correct payload'
        );
        return {
          ...action.payload,
          loading: false,
        };
      },
    }),
    prepared(props =>
      props.message ? Promise.resolve() : props.test({hello: 'world'})
    ),
    connect(s => s)
  );

  const element = React.createElement(
    Provider,
    {store},
    React.createElement(hoc(Component))
  );
  const app = new App(element);
  app.register(Plugin);
  app.register(FetchToken, fetch);
  await getSimulator(app)
    .render('/')
    .catch(e => t.equal(e.message, 'Some failure'));

// $FlowFixMe
      fixture.payload,
      'dispatches expected action payload'
    );
    return action.payload;
  }, null);

  const Component = props => {
    t.equal(typeof props.test, 'function', 'passes correct prop to component');
    return React.createElement('span', null, 'hello world');
  };

  const withTest = compose(
    withRPCRedux('test'),
    connect(s => s),
    prepared(props =>
      props.message ? Promise.resolve() : props.test({hello: 'world'})
    )
  )(Component);

  const element = React.createElement(
    Provider,
    {store},
    React.createElement(withTest)
  );
  const app = new App(element);
  app.register(Plugin);
  app.register(FetchToken, fetch);
  await getSimulator(app)
    .render('/')
    .catch(e => t.equal(e.message, 'message'));
  t.equal(expectedActions.length, 0, 'dispatches all actions');

async function testApp(el, {typeDefs, resolvers}, enhanceApp) {
  const port = await getPort();
  const endpoint = `http://localhost:${port}/graphql`;
  const app = new App(el);
  const schema = makeExecutableSchema({typeDefs, resolvers});
  const client = new ApolloClient({
    cache: new InMemoryCache({
      addTypename: false,
    }).restore({}),
    link: new HttpLink({
      endpoint,
      fetch: async (url, options) => {
        // required since the url here is only the path
        const result = await fetch(endpoint, options);
        return result;
      },
    }),
  });
  app.enhance(RenderToken, ApolloRenderEnhancer);
  app.register(GraphQLSchemaToken, schema);

class RPC extends React.Component {
  render() {
    const {name} = this.props;
    console.log('What props do we get', this.props.name);
    return <div>RPC DEMO {name}</div>;
  }
}

//export default RPC;
const preparedFunc = async (props, context) =&gt; {
  console.log('What props', context);
  const response = await Axios.get('http://localhost:3000/api/user/1');
  console.log('AFTER PROMISEResponse come back', response.data);
  return {...response.data};
};
export default prepared(preparedFunc, {forceUpdate: true})(RPC);

// export default Styles;

export default () => {
  const app = new App(root);
  app.register(Styletron);
  app.register(Router);

  app.register(SwPlugin);
  if (__BROWSER__) {
    app.register(SWRegisterToken, true);
  }
  if (__NODE__) {
    app.register(SWTemplateFunctionToken, swTemplateFunction);
    const expiry = parseInt(process.env.EXPIRY, 0);
    if (expiry) {
      app.register(SWOptionsToken, {cacheDuration: expiry});
    }
    if (process.env.CACHE_BUSTING_PATTERNS) {
      app.register(SWOptionsToken, {
        // $FlowFixMe

function FontLoader(props: any, ref: any) {
      const mounted: {current: ?boolean} = useRef(null);
      const getFontDetails = useService(FontLoaderReactToken);
      if (typeof getFontDetails !== 'function') {
        throw new Error(
          `withFontLoading not supported. This might be because you set \`withStyleOverloads\`
    to true in the font loader config`
        );
      }
      const {fallbackName, styles} = getFontDetails(fontName);
      const initialFontStyles = fallbackName
        ? // switch to fallback name and apply styles to trigger faux font rendition
          {fontFamily: fallbackName, ...styles}
        : // no fallback so just apply true font
          {fontFamily: fontName};

      const [fontStyles, setFontStyles] = useState(initialFontStyles);

      useEffect(() => {

loading: false,
        };
      },
    }),
    prepared(props =>
      props.message ? Promise.resolve() : props.test({hello: 'world'})
    ),
    connect(s => s)
  );

  const element = React.createElement(
    Provider,
    {store},
    React.createElement(hoc(Component))
  );
  const app = new App(element);
  app.register(RPCPluginMock);
  app.register(RPCHandlersToken, handlers);
  await getSimulator(app)
    .render('/')
    .catch(e => t.equal(e.message, 'Some failure'));
  t.equal(expectedActions.length, 0, 'dispatches all actions');
  t.equal(flags.start, true, 'dispatches start action');
  t.equal(flags.failure, true, 'dispatches failure action');
  teardown();
  t.end();
});

test('Non render request', async t => {
  const app = new App(React.createElement('div'), el => el);
  app.register(HelmetPlugin);
  const sim = getSimulator(app);
  const ctx = await sim.request('/');
  t.equal(ctx.element, null, 'does not wrap ctx.element');
  t.end();
});