Merge pull request #2008 from GetStream/develop

v10.8.0

Author: MartinCupela

docusaurus/docs/React/components/message-input-components/message-input.mdx

@@ -108,6 +108,14 @@ If true, focuses the text input on component mount.
 | ------- | ------- |
 | boolean | false   |
 
+### getDefaultValue
+
+Generates the default value for the underlying textarea element. The function's return value takes precedence before `additionalTextareaProps.defaultValue`.
+
+|            Type           |
+|---------------------------|
+| () => string \| string[]) |
+
 ### grow
 
 If true, expands the text input vertically for new lines.

docusaurus/docs/React/guides/customization/adding-notification.mdx

@@ -1,6 +1,6 @@
 ---
 id: adding_messagelist_notification
-sidebar_position: 6
+sidebar_position: 7
 title: Message List Notifications
 ---
 

docusaurus/docs/React/guides/customization/persist-input-text-in-local-storage.mdx

@@ -0,0 +1,186 @@
+---
+id: persist_input_text_in_localstorage
+sidebar_position: 6
+slug: /guides/persist-input-text-in-localstorage/
+title: Storing message drafts
+---
+
+In this recipe, we would like to demonstrate how you can start storing unsent user's messages as drafts. The whole implementation turns around the use of `MessageInput`'s prop `getDefaultValue` and custom change event handler. We will store the messages in localStorage.
+
+
+## Building the draft storage logic
+Below, we have a simple logic to store all the message text drafts in a localStorage object under the key `@chat/drafts`.
+
+```ts
+const STORAGE_KEY = '@chat/drafts';
+
+const getDrafts = () => JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+
+const removeDraft = (key: string) => {
+  const drafts = getDrafts();
+
+  if (drafts[key]) {
+    delete drafts[key];
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(drafts))
+  }
+};
+
+const updateDraft = (key: string, value: string) => {
+  const drafts = getDrafts();
+
+  if (!value) {
+    delete drafts[key];
+  } else {
+    drafts[key] = value
+  }
+
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(drafts))
+}
+```
+
+On top of this logic we build a hook that exposes the change handler functions for both thread and main `MessageInput` components as well as functions for `MessageInput`'s `getDefaultValue` prop. We also have to override the `MessageInput`'s default submit handler, because we want to remove the draft from storage when a message is sent.
+
+```ts
+import { ChangeEvent, useCallback } from 'react';
+import {
+    MessageToSend,
+    useChannelActionContext,
+    useChannelStateContext,
+} from 'stream-chat-react';
+import type {
+    Message
+} from 'stream-chat';
+
+const STORAGE_KEY = '@chat/drafts';
+
+const getDrafts = () => JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+
+const removeDraft = (key: string) => {
+  const drafts = getDrafts();
+
+  if (drafts[key]) {
+    delete drafts[key];
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(drafts))
+  }
+};
+
+const updateDraft = (key: string, value: string) => {
+  const drafts = getDrafts();
+
+  if (!value) {
+    delete drafts[key];
+  } else {
+    drafts[key] = value
+  }
+
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(drafts))
+}
+
+// highlight-start
+const useDraftAPI = () => {
+  const { channel, thread } = useChannelStateContext();
+  const { sendMessage } = useChannelActionContext();
+
+  const handleInputChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
+    updateDraft(channel.cid, e.target.value);
+  }, [channel.cid])
+
+  const handleThreadInputChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
+    if (!thread) return;
+    updateDraft(`${channel.cid}:${thread.id}`, e.target.value);
+  }, [channel.cid, thread]);
+
+  const getMainInputDraft = useCallback(() => {
+    const drafts = getDrafts();
+    return drafts[channel.cid] || '';
+  }, [channel.cid]);
+
+  const getThreadInputDraft = useCallback(() => {
+    if (!thread) return;
+    const drafts = getDrafts();
+    return drafts[`${channel.cid}:${thread.id}`] || '';
+  }, [channel.cid, thread]);
+
+  const overrideSubmitHandler = useCallback(
+    async (message: MessageToSend, channelCid: string, customMessageData?: Partial<Message>,) => {
+    await sendMessage(message, customMessageData);
+    const key = message.parent ? `${channelCid}:${message.parent.id}` : channelCid;
+    removeDraft(key);
+  }, [sendMessage])
+
+  return {
+    getMainInputDraft,
+    getThreadInputDraft,
+    handleInputChange,
+    handleThreadInputChange,
+    overrideSubmitHandler,
+  }
+}
+// highlight-end
+```
+
+## Plugging it in
+
+Now it is time to access the API in our React component. The component has to be a descendant of `Channel` component, because `useDraftAPI` accesses the `ChannelStateContext` and `ChannelActionContext` through corresponding consumers. In our example we call this component `ChannelWindow`.
+
+```tsx
+import { ChannelFilters, ChannelOptions, ChannelSort, StreamChat } from 'stream-chat';
+import { useDraftAPI } from './useDraftAPI';
+import type { StreamChatGenerics } from './types';
+
+const ChannelWindow = () => {
+  const {
+    getMainInputDraft,
+    getThreadInputDraft,
+    handleInputChange,
+    handleThreadInputChange,
+    overrideSubmitHandler,
+  } = useDraftAPI()
+
+  return (
+    <>
+      <Window>
+        <TruncateButton/>
+        <ChannelHeader/>
+        <MessageList/>
+        <MessageInput
+            //   highlight-start
+          additionalTextareaProps={{onChange: handleInputChange}}
+          getDefaultValue={getMainInputDraft}
+          overrideSubmitHandler={overrideSubmitHandler}
+            //   highlight-end
+          focus
+        />
+      </Window>
+      <Thread additionalMessageInputProps={{
+        //   highlight-start
+        additionalTextareaProps: {onChange: handleThreadInputChange},
+        getDefaultValue: getThreadInputDraft,
+        overrideSubmitHandler,
+        //   highlight-end
+      }}/>
+    </>
+  )
+}
+
+// In your application you will probably initiate the client in a React effect.
+const chatClient = StreamChat.getInstance<StreamChatGenerics>('<YOUR_API_KEY>');
+
+// User your own filters, options, sort if needed
+const filters: ChannelFilters = { type: 'messaging', members: { $in: ['<YOUR_USER_ID>'] } };
+const options: ChannelOptions = { state: true, presence: true, limit: 10 };
+const sort: ChannelSort = { last_message_at: -1, updated_at: -1 };
+
+const App = () => {
+  return (
+    <Chat client={chatClient}>
+      <ChannelList filters={filters} sort={sort} options={options} showChannelSearch/>
+      <Channel>
+        <ChannelWindow/>
+      </Channel>
+    </Chat>
+  );
+};
+```
+
+Now once you start typing, you should be able to see the drafts in the `localStorage` under the key `@chat/drafts`. Despite changing channels or threads, the unsent message text should be kept in the textarea.

src/components/AutoCompleteTextarea/Textarea.jsx

@@ -13,8 +13,8 @@ import {
   triggerPropsCheck,
 } from './utils';
 
-import { CommandItem } from '../CommandItem/CommandItem';
-import { UserItem } from '../UserItem/UserItem';
+import { CommandItem } from '../CommandItem';
+import { UserItem } from '../UserItem';
 
 export class ReactTextareaAutocomplete extends React.Component {
   static defaultProps = {
@@ -687,6 +687,16 @@ export class ReactTextareaAutocomplete extends React.Component {
 
   render() {
     const { className, containerClassName, containerStyle, style } = this.props;
+    const {
+      onBlur,
+      onChange,
+      onClick,
+      onFocus,
+      onKeyDown,
+      onScroll,
+      onSelect,
+      ...restAdditionalTextareaProps
+    } = this.props.additionalTextareaProps || {};
 
     let { maxRows } = this.props;
 
@@ -711,20 +721,41 @@ export class ReactTextareaAutocomplete extends React.Component {
           {...this._cleanUpProps()}
           className={clsx('rta__textarea', className)}
           maxRows={maxRows}
-          onBlur={this._onClickAndBlurHandler}
-          onChange={this._changeHandler}
-          onClick={this._onClickAndBlurHandler}
-          onFocus={this.props.onFocus}
-          onKeyDown={this._handleKeyDown}
-          onScroll={this._onScrollHandler}
-          onSelect={this._selectHandler}
+          onBlur={(e) => {
+            this._onClickAndBlurHandler(e);
+            onBlur?.(e);
+          }}
+          onChange={(e) => {
+            this._changeHandler(e);
+            onChange?.(e);
+          }}
+          onClick={(e) => {
+            this._onClickAndBlurHandler(e);
+            onClick?.(e);
+          }}
+          onFocus={(e) => {
+            this.props.onFocus?.(e);
+            onFocus?.(e);
+          }}
+          onKeyDown={(e) => {
+            this._handleKeyDown(e);
+            onKeyDown?.(e);
+          }}
+          onScroll={(e) => {
+            this._onScrollHandler(e);
+            onScroll?.(e);
+          }}
+          onSelect={(e) => {
+            this._selectHandler(e);
+            onSelect?.(e);
+          }}
           ref={(ref) => {
             this.props?.innerRef(ref);
             this.textareaRef = ref;
           }}
           style={style}
           value={value}
-          {...this.props.additionalTextareaProps}
+          {...restAdditionalTextareaProps}
           defaultValue={undefined}
         />
       </div>

src/components/ChannelList/utils.ts

@@ -1,8 +1,23 @@
-import type { Channel, StreamChat } from 'stream-chat';
+import type { Channel, QueryChannelAPIResponse, StreamChat } from 'stream-chat';
 import uniqBy from 'lodash.uniqby';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
+/**
+ * prevent from duplicate invocation of channel.watch()
+ * when events 'notification.message_new' and 'notification.added_to_channel' arrive at the same time
+ */
+const WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL: Record<
+  string,
+  Promise<QueryChannelAPIResponse> | undefined
+> = {};
+
+/**
+ * Calls channel.watch() if it was not already recently called. Waits for watch promise to resolve even if it was invoked previously.
+ * @param client
+ * @param type
+ * @param id
+ */
 export const getChannel = async <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >(
@@ -11,7 +26,15 @@ export const getChannel = async <
   id: string,
 ) => {
   const channel = client.channel(type, id);
-  await channel.watch();
+  const queryPromise = WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[channel.cid];
+  if (queryPromise) {
+    await queryPromise;
+  } else {
+    WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[channel.cid] = channel.watch();
+    await WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[channel.cid];
+    WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[channel.cid] = undefined;
+  }
+
   return channel;
 };
 

src/components/MessageInput/MessageInput.tsx

@@ -51,6 +51,8 @@ export type MessageInputProps<
   ) => void;
   /** If true, focuses the text input on component mount */
   focus?: boolean;
+  /** Generates the default value for the underlying textarea element. The function's return value takes precedence before additionalTextareaProps.defaultValue. */
+  getDefaultValue?: () => string | string[];
   /** If true, expands the text input vertically for new lines */
   grow?: boolean;
   /** Custom UI component handling how the message input is rendered, defaults to and accepts the same props as [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) */

src/components/MessageInput/__tests__/MessageInput.test.js

@@ -189,6 +189,22 @@ function axeNoViolations(container) {
       });
     });
 
+    it('should prefer value from getDefaultValue before additionalTextareaProps.defaultValue', async () => {
+      const defaultValue = nanoid();
+      const generatedDefaultValue = nanoid();
+      const getDefaultValue = () => generatedDefaultValue;
+      await renderComponent({
+        messageInputProps: {
+          additionalTextareaProps: { defaultValue },
+          getDefaultValue,
+        },
+      });
+      await waitFor(() => {
+        const textarea = screen.queryByDisplayValue(generatedDefaultValue);
+        expect(textarea).toBeInTheDocument();
+      });
+    });
+
     it('Should shift focus to the textarea if the `focus` prop is true', async () => {
       const { container } = await renderComponent({
         messageInputProps: {

src/components/MessageInput/hooks/useMessageInputState.ts

@@ -363,13 +363,13 @@ export const useMessageInputState = <
   MessageInputHookProps<StreamChatGenerics> &
   CommandsListState &
   MentionsListState => {
-  const { additionalTextareaProps, closeEmojiPickerOnClick, message } = props;
+  const { additionalTextareaProps, closeEmojiPickerOnClick, getDefaultValue, message } = props;
 
   const { channelCapabilities = {}, channelConfig } = useChannelStateContext<StreamChatGenerics>(
     'useMessageInputState',
   );
 
-  const defaultValue = additionalTextareaProps?.defaultValue;
+  const defaultValue = getDefaultValue?.() || additionalTextareaProps?.defaultValue;
   const initialStateValue =
     message ||
     ((Array.isArray(defaultValue)