StyleGuideInit.tsx

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import {
  type CustomizableWorkspace,
  getWorkspace,
  type PayloadActionCreator,
  type RootState,
  setWorkspace as setWorkspaceAction,
} from '@deephaven/redux';
import {
  type ExportedLayout,
  LocalWorkspaceStorage,
} from '@deephaven/app-utils';
import StyleGuide from './StyleGuide';

/**
 * Initialize data needed for the styleguide
 */
function StyleGuideInit(props: {
  workspace: CustomizableWorkspace;
  setWorkspace: PayloadActionCreator<CustomizableWorkspace>;
}): JSX.Element | null {
  const { workspace, setWorkspace } = props;

  useEffect(() => {
    LocalWorkspaceStorage.makeDefaultWorkspace({
      getLayouts: async () => [] as string[],
      getLayout: async () => ({}) as ExportedLayout,
    }).then(setWorkspace);
  }, [setWorkspace]);

  return workspace != null ? <StyleGuide /> : null;
}

const mapStateToProps = (
  state: RootState
): {
  workspace: CustomizableWorkspace;
} => ({
  workspace: getWorkspace(state),
});

const ConnectedStyleGuideInit = connect(mapStateToProps, {
  setWorkspace: setWorkspaceAction,
})(StyleGuideInit);

export default ConnectedStyleGuideInit;