Logging

import React from "react";
import { Button, Divider, Flex, hubspot, logger, Text } from "@hubspot/ui-extensions";

logger.warn("Warning in the middle tab, before my extension");

hubspot.extend(({ context }) => <MiddleTabLogging context={context} />);

const MiddleTabLogging = ({ context }) => {
  logger.debug(JSON.stringify(context, null, 2));

  const callFetchSuccess = () => {
    return hubspot
      .fetch("https://jsonplaceholder.typicode.com/posts/1", { method: "GET" })
      .then(response => response.json())
      .then(result => logger.info(JSON.stringify(result, null, 2)))
      .catch(error => logger.error(error.message));
  };

  const callFetchFail = () => {
    return hubspot
      .fetch("https://jsonplaceholder.typicode.com/posts/404", { method: "GET" })
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        return response.json();
      })
      .then(result => logger.info(JSON.stringify(result, null, 2)))
      .catch(error => logger.error(error.message));
  };

  return (
    <Flex direction="column" align="start" gap="small">
      <Text>Test out the logger with the following buttons.</Text>
      <Text variant="microcopy">The browser's developer console will show your events in local dev.</Text>
      <Divider />
      <Text>Test fetch functions</Text>
      <Flex gap="small" wrap="wrap">
        <Button onClick={callFetchSuccess}>Fetch success ✅</Button>
        <Button onClick={callFetchFail}>Fetch error ❌</Button>
      </Flex>
      <Divider />
      <Flex direction="column" gap="small">
        <Text>Test different log levels.</Text>
        <Flex gap="small" wrap="wrap">
          <Button onClick={() => logger.info("Logging an info!")}>logger.info()</Button>
          <Button onClick={() => logger.debug("Logging a debug!")}>logger.debug()</Button>
          <Button onClick={() => logger.warn("Logging a warning!")}>logger.warn()</Button>
          <Button onClick={() => logger.error("Logging an error!")}>logger.error()</Button>
        </Flex>
      </Flex>
      <Divider />
      <Text>
        Deploy the app and crash the card. Use the Trace ID to see what happened in the Log Traces tab in your private
        app's dashboard.
      </Text>
      <Button
        variant="destructive"
        onClick={() => {
          throw new Error("Card crashed");
        }}
      >
        Crash the card
      </Button>
    </Flex>
  );
};