BA-2298: web package placeholder (#222)

* add placeholder

* remove console.log

* fix ts

* moved two components

* versionning

Author: mathieubouhelier

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

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 {

packages/components/modules/activity-log/DateFilterChip/index.tsx packages/components/modules/activity-log/web/ActivityLogComponent/DateFilterChip/index.tsx

@@ -1,4 +1,4 @@
-import { FetchParameters } from '../common/types'
+import { FetchParameters } from '../../../common/types'
 
 export interface DateFilterChipProps {
   fetchParameters: FetchParameters

packages/components/modules/activity-log/DateFilterChip/types.ts packages/components/modules/activity-log/web/ActivityLogComponent/DateFilterChip/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

packages/components/modules/activity-log/DateFilterComponent/index.tsx packages/components/modules/activity-log/web/ActivityLogComponent/DateFilterComponent/index.tsx

@@ -2,26 +2,30 @@ 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',
   'comments.change_comment': 'Edited a comment',
   '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<LogItemProps> = ({ 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 (
     <Box
       sx={sx}
@@ -31,7 +35,7 @@ const LogItem: FC<LogItemProps> = ({ log, sx }) => {
       marginLeft="20px"
     >
       <Typography ml="30px" lineHeight="22px" color={theme.palette.text.secondary} variant="body2">
-        {getDisplayText(log.verb)}
+        {displayText}
       </Typography>
     </Box>
   )

packages/components/modules/activity-log/DateFilterComponent/types.ts packages/components/modules/activity-log/web/ActivityLogComponent/DateFilterComponent/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<ActivityLogsFragment$data['activityLogs']>
+export type ActivityLogEdges = ActivityLogs['edges']
+export type ActivityLogNode = NonNullable<ActivityLogEdges[number]>['node']
+export type LogEvent = NonNullable<ActivityLogNode>['events']
+
+export type LogEventEdges = NonNullable<LogEvent>['edges']
+export type LogEventEdgesNode = NonNullable<LogEventEdges[number]>['node']
+export type LogDiff = NonNullable<LogEventEdgesNode>['diff']
 
 export interface LogItemProps {
   log: ActivityLogNode

packages/components/modules/activity-log/web/ActivityLogComponent/LogItem/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'

packages/components/modules/activity-log/web/ActivityLogComponent/LogItem/types.ts

@@ -0,0 +1,22 @@
+export const getUpdateMessage = (verb: string, diff: Record<string, any>): 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
+}

packages/components/modules/activity-log/web/ActivityLogComponent/index.tsx

@@ -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__/**'",

packages/components/modules/activity-log/web/ActivityLogComponent/utils.ts

@@ -12,6 +12,7 @@ type ActivityLog implements Node {
   user: User
   ipAddress: String
   verb: String
+  diff: GenericScalar
   visibility: VisibilityTypes
   url: String
   pk: Int!