React-Cosmos Context proxy

contextProxy.jsx

/* eslint-disable react/prop-types */
import React from 'react';

export default (providersMap) => {
  const ContextsProxy = (props) => {
    const { nextProxy, ...rest } = props;
    const { value: NextProxy, next } = nextProxy;

    const { contexts } = props.fixture;
    if (contexts && Object.keys(contexts).length > 0) {
      let result = <NextProxy {...rest} nextProxy={next()} />;
      Object.keys(contexts).forEach((key) => {
        const Provider = providersMap[key];
        result = <Provider value={contexts[key]}>{result}</Provider>;
      });
      return result;
    }

    return <NextProxy {...rest} nextProxy={next()} />;
  };

  return ContextsProxy;
};

fixture.js

import { withShops } from './ShopsContext';

const RenderShops = ({ shops }) => <div>Shops: {shops.join(', ')}</div>;

/*
  The two fixtures here will output the correct context of shops as provided by the proxy :)
*/
export default [
  {
    name: 'Hitchikers',
    component: withShops(RenderShops),
    context: {
      shops: ['Restaurant at the end of the Universe']
    }
  },
  {
    name: 'Star Wars',
    component: withShops(RenderShops),
    context: {
      shops: ['Deathstar Cantina', 'Mos Eisley Cantina', 'Jabba\'s Palace']
    }
  }
];

proxies.js

import { Provider as ShopsProvider } from './ShopsContext';

export default [
  createContextsProxy({
    shops: ShopsProvider
  })
];

ShopsContext.jsx

import React, { createContext } from 'react';
import { getDisplayName } from '@ts-react-utils/hoc';

export const { Provider, Consumer } = createContext([]);

export function withShops(WrappedComponent) {
  const withShopsComponent = (props) => (
    <Consumer>
      {(shops) => <WrappedComponent {...props} shops={shops} />}
    </Consumer>
  );
  withShopsComponent.displayName = `WithShops(${getDisplayName(
    WrappedComponent
  )})`;
  return withShopsComponent;
}

const shops = [];
const ShopsContext = ({ children }) => (
  <Provider value={shops}>{children}</Provider>
);

export default ShopsContext;