getstream / react-activity-feed

Stream React Activity Feed Components

Official React SDK for Stream Activity Feed

The official React components for Stream Activity Feed, a service for building activity and notification feed applications.

You can sign up for a Stream account at Get Started.

Note: The user interface for the activity feed can vary widely across different apps. Most of our activity feed customers integrate with Stream via their backend and build their own UI. This takes advantage of Stream’s scalability while keeping full control over the UI. This library is only updated and improved sporadically.

⚠️ This SDK is no longer actively maintained by Stream

A Feeds integration includes a combination of server-side and client-side code and the interface can vary widely which is why we are no longer focussing on supporting this SDK. If you are starting from scratch we recommend you only use the server-side SDKs.

This is by no means a reflection of our commitment to maintaining and improving the Feeds API which will always be a product that we support.

We continue to welcome pull requests from community members in case you want to improve this SDK.

---

Install

# with npm
npm install --save react-activity-feed
# with yarn
yarn add react-activity-feed

Usage

To find out how to use this library please look at:

1. The example project
2. The component reference docs
3. This basic example if you just want to see some code:

import { StreamApp, StatusUpdateForm, FlatFeed } from 'react-activity-feed';
import 'react-activity-feed/dist/index.css';

// How to create user tokens: https://getstream.io/activity-feeds/docs/node/auth_and_permissions/?language=javascript#user-tokens

const App = () => {
  return (
    <div style={{ width: '600px', margin: '0 auto' }}>
      <StreamApp apiKey="<YOUR_API_KEY>" appId="<YOUR_APP_ID>" token="<TOKEN_FOR_THE_CURRENT_USER>">
        <StatusUpdateForm />
        <FlatFeed feedGroup="user" notify />
      </StreamApp>
    </div>
  );
};

Internationalisation (i18n)

Please refer to i18n docs

License

BSD-3-Clause © Stream.io Inc.

We are hiring

We've recently closed a $38 million Series B funding round and we keep actively growing. Our APIs are used by more than a billion end-users, and you'll have a chance to make a huge impact on the product within a team of the strongest engineers all over the world.

Check out our current openings and apply via Stream's website.

react-activity-feed's Issues

Emojis loading time is high

Using the default emoji mart for emoji picker in Status Update Form the time to load emojis is usually 4-5 seconds without caching any js.

Any fix for this or can someone suggest any optimisation tips?

How do I limit the number of reactions loaded in CommentList?

I'm struggling to figure out how to limit the number of reactions initially loaded by the CommentList component. The default seems to be 5. I have tried to filter the reactions request using the property "doReactionsFilterRequest" but it does not trigger for the first load.

Missing API to post an activity

Hi,

I would like to understand how to post an activity from our react frontend. The getStream REST documentation seem to have this api but there's no matching API available to use from this react-activity-feed. Could you please help me understand how to do it?

Enhancement: Ability to add emoji's via text (e.g. :smile:, :sad:, etc.)

The statusUpdate form should allow for a user to add an emoji much like slack (e.g. inline 👍 or inline 👎) when typing.

Missing API documentation for global read and write

Hi,

I've reached to GetStream support and have come to know from them that its feasible to do a global read and write to GetStream if we don't need to tightly couple the feeds from a user. Please read my communication thread with support below.

Could you please guide me to the REST API documentation to understand how to integrate global reads and writes?

---

Thanks for your inquiry.

This is a use case that Stream feeds are well fitted for. They are very customizable. It sounds like if you're using React then you'll need to ask us to make one of your groups global read or read/write. This will decouple the feed from being tied to one user and anyone can read or write to it. Email me at support@getstream with your AppID and the feed group which you'd like to change, along with whether you'd like to be read or read/write when the time comes and I can do this for you.

Best,
Stephen

Hi,

We are developing an application for our customer that helps businesses to effectively plan and track their business changes.

Our application has three core elements, creating initiatives, capture their impacts and defining their actions.

One of the requirement in our product is for the stakeholders of these initiatives to be able to communicate with each other on these initiatives. So be able to like the initiatives, put comments, mention other users, notify each other when an action was taken and so on.

We are evaluating GetStream for this requirement and trying to understand if it best fits into our requirement or not.

We have spent enough time reading the GetStream REST documentation, the core concepts of how feeds and activities are designed. From initial understanding it looks as if the activities are tightly coupled to a user's feed or timeline vs what we need is to be able to add activities against the Initiatives and have multiple users communicate on the same initiative.

Our frontend is built in ReactJs, we have spent about 2-3 days evaluating react-activity-feed package.

We would need help from a support executive from your end to help us to understand if GetStream best fits to our model or not.

Appreciate all the help. Looking forward to a response.

Thank you.

NotificationDropdown

Is there a way to change the notification IconBadge in the NotificationDropdown? Or I will have to create my own NotificationDropdown?

ActivityFooter component not found

There is an ActivityFooter component in the Docs but it's not available to use

Cannot resolve module 'url-parse'

I'm trying to follow the tutorial here https://getstream.io/react-activity-feed/tutorial/?language=js and I'm on pretty much the first step. I've run npm i --save react-activity-feed and then added import { StreamApp } from 'react-activity-feed' and now I'm getting these errors:

Module not found: Error: Cannot resolve module 'url-parse' in /Users/rybread/work/bragi/node_modules/react-activity-feed/dist
resolve module url-parse in /Users/rybread/work/bragi/node_modules/react-activity-feed/dist
  looking for modules in /Users/rybread/work/bragi/src
    /Users/rybread/work/bragi/src/url-parse doesn't exist (module as directory)
    resolve 'file' url-parse in /Users/rybread/work/bragi/src
      resolve file
        /Users/rybread/work/bragi/src/url-parse.json doesn't exist
        /Users/rybread/work/bragi/src/url-parse doesn't exist
        /Users/rybread/work/bragi/src/url-parse.js doesn't exist
        /Users/rybread/work/bragi/src/url-parse.jsx doesn't exist
  looking for modules in /Users/rybread/work/bragi/node_modules
    /Users/rybread/work/bragi/node_modules/url-parse doesn't exist (module as directory)
    resolve 'file' url-parse in /Users/rybread/work/bragi/node_modules
      resolve file
        /Users/rybread/work/bragi/node_modules/url-parse doesn't exist
        /Users/rybread/work/bragi/node_modules/url-parse.json doesn't exist
        /Users/rybread/work/bragi/node_modules/url-parse.js doesn't exist
        /Users/rybread/work/bragi/node_modules/url-parse.jsx doesn't exist
  looking for modules in /Users/rybread/work/bragi/node_modules
    /Users/rybread/work/bragi/node_modules/url-parse doesn't exist (module as directory)
    resolve 'file' url-parse in /Users/rybread/work/bragi/node_modules
      resolve file
        /Users/rybread/work/bragi/node_modules/url-parse doesn't exist
        /Users/rybread/work/bragi/node_modules/url-parse.json doesn't exist
        /Users/rybread/work/bragi/node_modules/url-parse.js doesn't exist
        /Users/rybread/work/bragi/node_modules/url-parse.jsx doesn't exist
  looking for modules in /Users/rybread/work/bragi/node_modules/react-activity-feed/node_modules
    /Users/rybread/work/bragi/node_modules/react-activity-feed/node_modules/url-parse doesn't exist (module as directory)
    resolve 'file' url-parse in /Users/rybread/work/bragi/node_modules/react-activity-feed/node_modules
      resolve file
        /Users/rybread/work/bragi/node_modules/react-activity-feed/node_modules/url-parse doesn't exist
        /Users/rybread/work/bragi/node_modules/react-activity-feed/node_modules/url-parse.js doesn't exist
        /Users/rybread/work/bragi/node_modules/react-activity-feed/node_modules/url-parse.jsx doesn't exist
        /Users/rybread/work/bragi/node_modules/react-activity-feed/node_modules/url-parse.json doesn't exist
[/Users/rybread/work/bragi/src/url-parse.json]
[/Users/rybread/work/bragi/src/url-parse]
[/Users/rybread/work/bragi/src/url-parse]
[/Users/rybread/work/bragi/src/url-parse.js]
[/Users/rybread/work/bragi/src/url-parse.jsx]
[/Users/rybread/work/bragi/node_modules/url-parse]
[/Users/rybread/work/bragi/node_modules/url-parse]
[/Users/rybread/work/bragi/node_modules/url-parse]
[/Users/rybread/work/bragi/node_modules/url-parse]
[/Users/rybread/work/bragi/node_modules/url-parse.json]
[/Users/rybread/work/bragi/node_modules/url-parse.json]
[/Users/rybread/work/bragi/node_modules/url-parse.js]
[/Users/rybread/work/bragi/node_modules/url-parse.js]
[/Users/rybread/work/bragi/node_modules/url-parse.jsx]
[/Users/rybread/work/bragi/node_modules/url-parse.jsx]
[/Users/rybread/work/bragi/node_modules/react-activity-feed/node_modules/url-parse]
[/Users/rybread/work/bragi/node_modules/react-activity-feed/node_modules/url-parse]
[/Users/rybread/work/bragi/node_modules/react-activity-feed/node_modules/url-parse.js]
[/Users/rybread/work/bragi/node_modules/react-activity-feed/node_modules/url-parse.jsx]
[/Users/rybread/work/bragi/node_modules/react-activity-feed/node_modules/url-parse.json]
 @ ../~/react-activity-feed/dist/index.js 23:26-46
../~/react-activity-feed/dist/index.css

Has anyone seen this before? Can't seem to figure out the issue.

cancel all subscriptions and asynchronous tasks

Provide onMarkAsRead functionality to NotificationDropDown Header

Hi react-activity-feed team,

One of the feature we're trying to build on top of the NotificationDropDown is the ability to click on a link in the header of the dropdown that functions as "Mark All Notifications as Read".

For individual notification groups in the dropdown, we were able to use the standard onMarkAsRead callback which is passed in as a prop to the Group renderable prop to NotificationDropDown.

Further more, I also did notice that the callback supports marking all notifications as read if we pass true as the argument instead of the current activity group id. However, this prop is only populated within FeedManager which isn't accessible to DropdownPanel -> Header.

We've gotten a version to work where we also import getstream and making a call directly to stream via the lib.

Example

However the one caveat with that approach is that it doesn't trigger setState within the inner notification group components, and we have to close the dropdown and reopen to see the read status updated.

Desired:

Mark notification as read

Hello, is there a way to mark an ActivityGroup as read once you click on the Notification? I am building notifications for my own type of Groups but I can't figure out how to mark them as read when the onClickNotification is triggered. I was examining your Notification.js but I see that the onClickNotification comes from the props, so I followed the trail up, but could not figure out where onClickNotification si coming from.

Thanks!

FlatFeed real-time notification not working

We are using the following code for one of our flat feeds. It doesn't seem to be receiving data from our web socket, as it never renders the Notifier component when we push new activities to the stream.

import 'react-activity-feed/dist/index.es.css';
import { StreamApp, FlatFeed } from 'react-activity-feed';
import React from 'react';
import ReactDOM from 'react-dom';

const API_KEY = "...";
const APP_ID = "...";
const TOKEN = "...";

const App = () => <StreamApp apiKey={API_KEY} appId={APP_ID} token={TOKEN} >
  <FlatFeed 
    notify
    feedGroup="STREAM_XYZ"
    Activity={(props) => <pre>{JSON.stringify(props)}</pre>}
  />
</StreamApp>;

ReactDOM.render(<App />, document.getElementById('root'));

Dependencies:

  ...
  "dependencies": {
    "react": "^16.12.0",
    "react-activity-feed": "^0.9.26",
    "react-dom": "^16.12.0",
    "react-scripts": "3.4.0"
  }

Am I missing something on this setup?

Set "target" when adding new post in "StatusUpdateForm"

Please suggest an approach to set "target" when adding a new post in "StatusUpdateForm" - currently searching thru code/docs.

eg. https://getstream.io/docs/js/#adding-activities
// Add an activity to the feed
var activity = {actor: 'User:1', verb: 'post', object: 'Place:42', target: 'Group:1'};

Posting on a timeline and get "You don't have permission to do this"

Hi,

I build a web site using getstream.io and ReactJS everything works, I can comment, like, see the post on the timeline etc... The only trouble, I can't post on the timeline.

I used StatusUpdateForm component, and I got a : 'You dont have permission to do this'

Just to be accurate, I'm not talking about posting on my own timeline, but on timeline friends for example.

Is it just a trouble with ReactJS or did I miss something since I can do all the interaction except this one ?

Thanks a lot for your answer, and for the project !

There are build warnings

(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on 'punycode'. You might need to include https://www.npmjs.com/package/rollup-plugin-node-builtins
(!) Unresolved dependencies
https://rollupjs.org/guide/en#warning-treating-module-as-external-dependency
punycode (imported by node_modules/twitter-text/dist/lib/idna.js, commonjs-external-punycode)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules

Add onRequest prop in StatusUpdateForm

Hi guys,

How about adding the possibility to implement a custom request on StatusUpdateForm?

Example of use that I'm thinking: <StatusUpdateForm onRequest = {activity => {}} />

It would allow to post an activity on other feed without changing app policies.

Thank you all for the great job.

Notification still empty when try comment, like... on the post

I'm using "< NotificationDropdown notify />" to get notification, but when I try comment,like or follow user, but notification still empty

Add support for inject optional header and footer to NotificationDropdown

First of all thank you for providing these components they make working with stream much more streamlined.

This is more of a request and not an issue. We have a use case where we need to add some additional links in a header and footer section of the NotificationDropdown. Basically like facebook's dropdown:

We can get around this by forking the NotificationDropdown component and but would like to see if you guys would be open to add header and footer as an optional Renderable prop since it might be common use case for others.

This way it's much easier for us to pick up updates in the future and not have to main our separate monkey patched version.

E.g. it could be something simple like:

diff --git a/src/components/NotificationDropdown.js b/src/components/NotificationDropdown.js
index b5f3a9f..9458b21 100644
--- a/src/components/NotificationDropdown.js
+++ b/src/components/NotificationDropdown.js
@@ -18,6 +18,8 @@ import type {
 } from '../types';
 import type { FeedRequestOptions, FeedResponse } from 'getstream';

+import { smartRender } from '../utils';
+
 type Props = {|
   /** The feed group part of the feed that should be displayed */
   feedGroup: string,
@@ -194,6 +196,7 @@ class NotificationDropdownInner extends React.Component<PropsInner, State> {
         >
           {this.state.open && (
             <DropdownPanel arrow right={this.props.right}>
+              {smartRender(this.props.Header, {}, null)}
               <NotificationFeed
                 feedGroup={this.props.feedGroup}
                 userId={this.props.userId}
@@ -213,6 +216,7 @@ class NotificationDropdownInner extends React.Component<PropsInner, State> {
                 }
                 analyticsLocation={this.props.analyticsLocation}
               />
+              {smartRender(this.props.Footer, {}, null)}
             </DropdownPanel>
           )}
         </div>

Ability to display an Empty list component

It would be great to have an option to display a custom component if the feeds are empty this is good for all feed types FlatFeed Notification etc.

FilePreviewer doesn't allow removing a file while it's uploading

FollowButton missing from package

When trying to import the FollowButton, I receive an error saying it doesn't exist...

Attempted import error: 'FollowButton' is not exported from 'react-activity-feed'

Is it just not implemented yet?

https://getstream.github.io/react-activity-feed/#followbutton

NotificationDropDown real-time updates

Hello,
NotificationDropdown only seems to update real-time when dropdown is open, is this the intended usage? I was hoping to update also if dropdown is close, right now if I get a new notification, the number does not show, only if I reload the page it does show up. I can also see this message on the console log

now listening to changes in realtime for messages:2806

when the NotificationDropdown is open

<NotificationDropdown Group={group => {
            return (
                <MessageNotification activityGroup={group.activityGroup}/>
            );
          }} feedGroup="messages" notify={true}/>

IconBadge Customizable within NotificationDropDown

One of examples listed under https://getstream.github.io/react-activity-feed/#iconbadge shows that we can customize the icon with our own by passing it children props.

We were hoping to leverage this customize icon feature on the IconBadge that gets rendered as part of the NotificationDropDown component.

Is it feasible to have NotificationDropDown accept an optional Renderable prop that can be passed as a child prop to its inner reference to IconBadge ?

StreamApp Timeout is ignored

We have been receiving timeouts from certain customers. While debugging, I was attempting to increase the timeout by setting the options prop on the StreamApp react component, like the following:

<StreamApp
   token={streamToken}
   apiKey={streamApiKey}
   appId={streamAppId}
   options={{
      timeout: 20000
   }}
/>

However, further debugging showed me that this value is getting ignored. I can see that the StreamClient is getting properly initialized with my options (https://github.com/GetStream/stream-js/blob/master/dist/js/getstream.js#L4346), but the StreamClient's call to get (https://github.com/GetStream/stream-js/blob/master/dist/js/getstream.js#L5677) is overriding the timeout values to 10 seconds in the function enrich_kwargs (https://github.com/GetStream/stream-js/blob/master/dist/js/getstream.js#L4729), so that by the time the run_xhr is called, the timeout is set to 10 seconds regardless of what I initialized my StreamApp with. It'd be great if the options specified in StreamApp could be used in the requests.

NotificationFeed doesn't update when NewActivitiesNotification clicked

I am using the simplest example:

<StreamApp
  apiKey="3fjzn67nznwt"
  appId="41814"
  token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiZXhhbXBsZS11c2VyIn0.XEKjtzD2AIQMLXH6kfJlL8P_JV4CBYvcMsmQCFjyY2U"
>
  <NotificationFeed notify={true} />
</StreamApp>

I expect the Feed to render with the new activities when I click the notification.

For a workaround, I am storing a timestamp in the component state, then setting the Feed's 'key' prop to a new timestamp when the user clicks the Notifier to force a rerender.

font-family in index.css is applied to the body also

https://github.com/GetStream/react-activity-feed/blob/master/src/App.css#L1
It is currently applying the the style to body as well. I believe you meant for it to be applied only on its children.

I think it should be:
body [class^='raf-'], body [class*=' raf-'] { font-family: Avenir, Arial, Helvetica, sans-serif; box-sizing: border-box; }

Created a pull request for it:
#29

"like" function for each comment

How can I add "like" function for each comment on the post

StreamApp App secret error

Trying to test out the react components by following the tutorial, but getting the following error:

Error: You are publicly sharing your App Secret. Do not expose the App Secret in browsers, "native" mobile apps, or other non-trusted environments.

Looks like you can get by that error by passing 'null' as the stream secret to stream.connect, but seems that's being done by the StreamApp component, so not sure if there's a prop I'm missing somewhere?

This is with 0.9.24, just adding the 'StreamApp' component to my app.

Any way to automatically load a new activity after posting activity from StatusUpdateForm?

I'd like to request the ability to automatically see your new post after submitting from StatusUpdateForm. Rather than seeing "You have 1 new activity" as a NewActivityNotification, simply refresh the FlatFeed.

IE 11 breaks StatusUpdateForm and other components

In IE 11 some components are giving the following error: Object.includes is undefined.
It seems to be breaking on components that use FontAwesome. We could just replace the icons we're using with hardcoded svg's.

These components are definitely affected

• SinglePost
• StatusUpdateForm
• FileIcon (only dependency is FontAwesome)

CSS Module parse failed

Hello,
I am getting this error when trying to use react-activity-feed

`ERROR in ./node_modules/emoji-mart/css/emoji-mart.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

.emoji-mart,
| .emoji-mart * {
| box-sizing: border-box;
@ ./node_modules/react-activity-feed/dist/index.es.js 27:0-39
@ ./src/js/containers/notifications/notifications.js
@ ./src/js/containers/nav.js
@ ./src/js/index.js
@ multi babel-polyfill ./src/js/index.js

ERROR in ./node_modules/@webscopeio/react-textarea-autocomplete/style.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

.rta {
| position: relative;
| font-size: 18px;
@ ./node_modules/react-activity-feed/dist/index.es.js 26:0-59
@ ./src/js/containers/notifications/notifications.js
@ ./src/js/containers/nav.js
@ ./src/js/index.js
@ multi babel-polyfill ./src/js/index.js

ERROR in ./node_modules/react-activity-feed/dist/index.es.css 2:6
Module parse failed: Unexpected token (2:6)
You may need an appropriate loader to handle this file type.
| body,

[class^='raf-'],
| [class*=' raf-'] {
| font-family: Avenir, Arial, Helvetica, sans-serif;
@ ./src/js/containers/notifications/notifications.js 15:0-48
@ ./src/js/containers/nav.js
@ ./src/js/index.js
@ multi babel-polyfill ./src/js/index.js`

I already have the css loader configured in webpack
{
test: /.(css|scss)$/,
exclude: /node_modules/,
loaders: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader?indentedSyntax=false'],
},

Thanks!

On the example project what do you do after "yarn start"?

I'm not very familiar with react and there was a lot of issues trying to install this project on macos.

I see displayed yarn start in the example directory:

rollup v0.68.2
bundles src/index.js → dist/index.js, dist/index.es.js...
created dist/index.js, dist/index.es.js in 3.8s

[2020-02-18 17:30:39] waiting for changes...

No obvious errors. So how do I see the website?

I started a web server where ever I saw an index.html file and nothing displayed. I tried the react http://localhost:3000/ and "this host could not be reached."

Can someone share the next steps?

thanks

Error: You are publicly sharing your App Secret.

Iʻm getting this error whiling using your service, can you please help.

Error: You are publicly sharing your App Secret. Do not expose the App Secret in browsers, "native" mobile apps, or other non-trusted environments.

Update FlatFeed by changing feedGroup property using props?

I want to update flat feed based on the feedGroup property which is updated via props. For ex:

class UserFeed extends React.Component {

    render() {
        const {token, feed_group} = this.props;
        return <StreamApp
                apiKey="123"
                appId="345"
                token={token}
            >
            
                <FlatFeed
                    feedGroup={feed_group}
                    options={{reactions: {recent: true}}}
                    notify
                    Activity={(props) => <CustomActivity {...props}/>}
                />
            </StreamApp>

    }
}

StreamApp displays the FlatFeed for the initial value of feedGroup but it does not updateFlatFeed based on different values of feedGroup.

Is there a way to refresh the StreamApp or FlatFeed?

onClick and/or onSuccess callback for StatusUpdateForm

The StatusUpdateForm should provide an onClick and/or onSuccess callback.

Example: I would like to trigger a page navigation event after the post was successfully posted to Stream.

Multiple Og videos load in StatusUpdateForm but only one shows on the saved activity

In the StatusUpdateForm you can attach multiple Og videos from youtube. They appear on the form with bookmarks and the ability to toggle. However when saved it only shows one video.

Steps to Reproduce

• Navigate to https://getstream.github.io/react-activity-feed/#!/StatusUpdateForm or https://getstream.io/react-activity-feed/tutorial/ and scroll down to Status Updates > "Edit on CodePen"

• In the "New Post" paste in the following links
  https://www.youtube.com/watch?v=r1_8rRDHtQ8`
  https://www.youtube.com/watch?v=UREUvuS2MsA

  • The video defaults to the first link and a bookmark is displayed below the video
    

  • If you click on the 2nd bookmark below the video - the video switches to the 2nd link
    

• If you save the post, the resulting feed activity only shows the first video. Ideally it would display both videos and the bookmarks as it does on the StatusUpdateForm
  

FlatFeed: filter activity by Target

Related to #3, I'm looking for a way to filter a FlatFeed by Target eg. Only show activities for a particular Group ID stored in Target.

Currently stepping thru the FlatFeed.js focusing on "FeedRequestOptions" - please suggest the best approach to achieve this.

Unable to use Activity component independently

Hi,

We need to be able to use the activity component independently without needing to use either FlatFeed or SinglePost.

Below code works find if I use Activity component within FlatFeed or SinglePost but when I render only Activity component then it throws an error (image attached) in console,

{(this.props.initiativeStream !== null && this.props.initiativeStream !== undefined) ?
<Activity
activity={this.props.initiativeStream}
Footer={


}
/>
:""}

NotificationDropdown is empty after adding new activity into the "notification" feed group in the server-side

Hi, I'm trying to get NotificationDropdown work following this
https://getstream.io/blog/how-to-build-a-notification-feed-using-stream/,

Here is the server-side code
`
let client = stream.connect(API_KEY, SECRET_KEY, APP_ID);
let activity = {
'actor': 'user' + userId,
'verb': 'follow',
'object': 'user' + followId,
};

notificationFeed = client.feed('notification', followId);
notificationFeed.addActivity(activity);
`
Here is the NotificationDropdown setup:

<NotificationDropdown feedGroup="notification" userId={props.userId} notify={true} right />

The issue is the notification dropdown is empty after the server return success request.

Please help, thank you!

Allow passing custom Notification renders

In components/Notification.js (line:144) it returns null if the activity verb isn't "follow". This requires you to copy/paste the entire component in order for you to include your own custom switch statement.

Would be super helpful if you could just pass in a custom AttachedActivity renderer based on the verb.

The same goes for the AvatarGroup (line:149)

Notification feed isssue

Hi get stream team,

We are currently facing difficulty in integrating getstream notifications in react my react project.
We are using your react-activity-feed library.
Use case :

We want to send some notifications generated by system. Similar to how linkedin sends notifications for new jobs or colleague birthdays.

Problem :

We are getting activity group, which is a group of activities as props in the notification Group component. I simply want it as list of activities. Although i can get list from activity group, the functions, markAsSeen and markAsRead work on activity group. And there is no flag in activity if its seen or read.

Can you please help me out with this?

Thanks,
Vasanth

Typescript Typings missing

Please add support for Typescript (add Typings):
npm install @types/react-activity-feed --save-dev

preventDefault error when using InfiniteScrollPaginator within NotificationDropdown

When using InfiniteScrollPaginator as the Paginator prop instead of the default. It gives the following error in console during scroll.

The InfiniteScrollPaginator also seems to only paginate one page but not the full extend of all the contents.

How do I comment (reaction) on an activity as the user in the access token?

I currently am able to use my access token to view a "team" feed. This feed was set to globally writable by Stream through support. However, when I comment on that feed, the username of that comment is set to the userId prop of that feed (the userId in this case is that of the team feed).

I am still a react and javascript beginner. How can I tweak the code to set the user of the comment to that in the access token? It appears that is what StatusUpdateForm does, by reading from props.client.currentUser to set the actor of the activity.

snapchat stories format

It would be cool if you supported the stories format for updates. This format is gaining popularity.

Override LoadingSpinner in StreamApp component

As far as I can tell, there is no way to override the Loading Spinner component in the StreamApp component, so it is difficult to customize the loading state of the stream app. The css is also written inline for the LoadingSpinner component, so it can't be targeted and removed via css directly.

Don't show alerts please.

Either the StreamApp or NotificationDropdown component is displaying an alert when a network request fails ('Something went wrong when loading your unread notification counts. Is your internet working?'). I need to be able to disable this and hook into my own error handling behaviour. Had a moment when my internet was cutting out and got spammed with alerts..

Public Feeds

I'm confused on how to display public feeds. Using this library requires a user token to be generated, so how would I go about creating a publicly viewable feed?

App crashes when i delete attachment before upload

Steps to reproduce :

Upload attachment.
Cancel it before its uploaded completely

Error message

Cannot read property 'id' of undefined

How do I update props sent to Activity?

I am following the stream-react-example to create a feed. However, my app has a login process that updates the state with the correct token (passed as this.props.token). I see that this.props.token is updated when StreamApp is rerendered, but for some reason actions related to removing a post via HeaderRight do not work until I manually refresh the page. Creating a post via StatusUpdateForm does not have this issue. I tried to force rerender the Stream component, but only reloading the entire page works. My feeling is that Activity={(props) => {<removed>}} copies the older version of props with the old stream token but does not update again when rerendering StreamApp. If that's true, how do I update props` to contain the latest token? If that is not true, how do I resolve the permissions issue without having the reload the page on receiving a new token?

        <StreamApp apiKey="" appId="" token={this.props.token}>
          { localStorage.getItem("Id") &&
            <StatusUpdateForm
              feedGroup={this.props.submitFeedGroup}
              userId={this.props.submitUserId}
              modifyActivityData={!(this.props.location.pathname === '/')
                ? ((data) => ({...data, 'to': ['timeline:' + this.props.flatFeedUserId]}))
                : undefined
              }
              submitHandler={(e) => {
                alert(e);
              }}
            />
          }
          <FlatFeed
            feedGroup={this.props.flatFeedGroup}
            userId={this.props.flatFeedUserId}
            options={limit_feed}
            notify
            Activity={(props) => {
              const hasSubActivity = Boolean(props.activity.object.object);
              const activity = hasSubActivity
                ? props.activity.object
                : props.activity;
              return (
                localStorage.getItem("Id") ?
                  <Activity
                    {...props}
                    activity={activity}
                    HeaderRight={ (this.props.location.pathname === '/')
                      ? (() => (
                        <Dropdown>
                          <div>
                            <Link
                              onClick={() => {
                                props.onRemoveActivity(props.activity.id);
                              }}
                            >
                              Remove
                            </Link>
                          </div>
                        </Dropdown>
                      ))
                      : undefined
                    }
                    Footer={() => (
                      <div style={{ padding: '8px 16px' }}>
                        <LikeButton {...props} />
                        <CommentField
                          activity={props.activity}
                          onAddReaction={props.onAddReaction}
                        />
                        <CommentList activityId={props.activity.id} />
                      </div>
                    )}
                  /> :
                <Activity
                  {...props}
                  activity={activity}
                />
              );
            }}
          />