fix: deprecate global config from usage and add resizableCDNHosts to …

…resizableCDNHosts (#2457) * fix: deprecate global config from usage and add resizableCDNHosts to Chat component * fix: remove unnecessary memoization * fix: lint issues
GetStream · Mar 14, 2024 · 47d503d · 47d503d
1 parent 0b53ffb
commit 47d503d
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 3 deletions.
diff --git a/docusaurus/docs/reactnative/contexts/chat-context.mdx b/docusaurus/docs/reactnative/contexts/chat-context.mdx
@@ -61,5 +61,13 @@ Array of users muted by current user.
 | ----- |
 | array |
 
+### `resizableCDNHosts`
+
+This option allows you to specify a list of CDNs that offer image resizing.
+
+| Type       | Default                  |
+| ---------- | ------------------------ |
+| `string[]` | `['.stream-io-cdn.com']` |
+
 <!-- ### setActiveChannel -->
 <!-- ### channel -->
diff --git a/docusaurus/docs/reactnative/core-components/chat.mdx b/docusaurus/docs/reactnative/core-components/chat.mdx
@@ -86,6 +86,14 @@ Themes are not hoisted though, therefore a theme provided to `Chat` will not cha
 | ------ |
 | Object |
 
+### `resizableCDNHosts`
+
+This option allows you to specify a list of CDNs that offer image resizing.
+
+| Type       | Default                  |
+| ---------- | ------------------------ |
+| `string[]` | `['.stream-io-cdn.com']` |
+
 ## UI Component Props
 
 ### `ImageComponent`

diff --git a/docusaurus/docs/reactnative/customization/global_config.mdx b/docusaurus/docs/reactnative/customization/global_config.mdx
@@ -7,8 +7,11 @@ title: Global Config
 The core of Stream Chat for React Native is it's ability to be customized to your needs.
 The new `Global Config` feature allows you to enable and disable features of the library and alter the default behavior of the SDK.
 
-We will be gradually adding more features/options to the global config.
-In the future this will be the main way to alter the default behavior of the SDK and it's components.
+:::info
+This will be not be the recommended way of setting the config in the next major version of the SDK that is v6.
+
+Use the `resizableCDNHosts` prop in the [`Chat`](../core-components/chat.mdx) component instead.
+:::
 
 ## When to use global config
 

diff --git a/package/src/components/Chat/Chat.tsx b/package/src/components/Chat/Chat.tsx
@@ -27,6 +27,7 @@ import { SDK } from '../../native';
 import { QuickSqliteClient } from '../../store/QuickSqliteClient';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { DBSyncManager } from '../../utils/DBSyncManager';
+import { StreamChatRN } from '../../utils/StreamChatRN';
 import type { Streami18n } from '../../utils/Streami18n';
 import { version } from '../../version.json';
 
@@ -35,7 +36,7 @@ init();
 export type ChatProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
-  Partial<Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'>> & {
+  Partial<Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent' | 'resizableCDNHosts'>> & {
     /**
      * When false, ws connection won't be disconnection upon backgrounding the app.
      * To receive push notifications, its necessary that user doesn't have active
@@ -142,6 +143,7 @@ const ChatWithContext = <
     enableOfflineSupport = false,
     i18nInstance,
     ImageComponent = Image,
+    resizableCDNHosts = ['.stream-io-cdn.com'],
     style,
   } = props;
 
@@ -169,6 +171,9 @@ const ChatWithContext = <
   const debugRef = useDebugContext();
   const isDebugModeEnabled = __DEV__ && debugRef && debugRef.current;
 
+  // Set the `resizableCDNHosts` as per the prop.
+  StreamChatRN.setConfig({ resizableCDNHosts });
+
   useEffect(() => {
     if (client) {
       client.setUserAgent(`${SDK}-${Platform.OS}-${version}`);
@@ -209,6 +214,7 @@ const ChatWithContext = <
     ImageComponent,
     isOnline,
     mutedUsers,
+    resizableCDNHosts,
     setActiveChannel,
   });
 

diff --git a/package/src/components/Chat/hooks/useCreateChatContext.ts b/package/src/components/Chat/hooks/useCreateChatContext.ts
@@ -14,6 +14,7 @@ export const useCreateChatContext = <
   ImageComponent,
   isOnline,
   mutedUsers,
+  resizableCDNHosts,
   setActiveChannel,
 }: ChatContextValue<StreamChatGenerics>) => {
   const channelId = channel?.id;
@@ -34,6 +35,7 @@ export const useCreateChatContext = <
       ImageComponent,
       isOnline,
       mutedUsers,
+      resizableCDNHosts,
       setActiveChannel,
     }),
     [channelId, clientValues, connectionRecovering, isOnline, mutedUsersLength],

diff --git a/package/src/contexts/chatContext/ChatContext.tsx b/package/src/contexts/chatContext/ChatContext.tsx
@@ -65,6 +65,10 @@ export type ChatContextValue<
    * @overrideType Channel
    */
   channel?: Channel<StreamChatGenerics>;
+  /**
+   * This option allows you to specify a list of CDNs that offer image resizing.
+   */
+  resizableCDNHosts?: string[];
 };
 
 export const ChatContext = React.createContext(DEFAULT_BASE_CONTEXT_VALUE as ChatContextValue);

diff --git a/package/src/utils/StreamChatRN.ts b/package/src/utils/StreamChatRN.ts
@@ -8,6 +8,8 @@ const DEFAULT_GLOBAL_STREAM_CONFIG = {
 /**
  * StreamChatRN - Global config for the RN Chat SDK
  * This config is used to enable/disable features and options for the SDK.
+ *
+ * @deprecated Use the `resizableCDNHosts` prop in the `Chat` component, instead. StreamChatRN will not be exposed starting the next major release.
  */
 export class StreamChatRN {
   /**