Activity feed

"use client";

import type { ComponentProps, ReactNode } from "react";
import { Avatar } from "./avatar";
import { Button } from "./button";
import "./activity-feed.css";

function cx(base: string, className: string | undefined) {
  return [base, className].filter(Boolean).join(" ");
}

export type ActivityFeedProps = ComponentProps<"div"> & {
  /** Names the feed for assistive tech, e.g. "Project activity". */
  label: string;
  /** Shows the Load more button at the end. */
  hasMore?: boolean;
  /** Called when Load more is pressed. Ignored while loading. */
  onLoadMore?: () => void;
  /** The next page is on its way: the button says so and stays focusable. */
  loading?: boolean;
  /** Text of the button. */
  moreLabel?: string;
};

export function ActivityFeed({
  label,
  hasMore = false,
  onLoadMore,
  loading = false,
  moreLabel = "Load more",
  className,
  children,
  ...rest
}: ActivityFeedProps) {
  return (
    <div {...rest} className={cx("eq-activity-feed", className)} aria-busy={loading || undefined}>
      <ol className="eq-activity-feed-list" aria-label={label}>
        {children}
      </ol>
      {(hasMore || loading) && (
        <div className="eq-activity-feed-more">
          <Button
            size="s"
            variant="outline"
            className="eq-activity-feed-load"
            // Loading keeps keyboard focus on the button and ignores presses until it is done.
            loading={loading}
            onClick={onLoadMore}
          >
            {loading ? "Loading" : moreLabel}
          </Button>
        </div>
      )}
      <span className="eq-activity-feed-status" role="status">
        {loading ? `Loading more ${label.toLocaleLowerCase()}` : ""}
      </span>
    </div>
  );
}

export type ActivityFeedGroupProps = Omit<ComponentProps<"li">, "children"> & {
  /** The day the events belong to, already formatted, e.g. "Today" or "12 March". */
  label: string;
  children: ReactNode;
};

export function ActivityFeedGroup({ label, className, children, ...rest }: ActivityFeedGroupProps) {
  return (
    <li {...rest} className={cx("eq-activity-feed-group", className)}>
      <div className="eq-activity-feed-day" aria-hidden="true">
        {label}
      </div>
      <ol className="eq-activity-feed-events" aria-label={label}>
        {children}
      </ol>
    </li>
  );
}

export type ActivityFeedItemProps = Omit<ComponentProps<"li">, "object"> & {
  /** Who did it. Also gives the avatar its initials. */
  actor: string;
  /** Avatar image URL for the actor. */
  src?: string;
  /** What they did, in lower case, e.g. "commented on" or "merged". */
  verb: string;
  /** What they did it to, e.g. "Checkout redesign". */
  object?: ReactNode;
  /** Makes the object a link. */
  href?: string;
  /** When, already formatted, e.g. "2 min ago". */
  time: string;
  /** ISO date for a time element, so machines can read it. */
  dateTime?: string;
  /** A quoted comment, a diff summary or other short detail. */
  children?: ReactNode;
};

export function ActivityFeedItem({
  actor,
  src,
  verb,
  object,
  href,
  time,
  dateTime,
  className,
  children,
  ...rest
}: ActivityFeedItemProps) {
  return (
    <li {...rest} className={cx("eq-activity-feed-item", className)}>
      <Avatar className="eq-activity-feed-avatar" name={actor} src={src} alt="" size="s" />
      <div className="eq-activity-feed-main">
        <p className="eq-activity-feed-sentence">
          <span className="eq-activity-feed-actor">{actor}</span> {verb}
          {object != null && " "}
          {object != null &&
            (href ? (
              <a className="eq-activity-feed-object" href={href}>
                {object}
              </a>
            ) : (
              <span className="eq-activity-feed-object">{object}</span>
            ))}{" "}
          {dateTime ? (
            <time className="eq-activity-feed-time" dateTime={dateTime}>
              {time}
            </time>
          ) : (
            <span className="eq-activity-feed-time">{time}</span>
          )}
        </p>
        {children != null && <div className="eq-activity-feed-body">{children}</div>}
      </div>
    </li>
  );
}