import React from 'react'; import { Link } from 'react-router-dom'; import Tooltip from '@/components/elements/tooltip/Tooltip'; import Translate from '@/components/elements/Translate'; import { format, formatDistanceToNowStrict } from 'date-fns'; import { ActivityLog } from '@definitions/user'; import ActivityLogMetaButton from '@/components/elements/activity/ActivityLogMetaButton'; import { TerminalIcon } from '@heroicons/react/solid'; import classNames from 'classnames'; import style from './style.module.css'; import Avatar from '@/components/Avatar'; import useLocationHash from '@/plugins/useLocationHash'; import { getObjectKeys, isObject } from '@/lib/objects'; interface Props { activity: ActivityLog; children?: React.ReactNode; } function wrapProperties(value: unknown): any { if (value === null || typeof value === 'string' || typeof value === 'number') { return `${String(value)}`; } if (isObject(value)) { return getObjectKeys(value).reduce((obj, key) => { if (key === 'count' || (typeof key === 'string' && key.endsWith('_count'))) { return { ...obj, [key]: value[key] }; } return { ...obj, [key]: wrapProperties(value[key]) }; }, {} as Record); } if (Array.isArray(value)) { return value.map(wrapProperties); } return value; } export default ({ activity, children }: Props) => { const { pathTo } = useLocationHash(); const actor = activity.relationships.actor; const properties = wrapProperties(activity.properties); return (
{actor?.username || 'System'}  —  {activity.event}
{activity.isApi && ( )} {children}

{activity.ip && ( {activity.ip}  |  )} {formatDistanceToNowStrict(activity.timestamp, { addSuffix: true })}
{activity.hasAdditionalMetadata && }
); };