export default function Dashboard()

in source/ui/src/views/Dashboard.tsx [35:213]
91 lines of code
11 McCabe index (conditional complexity)

export default function Dashboard(props: { region: string }): JSX.Element {
  const history = useHistory();
  const [loading, setLoading] = useState<boolean>(false);
  const [connections, setConnections] = useState<ListConnectionsItem[]>([]);
  const [showDeleteConfirmMessageModal, setShowDeleteConfirmMessageModal] = useState<boolean>(false);
  const [showMessageModal, setShowMessageModal] = useState<boolean>(false);
  const [messageModalMessage, setMessageModalMessage] = useState<string | React.ReactNode>('');
  const [connectionName, setConnectionName] = useState<string>();
  const [showConnectionLogsModal, setShowConnectionLogsModal] = useState<boolean>(false);
  const [deleteConnectionProtocol, setDeleteConnectionProtocol] = useState<MachineProtocol>();
  const [pageIndex, setPageIndex] = useState<number>(0);
  const [pageToken, setPageToken] = useState<string[]>(['']);

  /**
   * Gets the connections.
   * @param paginationType The pagination type to get the connections
   */
  const getConnections = useCallback(async (paginationType?: PaginationType) => {
    setDeleteConnectionProtocol(undefined);
    setLoading(true);

    let nextToken: string;

    switch (paginationType) {
      case PaginationType.PREV:
        nextToken = pageToken[pageIndex - 1];
        break;
      case PaginationType.NEXT:
        nextToken = pageToken[pageIndex + 1];
        break;
      default:
        nextToken = '';
        break;
    }

    try {
      const response: ListConnectionsResponse = await API.get(API_NAME, '/connections', {
        queryStringParameters: { nextToken: nextToken && nextToken !== '' ? nextToken : undefined }
      });

      switch (paginationType) {
        case PaginationType.PREV:
          setPageIndex(prevIndex => prevIndex - 1);
          break;
        case PaginationType.NEXT:
          /**
           * Due to inconsistency, it can't compare with the next index item.
           * Therefore, it checks if the page token array has the next token or not.
           */
          if (response.nextToken && !pageToken.includes(response.nextToken)) {
            setPageToken([
              ...pageToken,
              response.nextToken
            ]);
          }
          setPageIndex(prevIndex => prevIndex + 1);
          break;
        default:
          setPageIndex(0);
          setPageToken(response.nextToken ? ['', response.nextToken] : ['']);
          break;
      }

      setConnections(response.connections);
    } catch (error) {
      const errorMessage = getErrorMessage(error);
      logger.error(errorMessage);

      setMessageModalMessage(
        <Alert variant="danger">
          {I18n.get('error.message.get.connections')}
          <br />
          {I18n.get('error')}: <code>{JSON.stringify(errorMessage)}</code>
        </Alert>
      );
      setShowMessageModal(true);
    }

    setLoading(false);
  }, [pageToken, pageIndex]);

  /**
   * React useEffect hook.
   */
  useEffect(() => {
    getConnections();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  /**
   * Renders the empty connection message.
   * @returns Empty connection component
   */
  function EmptyConnection(): JSX.Element {
    return (
      <Jumbotron className="text-align-center" id="empty-connection-jumbotron">
        <p className="empty-p">{I18n.get('info.message.no.connection')}</p>
      </Jumbotron>
    );
  }

  /**
   * Controls a connection.
   * @param paramConnectionName The connection name
   * @param control The connection control
   * @param protocol The connection protocol
   */
  async function controlConnection(paramConnectionName: string, control: ConnectionControl, protocol: MachineProtocol) {
    try {
      const connectionDefinition = buildConnectionDefinition({ connectionName: paramConnectionName, control, protocol });
      const response: ControlConnectionResponse = await API.post(API_NAME, '/connections', { body: connectionDefinition });

      switch (control) {
        case ConnectionControl.START:
          setMessageModalMessage(I18n.get('info.message.start.connection').replace('{}', response.connectionName));
          break;
        case ConnectionControl.STOP:
          setMessageModalMessage(I18n.get('info.message.stop.connection').replace('{}', response.connectionName));
          break;
        case ConnectionControl.PUSH:
          setMessageModalMessage(I18n.get('info.message.check.connectivity').replace('{}', response.connectionName));
          break;
        case ConnectionControl.PULL:
          setMessageModalMessage(I18n.get('info.message.get.connection.configuration').replace('{}', response.connectionName));
          break;
        case ConnectionControl.DELETE:
          setMessageModalMessage(I18n.get('info.message.delete.connection').replace('{}', response.connectionName));
          break;
        default:
          break;
      }
    } catch (error) {
      const errorMessage = getErrorMessage(error);
      logger.error(errorMessage);

      setMessageModalMessage(
        <Alert variant="danger">
          {I18n.get('error.message.control.connection')}
          <br />
          {I18n.get('error')}: <code>{JSON.stringify(errorMessage)}</code>
        </Alert>
      );
    }

    setShowMessageModal(true);
    if ([ConnectionControl.START, ConnectionControl.STOP].includes(control)) getConnections();
  }

  /**
   * Shows the connection logs modal.
   * @param paramConnectionName The connection name
   */
  function handleConnectionLogs(paramConnectionName: string) {
    setConnectionName(paramConnectionName);
    setShowConnectionLogsModal(true);
  }

  /**
   * Shows the connection deletion confirm modal.
   * @param paramConnectionName The connection name
   */
  function handleDeleteConnection(paramConnectionName: string, protocol: MachineProtocol) {
    setConnectionName(paramConnectionName);
    setDeleteConnectionProtocol(protocol);
    setShowDeleteConfirmMessageModal(true);
  }

  return (
    <Container>
      <Breadcrumb>
        <Breadcrumb.Item active>{I18n.get('manage.connections')}</Breadcrumb.Item>
      </Breadcrumb>
      <Card>
        <Card.Body>
          <Card.Title>
            <Row>
              <Col>{I18n.get('manage.connections')}</Col>
              <Col className="justify-content-end grid">
                <ButtonGroup>
                  <Button size="sm" className="uppercase-text" onClick={() => getConnections()}>{I18n.get('refresh')}</Button>