fix: List/Item & EmojiPicker async data loading + docs update

GetStream · Nov 8, 2023 · dedefac · dedefac
1 parent e4affaa
commit dedefac
Show file tree

Hide file tree

Showing 15 changed files with 408 additions and 155 deletions.
diff --git a/docusaurus/docs/React/_docusaurus-components/GHComponentLink.jsx b/docusaurus/docs/React/_docusaurus-components/GHComponentLink.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
-const GHComponentLink = ({ text, path, branch = 'master' }) => {
+const GHComponentLink = ({ text, as: As = React.Fragment, path, branch = 'master' }) => {
   return (
     <a
       target='_blank'
       href={`https://github.com/GetStream/stream-chat-react/blob/${branch}/src/components${path}`}
     >
-      {text}
+      <As>{text}</As>
     </a>
   );
 };

diff --git a/docusaurus/docs/React/basics/getting-started.mdx b/docusaurus/docs/React/basics/getting-started.mdx
@@ -124,10 +124,14 @@ const { client } = useChatContext();
 The [`Channel`](../components/core-components/channel.mdx) component is a React Context provider that wraps all of the logic, functionality, and UI for an individual chat channel.
 It provides five separate contexts to its children:
 
+:::caution
+`EmojiContext` has been removed in version `11.0.0`, see related release guides (["Reactions 11.0.0"](../release-guides/reactions-v11.mdx), ["EmojiPicker 11.0.0"](../release-guides/emoji-picker-v11.mdx) and ["emojiSearchIndex 11.0.0"](../release-guides/emoji-search-index-v11.mdx)) to adjust your integration to this new change.
+:::
+
 - [`ChannelStateContext`](../components/contexts/channel-state-context.mdx) - stateful data (ex: `messages` or `members`)
 - [`ChannelActionContext`](../components/contexts/channel-action-context.mdx) - action handlers (ex: `sendMessage` or `openThread`)
 - [`ComponentContext`](../components/contexts/component-context.mdx) - custom component UI overrides (ex: `Avatar` or `Message`)
-- [`EmojiContext`](../components/contexts/emoji-context.mdx) - emoji UI components and data (ex: `EmojiPicker` or `emojiConfig`)
+- [`EmojiContext`](../components/contexts/emoji-context.mdx) - emoji UI components and data (ex: `EmojiPicker` or `emojiConfig`) - removed in `11.0.0`
 - [`TypingContext`](../components/contexts/typing-context.mdx) - object of currently typing users (i.e., `typing`)
 
 ### ChannelList

diff --git a/docusaurus/docs/React/components/contexts/emoji-context.mdx b/docusaurus/docs/React/components/contexts/emoji-context.mdx
@@ -4,6 +4,10 @@ sidebar_position: 5
 title: EmojiContext
 ---
 
+:::caution
+`EmojiContext` has been removed in version `11.0.0`, see related release guides (["Reactions 11.0.0"](../release-guides/reactions-v11.mdx), ["EmojiPicker 11.0.0"](../release-guides/emoji-picker-v11.mdx) and ["emojiSearchIndex 11.0.0"](../release-guides/emoji-search-index-v11.mdx)) to adjust your integration to this new change.
+:::
+
 The `EmojiContext` is established by the `Channel` component and exposes the `useEmojiContext` hook. This context holds
 the UI components and stateful data necessary to render emoji selector functionality.
 

diff --git a/docusaurus/docs/React/components/core-components/channel.mdx b/docusaurus/docs/React/components/core-components/channel.mdx
@@ -263,45 +263,54 @@ Custom UI component to override default edit message input.
 | --------- | ---------------------------------------------------------------------------------- |
 | component | <GHComponentLink text='EditMessageForm' path='/MessageInput/EditMessageForm.tsx'/> |
 
-### Emoji
+### Emoji (removed in `11.0.0`)
 
 Custom UI component to override default `NimbleEmoji` from `emoji-mart`.
 
 | Type      |
 | --------- |
 | component |
 
-### emojiData
+### emojiData (removed in `11.0.0`)
 
 Custom prop to override default `facebook.json` emoji data set from `emoji-mart`.
 
 | Type   |
 | ------ |
 | object |
 
-### EmojiIcon
+### EmojiIcon (removed in `11.0.0`)
 
 Custom UI component for emoji button in input.
 
 | Type      | Default                                                                 |
 | --------- | ----------------------------------------------------------------------- |
 | component | <GHComponentLink text='EmojiIconSmall' path='/MessageInput/icons.tsx'/> |
 
-### EmojiIndex
+### EmojiIndex (removed in `11.0.0`)
 
-Custom UI component to override default `NimbleEmojiIndex` from `emoji-mart`.
+Custom search mechanism class to override default `NimbleEmojiIndex` class from `emoji-mart`.
 
-| Type      |
-| --------- |
-| component |
+| Type  | Default                                                                                                           |
+| ----- | ----------------------------------------------------------------------------------------------------------------- |
+| class | [NimbleEmojiIndex](https://github.com/missive/emoji-mart/blob/v3.0.1/src/utils/emoji-index/nimble-emoji-index.js) |
 
-### EmojiPicker
+### emojiSearchIndex (available since `11.0.0`)
 
-Custom UI component to override default `NimblePicker` from `emoji-mart`.
+Custom search mechanism instance or object to enable emoji autocomplete. See ["emojiSearchIndex 11.0.0"](../../release-guides/emoji-search-index-v11.mdx) release guide for more information.
 
-| Type      |
-| --------- |
-| component |
+| Type   | Default   |
+| ------ | --------- |
+| object | undefined |
+
+### EmojiPicker (changed in `11.0.0`)
+
+Custom UI component to override default `NimblePicker` from `emoji-mart`. Markup structure changed in `11.0.0`, see ["EmojiPicker 11.0.0"](../../release-guides/emoji-picker-v11.mdx) release guide for more information.
+
+| Version | Type      | Default                                                                                                  |
+| ------- | --------- | -------------------------------------------------------------------------------------------------------- |
+| >=4.0.0 | component | [NimblePicker](https://github.com/missive/emoji-mart/blob/v3.0.1/src/components/picker/nimble-picker.js) |
+| ^11.0.0 | component | undefined                                                                                                |
 
 ### EmptyPlaceholder
 
@@ -381,48 +390,50 @@ A custom function to provide size configuration for image attachments
 Allows to prevent triggering the `channel.watch()` (triggers channel query HTTP request) call when mounting the `Channel` component (the default behavior) with uninitialized (`channel.initialized`) `Channel` instance. That means that no channel data from the back-end will be received neither channel WS events will be delivered to the client. Preventing to initialize the channel on mount allows us to postpone the channel creation in the Stream's DB to a later point in time, for example, when a first message is sent:
 
 ```typescript jsx
-import {useCallback} from "react";
+import { useCallback } from 'react';
 import {
   getChannel,
   MessageInput as StreamMessageInput,
-  MessageInputProps, MessageToSend,
+  MessageInputProps,
+  MessageToSend,
   useChannelActionContext,
-  useChatContext
-} from "stream-chat-react";
-import {Message, SendMessageOptions} from "stream-chat";
+  useChatContext,
+} from 'stream-chat-react';
+import { Message, SendMessageOptions } from 'stream-chat';
 
-import {useChannelInitContext} from "../../context/ChannelInitProvider";
-import type { MyStreamChatGenerics } from "../../types";
+import { useChannelInitContext } from '../../context/ChannelInitProvider';
+import type { MyStreamChatGenerics } from '../../types';
 
 export const MessageInput = (props: MessageInputProps) => {
-  const {client} = useChatContext();
-  const {sendMessage} = useChannelActionContext();
-  const { setInitializedChannelOnMount} = useChannelInitContext();
-
-  const submitHandler: MessageInputProps['overrideSubmitHandler'] = useCallback(async (
-    message: MessageToSend<MyStreamChatGenerics>,
-    channelCid: string,
-    customMessageData?: Partial<Message<MyStreamChatGenerics>>,
-    options?: SendMessageOptions,
-  ) => {
-    const [channelType, channelId] = channelCid.split(":");
-    const channel = client.channel(channelType, channelId);
-    if (!channel.initialized) {
-      await getChannel({channel, client});
-      setInitializedChannelOnMount(true);
-    }
-
-    await sendMessage(message, customMessageData, options);
-  }, [client, sendMessage, setInitializedChannelOnMount]);
-
-  return (
-    <StreamMessageInput {...props} overrideSubmitHandler={submitHandler} />
+  const { client } = useChatContext();
+  const { sendMessage } = useChannelActionContext();
+  const { setInitializedChannelOnMount } = useChannelInitContext();
+
+  const submitHandler: MessageInputProps['overrideSubmitHandler'] = useCallback(
+    async (
+      message: MessageToSend<MyStreamChatGenerics>,
+      channelCid: string,
+      customMessageData?: Partial<Message<MyStreamChatGenerics>>,
+      options?: SendMessageOptions,
+    ) => {
+      const [channelType, channelId] = channelCid.split(':');
+      const channel = client.channel(channelType, channelId);
+      if (!channel.initialized) {
+        await getChannel({ channel, client });
+        setInitializedChannelOnMount(true);
+      }
+
+      await sendMessage(message, customMessageData, options);
+    },
+    [client, sendMessage, setInitializedChannelOnMount],
   );
+
+  return <StreamMessageInput {...props} overrideSubmitHandler={submitHandler} />;
 };
 ```
 
 | Type    | Default |
-|---------|---------|
+| ------- | ------- |
 | boolean | true    |
 
 ### Input
@@ -629,9 +640,9 @@ Custom UI component for send button.
 
 You can turn on/off thumbnail generation for video attachments
 
-| Type      |
-| --------- |
-| `boolean` |
+| Type    |
+| ------- |
+| boolean |
 
 ### skipMessageDataMemoization