Miss any of our Open RFC calls?Watch the recordings here! »

@workbench-stack/client-modal-react

0.0.19-17 • Public • Published

[React-PanelGroup]

Panel Framework

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);
  }
});
 

Keywords

none

Install

npm i @workbench-stack/client-modal-react

DownloadsWeekly Downloads

1

Version

0.0.19-17

License

MIT

Unpacked Size

110 kB

Total Files

24

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar