function RecordEventsMenu()

in src/devtools/views/StoreInspector/StoreInspector.js [100:152]

• 50 lines of code
• 4 McCabe index (conditional complexity)

function RecordEventsMenu({
  isRecording,
  startRecording,
  stopRecording,
  stopAndClearRecording,
  store,
  checked,
  setChecked,
}) {
  const [importing, setImporting] = useState(false);
  const className = isRecording
    ? styles.ActiveRecordToggle
    : styles.InactiveRecordToggle;

  const clickRecord = useCallback(() => {
    isRecording ? stopRecording() : startRecording();
    setImporting(false);
    store.setImportEnvID(null);
  }, [isRecording, store, stopRecording, startRecording]);

  const clickClear = useCallback(() => {
    stopAndClearRecording();
    setImporting(false);
    store.setImportEnvID(null);
  }, [store, stopAndClearRecording, setImporting]);

  return (
    <div className={styles.RecordEventsMenu}>
      <Button
        onClick={clickRecord}
        title={isRecording ? 'Stop recording' : 'Start recording'}
        className={className}
      >
        <ButtonIcon type="record" />
      </Button>
      <Button onClick={clickClear} title="Stop and Clear Recording">
        <ButtonIcon type="clear" />
      </Button>
      <RecordingImportExportButtons
        isRecording={isRecording}
        store={store}
        importing={importing}
        setImporting={setImporting}
      />
      <FilterButtons
        checked={checked}
        setChecked={setChecked}
        isRecording={isRecording}
        store={store}
      />
    </div>
  );
}