How can I display group invite notifications smartly in GetStream's <NotificationFeed />?

Viewed 52

I am building notifications for my site for the following use case, and am quite stuck with the . How should I go about this?

Context

  • I am implementing the logic of joining groups (this is similar to Facebook). Users can make joining requests to groups, and group owners can approve joining requests.

Desired features

  • When a user asks to join a group, the group owner gets a notification
  • This notification has a link to the group so that the moderator can go there and approve the request
  • The notification disappears if the moderator clicks on it
  • If a person is a moderator to several groups and gets requests to join many different groups, these will display as separate notifications

Tried thus far

--backend (works)--

testfeed = client.feed('notification', '1'); 
activity = {"actor": "1", "verb": "request",  "object": 1, "group": 3, "time": now.toISOString(), "foreign_id": "test"};
testfeed.addActivity(activity);

--frontend, attempt 1--

<StreamApp apiKey={apikey} appId={appid} token={userToken}>
    <NotificationFeed />
</StreamApp>

--frontend, attempt 2--

<StreamApp apiKey={apikey} appId={appid} token={userToken}>
    <NotificationFeed Group={(group) => displayMyNotification(group)} />
</StreamApp>

const displayMyNotification = (content) => {
    return content.activityGroup.activities.map((activity) => {
        if (activity.verb === 'request') {
          return (<div onClick={() => markRead(activity)}>Someone has requested to join <Link to={url}>your collaboration</Link>. Approve them on the collaboration page.</div>);
        }
    })
}

const markRead = (activity) => {
  console.log('i wish i knew how to mark this as read!')
}

Issues with my approach

Attempt 1:

  • Doesn't work at all. This displays only something like "1 new notification", but doesn't tell anything about the contents of the notification

Attempt 2:

  • Notifications seem to want to be grouped into activity groups that may not be ideal, as I want separate notifications when users want to join different groups.
  • Consequently, I need to loop through individual activities which don't seem to have is_read -property. As such, I don't know what the markRead -function should do -> As such, I would need to either (a) change the grouping logic, or (b) implement some custom 'is_read' property per each activity, which seems to be a bit against the framework
  • The Group={(group) => displayMyNotification(group)} probably overrides a lot of useful default functionality built into Notification that I couldn't figure out to use

What would be the correct way to implement this notification system?

0 Answers
Related