public render()

in src/components/App.tsx [79:151]
68 lines of code
10 McCabe index (conditional complexity)

  public render () {
    const {
      onHideTree, onShowTree, refToaster, selected, showTree,
      useDarkTheme, onUseDarkTheme, onUseLightTheme
    } = this.props
    const { schema } = this.state

    let node
    if (schema !== null && selected !== null) {
      node = schema.root.lookup(selected)
    } else {
      node = null
    }

    const onToggleTree = showTree ? onHideTree : onShowTree
    const onToggleTheme = useDarkTheme ? onUseLightTheme : onUseDarkTheme
    const header = (
      <header className='app-header'>
        <Navbar>
          <NavbarGroup>
            <NavbarHeading>Schema Registry</NavbarHeading>
            <NavbarDivider/>
            <Button
              className={Classes.MINIMAL}
              icon='diagram-tree'
              onClick={onToggleTree}
              active={showTree}
            />
            <Button
              className={Classes.MINIMAL}
              icon={useDarkTheme ? 'flash' : 'moon'}
              onClick={onToggleTheme}
              active={useDarkTheme}
            />
            <NavbarDivider/>
            {schema ? <TypeSearch nodes={schema.all}/> : <Spinner size={Spinner.SIZE_SMALL}/>}
          </NavbarGroup>
        </Navbar>
      </header>
    )

    const content = node ? (
      <div className='bp3-running-text'>
        <TypeDocs node={node} all={schema ? schema.all : []}/>
      </div>
    ) : (
      <NonIdealState
        icon='help'
        title='No schema type selected'
        description='Find a type by searching or selecting it in the hierarchy tree.'
        action={schema ? <TypeSearch nodes={schema.all}/> : <Spinner/>}
      />
    )

    const main = (
      <main className='app-main'>
        <Toaster ref={refToaster}/>
        <nav className={'app-main-sidebar' + (showTree ? '' : ' hidden')}>
          {schema ? <TypeTree roots={schema.root.nestedArray} selected={selected}/> : <Spinner/>}
        </nav>
        <article className='app-main-content'>
          {content}
        </article>
      </main>
    )

    return (
      <section className={'app' + (useDarkTheme ? ' ' + Classes.DARK : '')}>
        {header}
        {main}
      </section>
    )
  }