Function TableRow

app/src/components/requestLogs/TableRow.tsx:94–235

({
  loggedCall,
  isExpanded,
  onToggle,
  showOptions,
}: {
  loggedCall: LoggedCall;
  isExpanded: boolean;
  onToggle: () => void;
  showOptions?: boolean;
})

};

export const TableRow = ({
  loggedCall,
  isExpanded,
  onToggle,
  showOptions,
}: {
  loggedCall: LoggedCall;
  isExpanded: boolean;
  onToggle: () => void;
  showOptions?: boolean;
}) => {
  const isError = loggedCall.statusCode !== 200;
  const requestedAt = dayjs(loggedCall.requestedAt).format("MMMM D h:mm A");
  const fullTime = dayjs(loggedCall.requestedAt).toString();

  const isChecked = useAppStore(
    (s) =>
      (s.selectedLogs.defaultToSelected && !s.selectedLogs.deselectedLogIds.has(loggedCall.id)) ||
      s.selectedLogs.selectedLogIds.has(loggedCall.id),
  );
  const toggleChecked = useAppStore((s) => s.selectedLogs.toggleSelectedLogId);

  const tagNames = useSelectedProject().data?.tagNames;
  const visibleColumns = useAppStore((s) => s.columnVisibility.visibleColumns);

  const visibleTagNames = useMemo(() => {
    return tagNames?.filter((tagName) => visibleColumns.has(tagName)) ?? [];
  }, [tagNames, visibleColumns]);

  const isClientInitialized = useIsClientInitialized();
  if (!isClientInitialized) return null;

  return (
    <>
      <Tr
        onClick={onToggle}
        key={loggedCall.id}
        _hover={{ bgColor: "gray.50", cursor: "pointer" }}
        sx={{
          "> td": { borderBottom: "none" },
        }}
        fontSize="sm"
      >
        {showOptions && (
          <Td>
            <Checkbox
              isChecked={isChecked}
              onChange={() => toggleChecked(loggedCall.id)}
              _hover={{ borderColor: "gray.300" }}
            />
          </Td>
        )}
        {visibleColumns.has(StaticColumnKeys.SENT_AT) && (
          <Td>
            <Tooltip label={fullTime} placement="top">
              <Box whiteSpace="nowrap" minW="120px">
                {requestedAt}
              </Box>