[CLNP-5043] Migrate MessageSearchProvider (#1216)

## Overview
This PR refactors the MessageSearch state management system, introducing
a custom store solution and several hooks for improved performance,
maintainability, and type safety.

## New Files
- `src/utils/storeManager.ts`: Implements a custom store creation
utility
- `src/contexts/_MessageSearchContext.tsx`: Provides the MessageSearch
context and store \w new state mgmt logic. It's just temporal name.
- `src/hooks/useStore.ts`: A generic hook for accessing and updating
store state
- `src/hooks/useMessageSearchStore.ts`: A specialized hook for
MessageSearch state management
- `src/components/MessageSearchManager.tsx`: Manages MessageSearch state
and side effects
- `src/hooks/useMessageSearchActions.ts`: Manages action handlers 

## Updated Hooks
- `useSetChannel`: Now uses `useMessageSearchStore` directly
- `useSearchStringEffect`: Refactored to work with the new store
- `useGetSearchMessages`: Updated to utilize the new state management
system
- `useScrollCallback`: Adapted to work with the custom store

## Key Changes
1. Introduced a custom store solution to replace the previous
reducer-based state management.
2. Implemented `useStore` hook for type-safe and efficient state access
and updates.
3. Created `MessageSearchManager` to centralize state management logic.
4. Refactored existing hooks to work with the new store system.
5. Improved type safety throughout the MessageSearch module.

Author: AhyoungRyu

package.json

@@ -142,6 +142,7 @@
     "ts-pattern": "^4.2.2",
     "typedoc": "^0.25.13",
     "typescript": "^5.4.5",
+    "use-sync-external-store": "^1.2.2",
     "vite": "^5.1.5",
     "vite-plugin-svgr": "^4.2.0"
   },

src/hooks/useStore.ts

@@ -0,0 +1,49 @@
+import { useContext, useRef, useCallback } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { type Store } from '../utils/storeManager';
+
+type StoreSelector<T, U> = (state: T) => U;
+
+/**
+ * A generic hook for accessing and updating store state
+ * @param StoreContext
+ * @param selector
+ * @param initialState
+ */
+export function useStore<T, U>(
+  StoreContext: React.Context<Store<T> | null>,
+  selector: StoreSelector<T, U>,
+  initialState: T,
+) {
+  const store = useContext(StoreContext);
+  if (!store) {
+    throw new Error('useStore must be used within a StoreProvider');
+  }
+  // Ensure the stability of the selector function using useRef
+  const selectorRef = useRef(selector);
+  selectorRef.current = selector;
+  /**
+   * useSyncExternalStore - a new API introduced in React18
+   * but we're using a shim for now since it's only available in 18 >= version.
+   * useSyncExternalStore simply tracks changes in an external store that is not dependent on React
+   * through useState and useEffect
+   * and helps with re-rendering and state sync through the setter of useState
+   */
+  const state = useSyncExternalStore(
+    store.subscribe,
+    () => selectorRef.current(store.getState()),
+    () => selectorRef.current(initialState),
+  );
+
+  const updateState = useCallback((updates: Partial<T>) => {
+    store.setState((prevState) => ({
+      ...prevState,
+      ...updates,
+    }));
+  }, [store]);
+
+  return {
+    state,
+    updateState,
+  };
+}

src/modules/MessageSearch/components/MessageSearchUI/index.tsx

@@ -3,7 +3,7 @@ import type { FileMessage, UserMessage } from '@sendbird/chat/message';
 import './index.scss';
 
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
-import { useMessageSearchContext } from '../../context/MessageSearchProvider';
+import useMessageSearch from '../../context/hooks/useMessageSearch';
 
 import MessageSearchItem from '../../../../ui/MessageSearchItem';
 import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
@@ -34,28 +34,27 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
   renderSearchItem,
 }: MessageSearchUIProps) => {
   const {
-    isInvalid,
-    searchString,
-    requestString,
-    currentChannel,
-    retryCount,
-    setRetryCount,
-    loading,
-    scrollRef,
-    hasMoreResult,
-    onScroll,
-    allMessages,
-    onResultClick,
-    selectedMessageId,
-    setSelectedMessageId,
-  } = useMessageSearchContext();
+    state: {
+      isInvalid,
+      searchString,
+      requestString,
+      currentChannel,
+      loading,
+      scrollRef,
+      hasMoreResult,
+      onScroll,
+      allMessages,
+      onResultClick,
+      selectedMessageId,
+    },
+    actions: {
+      setSelectedMessageId,
+      handleRetryToConnect,
+    },
+  } = useMessageSearch();
 
   const { stringSet } = useContext(LocalizationContext);
 
-  const handleRetryToConnect = () => {
-    setRetryCount(retryCount + 1);
-  };
-
   const handleOnScroll = (e) => {
     const scrollElement = e.target;
     const {

src/modules/MessageSearch/context/MessageSearchProvider.tsx

@@ -1,26 +1,19 @@
-import React, {
-  useRef,
-  useState,
-  useReducer,
-} from 'react';
-import { SendbirdError } from '@sendbird/chat';
-import type { MessageSearchQuery } from '@sendbird/chat/message';
+import React, { createContext, useRef, useContext, useCallback, useEffect } from 'react';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
+import { MessageSearchQuery } from '@sendbird/chat/message';
+import { ClientSentMessages } from '../../../types';
+import { SendbirdError } from '@sendbird/chat';
 import type { MessageSearchQueryParams } from '@sendbird/chat/lib/__definition';
 
 import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
-import { ClientSentMessages } from '../../../types';
-
-import messageSearchReducer from './dux/reducers';
-import messageSearchInitialState, { State as MessageSearchReducerState } from './dux/initialState';
 
 import useSetChannel from './hooks/useSetChannel';
 import useGetSearchMessages from './hooks/useGetSearchedMessages';
-import useScrollCallback, {
-  CallbackReturn as UseScrollCallbackType,
-} from './hooks/useScrollCallback';
+import useScrollCallback from './hooks/useScrollCallback';
 import useSearchStringEffect from './hooks/useSearchStringEffect';
 import { CoreMessageType } from '../../../utils';
+import { createStore } from '../../../utils/storeManager';
+import { useStore } from '../../../hooks/useStore';
 
 export interface MessageSearchProviderProps {
   channelUrl: string;
@@ -31,130 +24,160 @@ export interface MessageSearchProviderProps {
   onResultClick?(message: ClientSentMessages): void;
 }
 
-interface MessageSearchProviderInterface extends MessageSearchProviderProps {
-  requestString?: string;
-  retryCount: number;
-  setRetryCount: React.Dispatch<React.SetStateAction<number>>;
-  selectedMessageId: number;
-  setSelectedMessageId: React.Dispatch<React.SetStateAction<number>>;
-  messageSearchDispatcher: (props: { type: string, payload: any }) => void;
-  scrollRef: React.RefObject<HTMLDivElement>;
-  allMessages: MessageSearchReducerState['allMessages'];
+export interface MessageSearchState extends MessageSearchProviderProps {
+  channelUrl: string;
+  allMessages: ClientSentMessages[];
   loading: boolean;
   isInvalid: boolean;
-  currentChannel: GroupChannel;
-  currentMessageSearchQuery: MessageSearchQuery;
+  initialized: boolean;
+  currentChannel: GroupChannel | null;
+  currentMessageSearchQuery: MessageSearchQuery | null;
   hasMoreResult: boolean;
-  onScroll: UseScrollCallbackType;
-  handleRetryToConnect: () => void;
-  handleOnScroll: (e: React.BaseSyntheticEvent) => void;
+  retryCount: number;
+  selectedMessageId: number | null;
+  requestString: string;
+  onScroll?: ReturnType<typeof useScrollCallback>;
+  handleOnScroll?: (e: React.BaseSyntheticEvent) => void;
+  scrollRef?: React.RefObject<HTMLDivElement>;
 }
 
-const MessageSearchContext = React.createContext<MessageSearchProviderInterface | null>(null);
-
-const MessageSearchProvider: React.FC<MessageSearchProviderProps> = (props: MessageSearchProviderProps) => {
-  const {
-    // message search props
-    channelUrl,
-    searchString,
-    messageSearchQuery,
-    onResultLoaded,
-    onResultClick,
-  } = props;
-
-  const globalState = useSendbirdStateContext();
-
-  // hook variables
-  const [retryCount, setRetryCount] = useState(0); // this is a trigger flag for activating useGetSearchMessages
-  const [selectedMessageId, setSelectedMessageId] = useState(0);
-  const [messageSearchStore, messageSearchDispatcher] = useReducer(messageSearchReducer, messageSearchInitialState);
-  const {
-    allMessages,
-    loading,
-    isInvalid,
-    currentChannel,
-    currentMessageSearchQuery,
-    hasMoreResult,
-  } = messageSearchStore;
-
-  const logger = globalState?.config?.logger;
-  const sdk = globalState?.stores?.sdkStore?.sdk;
-  const sdkInit = globalState?.stores?.sdkStore?.initialized;
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const handleOnScroll = (e: React.BaseSyntheticEvent) => {
-    const scrollElement = e.target as HTMLDivElement;
-    const {
-      scrollTop,
-      scrollHeight,
-      clientHeight,
-    } = scrollElement;
+const initialState: MessageSearchState = {
+  channelUrl: '',
+  allMessages: [],
+  loading: false,
+  isInvalid: false,
+  initialized: false,
+  currentChannel: null,
+  currentMessageSearchQuery: null,
+  messageSearchQuery: null,
+  hasMoreResult: false,
+  retryCount: 0,
+  selectedMessageId: null,
+  searchString: '',
+  requestString: '',
+};
 
-    if (!hasMoreResult) {
-      return;
-    }
-    if (scrollTop + clientHeight >= scrollHeight) {
-      onScroll(() => {
-        // after load more searched messages
-      });
-    }
-  };
+export const MessageSearchContext = createContext<ReturnType<typeof createStore<MessageSearchState>> | null>(null);
+
+const MessageSearchManager: React.FC<MessageSearchProviderProps> = ({
+  channelUrl,
+  searchString,
+  messageSearchQuery,
+  onResultLoaded,
+  onResultClick,
+}) => {
+  const { state, updateState } = useMessageSearchStore();
+  const { config, stores } = useSendbirdStateContext();
+  const sdk = stores?.sdkStore?.sdk;
+  const sdkInit = stores?.sdkStore?.initialized;
+  const { logger } = config;
+  const scrollRef = useRef<HTMLDivElement>(null);
 
   useSetChannel(
     { channelUrl, sdkInit },
-    { sdk, logger, messageSearchDispatcher },
+    { sdk, logger },
   );
 
-  const requestString = useSearchStringEffect({ searchString: searchString ?? '' }, { messageSearchDispatcher });
+  const requestString = useSearchStringEffect(
+    { searchString: searchString ?? '' },
+  );
 
   useGetSearchMessages(
-    { currentChannel, channelUrl, requestString, messageSearchQuery, onResultLoaded, retryCount },
-    { sdk, logger, messageSearchDispatcher },
+    {
+      currentChannel: state.currentChannel,
+      channelUrl,
+      requestString,
+      messageSearchQuery,
+      onResultLoaded,
+    },
+    { sdk, logger },
   );
 
   const onScroll = useScrollCallback(
-    { currentMessageSearchQuery, hasMoreResult, onResultLoaded },
-    { logger, messageSearchDispatcher },
+    { onResultLoaded },
+    { logger },
   );
 
-  const handleRetryToConnect = () => {
-    setRetryCount(retryCount + 1);
-  };
-  return (
-    <MessageSearchContext.Provider value={{
+  const handleOnScroll = useCallback((e: React.BaseSyntheticEvent) => {
+    const scrollElement = e.target as HTMLDivElement;
+    const { scrollTop, scrollHeight, clientHeight } = scrollElement;
+
+    if (!state.hasMoreResult) {
+      return;
+    }
+    if (scrollTop + clientHeight >= scrollHeight) {
+      onScroll(() => {
+        // after load more searched messages
+      });
+    }
+  }, [state.hasMoreResult, onScroll]);
+
+  useEffect(() => {
+    updateState({
       channelUrl,
       searchString,
-      requestString,
       messageSearchQuery,
-      onResultLoaded,
       onResultClick,
-      retryCount,
-      setRetryCount,
-      selectedMessageId,
-      setSelectedMessageId,
-      messageSearchDispatcher,
-      allMessages,
-      loading,
-      isInvalid,
-      currentChannel,
-      currentMessageSearchQuery,
-      hasMoreResult,
       onScroll,
-      scrollRef,
-      handleRetryToConnect,
       handleOnScroll,
-    }}>
-      {props?.children}
+      scrollRef,
+      requestString,
+    });
+  }, [channelUrl, searchString, messageSearchQuery, onResultClick, updateState, requestString]);
+
+  return null;
+};
+
+const createMessageSearchStore = () => createStore(initialState);
+const InternalMessageSearchProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
+  const storeRef = useRef(createMessageSearchStore());
+
+  return (
+    <MessageSearchContext.Provider value={storeRef.current}>
+      {children}
     </MessageSearchContext.Provider>
   );
 };
 
+const MessageSearchProvider: React.FC<MessageSearchProviderProps> = ({
+  children,
+  channelUrl,
+  searchString,
+  messageSearchQuery,
+  onResultLoaded,
+  onResultClick,
+}) => {
+
+  return (
+    <InternalMessageSearchProvider>
+      <MessageSearchManager
+        channelUrl={channelUrl}
+        searchString={searchString}
+        messageSearchQuery={messageSearchQuery}
+        onResultLoaded={onResultLoaded}
+        onResultClick={onResultClick}
+      />
+      {children}
+    </InternalMessageSearchProvider>
+  );
+};
+
 const useMessageSearchContext = () => {
-  const context = React.useContext(MessageSearchContext);
+  const context = useContext(MessageSearchContext);
   if (!context) throw new Error('MessageSearchContext not found. Use within the MessageSearch module.');
   return context;
 };
 
 export {
   MessageSearchProvider,
   useMessageSearchContext,
+  MessageSearchManager,
+};
+
+/**
+ * A specialized hook for MessageSearch state management
+ * @returns {ReturnType<typeof createStore<MessageSearchState>>}
+ */
+const useMessageSearchStore = () => {
+  return useStore(MessageSearchContext, state => state, initialState);
 };