example: react demo new features

Author: szuperaz

README.md

@@ -40,9 +40,7 @@ Here are some of the features we support:
 - **Search & queries**: Activity search, **query activities**, and **query feeds** endpoints.
 - **Modern essentials**: Permissions • OpenAPI spec • GDPR endpoints • realtime WebSocket events • push notifications • “own capabilities” API.
 
-## React sample apps
-
-### React demo app with stories
+## React demo app
 
 Deployed version: https://feeds-react-demo.vercel.app
 
@@ -80,27 +78,80 @@ After the above steps run the following command in `sample-apps/react-demo`:
 yarn dev
 ```
 
-### Advanced React app
+## Test Data Generator
 
-Prerequisites:
+The `test-data-generator` directory contains scripts to populate your Stream Feeds app with sample data for testing and development purposes.
 
-- Install dependencies: `yarn`
-- Build React SDK: `yarn build:client` and `yarn build:react-sdk`
-- Create a `.env` file in `sample-apps/react-sample-app` with the following content:
+### Setup
+
+1. Create a `.env` file in `test-data-generator/` with your credentials:
 
 ```
-NEXT_PUBLIC_STREAM_API_KEY=<Your API key>
-NEXT_API_SECRET=<Your API secret>
-NEXT_PUBLIC_API_URL=<Optionally provide an API URL>
+STREAM_API_KEY=<Stream API key>
+API_SECRET=<Stream API secret>
+API_URL=<Optional, Stream API URL>
 ```
 
-- Run the `node setup-env.js` script in `sample-apps/react-sample-app`
-- If you want to have some pre-made posts in your app, optinally run the `node create-posts.js` script as well
+2. Install dependencies: `yarn` (from the repository root)
+
+### Available Scripts
 
-After the above steps run the following command in `sample-apps/react-sample-app`:
+Run these commands from the `test-data-generator/` directory:
 
+| Script          | Command                | Description                                |
+| --------------- | ---------------------- | ------------------------------------------ |
+| Create Users    | `yarn create-users`    | Creates users and their feeds              |
+| Create Follows  | `yarn create-follows`  | Sets up follow relationships between users |
+| Create Posts    | `yarn create-posts`    | Generates sample activities/posts          |
+| Create Stories  | `yarn create-stories`  | Creates sample stories                     |
+| Download Images | `yarn download-images` | Downloads sample images for posts          |
+
+### Create Posts Feature Flags
+
+The `create-posts` script supports a `--features` flag to control which features are included in the generated posts:
+
+```bash
+yarn create-posts --features <feature1,feature2,...>
 ```
-yarn dev
+
+**Available features:**
+
+| Feature      | Description                              |
+| ------------ | ---------------------------------------- |
+| `link`       | Adds random URLs to posts                |
+| `attachment` | Uploads and attaches 1-3 images to posts |
+| `mention`    | Adds @mentions to other users            |
+| `poll`       | Creates and attaches polls to posts      |
+| `reaction`   | Adds 1-5 reactions from random users     |
+| `comment`    | Adds 1-5 comments from random users      |
+| `bookmark`   | Bookmarks posts by random users          |
+| `repost`     | Creates reposts of existing activities   |
+
+**Examples:**
+
+```bash
+# Create basic posts without any features
+yarn create-posts
+
+# Create posts with polls and reactions
+yarn create-posts --features poll,reaction
+
+# Create posts with all content features
+yarn create-posts --features link,attachment,mention,poll,reaction,comment,bookmark,repost
+```
+
+> Note: Each feature has a probability of being included (not every post will have every enabled feature). Link and attachment are mutually exclusive per post.
+
+### Usage
+
+Typical order of operations:
+
+```bash
+cd test-data-generator
+yarn create-users
+yarn create-follows
+yarn create-posts --features link,attachment,mention,poll,reaction,comment,bookmark,repost
+yarn create-stories
 ```
 
 ## Local Setup

package.json

@@ -7,7 +7,8 @@
   "license": "See license in LICENSE",
   "workspaces": [
     "packages/*",
-    "sample-apps/**"
+    "sample-apps/**",
+    "test-data-generator"
   ],
   "scripts": {
     "build:all": "yarn workspaces foreach -Avp --topological-dev run build",

sample-apps/react-demo/app/ClientApp.tsx

@@ -5,9 +5,11 @@ import {
   StreamFeeds,
   FeedsClient,
 } from '@stream-io/feeds-react-sdk';
+import * as Sentry from '@sentry/nextjs';
 import { AppSkeleton } from './AppSkeleton';
 import { OwnFeedsContextProvider } from './own-feeds-context';
 import { FollowSuggestionsContextProvider } from './follow-suggestions-context';
+import { ConnectionAlert } from './components/utility/ConnectionAlert';
 import { generateUsername } from 'unique-username-generator';
 import { useEffect, useMemo, type PropsWithChildren } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
@@ -60,6 +62,15 @@ export const ClientApp = ({ children }: PropsWithChildren) => {
     },
     options: {
       base_url: process.env.NEXT_PUBLIC_API_URL,
+      timeout: 10000,
+      configure_loggers_options: {
+        default: {
+          level: 'error',
+          sink: (...args: any[]) => {
+            Sentry.captureException(new Error(args.join(' ')));
+          },
+        },
+      },
     },
   });
 
@@ -73,6 +84,7 @@ export const ClientApp = ({ children }: PropsWithChildren) => {
 
   return (
     <StreamFeeds client={client}>
+      <ConnectionAlert />
       <OwnFeedsContextProvider>
         <FollowSuggestionsContextProvider>
           <AppSkeleton>{children}</AppSkeleton>

sample-apps/react-demo/app/activity/[id]/page.tsx

@@ -3,8 +3,10 @@
 import { ActivityInteractions } from '@/app/components/activity/activity-interactions/ActivityInteractions';
 import { ActivityContent } from '@/app/components/activity/ActivityContent';
 import { ActivityHeader } from '@/app/components/activity/ActivityHeader';
+import { ActivityParent } from '@/app/components/activity/ActivityParent';
 import { CommentComposer } from '@/app/components/comments/CommentComposer';
 import { CommentList } from '@/app/components/comments/CommentList';
+import { ErrorCard } from '@/app/components/utility/ErrorCard';
 import { LoadingIndicator } from '@/app/components/utility/LoadingIndicator';
 import {
   StreamActivityWithStateUpdates,
@@ -26,6 +28,7 @@ export default function ActivityPage() {
   const [activityWithStateUpdates, setActivityWithStateUpdates] = useState<
     ActivityWithStateUpdates | undefined
   >();
+  const [error, setError] = useState<string | undefined>(undefined);
 
   useEffect(() => {
     const _activityWithStateUpdates = client?.activityWithStateUpdates(id);
@@ -36,7 +39,10 @@ export default function ActivityPage() {
 
   useEffect(() => {
     if (!activityWithStateUpdates?.currentState.activity) {
-      activityWithStateUpdates?.get();
+      activityWithStateUpdates?.get().catch((e) => {
+        setError(e.message);
+        throw e;
+      });
     }
   }, [activityWithStateUpdates]);
 
@@ -45,6 +51,10 @@ export default function ActivityPage() {
     selector,
   ) ?? { activity: undefined };
 
+  if (error) {
+    return <ErrorCard message="Failed to load activity" error={`${error}. This can happen if the activity was deleted.`} />;
+  }
+
   if (!activity || !activityWithStateUpdates) {
     return (
       <div className="flex items-center justify-center h-full w-full">
@@ -58,6 +68,7 @@ export default function ActivityPage() {
       <div className="flex-shrink-0 flex flex-col gap-4">
         <ActivityHeader activity={activity} withActions={true} />
         <ActivityContent activity={activity} />
+        <ActivityParent activity={activity} />
         <ActivityInteractions activity={activity} />
         <div className="text-lg font-semibold">Comments</div>
         <CommentComposer activity={activity} />

sample-apps/react-demo/app/bookmarks/page.tsx

@@ -6,18 +6,20 @@ import {
 } from '@stream-io/feeds-react-sdk';
 import { useCallback, useEffect, useState } from 'react';
 import { ActivityPreview } from '../components/activity/ActivityPreview';
+import { ErrorCard } from '../components/utility/ErrorCard';
 import { LoadingIndicator } from '../components/utility/LoadingIndicator';
 
 export default function Bookmarks() {
   const client = useFeedsClient();
   const [bookmarks, setBookmarks] = useState<BookmarkResponse[]>([]);
   const [next, setNext] = useState<string | undefined>(undefined);
   const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | undefined>(undefined);
 
   const loadBookmarks = useCallback(
     (nextCursor?: string) => {
       setIsLoading(true);
-      client
+      return client
         ?.queryBookmarks({
           limit: 20,
           next: nextCursor,
@@ -29,6 +31,10 @@ export default function Bookmarks() {
           ]);
           setNext(response.next);
         })
+        .catch((e) => {
+          setError(e.message);
+          throw e;
+        })
         .finally(() => {
           setIsLoading(false);
         });
@@ -40,6 +46,10 @@ export default function Bookmarks() {
     loadBookmarks();
   }, [client, loadBookmarks]);
 
+  if (error) {
+    return <ErrorCard message="Failed to load bookmarks" error={error} />;
+  }
+
   return (
     <div className="w-full flex flex-col items-center justify-center gap-4">
       <div className="text-lg font-semibold w-full">Bookmarks</div>

sample-apps/react-demo/app/components/ToggleFollowButton.tsx

@@ -4,7 +4,7 @@ import { useFeedsClient, useOwnFollows } from '@stream-io/feeds-react-sdk';
 
 export const ToggleFollowButton = ({ userId }: { userId: string }) => {
   const client = useFeedsClient();
-  const { ownTimeline, ownStoryTimeline } = useOwnFeedsContext();
+  const { ownTimeline, ownStoryTimeline, reloadTimelines } = useOwnFeedsContext();
 
   const targetUserFeed = client?.feed('user', userId);
 
@@ -31,9 +31,8 @@ export const ToggleFollowButton = ({ userId }: { userId: string }) => {
         }
       });
     // Reload timelines to see new activities
-    await ownTimeline?.getOrCreate({ watch: true, limit: 10 });
-    await ownStoryTimeline?.getOrCreate({ watch: true });
-  }, [targetUserFeed, targetStoryFeed, ownTimeline, ownStoryTimeline]);
+    await reloadTimelines();
+  }, [targetUserFeed, targetStoryFeed, ownTimeline, ownStoryTimeline, reloadTimelines]);
 
   const unfollow = useCallback(async () => {
     if (!targetUserFeed || !targetStoryFeed) {
@@ -47,9 +46,8 @@ export const ToggleFollowButton = ({ userId }: { userId: string }) => {
       }
     });
     // Reload timelines to remove activities
-    await ownTimeline?.getOrCreate({ watch: true });
-    await ownStoryTimeline?.getOrCreate({ watch: true });
-  }, [targetUserFeed, targetStoryFeed, ownTimeline, ownStoryTimeline]);
+    await reloadTimelines();
+  }, [targetUserFeed, targetStoryFeed, ownTimeline, ownStoryTimeline, reloadTimelines]);
 
   const toggleFollow = useCallback(() => {
     if (isFollowing) {

sample-apps/react-demo/app/components/activity/Activity.tsx

@@ -2,62 +2,27 @@ import { type ActivityResponse } from '@stream-io/feeds-react-sdk';
 import { ActivityHeader } from './ActivityHeader';
 import { ActivityInteractions } from './activity-interactions/ActivityInteractions';
 import { ActivityContent } from './ActivityContent';
+import { ActivityParent } from './ActivityParent';
 import { NavLink } from '../utility/NavLink';
 
-const ParentActivityPreview = ({ parent }: { parent: ActivityResponse }) => {
-  return (
-    <NavLink href={`/activity/${parent.id}`}>
-      <div className="border border-base-300 rounded-lg p-3 bg-base-200/50 hover:bg-base-200 transition-colors cursor-pointer mb-2">
-        <div className="flex items-center gap-2 mb-1">
-          {parent.user.image && (
-            <img
-              src={parent.user.image}
-              alt={parent.user.name || parent.user.id}
-              className="w-4 h-4 rounded-full"
-            />
-          )}
-          <span className="text-xs font-medium text-base-content/80">
-            {parent.user.name || parent.user.id}
-          </span>
-        </div>
-        {parent.text && (
-          <p className="text-sm text-base-content/70 line-clamp-2">{parent.text}</p>
-        )}
-        {!parent.text && parent.attachments.length > 0 && (
-          <p className="text-sm text-base-content/50 italic">Media attachment</p>
-        )}
-      </div>
-    </NavLink>
-  );
-};
-
 export const Activity = ({
   activity,
   location,
 }: {
   activity: ActivityResponse;
   location: 'timeline' | 'profile' | 'foryou' | 'preview' | 'search';
 }) => {
-  const showParentPreview = activity.parent && location !== 'preview';
 
   return (
     <div className="w-full flex flex-col items-start gap-4">
       <ActivityHeader
         activity={activity}
         withFollowButton={location === 'foryou'}
-        withLink={location === 'timeline' || location === 'profile' || location === 'search'}
+        withLink={location === 'timeline' || location === 'profile' || location === 'search' || location === 'foryou'}
         withActions={location === 'timeline' || location === 'profile'}
       />
-      <ActivityContent activity={activity} />
-      {showParentPreview && activity.parent && (
-        <div className="w-full">
-          <div className="text-xs text-base-content/60 mb-1 flex items-center gap-1">
-            <span className="material-symbols-outlined text-[0.75rem]">repeat</span>
-            <span>Reposted</span>
-          </div>
-          <ParentActivityPreview parent={activity.parent} />
-        </div>
-      )}
+      <ActivityContent activity={activity} withoutLinks={location === 'preview'} />
+      {activity?.parent ? (location === 'preview' ? <ActivityParent activity={activity} /> : <NavLink className="w-full min-w-0 max-w-full" href={`/activity/${activity.parent?.id}`}><ActivityParent activity={activity} /></NavLink>) : null}
       {location !== 'preview' && <ActivityInteractions activity={activity} />}
     </div>
   );

sample-apps/react-demo/app/components/activity/ActivityComposer.tsx

@@ -58,8 +58,6 @@ export const ActivityComposer = ({
     [feed, client, activity?.id, parent?.id, onSave],
   );
 
-  const isReply = !!parent;
-
   return (
     <div className="w-full flex flex-col gap-3">
       {parent && (
@@ -77,8 +75,6 @@ export const ActivityComposer = ({
         initialAttachments={initialAttachments}
         initialMentionedUsers={initialMentionedUsers}
         onSubmit={handleSubmit}
-        submitLabel={activity?.id ? 'Save' : isReply ? 'Repost' : 'Post'}
-        placeholder={isReply ? 'Add a comment...' : undefined}
         textareaBorder={textareaBorder}
       />
     </div>

sample-apps/react-demo/app/components/activity/ActivityContent.tsx

@@ -1,8 +1,8 @@
 import { type ActivityResponse } from "@stream-io/feeds-react-sdk";
 import { Content } from "../common/Content";
 
-export const ActivityContent = ({ activity }: { activity: ActivityResponse }) => {
+export const ActivityContent = ({ activity, withoutLinks = false }: { activity: ActivityResponse, withoutLinks?: boolean }) => {
   return (
-    <Content text={activity.text} attachments={activity.attachments} moderation={activity.moderation} location="activity" mentioned_users={activity.mentioned_users} />
+    <Content text={activity.text} attachments={activity.attachments} moderation={activity.moderation} location="activity" mentioned_users={activity.mentioned_users} withoutLinks={withoutLinks} />
   );
 };