@workbench-stack/client-layout-react v0.0.19-17

React-PanelGroup

Examples

/// <reference path='../../../typings/index.d.ts' />

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { createStore, Store, applyMiddleware, Middleware, GenericStoreEnhancer, compose, combineReducers } from 'redux';
import { Provider as ReduxProvider } from 'react-redux';
import thunk from 'redux-thunk';
import { persistStore, autoRehydrate } from 'redux-persist';
// import { addPersistedQueries } from 'persistgraphql';
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws';

import { Provider as FelaProvider } from 'react-fela';
import { createRenderer as createFelaRenderer } from 'fela';

import { app as settings } from '../../../app.json';

// const queryMap = require('persisted_queries.json');

require('backend_reload');

import { ApolloClient, createNetworkInterface, ApolloProvider, NetworkInterface } from 'react-apollo';
// import {
//   reducers,
//   Store as StoreState,
// } from '@workbench-stack/client-redux';
import {
  themeReducer,
  sideMenuReducer,
  resizeReducer,
  consolePanelReducer,
} from '@workbench-stack/client-layout-redux';
import {
  IconPanelEnhanced,
  TreePanelEnhanced,
  RightLayout,
} from '@workbench-stack/client-layout-react';

import './index.css';


const rootEl = document.getElementById('content');

const networkInterface = createNetworkInterface({
  uri: __EXTERNAL_BACKEND_URL__ || '/graphql',
});

const wsClient = new SubscriptionClient((__EXTERNAL_BACKEND_URL__ || (window.location.origin + '/graphql'))
  .replace(/^http/, 'ws')
  .replace(':' + settings.webpackDevPort, ':' + settings.apiPort), {
    reconnect: true,
  });

// Extend the network interface with the WebSocket
let networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient,
);


// if (__PERSIST_GQL__) {
//   networkInterfaceWithSubscriptions = addPersistedQueries(networkInterfaceWithSubscriptions, queryMap);
// }

const client = new ApolloClient({
  networkInterface,
  reduxRootSelector: state => state.apollo,
});

const middlewares: Middleware[] = [
  thunk,
  client.middleware(),
];


const enhancers: GenericStoreEnhancer[] = [
  applyMiddleware(...middlewares),
  autoRehydrate(),
];

const REDUX_EXTENSION_COMPOSE_NAME: string = '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__';

const composeEnhancers =
  window[REDUX_EXTENSION_COMPOSE_NAME] ?
    window[REDUX_EXTENSION_COMPOSE_NAME] : compose;

const store = createStore(
  combineReducers({
    // ...reducers,
    theme: themeReducer,
    sideMenu: sideMenuReducer,
    consolePanel: consolePanelReducer,
    resize: resizeReducer,
    apollo: client.reducer(),
  }),
  // {} as StoreState.Panel,
  composeEnhancers(...enhancers),
);
persistStore(store, { whitelist: ['resize', 'sideMenu', 'theme', 'consolePanel'] });
// const felaRenderer = createFelaRenderer();
// Commented out ("let HTML app be HTML app!")
const renderer = createFelaRenderer();
window.addEventListener('DOMContentLoaded', () => {
  if (rootEl) {
    ReactDOM.render(
      <FelaProvider renderer={renderer}>
        <ApolloProvider store={store} client={client}>
          <ReduxProvider store={store} >
            <div style={{ display: 'flex', height: '100%' }}>
              <IconPanelEnhanced />
              <TreePanelEnhanced />
              <RightLayout />
            </div>
          </ReduxProvider>
        </ApolloProvider>
      </FelaProvider>
      , rootEl);
  }
});