@stream-io/feeds-client 0.2.7 → 0.2.9

package/src/bindings/react/hooks/feed-state-hooks/useOwnFollows.ts

@@ -0,0 +1,18 @@
+import { Feed, FeedState } from '@self';
+import { useFeedContext } from '../../contexts/StreamFeedContext';
+import { useStateStore } from '@stream-io/state-store/react-bindings';
+
+/**
+ * A React hook that returns a reactive array of feeds that the current user
+ * owns and are following the respective feed that we are observing.
+ */
+export const useOwnFollows = (feedFromProps?: Feed) => {
+  const feedFromContext = useFeedContext();
+  const feed = feedFromProps ?? feedFromContext;
+
+  return useStateStore(feed?.state, selector);
+};
+
+const selector = ({ own_follows }: FeedState) => ({
+  own_follows,
+});

package/src/bindings/react/hooks/internal/useStableCallback.ts

@@ -0,0 +1,37 @@
+import { useCallback, useRef } from 'react';
+
+export type StableCallback<A extends unknown[], R> = (...args: A) => R;
+
+/**
+ * A utility hook implementing a stable callback. It takes in an unstable method that
+ * is supposed to be invoked somewhere deeper in the DOM tree without making it
+ * change its reference every time the parent component rerenders. It will also return
+ * the value of the callback if it does return one.
+ * A common use-case would be having a function whose invocation depends on state
+ * somewhere high up in the DOM tree and wanting to use the same function deeper
+ * down, for example in a leaf node and simply using useCallback results in
+ * cascading dependency hell. If we wrap it in useStableCallback, we would be able
+ * to:
+ * - Use the same function as a dependency of another hook (since it is stable)
+ * - Still invoke it and get the latest state
+ *
+ * **Caveats:**
+ * - Never wrap a function that is supposed to return a React.ReactElement in
+ *   useStableCallback, since React will not know that the DOM needs to be updated
+ *   whenever the callback value changes (for example, renderItem from FlatList must
+ *   never be wrapped in this hook)
+ * - Always prefer using a standard useCallback/stable function wherever possible
+ *   (the purpose of useStableCallback is to bridge the gap between top level contexts
+ *   and cascading rereders in downstream components - **not** as an escape hatch)
+ * @param callback - the callback we want to stabilize
+ */
+export const useStableCallback = <A extends unknown[], R>(
+  callback: StableCallback<A, R>,
+): StableCallback<A, R> => {
+  const ref = useRef(callback);
+  ref.current = callback;
+
+  return useCallback<StableCallback<A, R>>((...args) => {
+    return ref.current(...args);
+  }, []);
+};

package/src/bindings/react/hooks/search-state-hooks/useSearchQuery.ts

@@ -0,0 +1,14 @@
+import type { SearchController, SearchControllerState } from '@self';
+import { useSearchContext } from '../../contexts/StreamSearchContext';
+import { useStateStore } from '@stream-io/state-store/react-bindings';
+
+export const useSearchQuery = (controllerFromProps?: SearchController) => {
+  const controllerFromState = useSearchContext();
+  const controller = controllerFromProps ?? controllerFromState;
+
+  return useStateStore(controller?.state, selector);
+};
+
+const selector = ({ searchQuery }: SearchControllerState) => ({
+  searchQuery,
+});

package/src/bindings/react/hooks/search-state-hooks/useSearchResult.ts

@@ -0,0 +1,36 @@
+import type { SearchSource, SearchSourceState } from '@self';
+import { useMemo } from 'react';
+import { useSearchResultsContext } from '../../contexts/StreamSearchResultsContext';
+import { useStateStore } from '@stream-io/state-store/react-bindings';
+import { useStableCallback } from '../internal';
+
+export const useSearchResult = (sourceFromProps?: SearchSource) => {
+  const sourceFromContext = useSearchResultsContext();
+  const source = sourceFromProps ?? sourceFromContext;
+
+  const { items, error, isLoading, hasNext } =
+    useStateStore(source?.state, selector) ?? {};
+
+  const loadMore = useStableCallback(async () => {
+    if (hasNext) {
+      source?.search();
+    }
+  });
+
+  return useMemo(
+    () => ({ items, error, isLoading, hasNext, loadMore }),
+    [error, hasNext, isLoading, items, loadMore],
+  );
+};
+
+const selector = ({
+  items,
+  isLoading,
+  hasNext,
+  lastQueryError,
+}: SearchSourceState) => ({
+  items,
+  isLoading,
+  hasNext,
+  error: lastQueryError,
+});

package/src/bindings/react/hooks/search-state-hooks/useSearchSources.ts

@@ -0,0 +1,17 @@
+import type {
+  SearchController,
+  SearchControllerState,
+} from '@self';
+import { useSearchContext } from '../../contexts/StreamSearchContext';
+import { useStateStore } from '@stream-io/state-store/react-bindings';
+
+export const useSearchSources = (controllerFromProps?: SearchController) => {
+  const controllerFromState = useSearchContext();
+  const controller = controllerFromProps ?? controllerFromState;
+
+  return useStateStore(controller?.state, selector);
+};
+
+const selector = ({ sources }: SearchControllerState) => ({
+  sources,
+});

package/src/bindings/react/hooks/useCreateFeedsClient.ts

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+import {
+  FeedsClient,
+  type FeedsClientOptions,
+  type UserRequest,
+  type TokenOrProvider,
+} from '@self';
+
+/**
+ * A React hook to create, connect and return an instance of `FeedsClient`.
+ */
+export const useCreateFeedsClient = ({
+  apiKey,
+  tokenOrProvider,
+  userData,
+  options,
+}: {
+  apiKey: string;
+  tokenOrProvider: TokenOrProvider;
+  userData: UserRequest;
+  options?: FeedsClientOptions;
+}) => {
+  const [client, setClient] = useState<FeedsClient | null>(
+    () => new FeedsClient(apiKey, options),
+  );
+  const [error, setError] = useState<Error | null>(null);
+  const [cachedUserData, setCachedUserData] = useState(userData);
+
+  const [cachedOptions] = useState(options);
+
+  if (error) {
+    throw error;
+  }
+
+  if (userData.id !== cachedUserData.id) {
+    setCachedUserData(userData);
+  }
+
+  useEffect(() => {
+    const _client = new FeedsClient(apiKey, cachedOptions);
+
+    const connectionPromise = _client
+      .connectUser(cachedUserData, tokenOrProvider)
+      .then(() => {
+        setError(null);
+        console.log('Successfully connected user: ', cachedUserData.id);
+      })
+      .catch((err) => {
+        setError(err);
+      });
+
+    setClient(_client);
+
+    return () => {
+      setClient(null);
+      connectionPromise
+        .then(() => {
+          setError(null);
+          return _client.disconnectUser();
+        })
+        .catch((err) => {
+          setError(err);
+        })
+        .then(() => {
+          console.log(
+            `Connection for user "${cachedUserData.id}" has been closed`,
+          );
+        });
+    };
+  }, [apiKey, cachedUserData, cachedOptions, tokenOrProvider]);
+
+  return client;
+};

package/src/bindings/react/hooks/util/useBookmarkActions.ts

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import type { ActivityResponse } from '@self';
+import { useFeedsClient } from '../../contexts/StreamFeedsContext';
+import { useStableCallback } from '../internal';
+
+/**
+ * A utility hook that takes in an entity and creates bookmark actions
+ * that can then be used on the UI. The entity is expected to be an ActivityResponse.
+ * @param entity - The entity to which we want to apply reaction actions, expects an ActivityResponse.
+ */
+export const useBookmarkActions = ({
+  entity,
+}: {
+  entity: ActivityResponse;
+}) => {
+  const client = useFeedsClient();
+
+  const hasOwnBookmark = entity.own_bookmarks?.length > 0;
+
+  const addBookmark = useStableCallback(async () => {
+    await client?.addBookmark({ activity_id: entity.id });
+  });
+
+  const removeBookmark = useStableCallback(async () => {
+    await client?.deleteBookmark({ activity_id: entity.id });
+  });
+
+  const toggleBookmark = useStableCallback(async () => {
+    if (hasOwnBookmark) {
+      await removeBookmark();
+    } else {
+      await addBookmark();
+    }
+  });
+
+  return useMemo(
+    () => ({ addBookmark, removeBookmark, toggleBookmark }),
+    [addBookmark, removeBookmark, toggleBookmark],
+  );
+};

package/src/bindings/react/hooks/util/useReactionActions.ts

@@ -0,0 +1,56 @@
+import { useMemo } from 'react';
+import { isCommentResponse, CommentParent } from '@self';
+import { useStableCallback } from '../internal';
+import { useFeedsClient } from '../../contexts/StreamFeedsContext';
+
+/**
+ * A utility hook that takes in an entity and a reaction type, and creates reaction actions
+ * that can then be used on the UI. The entity can be either an ActivityResponse or a CommentResponse
+ * as the hook determines internally which APIs it is supposed to use, while taking the
+ * correct ownCapabilities into account.
+ * @param entity - The entity to which we want to apply reaction actions, can be either ActivityResponse or CommentResponse.
+ * @param type - The type of reaction we want to add or remove.
+ */
+export const useReactionActions = ({
+  entity,
+  type,
+}: {
+  entity: CommentParent;
+  type: string;
+}) => {
+  const client = useFeedsClient();
+
+  const isComment = isCommentResponse(entity);
+  const hasOwnReaction = useMemo(
+    () => !!entity.own_reactions?.find((r) => r.type === type),
+    [entity.own_reactions, type],
+  );
+
+  const addReaction = useStableCallback(async () => {
+    await (isComment
+      ? client?.addCommentReaction({ id: entity.id, type })
+      : client?.addReaction({ activity_id: entity.id, type }));
+  });
+
+  const removeReaction = useStableCallback(async () => {
+    await (isComment
+      ? client?.deleteCommentReaction({ id: entity.id, type })
+      : client?.deleteActivityReaction({
+          activity_id: entity.id,
+          type,
+        }));
+  });
+
+  const toggleReaction = useStableCallback(async () => {
+    if (hasOwnReaction) {
+      await removeReaction();
+    } else {
+      await addReaction();
+    }
+  });
+
+  return useMemo(
+    () => ({ addReaction, removeReaction, toggleReaction }),
+    [addReaction, removeReaction, toggleReaction],
+  );
+};

package/{@react-bindings → src/bindings/react}/index.ts

@@ -1,6 +1,6 @@
 // Hooks
 
-export * from './hooks/useStateStore';
+export * from '@stream-io/state-store/react-bindings';
 export * from './hooks/useCreateFeedsClient';
 
 export * from './hooks/client-state-hooks';

package/src/bindings/react/wrappers/StreamFeed.tsx

@@ -0,0 +1,23 @@
+import { PropsWithChildren } from 'react';
+import { StreamFeedContext } from '../contexts/StreamFeedContext';
+import type { Feed } from '@self';
+
+/**
+ * The props for the StreamFeed component. It accepts a `Feed` instance.
+ */
+export type StreamFeedProps = {
+  feed: Feed;
+};
+
+export const StreamFeed = ({
+  feed,
+  children,
+}: PropsWithChildren<StreamFeedProps>) => {
+  return (
+    <StreamFeedContext.Provider value={feed}>
+      {children}
+    </StreamFeedContext.Provider>
+  );
+};
+
+StreamFeed.displayName = 'StreamFeed';

package/src/bindings/react/wrappers/StreamFeeds.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import { StreamFeedsContext } from '../contexts/StreamFeedsContext';
+import type { StreamFeedsContextProps } from '../contexts/StreamFeedsContext';
+
+export const StreamFeeds = ({ client, children }: PropsWithChildren<StreamFeedsContextProps>) => {
+  return (
+    <StreamFeedsContext.Provider value={client}>
+      {children}
+    </StreamFeedsContext.Provider>
+  );
+};
+
+StreamFeeds.displayName = 'StreamFeeds';

package/src/bindings/react/wrappers/StreamSearch.tsx

@@ -0,0 +1,23 @@
+import { PropsWithChildren } from 'react';
+import { StreamSearchContext } from '../contexts/StreamSearchContext';
+import type { SearchController } from '@self';
+
+/**
+ * The props for the StreamSearch component. It accepts a `SearchController` instance.
+ */
+export type StreamSearchProps = {
+  searchController: SearchController | undefined;
+};
+
+export const StreamSearch = ({
+  searchController,
+  children,
+}: PropsWithChildren<StreamSearchProps>) => {
+  return (
+    <StreamSearchContext.Provider value={searchController}>
+      {children}
+    </StreamSearchContext.Provider>
+  );
+};
+
+StreamSearch.displayName = 'StreamSearch';

package/src/bindings/react/wrappers/StreamSearchResults.tsx

@@ -0,0 +1,23 @@
+import { PropsWithChildren } from 'react';
+import { StreamSearchResultsContext } from '../contexts/StreamSearchResultsContext';
+import type { SearchSource } from '@self';
+
+/**
+ * The props for the StreamSearchResults component. It accepts a `SearchSource` instance.
+ */
+export type StreamSearchResultsProps = {
+  source: SearchSource;
+};
+
+export const StreamSearchResults = ({
+  source,
+  children,
+}: PropsWithChildren<StreamSearchResultsProps>) => {
+  return (
+    <StreamSearchResultsContext.Provider value={source}>
+      {children}
+    </StreamSearchResultsContext.Provider>
+  );
+};
+
+StreamSearchResults.displayName = 'StreamSearchResults';

package/src/common/ApiClient.ts

@@ -9,11 +9,26 @@ import { getRateLimitFromResponseHeader } from './rate-limit';
 import { KnownCodes, randomId } from './utils';
 import { TokenManager } from './TokenManager';
 import { ConnectionIdManager } from './ConnectionIdManager';
+import { getLogger } from '../utils/logger';
+// this gets replaced during the build process (var version = 'x.y.z';)
+import { version } from '../../package.json';
+
+type RequiredAtLeastOne<T> = {
+  [K in keyof T]: Required<Pick<T, K>> & Partial<Omit<T, K>>;
+}[keyof T];
+
+// Information that can be set to be sent as part of the header of each request
+export type ExtraHeaderInformation = Partial<{
+  sdkIdentifier: { name: string; version: string };
+  deviceIdentifier: RequiredAtLeastOne<{ os: string; model: string }>;
+}>;
 
 export class ApiClient {
   public readonly baseUrl: string;
   private readonly axiosInstance: AxiosInstance;
   private timeout: number;
+  public extraHeaderInformation: ExtraHeaderInformation = {};
+  private readonly logger = getLogger('api-client');
 
   constructor(
     public readonly apiKey: string,
@@ -47,6 +62,7 @@ export class ApiClient {
       body?.watch ||
       body?.presence
     ) {
+      this.logger.info('Getting connection_id for watch or presence request');
       const connectionId = await this.connectionIdManager.getConnectionId();
       queryParams.connection_id = connectionId;
     }
@@ -83,6 +99,11 @@ export class ApiClient {
     }
 
     try {
+      this.logger.debug(
+        `Sending request ${method.toUpperCase()}:${requestUrl} with:`,
+        { queryParams },
+        { body },
+      );
       const response = await this.axiosInstance.request<T>({
         url: requestUrl,
         method,
@@ -101,41 +122,43 @@ export class ApiClient {
       );
 
       return { body: response.data, metadata };
-    } catch (error: any) {
-      if (this.isAxiosError(error)) {
-        if (!error.response) {
-          throw new StreamApiError(`Stream error ${error.message}`);
-        } else {
-          // Stream specific error response
-          const data = error.response.data as StreamApiError;
-          const code = data?.code ?? error.response.status;
-          const message = data?.message ?? error.response.statusText;
-          if (
-            code === KnownCodes.TOKEN_EXPIRED &&
-            error.response.status === 401 &&
-            !this.tokenManager.isStatic()
-          ) {
-            await this.tokenManager.loadToken();
-            return await this.sendRequest(
-              method,
-              url,
-              pathParams,
-              queryParams,
-              body,
-            );
-          }
-          throw new StreamApiError(
-            `Stream error code ${code}: ${message}`,
-            this.getRequestMetadata(client_request_id, error.response),
-            code,
-            undefined,
-          );
-        }
-      } else {
+    } catch (error) {
+      if (!this.isAxiosError(error)) {
         throw new Error('Unknown error received during an API call', {
           cause: error,
         });
+      } else if (!error.response) {
+        throw new StreamApiError(`Stream error ${error.message}`);
+      }
+
+      // Stream specific error response
+      const data = error.response.data as StreamApiError;
+      const code = data?.code ?? error.response.status;
+      const message = data?.message ?? error.response.statusText;
+      if (
+        code === KnownCodes.TOKEN_EXPIRED &&
+        error.response.status === 401 &&
+        !this.tokenManager.isStatic()
+      ) {
+        this.logger.info(
+          'Token expired, fetching a new one and retrying request',
+        );
+        await this.tokenManager.loadToken();
+        return await this.sendRequest(
+          method,
+          url,
+          pathParams,
+          queryParams,
+          body,
+        );
       }
+
+      throw new StreamApiError(
+        `Stream error code ${code}: ${message}`,
+        this.getRequestMetadata(client_request_id, error.response),
+        code,
+        undefined,
+      );
     }
   };
 
@@ -153,11 +176,41 @@ export class ApiClient {
     return `${wsBaseURL}/api/v2/connect?${params.toString()}`;
   }
 
+  public generateStreamClientHeader() {
+    // TODO: figure out a way to inject this during the build process
+    const clientBundle = import.meta.env.VITE_CLIENT_BUNDLE;
+
+    let userAgentString = '';
+    if (this.extraHeaderInformation.sdkIdentifier) {
+      userAgentString = `stream-feeds-${this.extraHeaderInformation.sdkIdentifier.name}-v${this.extraHeaderInformation.sdkIdentifier.version}-llc-v${version}`;
+    } else {
+      userAgentString = `stream-feeds-js-v${version}`;
+    }
+
+    const { os, model } = this.extraHeaderInformation.deviceIdentifier ?? {};
+
+    return (
+      [
+        // reports the device OS, if provided
+        ['os', os],
+        // reports the device model, if provided
+        ['device_model', model],
+        // reports which bundle is being picked from the exports
+        ['client_bundle', clientBundle],
+      ] as const
+    ).reduce(
+      (withArguments, [key, value]) =>
+        value && value.length > 0
+          ? withArguments.concat(`|${key}=${value}`)
+          : withArguments,
+      userAgentString,
+    );
+  }
+
   private get commonHeaders(): Record<string, string> {
     return {
       'stream-auth-type': 'jwt',
-      // TODO: add version here
-      'X-Stream-Client': 'stream-feeds-js-',
+      'X-Stream-Client': this.generateStreamClientHeader(),
     };
   }
 

package/src/common/EventDispatcher.ts

@@ -1,5 +1,5 @@
 import { FeedsEvent } from '../types';
-import { LogLevel } from './types';
+import { getLogger } from '../utils/logger';
 
 export class EventDispatcher<
   Type extends string = FeedsEvent['type'],
@@ -9,10 +9,7 @@ export class EventDispatcher<
     Record<Type | 'all', Array<(event: Event) => void> | undefined>
   > = {};
 
-  private readonly logger = (level: LogLevel, message: string, extra: any) => {
-    // TODO implement logging
-    console.log(level, message, extra);
-  };
+  private readonly logger = getLogger('event-dispatcher');
 
   dispatch = (event: Event) => {
     const listeners = [
@@ -24,7 +21,7 @@ export class EventDispatcher<
         fn(event);
       } catch (e) {
         // TODO: do we really want to silence this error?
-        this.logger('warn', 'Listener failed with error', e);
+        this.logger.error('Listener failed with error', e);
       }
     }
   };

package/src/common/Poll.ts

@@ -1,4 +1,4 @@
-import { StateStore } from './StateStore';
+import { StateStore } from '@stream-io/state-store';
 import type { FeedsClient } from '../feeds-client';
 import type {
   PollVote,

package/src/common/TokenManager.ts

@@ -1,3 +1,4 @@
+import { getLogger } from '../utils/logger';
 import { isFunction, sleep } from './utils';
 
 /**
@@ -10,6 +11,7 @@ export class TokenManager {
   type: 'static' | 'provider';
   token?: string;
   tokenProvider?: string | (() => Promise<string>);
+  private readonly logger = getLogger('token-manager');
 
   constructor() {
     this.loadTokenPromise = null;
@@ -49,6 +51,8 @@ export class TokenManager {
   // Fetches a token from tokenProvider function and sets in tokenManager.
   // In case of static token, it will simply resolve to static token.
   loadToken = () => {
+    this.logger.info('Loading a new token');
+
     if (this.loadTokenPromise) {
       return this.loadTokenPromise;
     }