Notifications in NotificationFeed not rendering

[justin-snap]

Trying to render out the NotificationFeed on my frontend. It is making the call to the stream api to get activities, however it's not rendering any of them.

On backend I am using the stream-php library adding activities that look like so:

$userFeed = $client->feed('notification', '10');
$activity_data = ['actor' => '11', 'verb' => 'follow', 'object' => '10'];
$activity_response = $userFeed->addActivity($activity_data);

10 and 11 being the user_id's of properly initialized users

Response given from the NotificationFeed component fetching /enrich/feed/notification/10/

{
    "results": [ {
            "actor": "11",
            "foreign_id": "",
            "id": "50657f6a-eeda-11ea-a8df-128a130028af",
            "object": "10",
            "origin": null,
            "own_reactions": {},
            "reaction_counts": {},
            "target": "",
            "time": "2020-09-04T18:13:20.733169",
            "verb": "follow"
        }],
        "activity_count": 1,
        "actor_count": 2,
        "created_at": "2020-09-04T17:54:57.297259",
        "group": "follow_2020-09-04",
        "id": "d0d640f7-eeda-11ea-8080-80001d8dc8c7.follow_2020-09-04",
        "is_read": false,
        "is_seen": false,
        "updated_at": "2020-09-04T18:16:56.220491",
        "verb": "follow"
    }],
    "next": "",
    "duration": "20.18ms",
    "unseen": 1,
    "unread": 1
}

I get the notify alert when a new activity is added, but none of the Notification components are being rendered

[justin-snap]

I can see on the demos the activities in the response have data under the object key, rather than a string. Which causes the null render when looking here:
https://github.com/GetStream/react-activity-feed/blob/master/src/components/Notification.js

Is there something wrong with how I'm adding activities to the notification feed?

[jaapbakker88]

@justin-snap I think the way you're adding activities is wrong, because it's a reference to an object we need to enrich you'll need to specify the collection as well. In this case the User collection.

so this would be something like this:

$userFeed = $client->feed('notification', '10');
$activity_data = ['actor' => '11', 'verb' => 'follow', 'object' => $client->users->createReference('10')];
$activity_response = $userFeed->addActivity($activity_data); 

[jeancrus-pixelwolf]

Im trying to make the example project to work, but notificationdropdown doesnt open the popup window. The api request seems to work and the number in the badge disappear, but the window is not showing. Some idea about it?
My code:
`
<StreamApp
apiKey=""
appId=""
token=""

    <div
      style={{
        background: "#fff", //#1A1A14
        height: 60,
        borderRadius: 4,
        margin: "10px 0",
        padding: "0 20px",
        boxShadow: "0px 0px 4px rgba(0,0,0,0.15)",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        flexDirection: "row",
      }}
    >
      <h3>React Activity Feed</h3>
      <NotificationDropdown
      // Icon={<Icon />}
      // Header={<Header />}
      // Footer={<Footer />}
      notify
      />
    </div>
    <StatusUpdateForm
      modifyActivityData={(data) => {
        console.log("🚀 ~ file: App.js ~ line 125 ~ App ~ data", data);

        return data;
      }}
      feedGroup="timeline"
    />
    <FlatFeed
      // feedGroup="user" // or timeline
      feedGroup="timeline"
      notify
      options={{
        limit: 6,
        withOwnChildren: true,
        withRecentReactions: true,
      }}
      Paginator={(props) => (
        <InfiniteScrollPaginator
          useWindow
          threshold={10}
          {...props}
          getScrollParent={() => containerRef}
        />
      )}
      Activity={(activityProps) => (
        <Activity
          {...activityProps}
          Footer={() => (
            <React.Fragment>
              <CommentField
                activity={activityProps.activity}
                onAddReaction={activityProps.onAddReaction}
              />
              <CommentList
                activityId={activityProps.activity.id}
                CommentItem={(props) => (
                  <React.Fragment>
                    <CommentItem {...props} />
                    <LikeButton
                      reaction={props.comment}
                      {...activityProps}
                    />
                  </React.Fragment>
                )}
              />
            </React.Fragment>
          )}
        />
      )}
    />
  </StreamApp>

`

[jeancrus-pixelwolf]

Im trying to make the example project to work, but notificationdropdown doesnt open the popup window. The api request seems to work and the number in the badge disappear, but the window is not showing. Some idea about it?
My code:
`
<StreamApp
apiKey=""
appId=""
token=""

    <div
      style={{
        background: "#fff", //#1A1A14
        height: 60,
        borderRadius: 4,
        margin: "10px 0",
        padding: "0 20px",
        boxShadow: "0px 0px 4px rgba(0,0,0,0.15)",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        flexDirection: "row",
      }}
    >
      <h3>React Activity Feed</h3>
      <NotificationDropdown
      // Icon={<Icon />}
      // Header={<Header />}
      // Footer={<Footer />}
      notify
      />
    </div>
    <StatusUpdateForm
      modifyActivityData={(data) => {
        console.log("🚀 ~ file: App.js ~ line 125 ~ App ~ data", data);

        return data;
      }}
      feedGroup="timeline"
    />
    <FlatFeed
      // feedGroup="user" // or timeline
      feedGroup="timeline"
      notify
      options={{
        limit: 6,
        withOwnChildren: true,
        withRecentReactions: true,
      }}
      Paginator={(props) => (
        <InfiniteScrollPaginator
          useWindow
          threshold={10}
          {...props}
          getScrollParent={() => containerRef}
        />
      )}
      Activity={(activityProps) => (
        <Activity
          {...activityProps}
          Footer={() => (
            <React.Fragment>
              <CommentField
                activity={activityProps.activity}
                onAddReaction={activityProps.onAddReaction}
              />
              <CommentList
                activityId={activityProps.activity.id}
                CommentItem={(props) => (
                  <React.Fragment>
                    <CommentItem {...props} />
                    <LikeButton
                      reaction={props.comment}
                      {...activityProps}
                    />
                  </React.Fragment>
                )}
              />
            </React.Fragment>
          )}
        />
      )}
    />
  </StreamApp>

`

I found out that problem! Its react version.. are u guys going to fix it to work with react ^17.0.0?

[mtkopone]

I'm also running into this. Can you provide some detail on where the problem is, so maybe i could bypass it locally somehow?

[TylerAHolden]

Their support team still hasn't been able to figure this out for me

[r0zar]

I'm also seeing this issue, specifically with the NotificationDropdown component. Has there been any update on this?

[r0zar]

I was able to workaround the issue by modifying the default Group prop

<NotificationDropdown
    notify
    feedGroup="notification"
    Group={(props) => {
        console.log(props);
        return <div>im a group</div>;
    }}
/>

The issue seems to lie with how <Notification /> or Group is rendered. I'm not sure which. Whichever one is causing the issue, doesn't like the activityGroup payload.

[donson-gallardo]

I was able to workaround the issue by modifying the default Group prop

<NotificationDropdown
    notify
    feedGroup="notification"
    Group={(props) => {
        console.log(props);
        return <div>im a group</div>;
    }}
/>

The issue seems to lie with how <Notification /> or Group is rendered. I'm not sure which. Whichever one is causing the issue, doesn't like the activityGroup payload.

Having the same issue

[monzoor-rm]

<NotificationDropdown
    notify
    feedGroup="notification"
    Group={(props) => {
        return <Notification activityGroup={props.activityGroup} />;
    }}
/>

This will work

[Rykuno]

<NotificationDropdown
    notify
    feedGroup="notification"
    Group={(props) => {
        return <Notification activityGroup={props.activityGroup} />;
    }}
/>

This will work

Does not work for me. Running Next w/ React17 and im unable to get the component to render. It shows when new notifications are available, but you are unable to see once selecting it.

    "react": "17.0.2",
    "react-activity-feed": "^1.2.1",
    "react-dom": "17.0.2",
     "next": "11.0.1",

[r0zar]

I'm seeing this issue crop back up again myself.

[r0zar]

Old workaround ain't cutting it anymore.

[Rykuno]

I'm pretty new to this package but I'll dive in today after work to see what I can find.

I wonder if it anyone w/ React 17 has this working for them at all.

[monzoor-rm]

@Rykuno
use this

 const client = connect(apiKey, token, appId);

  const notificationUser = client.feed(
    'notification,
    '<YOUR_CURRENT_USER_ID',
  );
  function callback(data) {
   console.log(data)
  }

  notificationUser.subscribe(callback);

if you get new array empty. Thats mean somehow your backend is deleting the notification