export default function App()

in src/App.tsx [64:156]
88 lines of code
4 McCabe index (conditional complexity)

export default function App() {
  const [url, setUrl] = useState('');
  const [isCodeFlyoutVisible, setIsCodeFlyoutVisible] = useState(false);

  const { electronAPI } = useContext(CommunicationContext);
  const stepsContextUtils = useStepsContext();
  const { steps, setSteps } = stepsContextUtils;
  const syntheticsTestUtils = useSyntheticsTest(steps);
  const recordingContextUtils = useRecordingContext(
    electronAPI,
    url,
    steps.length,
    syntheticsTestUtils.setResult,
    setSteps
  );
  const { isStartOverModalVisible, setIsStartOverModalVisible, startOver } = recordingContextUtils;
  const dragAndDropContext = useDragAndDropContext();

  const { dismissToast, sendToast, setToastLifeTimeMs, toasts, toastLifeTimeMs } =
    useGlobalToasts();

  useEffect(() => {
    // `actions` here is a set of `ActionInContext`s that make up a `Step`
    const listener: ActionGeneratedListener = (_event, actions) => {
      setSteps((prevSteps: Steps) => {
        const nextSteps: Steps = generateIR([{ actions }]);
        return generateMergedIR(prevSteps, nextSteps);
      });
    };
    const removeListener = electronAPI.addActionGeneratedListener(listener);
    return removeListener;
  }, [electronAPI, setSteps]);

  return (
    <EuiProvider cache={cache} colorMode="light">
      <StyledComponentsEuiProvider>
        <StepsContext.Provider value={stepsContextUtils}>
          <RecordingContext.Provider value={recordingContextUtils}>
            <TestContext.Provider value={syntheticsTestUtils}>
              <UrlContext.Provider value={{ url, setUrl }}>
                <DragAndDropContext.Provider value={dragAndDropContext}>
                  <ToastContext.Provider
                    value={{ dismissToast, sendToast, setToastLifeTimeMs, toasts, toastLifeTimeMs }}
                  >
                    <Title />
                    <HeaderControls setIsCodeFlyoutVisible={setIsCodeFlyoutVisible} />
                    <AppPageBody>
                      {steps.length === 0 && (
                        <EuiEmptyPrompt
                          hasBorder={false}
                          title={<h3>No steps recorded yet</h3>}
                          body={
                            <p>
                              Click on <EuiCode>Start recording</EuiCode> to get started with your
                              script.
                            </p>
                          }
                        />
                      )}
                      {steps.map((step, index) => (
                        <StepSeparator
                          index={index}
                          key={`step-separator-${index + 1}`}
                          step={step}
                        />
                      ))}
                      <TestResult />
                      {isCodeFlyoutVisible && (
                        <ExportScriptFlyout setVisible={setIsCodeFlyoutVisible} steps={steps} />
                      )}
                      {isStartOverModalVisible && (
                        <StartOverWarningModal
                          startOver={startOver}
                          setVisibility={setIsStartOverModalVisible}
                          stepCount={steps.length}
                        />
                      )}
                    </AppPageBody>
                    <EuiGlobalToastList
                      toasts={toasts}
                      dismissToast={dismissToast}
                      toastLifeTimeMs={toastLifeTimeMs}
                    />
                  </ToastContext.Provider>
                </DragAndDropContext.Provider>
              </UrlContext.Provider>
            </TestContext.Provider>
          </RecordingContext.Provider>
        </StepsContext.Provider>
      </StyledComponentsEuiProvider>
    </EuiProvider>
  );
}