export default function ConnectionLogsModal()

in source/ui/src/views/ConnectionLogsModal.tsx [27:125]
69 lines of code
12 McCabe index (conditional complexity)

export default function ConnectionLogsModal(props: ConnectionLogsModalProps) {
  const { show, hide, connectionName } = props;
  const [logs, setLogs] = useState<ListLogsItem[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [showMessagemMessageModal, setShowMessageMessageModal] = useState<boolean>(false);
  const [messageModalMessage, setMessageModalMessage] = useState<React.ReactNode>('');
  const [pageIndex, setPageIndex] = useState<number>(0);
  const [pageToken, setPageToken] = useState<string[]>(['']);

  /**
   * Gets the connection logs.
   * @param paginationType The pagination type to get the connection logs
   */
  const getLogs = useCallback(async (paginationType?: PaginationType) => {
    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 encodedConnectionName = encodeURIComponent(connectionName);
      const response: ListLogsResponse = await API.get(API_NAME, `/logs/${encodedConnectionName}`, {
        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;
      }

      setLogs(response.logs);
    } catch (error) {
      const errorMessage = getErrorMessage(error);
      logger.error(errorMessage);

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

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

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

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

  return (
    <>
      <Modal show={show} onHide={() => hide()} id="connection-log-modal" animation={false} size="xl">