chore: make sample user friendly (#90)

🎫 Ticket: https://linear.app/stream/issue/XYZ-123

📑 Docs: https://github.com/GetStream/docs-content/pull/<id>

### 💡 Overview

### 📝 Implementation notes

Author: isekovanic

sample-apps/react-native/ExpoTikTokApp/.env-example

@@ -1,4 +1,2 @@
-EXPO_PUBLIC_TOKEN_CREATION_URL=
-EXPO_PUBLIC_BASE_URL=
 EXPO_PUBLIC_PLACES_API_KEY=
 EXPO_PUBLIC_MAPS_API_KEY=

sample-apps/react-native/ExpoTikTokApp/README.md

@@ -0,0 +1,112 @@
+# Expo TikTok Sample App
+
+This is a sample application displaying some of the capabilities of our `feeds-react-native-sdk`, build using `Expo`.
+
+## Running the app
+
+### Install the `expo` toolset
+
+- Install the global `expo` package by running `npm install -g expo`
+
+### Clone the Project
+
+```bash
+git clone https://github.com/GetStream/stream-feeds-js.git
+```
+
+### Installation
+
+1. At the root of the project, install dependencies
+
+```bash
+yarn install
+```
+
+2. Build all of the libraries
+
+```bash
+yarn build:libs
+```
+
+3. Move to the `packages/feeds-client` directory and run it in `--watch` mode:
+
+```bash
+cd packages/feeds-client && yarn start
+```
+
+4. Open a new terminal window and move to the `sample-apps/react-native/ExpoTikTokApp` directory and install the dependencies:
+
+```bash
+cd sample-apps/react-native/ExpoTikTokApp && yarn install
+```
+
+5. (optional) Generate a Google Maps API key
+
+In order for viewing a designated location on a map to work as a feature, you will need to create a Google Maps API key.
+
+For this purpose, you can follow [their official documentation](https://developers.google.com/maps/documentation/android-sdk/get-api-key).
+
+To include it in the app, you will need to set it to the `EXPO_PUBLIC_MAPS_API_KEY` environment variable.
+
+Omitting this step will simply disable the feature.
+
+> **WARNING**: Before you can start using the Google Maps Platform APIs and SDKs, you must sign up and create a [billing account](https://developers.google.com/maps/gmp-get-started#create-billing-account)!
+
+6. (optional) Generate a `Geoapify` API key
+
+In order for the location search feature to be available, you're going to need to generate a `Geoapify` API key. 
+
+To do that, you may follow [their documentation](https://www.geoapify.com/get-started-with-maps-api/).
+
+To include it in the app, you will need to set it to the `EXPO_PUBLIC_PLACES_API_KEY` environment variable.
+
+Omitting this step will simply disable the feature.
+
+7. (optional) Create a `.env` file
+
+If you did any of steps `5.` or `6.`, you will need to add them to a `.env` file so that they can be consumed by the app.
+
+To do this, create the file in `sample-apps/react-native/ExpoTikTokApp` and fill in the respective environment variables.
+
+It should look something like this:
+
+```
+EXPO_PUBLIC_PLACES_API_KEY=<geapify-api-key>
+EXPO_PUBLIC_MAPS_API_KEY=<google-maps-api-key>
+```
+
+### Run
+
+To run the application for different platforms, use the following commands:
+
+- For iOS
+
+```bash
+yarn run ios -d
+```
+
+- For android
+
+```bash
+yarn run android -d
+```
+
+## Using user tokens directly
+
+If you want to use user tokens instead of the default token provider setup you can do the following:
+
+1. Generate a user token using a user ID and API secret [here](https://getstream.io/chat/docs/react/token_generator/).
+2. Open `sample-apps/react-native/ExpoTikTokApp/users.json` and add a `token` field to any user
+
+The `token` field will be preferred over the token provider, if it exists.
+
+> **NOTE**: Since users are cached when logged in, if you change the `token` of a user from `users.json` it's best to uninstall and then reinstall the app so that the cache is cleared.
+
+## Using your own API key
+
+To use your own API key with the sample app, you may do the following steps.
+
+1. Open the `sample-apps/react-native/ExpoTikTokApp/constants/stream.ts` file and change the `apiKey` variable to your own API key
+2. Populate the app with the respective API key with users, their feeds and their follow relationships
+   3. The easiest way to do this is by running the `sample-apps/react-sample-app/setup-env.js` script either directly from our repository or from your own (you can temporarily replace the environment variables in place with your own credentials, you can simply omit `NEXT_PUBLIC_API_URL`)
+4. Create user tokens manually for the users you'd like to use like it's explained [here](#using-user-tokens-directly), since the token provider is not going to work out of the box

sample-apps/react-native/ExpoTikTokApp/app/_layout.tsx

@@ -11,11 +11,14 @@ import React, { useEffect } from 'react';
 import { Text } from 'react-native';
 import 'react-native-reanimated';
 import { StreamFeeds } from '@stream-io/feeds-react-native-sdk';
-import type { UserRequest } from '@stream-io/feeds-react-native-sdk';
 import LoginScreen from '@/components/LoginScreen';
 
 import { useColorScheme } from '@/components/useColorScheme';
-import { UserContextProvider, useUserContext } from '@/contexts/UserContext';
+import {
+  LocalUser,
+  UserContextProvider,
+  useUserContext,
+} from '@/contexts/UserContext';
 import { useCreateClient } from '@/hooks/useCreateClient';
 import { ErrorBoundary as InternalErrorBoundary } from '@/components/ErrorBoundary';
 import { View } from 'react-native';
@@ -67,7 +70,7 @@ const RootLayout = () => {
   return <RootLayoutNav user={user} />;
 };
 
-const RootLayoutNav = ({ user }: { user: UserRequest }) => {
+const RootLayoutNav = ({ user }: { user: LocalUser }) => {
   const colorScheme = useColorScheme();
 
   const client = useCreateClient(user);

sample-apps/react-native/ExpoTikTokApp/components/LocationPreview.tsx

@@ -3,6 +3,7 @@ import { Text, StyleSheet, Pressable } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { Place } from '@/components/PlaceSearchDropdown';
 import { useRouter } from 'expo-router';
+import { mapApiKey } from '@/constants/stream';
 
 type LocationPreviewProps = {
   location: Omit<Place, 'id' | 'address'>;
@@ -12,9 +13,11 @@ export const LocationPreview = ({ location }: LocationPreviewProps) => {
   const router = useRouter();
   return (
     <Pressable
-      onPress={() =>
-        router.push({ pathname: '/location-map-screen', params: location })
-      }
+      onPress={() => {
+        if (mapApiKey) {
+          router.push({ pathname: '/location-map-screen', params: location });
+        }
+      }}
       style={styles.container}
     >
       <Ionicons

sample-apps/react-native/ExpoTikTokApp/components/LoginScreen.tsx

@@ -21,7 +21,7 @@ const PredefinedUserItem = ({ item }: { item: LocalUser}) => {
   const { logIn } = useUserContext();
 
   const handleUserSelect = useCallback((user: LocalUser) => {
-    logIn({ id: user.id });
+    logIn(user);
   }, [logIn]);
 
   return (

sample-apps/react-native/ExpoTikTokApp/constants/stream.ts

@@ -1,7 +1,7 @@
-// export const apiKey = 'fa5xpkvxrdw4';
 export const apiKey = 'ccqysy8u2tm6';
 export const tokenCreationUrl = 'https://pronto.getstream.io/api/auth/create-token?environment=feeds-react-native-sample-app';
 export const placesApiKey = process.env.EXPO_PUBLIC_PLACES_API_KEY;
+export const mapApiKey = process.env.EXPO_PUBLIC_MAPS_API_KEY;
 
 export const COMMENTS_LOADING_CONFIG = { sort: 'last', limit: 5 };
 export const ACTIVITY_TEXT_MAX_CHARACTERS = 250;

sample-apps/react-native/ExpoTikTokApp/contexts/UserContext.tsx

@@ -8,10 +8,12 @@ import {
 import { UserRequest } from '@stream-io/feeds-react-native-sdk';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
+export type LocalUser = Pick<UserRequest, 'id' | 'name' | 'image'> & { token?: string };
+
 type UserContextValue = {
-  user: UserRequest | null;
+  user: LocalUser | null;
   userLoaded: boolean;
-  logIn: (user: UserRequest) => Promise<void>;
+  logIn: (user: LocalUser) => Promise<void>;
   logOut: () => Promise<void>;
 };
 
@@ -23,7 +25,7 @@ const UserContext = createContext<UserContextValue>({
 });
 
 export const UserContextProvider = ({ children }: PropsWithChildren) => {
-  const [cachedUser, setCachedUser] = useState<UserRequest | null>(null);
+  const [cachedUser, setCachedUser] = useState<LocalUser | null>(null);
   const [userLoaded, setUserLoaded] = useState(false);
 
   useEffect(() => {
@@ -37,7 +39,7 @@ export const UserContextProvider = ({ children }: PropsWithChildren) => {
     fetchUserFromStorage();
   }, []);
 
-  const logIn = async (user: UserRequest) => {
+  const logIn = async (user: LocalUser) => {
     await AsyncStorage.setItem('@stream-io/login-config', JSON.stringify(user));
     setCachedUser(user);
   };

sample-apps/react-native/ExpoTikTokApp/hooks/useCreateClient.ts

@@ -1,9 +1,7 @@
 import { useCallback } from 'react';
-import {
-  useCreateFeedsClient
-} from '@stream-io/feeds-react-native-sdk';
-import type { UserRequest } from '@stream-io/feeds-react-native-sdk';
+import { useCreateFeedsClient } from '@stream-io/feeds-react-native-sdk';
 import { apiKey, tokenCreationUrl } from '@/constants/stream';
+import { LocalUser } from '@/contexts/UserContext';
 
 const tokenProviderFactory = (userId: string) => async () => {
   if (!tokenCreationUrl) {
@@ -20,17 +18,19 @@ const tokenProviderFactory = (userId: string) => async () => {
   return data.token;
 };
 
-const CLIENT_OPTIONS = { base_url: process.env.EXPO_PUBLIC_BASE_URL };
+const CLIENT_OPTIONS = {};
 
-export const useCreateClient = (user: UserRequest) => {
+export const useCreateClient = (user: LocalUser) => {
   const tokenProvider = useCallback(() => {
     const provider = tokenProviderFactory(user.id);
     return provider();
   }, [user.id]);
 
+  const userData = { id: user.id, image: user.image, name: user.name };
+
   const client = useCreateFeedsClient({
-    userData: user,
-    tokenOrProvider: tokenProvider,
+    userData,
+    tokenOrProvider: user.token ?? tokenProvider,
     options: CLIENT_OPTIONS,
     apiKey,
   });
@@ -39,4 +39,4 @@ export const useCreateClient = (user: UserRequest) => {
   globalThis.client = client;
 
   return client;
-}
+};

sample-apps/react-native/ExpoTikTokApp/users.json

@@ -2,31 +2,31 @@
   {
     "id": "susan",
     "name": "Susan",
-    "image": "https://randomuser.me/api/portraits/women/47.jpg",
+    "image": "https://randomuser.me/api/portraits/women/47.jpg"
   },
   {
     "id": "adam",
     "name": "Adam",
-    "image": "https://randomuser.me/api/portraits/men/38.jpg",
+    "image": "https://randomuser.me/api/portraits/men/38.jpg"
   },
   {
     "id": "thomas",
     "name": "Thomas",
-    "image": "https://randomuser.me/api/portraits/men/42.jpg",
+    "image": "https://randomuser.me/api/portraits/men/42.jpg"
   },
   {
     "id": "sloan",
     "name": "Sloan",
-    "image": "https://randomuser.me/api/portraits/women/60.jpg",
+    "image": "https://randomuser.me/api/portraits/women/60.jpg"
   },
   {
     "id": "tiffany",
     "name": "Tiffany",
-    "image": "https://randomuser.me/api/portraits/women/40.jpg",
+    "image": "https://randomuser.me/api/portraits/women/40.jpg"
   },
   {
     "id": "jack",
     "name": "Jack",
-    "image": "https://randomuser.me/api/portraits/men/54.jpg",
+    "image": "https://randomuser.me/api/portraits/men/54.jpg"
   }
 ]