render()

in fixtures/fiber-debugger/src/App.js [147:257]

• 109 lines of code
• 7 McCabe index (conditional complexity)

  render() {
    const {history, currentStep, isEditing, code} = this.state;
    if (isEditing) {
      return <Editor code={code} onClose={this.handleCloseEdit} />;
    }

    const {fibers, action, stage} = history[currentStep] || {};
    let friendlyAction;
    if (fibers) {
      let wipFiber = fibers.descriptions[fibers.workInProgressID];
      let friendlyFiber = wipFiber.type || wipFiber.tag + ' #' + wipFiber.id;
      friendlyAction = `After ${action} on ${friendlyFiber}`;
    }

    return (
      <div style={{height: '100%'}}>
        {fibers && (
          <Draggable>
            <Fibers
              fibers={fibers}
              show={this.state.show}
              graphSettings={this.state.graphSettings}
            />
          </Draggable>
        )}
        <div
          style={{
            width: '100%',
            textAlign: 'center',
            position: 'fixed',
            bottom: 0,
            padding: 10,
            zIndex: 1,
            backgroundColor: '#fafafa',
            border: '1px solid #ccc',
          }}>
          <div style={{width: '50%', float: 'left'}}>
            <input
              type="range"
              style={{width: '25%'}}
              min={0}
              max={history.length - 1}
              value={currentStep}
              onChange={e =>
                this.setState({currentStep: Number(e.target.value)})
              }
            />
            <p>
              Step {currentStep}: {friendlyAction} (
              <a style={{color: 'gray'}} onClick={this.handleEdit} href="#">
                Edit
              </a>
              )
            </p>
            {stage && <p>Stage: {stage}</p>}
            {Object.keys(this.state.show).map(key => (
              <label style={{marginRight: '10px'}} key={key}>
                <input
                  type="checkbox"
                  checked={this.state.show[key]}
                  onChange={e => {
                    this.setState(({show}) => ({
                      show: {...show, [key]: !show[key]},
                    }));
                  }}
                />
                {key}
              </label>
            ))}
          </div>
          <div style={{width: '50%', float: 'right'}}>
            <h5>Graph Settings</h5>
            <p>
              <label style={{display: ''}}>
                Direction:
                <select
                  onChange={e => {
                    const rankdir = e.target.value;
                    this.setState(({graphSettings}) => ({
                      graphSettings: {...graphSettings, rankdir},
                    }));
                  }}>
                  <option value="TB">top-down</option>
                  <option value="BT">down-top</option>
                  <option value="LR">left-right</option>
                  <option value="RL">right-left</option>
                </select>
              </label>
            </p>
            <p>
              <label style={{marginRight: '10px'}}>
                <input
                  type="checkbox"
                  checked={this.state.graphSettings.trackActive}
                  onChange={e => {
                    this.setState(({graphSettings}) => ({
                      graphSettings: {
                        ...graphSettings,
                        trackActive: !graphSettings.trackActive,
                      },
                    }));
                  }}
                />
                Track active fiber
              </label>
            </p>
          </div>
        </div>
      </div>
    );
  }