outline/app/scenes/Settings/components/EventListItem.js

// @flow
import * as React from "react";
import { Link } from "react-router-dom";
import { capitalize } from "lodash";
import styled from "styled-components";
import Time from "components/Time";
import ListItem from "components/List/Item";
import Avatar from "components/Avatar";
import Event from "models/Event";

type Props = {
  event: Event,
};

const description = event => {
  switch (event.name) {
    case "api_keys.create":
      return (
        <React.Fragment>
          Created the API token <strong>{event.data.name}</strong>
        </React.Fragment>
      );
    case "api_keys.delete":
      return (
        <React.Fragment>
          Revoked the API token <strong>{event.data.name}</strong>
        </React.Fragment>
      );
    case "teams.create":
      return "Created the team";
    case "shares.create":
    case "shares.revoke":
      return (
        <React.Fragment>
          {capitalize(event.verbPastTense)} a{" "}
          <Link to={`/share/${event.modelId || ""}`}>public link</Link> to the{" "}
          <Link to={`/doc/${event.documentId}`}>{event.data.name}</Link>{" "}
          document
        </React.Fragment>
      );
    case "users.create":
      return (
        <React.Fragment>{event.data.name} created an account</React.Fragment>
      );
    case "users.invite":
      return (
        <React.Fragment>
          {capitalize(event.verbPastTense)} {event.data.name} (<a
            href={`mailto:${event.data.email || ""}`}
          >
            {event.data.email || ""}
          </a>)
        </React.Fragment>
      );
    case "users.suspend":
      return (
        <React.Fragment>
          Suspended <strong>{event.data.name}’s</strong> account
        </React.Fragment>
      );
    case "users.activate":
      return (
        <React.Fragment>
          Unsuspended <strong>{event.data.name}’s</strong> account
        </React.Fragment>
      );
    case "users.promote":
      return (
        <React.Fragment>
          Made <strong>{event.data.name}</strong> an admin
        </React.Fragment>
      );
    case "users.demote":
      return (
        <React.Fragment>
          Made <strong>{event.data.name}</strong> a member
        </React.Fragment>
      );
    case "users.delete":
      return "Deleted their account";
    case "groups.create":
      return (
        <React.Fragment>
          Created the group <strong>{event.data.name}</strong>
        </React.Fragment>
      );
    case "groups.update":
      return (
        <React.Fragment>
          Update the group <strong>{event.data.name}</strong>
        </React.Fragment>
      );
    case "groups.delete":
      return (
        <React.Fragment>
          Deleted the group <strong>{event.data.name}</strong>
        </React.Fragment>
      );
    case "collections.add_user":
    case "collections.add_group":
      return (
        <React.Fragment>
          Granted <strong>{event.data.name}</strong> access to a{" "}
          <Link to={`/collections/${event.collectionId || ""}`}>
            collection
          </Link>
        </React.Fragment>
      );
    case "collections.remove_user":
    case "collections.remove_group":
      return (
        <React.Fragment>
          Revoked <strong>{event.data.name}</strong> access to a{" "}
          <Link to={`/collections/${event.collectionId || ""}`}>
            collection
          </Link>
        </React.Fragment>
      );
    default:
  }

  if (event.documentId) {
    if (event.name === "documents.delete") {
      return (
        <React.Fragment>
          Deleted the <strong>{event.data.title}</strong> document
        </React.Fragment>
      );
    }
    return (
      <React.Fragment>
        {capitalize(event.verbPastTense)} the{" "}
        <Link to={`/doc/${event.documentId}`}>{event.data.title}</Link> document
      </React.Fragment>
    );
  }
  if (event.collectionId) {
    if (event.name === "collections.delete") {
      return (
        <React.Fragment>
          Deleted the <strong>{event.data.name}</strong> collection
        </React.Fragment>
      );
    }
    return (
      <React.Fragment>
        {capitalize(event.verbPastTense)} the{" "}
        <Link to={`/collections/${event.collectionId || ""}`}>
          {event.data.name}
        </Link>{" "}
        collection
      </React.Fragment>
    );
  }
  if (event.userId) {
    return (
      <React.Fragment>
        {capitalize(event.verbPastTense)} the user {event.data.name}
      </React.Fragment>
    );
  }
  return "";
};

const EventListItem = ({ event }: Props) => {
  return (
    <ListItem
      key={event.id}
      title={event.actor.name}
      image={<Avatar src={event.actor.avatarUrl} size={32} />}
      subtitle={
        <React.Fragment>
          {description(event)} <Time dateTime={event.createdAt} /> ago &middot;{" "}
          <strong>{event.name}</strong>
        </React.Fragment>
      }
      actions={
        event.actorIpAddress ? (
          <IP>
            <a
              href={`http://geoiplookup.net/ip/${event.actorIpAddress}`}
              target="_blank"
              rel="noreferrer noopener"
            >
              {event.actorIpAddress}
            </a>
          </IP>
        ) : (
          undefined
        )
      }
    />
  );
};

const IP = styled("span")`
  color: ${props => props.theme.textTertiary};
  font-size: 12px;
`;

export default EventListItem;