feat(kudos): display notification when kudos received

codegen.json

@@ -67,6 +67,7 @@
  "JiraIssue": "./types/JiraIssue#JiraIssueSource",
  "JiraRemoteProject": "../types/JiraRemoteProject#JiraRemoteProjectSource",
  "MeetingSeries": "../../postgres/types/MeetingSeries#MeetingSeries",
+ "Kudos": "../../postgres/types/Kudos#Kudos",
  "MeetingTemplate": "../../database/types/MeetingTemplate#default",
  "NewMeeting": "../../postgres/types/Meeting#AnyMeeting",
  "NewMeetingPhase": "../../database/types/GenericMeetingPhase #default as GenericMeetingPhaseDB",
@@ -129,6 +130,7 @@
  "UpdatedNotification": "./types/AddedNotification#UpdatedNotificationSource",
  "UpgradeToTeamTierSuccess": "./types/UpgradeToTeamTierSuccess#UpgradeToTeamTierSuccessSource",
  "UpsertTeamPromptResponseSuccess": "./types/UpsertTeamPromptResponseSuccess#UpsertTeamPromptResponseSuccessSource",
+ "AddReactjiToReactableSuccess": "./types/AddReactjiToReactableSuccess#AddReactjiToReactableSuccessSource",
  "User": "../../postgres/types/IUser#default as IUser",
  "UserLogInPayload": "./types/UserLogInPayload#UserLogInPayloadSource"
  }

packages/client/components/KudosReceivedNotification.tsx

@@ -0,0 +1,59 @@
+import graphql from 'babel-plugin-relay/macro'
+import {Link} from 'react-router-dom'
+import React, {useEffect} from 'react'
+import {useFragment} from 'react-relay'
+import {KudosReceivedNotification_notification$key} from '~/__generated__/KudosReceivedNotification_notification.graphql'
+import NotificationTemplate from './NotificationTemplate'
+import useAtmosphere from '../hooks/useAtmosphere'
+import SendClientSideEvent from '../utils/SendClientSideEvent'
+import getReactji from '~/utils/getReactji'
+
+interface Props {
+ notification: KudosReceivedNotification_notification$key
+}
+
+const KudosReceivedNotification = (props: Props) => {
+ const atmosphere = useAtmosphere()
+ const {notification: notificationRef} = props
+ const notification = useFragment(
+ graphql`
+ fragment KudosReceivedNotification_notification on NotifyKudosReceived {
+ ...NotificationTemplate_notification
+ id
+ type
+ name
+ picture
+ meetingName
+ meetingId
+ emoji
+ }
+ `,
+ notificationRef
+ )
+ const {type, name, picture, meetingName, emoji, meetingId} = notification
+
+ const {unicode} = getReactji(emoji)
+
+ useEffect(() => {
+ SendClientSideEvent(atmosphere, 'Notification Viewed', {
+ notificationType: type
+ })
+ }, [])
+
+ return (
+ <NotificationTemplate
+ message={
+ <>
+ {unicode} {name} gave you kudos in{' '}
+ <Link to={`/meet/${meetingId}`} className='font-semibold text-sky-500 underline'>
+ {meetingName}
+ </Link>
+ </>
+ }
+ notification={notification}
+ avatar={picture}
+ />
+ )
+}
+
+export default KudosReceivedNotification

packages/client/components/NotificationPicker.tsx

@@ -53,6 +53,9 @@ const typePicker: Record<NotificationEnum, LazyExoticPreload<any>> = {
  ),
  RESPONSE_REPLIED: lazyPreload(
  () => import(/* webpackChunkName: 'ResponseReplied' */ './ResponseReplied')
+ ),
+ KUDOS_RECEIVED: lazyPreload(
+ () => import(/* webpackChunkName: 'KudosReceivedNotification' */ './KudosReceivedNotification')
  )
 }
 
@@ -81,6 +84,7 @@ const NotificationPicker = (props: Props) => {
  ...TeamsLimitReminderNotification_notification
  ...PromptToJoinOrgNotification_notification
  ...RequestToJoinOrgNotification_notification
+ ...KudosReceivedNotification_notification
  }
  `,
  notificationRef

packages/client/components/NotificationTemplate.tsx

@@ -12,7 +12,7 @@ import NotificationRow from './NotificationRow'
 
 interface Props {
  avatar?: string
- message: string
+ message: string | ReactNode
  notification: NotificationTemplate_notification$key
  action?: ReactNode
  children?: ReactNode

packages/client/mutations/AddReactjiToReactableMutation.ts

@@ -3,6 +3,7 @@ import {commitMutation} from 'react-relay'
 import createProxyRecord from '~/utils/relay/createProxyRecord'
 import {StandardMutation} from '../types/relayMutations'
 import {AddReactjiToReactableMutation as TAddReactjiToReactableMutation} from '../__generated__/AddReactjiToReactableMutation.graphql'
+import getReactji from '~/utils/getReactji'
 
 graphql`
  fragment AddReactjiToReactableMutation_meeting on AddReactjiToReactableSuccess {
@@ -37,6 +38,14 @@ const mutation = graphql`
  message
  }
  }
+ ... on AddReactjiToReactableSuccess {
+ addedKudos {
+ emoji
+ receiverUser {
+ preferredName
+ }
+ }
+ }
  ...AddReactjiToReactableMutation_meeting @relay(mask: false)
  }
  }
@@ -104,7 +113,19 @@ const AddReactjiToReactableMutation: StandardMutation<TAddReactjiToReactableMuta
  }
  }
  },
- onCompleted,
+ onCompleted: (res, errors) => {
+ const {isRemove} = variables
+ const addedKudos = res.addReactjiToReactable.addedKudos
+ if (!isRemove && addedKudos) {
+ const {unicode} = getReactji(addedKudos.emoji)
+ atmosphere.eventEmitter.emit('addSnackbar', {
+ key: 'youGaveKudos',
+ message: `You gave kudos to ${addedKudos.receiverUser.preferredName} ${unicode}`,
+ autoDismiss: 5
+ })
+ }
+ onCompleted(res, errors)
+ },
  onError
  })
 }

packages/client/mutations/toasts/mapKudosReceivedToToast.ts

@@ -0,0 +1,44 @@
+import graphql from 'babel-plugin-relay/macro'
+import {Snack} from '../../components/Snackbar'
+import {mapKudosReceivedToToast_notification$data} from '../../__generated__/mapKudosReceivedToToast_notification.graphql'
+import makeNotificationToastKey from './makeNotificationToastKey'
+import {OnNextHistoryContext} from '../../types/relayMutations'
+import SendClientSideEvent from '../../utils/SendClientSideEvent'
+import getReactji from '~/utils/getReactji'
+
+graphql`
+ fragment mapKudosReceivedToToast_notification on NotifyKudosReceived {
+ id
+ name
+ meetingName
+ meetingId
+ emoji
+ }
+`
+
+const mapKudosReceivedToToast = (
+ notification: mapKudosReceivedToToast_notification$data,
+ {atmosphere, history}: OnNextHistoryContext
+): Snack => {
+ const {id: notificationId, meetingName, name, emoji, meetingId} = notification
+ const {unicode} = getReactji(emoji)
+ return {
+ autoDismiss: 5,
+ showDismissButton: true,
+ key: makeNotificationToastKey(notificationId),
+ message: `${unicode} ${name} gave you kudos in`,
+ action: {
+ label: meetingName,
+ callback: () => {
+ history.push(`/meet/${meetingId}`)
+ }
+ },
+ onShow: () => {
+ SendClientSideEvent(atmosphere, 'Snackbar Viewed', {
+ snackbarType: 'kudosReceived'
+ })
+ }
+ }
+}
+
+export default mapKudosReceivedToToast

packages/client/mutations/toasts/popNotificationToast.ts

@@ -13,6 +13,7 @@ import mapTeamsLimitExceededToToast from './mapTeamsLimitExceededToToast'
 import mapTeamsLimitReminderToToast from './mapTeamsLimitReminderToToast'
 import mapPromptToJoinOrgToToast from './mapPromptToJoinOrgToToast'
 import mapRequestToJoinOrgToToast from './mapRequestToJoinOrgToToast'
+import mapKudosReceivedToToast from './mapKudosReceivedToToast'
 
 const typePicker: Partial<
  Record<NotificationEnum, (notification: any, context: OnNextHistoryContext) => Snack | null>
@@ -23,7 +24,8 @@ const typePicker: Partial<
  TEAMS_LIMIT_EXCEEDED: mapTeamsLimitExceededToToast,
  TEAMS_LIMIT_REMINDER: mapTeamsLimitReminderToToast,
  PROMPT_TO_JOIN_ORG: mapPromptToJoinOrgToToast,
- REQUEST_TO_JOIN_ORG: mapRequestToJoinOrgToToast
+ REQUEST_TO_JOIN_ORG: mapRequestToJoinOrgToToast,
+ KUDOS_RECEIVED: mapKudosReceivedToToast
 }
 
 graphql`
@@ -38,6 +40,7 @@ graphql`
  ...mapTeamsLimitReminderToToast_notification @relay(mask: false)
  ...mapPromptToJoinOrgToToast_notification @relay(mask: false)
  ...mapRequestToJoinOrgToToast_notification @relay(mask: false)
+ ...mapKudosReceivedToToast_notification @relay(mask: false)
  }
  }
 `

packages/server/database/types/Notification.ts

@@ -16,6 +16,7 @@ export type NotificationEnum =
  | 'TEAMS_LIMIT_REMINDER'
  | 'PROMPT_TO_JOIN_ORG'
  | 'REQUEST_TO_JOIN_ORG'
+ | 'KUDOS_RECEIVED'
 
 export interface NotificationInput {
  type: NotificationEnum

packages/server/database/types/NotificationKudosReceived.ts

@@ -0,0 +1,32 @@
+import Notification from './Notification'
+
+interface Input {
+ userId: string
+ name: string
+ picture: string
+ senderUserId: string
+ meetingName: string
+ meetingId: string
+ emoji: string
+}
+
+export default class NotificationKudosReceived extends Notification {
+ readonly type = 'KUDOS_RECEIVED'
+ name: string
+ picture: string
+ senderUserId: string
+ meetingName: string
+ meetingId: string
+ emoji: string
+
+ constructor(input: Input) {
+ const {userId, name, picture, senderUserId, meetingName, meetingId, emoji} = input
+ super({userId, type: 'KUDOS_RECEIVED'})
+ this.name = name
+ this.picture = picture
+ this.senderUserId = senderUserId
+ this.meetingName = meetingName
+ this.meetingId = meetingId
+ this.emoji = emoji
+ }
+}

packages/server/database/types/Team.ts

@@ -17,6 +17,8 @@ interface Input {
  qualAIMeetingsCount?: number
  isOnboardTeam?: boolean
  isOneOnOneTeam?: boolean
+ giveKudosWithEmoji?: boolean
+ kudosEmoji?: string
  updatedAt?: Date
 }
 
@@ -34,6 +36,8 @@ export default class Team {
  orgId: string
  isOnboardTeam: boolean
  isOneOnOneTeam?: boolean
+ giveKudosWithEmoji: boolean
+ kudosEmoji: string
  qualAIMeetingsCount: number
  updatedAt: Date
  constructor(input: Input) {
@@ -45,6 +49,8 @@ export default class Team {
  isArchived,
  isOnboardTeam,
  isOneOnOneTeam,
+ giveKudosWithEmoji,
+ kudosEmoji,
  lastMeetingType,
  isPaid,
  name,
@@ -65,6 +71,8 @@ export default class Team {
  this.isArchived = isArchived ?? false
  this.isOnboardTeam = isOnboardTeam ?? false
  this.isOneOnOneTeam = isOneOnOneTeam ?? false
+ this.giveKudosWithEmoji = giveKudosWithEmoji ?? true
+ this.kudosEmoji = kudosEmoji ?? 'heart'
  this.isPaid = isPaid ?? true
  this.qualAIMeetingsCount = qualAIMeetingsCount ?? 0
  }

packages/server/dataloader/primaryKeyLoaderMakers.ts

@@ -6,6 +6,7 @@ import getTeamsByIds from '../postgres/queries/getTeamsByIds'
 import getTemplateRefsByIds from '../postgres/queries/getTemplateRefsByIds'
 import getTemplateScaleRefsByIds from '../postgres/queries/getTemplateScaleRefsByIds'
 import {getUsersByIds} from '../postgres/queries/getUsersByIds'
+import {getKudosesByIds} from '../postgres/queries/getKudosesByIds'
 import getMeetingTemplatesByIds from '../postgres/queries/getMeetingTemplatesByIds'
 import {primaryKeyLoaderMaker} from './primaryKeyLoaderMaker'
 
@@ -18,3 +19,4 @@ export const teamPromptResponses = primaryKeyLoaderMaker(getTeamPromptResponsesB
 export const meetingSeries = primaryKeyLoaderMaker(getMeetingSeriesByIds)
 export const meetingTemplates = primaryKeyLoaderMaker(getMeetingTemplatesByIds)
 export const domainJoinRequests = primaryKeyLoaderMaker(getDomainJoinRequestsByIds)
+export const kudoses = primaryKeyLoaderMaker(getKudosesByIds)