handling-complexity.js

// This code handles complexity higher in the tree.
//
// It makes higher-level components more complicated, but the whole
// rendering logic is contained in a single place, which might
// help long-term maintenance.

function Call() {
  let { state, send } = useContext(TelecomContext);

  let { caller } = state.context;

  let errorMessage = state.matches("incoming.failure")
    ? "Failed to process to incoming message"
    : state.matches("disconnecting.failure")
    ? "Failed to disconnect"
    : null;

  return (
    <div className={styles.CallWrapper}>
      <Heading>
        {state.matches("incoming")
          ? `Incoming call from ${caller ? caller.name : "unknown caller"}`
          : `Call with ${caller ? caller.name : "unknown person"}`}
      </Heading>

      {errorMessage && (
        <Alert
          variant="danger"
          message={errorMessage}
          onRetry={() => send("RETRY")}
        />
      )}

      <ButtonGroup>
        {state.matches("incoming") ? (
          <>
            <Button label="Accept" onClick={() => send("ACCEPT")} />
            <Button label="Reject" onClick={() => send("REJECT")} />
          </>
        ) : (
          <>
            <Button
              label={`${
                state.activities.playingVideo ? "Disable" : "Enable"
              } Video`}
              onClick={() => send("TOGGLE_VIDEO")}
            />
            <Button label="Hang Up" onClick={() => send("DISCONNECT")} />
          </>
        )}
      </ButtonGroup>
    </div>
  );
}

// This code splits/moves complexity down in the tree.
//
// It might help to reason about the individual pieces,
// but the rendering logic is scattered through multiple components.
//
// Maintenance could be a little harder in favor of being able to
// reason about the individual pieces separately.

function Call() {
  return (
    <div className={styles.CallWrapper}>
      <CallHeading />
      <CallError />
      <CallToolbar />
    </div>
  );
}