From 7899c8e8bf6a44c22d1aa2c4cbe8b50f4519be30 Mon Sep 17 00:00:00 2001 From: Mathieu Bouhelier Date: Thu, 20 Feb 2025 09:55:20 -0300 Subject: [PATCH 1/5] add placeholder --- .../graphql/queries/ActivityLogsFragment.ts | 13 ++++++++++++- .../ActivityLogComponent/LogItem/index.tsx | 18 +++++++++++------- .../web/ActivityLogComponent/LogItem/types.ts | 19 +++++++++++++++++++ .../web/ActivityLogComponent/utils.ts | 14 ++++++++++++++ packages/components/schema.graphql | 1 + 5 files changed, 57 insertions(+), 8 deletions(-) create mode 100644 packages/components/modules/activity-log/web/ActivityLogComponent/utils.ts 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..023dbda0 100644 --- a/packages/components/modules/activity-log/common/graphql/queries/ActivityLogsFragment.ts +++ b/packages/components/modules/activity-log/common/graphql/queries/ActivityLogsFragment.ts @@ -1,4 +1,4 @@ -import { useMemo } from 'react' +import { useEffect, useMemo } from 'react' import { graphql, usePaginationFragment } from 'react-relay' @@ -31,6 +31,14 @@ export const ActivityLogsFragmentQuery = graphql` node { id createdAt + events { + edges { + node { + label + diff + } + } + } verb url user { @@ -56,6 +64,9 @@ export const useActivityLogs = (targetRef: ActivityLogsFragment$key) => { ActivityLogsPaginationQuery, ActivityLogsFragment$key >(ActivityLogsFragmentQuery, targetRef) + useEffect(() => { + console.log('Relay Data:', JSON.stringify(data, null, 2)) + }, [data]) const logGroups = useMemo(() => { const groupedLogs: { [key: string]: LogGroup[] } = {} 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..78d47fc8 100644 --- a/packages/components/modules/activity-log/web/ActivityLogComponent/LogItem/types.ts +++ b/packages/components/modules/activity-log/web/ActivityLogComponent/LogItem/types.ts @@ -6,3 +6,22 @@ export interface LogItemProps { log: ActivityLogNode sx?: SxProps } + +export interface LogDiff { + image?: string[] + banner_image?: string[] + biography?: string[] + [key: string]: any +} + +export interface LogEvent { + node: { + label: string + diff?: LogDiff + } +} + +export interface LogNode { + verb: string + events: { edges: LogEvent[] } +} 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..ddd0b2a2 --- /dev/null +++ b/packages/components/modules/activity-log/web/ActivityLogComponent/utils.ts @@ -0,0 +1,14 @@ +export const getUpdateMessage = (verb: string, diff: Record) => { + if (!diff) return `Updated ${verb.split('.')[0]}` + + const updates: string[] = [] + + Object.keys(diff).forEach((key) => { + if (key === 'image') updates.push('Updated their profile picture') + else if (key === 'banner_image') updates.push('Updated their profile banner') + else if (key === 'biography') updates.push('Updated their bio') + else updates.push(`Updated ${key.replace('_', ' ')}`) + }) + + return updates.length > 0 ? updates.join(', ') : `Updated ${verb.split('.')[0]}` +} 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! From eccbec798b634f3b6eebb717bba12188cac09526 Mon Sep 17 00:00:00 2001 From: Mathieu Bouhelier Date: Mon, 24 Feb 2025 12:41:24 -0300 Subject: [PATCH 2/5] remove console.log --- .../common/graphql/queries/ActivityLogsFragment.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) 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 023dbda0..5f586c57 100644 --- a/packages/components/modules/activity-log/common/graphql/queries/ActivityLogsFragment.ts +++ b/packages/components/modules/activity-log/common/graphql/queries/ActivityLogsFragment.ts @@ -1,4 +1,4 @@ -import { useEffect, useMemo } from 'react' +import { useMemo } from 'react' import { graphql, usePaginationFragment } from 'react-relay' @@ -64,9 +64,6 @@ export const useActivityLogs = (targetRef: ActivityLogsFragment$key) => { ActivityLogsPaginationQuery, ActivityLogsFragment$key >(ActivityLogsFragmentQuery, targetRef) - useEffect(() => { - console.log('Relay Data:', JSON.stringify(data, null, 2)) - }, [data]) const logGroups = useMemo(() => { const groupedLogs: { [key: string]: LogGroup[] } = {} From 370490411bbe06e4395a4c50d6ca562d7ca20467 Mon Sep 17 00:00:00 2001 From: Mathieu Bouhelier Date: Tue, 18 Mar 2025 05:33:04 -0300 Subject: [PATCH 3/5] fix ts --- .../web/ActivityLogComponent/LogItem/types.ts | 30 +++++++------------ .../web/ActivityLogComponent/utils.ts | 26 ++++++++++------ 2 files changed, 27 insertions(+), 29 deletions(-) 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 78d47fc8..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,27 +1,17 @@ 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 sx?: SxProps } - -export interface LogDiff { - image?: string[] - banner_image?: string[] - biography?: string[] - [key: string]: any -} - -export interface LogEvent { - node: { - label: string - diff?: LogDiff - } -} - -export interface LogNode { - verb: string - events: { edges: LogEvent[] } -} diff --git a/packages/components/modules/activity-log/web/ActivityLogComponent/utils.ts b/packages/components/modules/activity-log/web/ActivityLogComponent/utils.ts index ddd0b2a2..60f3c873 100644 --- a/packages/components/modules/activity-log/web/ActivityLogComponent/utils.ts +++ b/packages/components/modules/activity-log/web/ActivityLogComponent/utils.ts @@ -1,14 +1,22 @@ -export const getUpdateMessage = (verb: string, diff: Record) => { - if (!diff) return `Updated ${verb.split('.')[0]}` +export const getUpdateMessage = (verb: string, diff: Record): string => { + const baseMessage = `Updated ${verb.split('.')[0]}` - const updates: string[] = [] + if (!diff) { + return baseMessage + } - Object.keys(diff).forEach((key) => { - if (key === 'image') updates.push('Updated their profile picture') - else if (key === 'banner_image') updates.push('Updated their profile banner') - else if (key === 'biography') updates.push('Updated their bio') - else updates.push(`Updated ${key.replace('_', ' ')}`) + 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 updates.length > 0 ? updates.join(', ') : `Updated ${verb.split('.')[0]}` + return updateMessages.length > 0 ? updateMessages.join(', ') : baseMessage } From c389dab8b467f2ffb1a37c6a160bc614c11d8bc8 Mon Sep 17 00:00:00 2001 From: Mathieu Bouhelier Date: Tue, 18 Mar 2025 12:46:09 -0300 Subject: [PATCH 4/5] moved two components --- .../{ => web/ActivityLogComponent}/DateFilterChip/index.tsx | 0 .../{ => web/ActivityLogComponent}/DateFilterChip/types.ts | 2 +- .../ActivityLogComponent}/DateFilterComponent/index.tsx | 0 .../{ => web/ActivityLogComponent}/DateFilterComponent/types.ts | 2 +- .../modules/activity-log/web/ActivityLogComponent/index.tsx | 2 +- 5 files changed, 3 insertions(+), 3 deletions(-) rename packages/components/modules/activity-log/{ => web/ActivityLogComponent}/DateFilterChip/index.tsx (100%) rename packages/components/modules/activity-log/{ => web/ActivityLogComponent}/DateFilterChip/types.ts (71%) rename packages/components/modules/activity-log/{ => web/ActivityLogComponent}/DateFilterComponent/index.tsx (100%) rename packages/components/modules/activity-log/{ => web/ActivityLogComponent}/DateFilterComponent/types.ts (81%) 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/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' From e51e08fb25c76722023fe3ab722e0dfee9868f9c Mon Sep 17 00:00:00 2001 From: Mathieu Bouhelier Date: Tue, 18 Mar 2025 15:43:35 -0300 Subject: [PATCH 5/5] versionning --- packages/components/CHANGELOG.md | 8 ++++++++ packages/components/package.json | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) 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/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__/**'",