diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 2dcb3b14..07910437 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,13 @@ # @baseapp-frontend/components +## 1.0.24 + +### Patch Changes + +- Add user activities to the Activity Log + - updated dependencies + - @baseapp-frontend/components + ## 1.0.23 ### Patch Changes diff --git a/packages/components/modules/activity-log/common/graphql/queries/ActivityLogsFragment.ts b/packages/components/modules/activity-log/common/graphql/queries/ActivityLogsFragment.ts index 9521f7ef..5f586c57 100644 --- a/packages/components/modules/activity-log/common/graphql/queries/ActivityLogsFragment.ts +++ b/packages/components/modules/activity-log/common/graphql/queries/ActivityLogsFragment.ts @@ -31,6 +31,14 @@ export const ActivityLogsFragmentQuery = graphql` node { id createdAt + events { + edges { + node { + label + diff + } + } + } verb url user { diff --git a/packages/components/modules/activity-log/DateFilterChip/index.tsx b/packages/components/modules/activity-log/web/ActivityLogComponent/DateFilterChip/index.tsx similarity index 100% rename from packages/components/modules/activity-log/DateFilterChip/index.tsx rename to packages/components/modules/activity-log/web/ActivityLogComponent/DateFilterChip/index.tsx diff --git a/packages/components/modules/activity-log/DateFilterChip/types.ts b/packages/components/modules/activity-log/web/ActivityLogComponent/DateFilterChip/types.ts similarity index 71% rename from packages/components/modules/activity-log/DateFilterChip/types.ts rename to packages/components/modules/activity-log/web/ActivityLogComponent/DateFilterChip/types.ts index aca7ed58..0e50e407 100644 --- a/packages/components/modules/activity-log/DateFilterChip/types.ts +++ b/packages/components/modules/activity-log/web/ActivityLogComponent/DateFilterChip/types.ts @@ -1,4 +1,4 @@ -import { FetchParameters } from '../common/types' +import { FetchParameters } from '../../../common/types' export interface DateFilterChipProps { fetchParameters: FetchParameters diff --git a/packages/components/modules/activity-log/DateFilterComponent/index.tsx b/packages/components/modules/activity-log/web/ActivityLogComponent/DateFilterComponent/index.tsx similarity index 100% rename from packages/components/modules/activity-log/DateFilterComponent/index.tsx rename to packages/components/modules/activity-log/web/ActivityLogComponent/DateFilterComponent/index.tsx diff --git a/packages/components/modules/activity-log/DateFilterComponent/types.ts b/packages/components/modules/activity-log/web/ActivityLogComponent/DateFilterComponent/types.ts similarity index 81% rename from packages/components/modules/activity-log/DateFilterComponent/types.ts rename to packages/components/modules/activity-log/web/ActivityLogComponent/DateFilterComponent/types.ts index b4322ccf..9a3326e1 100644 --- a/packages/components/modules/activity-log/DateFilterComponent/types.ts +++ b/packages/components/modules/activity-log/web/ActivityLogComponent/DateFilterComponent/types.ts @@ -1,6 +1,6 @@ import { DateTime } from 'luxon' -import { FetchParameters } from '../common/types' +import { FetchParameters } from '../../../common/types' export interface DateFilterComponentProps { createdFrom: DateTime | null diff --git a/packages/components/modules/activity-log/web/ActivityLogComponent/LogItem/index.tsx b/packages/components/modules/activity-log/web/ActivityLogComponent/LogItem/index.tsx index 220de473..d186de37 100644 --- a/packages/components/modules/activity-log/web/ActivityLogComponent/LogItem/index.tsx +++ b/packages/components/modules/activity-log/web/ActivityLogComponent/LogItem/index.tsx @@ -2,7 +2,8 @@ import { FC } from 'react' import { Box, Typography, useTheme } from '@mui/material' -import { LogItemProps } from './types' +import { getUpdateMessage } from '../utils' +import { LogDiff, LogItemProps } from './types' const verbMapping: { [key: string]: string } = { 'comments.add_comment': 'Created a comment', @@ -10,18 +11,21 @@ const verbMapping: { [key: string]: string } = { 'comments.delete_comment': 'Deleted a comment', 'comments.reply_comment': 'Replied to a comment', 'comments.pin_comment': 'Pinned a comment', - 'profiles.update_profile': 'Updated their profile', 'baseapp_reactions.add_reaction': 'Added a reaction', } -const getDisplayText = (verb: string) => verbMapping[verb] ?? verb - const LogItem: FC = ({ log, sx }) => { const theme = useTheme() - if (!log?.verb) { - return null + if (!log?.verb) return null + + const getLogMessage = (verb: string, diff?: LogDiff) => { + if (diff) return getUpdateMessage(verb, diff) + return verbMapping[verb] ?? verb } + const diff = log.events?.edges?.[0]?.node?.diff ?? null + const displayText = getLogMessage(log.verb, diff) + return ( = ({ log, sx }) => { marginLeft="20px" > - {getDisplayText(log.verb)} + {displayText} ) diff --git a/packages/components/modules/activity-log/web/ActivityLogComponent/LogItem/types.ts b/packages/components/modules/activity-log/web/ActivityLogComponent/LogItem/types.ts index 5451e5e4..084bcdab 100644 --- a/packages/components/modules/activity-log/web/ActivityLogComponent/LogItem/types.ts +++ b/packages/components/modules/activity-log/web/ActivityLogComponent/LogItem/types.ts @@ -1,6 +1,15 @@ import { SxProps, Theme } from '@mui/system' -import { ActivityLogNode } from '../../../common' +import { ActivityLogsFragment$data } from '../../../../../__generated__/ActivityLogsFragment.graphql' + +export type ActivityLogs = NonNullable +export type ActivityLogEdges = ActivityLogs['edges'] +export type ActivityLogNode = NonNullable['node'] +export type LogEvent = NonNullable['events'] + +export type LogEventEdges = NonNullable['edges'] +export type LogEventEdgesNode = NonNullable['node'] +export type LogDiff = NonNullable['diff'] export interface LogItemProps { log: ActivityLogNode diff --git a/packages/components/modules/activity-log/web/ActivityLogComponent/index.tsx b/packages/components/modules/activity-log/web/ActivityLogComponent/index.tsx index 7af89b6a..cdf1c3ab 100644 --- a/packages/components/modules/activity-log/web/ActivityLogComponent/index.tsx +++ b/packages/components/modules/activity-log/web/ActivityLogComponent/index.tsx @@ -8,8 +8,8 @@ import { Box, Typography } from '@mui/material' import { useForm } from 'react-hook-form' import { SearchNotFoundState } from '../../../__shared__/web' -import DateFilterChip from '../../DateFilterChip' import { FetchParameters, useActivityLogs } from '../../common' +import DateFilterChip from './DateFilterChip' import EventFilterChip from './EventFilterChip' import DefaultLogGroups from './LogGroups' import { ActivityLogComponentProps, EventFilterOption } from './types' diff --git a/packages/components/modules/activity-log/web/ActivityLogComponent/utils.ts b/packages/components/modules/activity-log/web/ActivityLogComponent/utils.ts new file mode 100644 index 00000000..60f3c873 --- /dev/null +++ b/packages/components/modules/activity-log/web/ActivityLogComponent/utils.ts @@ -0,0 +1,22 @@ +export const getUpdateMessage = (verb: string, diff: Record): string => { + const baseMessage = `Updated ${verb.split('.')[0]}` + + if (!diff) { + return baseMessage + } + + const updateMessages: string[] = Object.keys(diff).map((key) => { + switch (key) { + case 'image': + return 'Updated their profile picture' + case 'banner_image': + return 'Updated their profile banner' + case 'biography': + return 'Updated their bio' + default: + return `Updated ${key.replace('_', ' ')}` + } + }) + + return updateMessages.length > 0 ? updateMessages.join(', ') : baseMessage +} diff --git a/packages/components/package.json b/packages/components/package.json index ff3f2e38..99cd687f 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,7 +1,7 @@ { "name": "@baseapp-frontend/components", "description": "BaseApp components modules such as comments, notifications, messages, and more.", - "version": "1.0.23", + "version": "1.0.24", "sideEffects": false, "scripts": { "babel:transpile": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'", diff --git a/packages/components/schema.graphql b/packages/components/schema.graphql index 96d3e49b..99edce81 100644 --- a/packages/components/schema.graphql +++ b/packages/components/schema.graphql @@ -12,6 +12,7 @@ type ActivityLog implements Node { user: User ipAddress: String verb: String + diff: GenericScalar visibility: VisibilityTypes url: String pk: Int!