refactor: update useAsyncRequest, ChannelSettingsProvider (#983)

from #981

Author: bang9

src/hooks/useAsyncRequest.ts

@@ -24,12 +24,7 @@ export function useAsyncRequest<T>(request: Request<T>, options?: Options): Retu
 
   const updateWithRequest = async () => {
     try {
-      setState(({ ...draft }) => {
-        if (options.resetResponseOnRefresh) draft.response = undefined;
-        draft.error = undefined;
-        return draft;
-      });
-
+      setState((prev) => ({ loading: true, error: undefined, response: options?.resetResponseOnRefresh ? undefined : prev.response }));
       const response = await request();
       setState((prev) => ({ ...prev, response, loading: false }));
     } catch (error) {

src/modules/ChannelSettings/context/ChannelSettingsProvider.tsx

@@ -48,34 +48,32 @@ interface ChannelSettingsProviderInterface {
   queries?: ChannelSettingsQueries;
   setChannelUpdateId(uniqId: string): void;
   forceUpdateUI(): void;
-  channel: GroupChannel;
+  channel: GroupChannel | null;
   loading: boolean;
   invalidChannel: boolean;
 }
 
-const ChannelSettingsContext = React.createContext<ChannelSettingsProviderInterface | null>(undefined);
-
-const ChannelSettingsProvider: React.FC<ChannelSettingsContextProps> = (props: ChannelSettingsContextProps) => {
-  const {
-    children,
-    className,
-    channelUrl,
-    onCloseClick,
-    onLeaveChannel,
-    onChannelModified,
-    overrideInviteUser,
-    onBeforeUpdateChannel,
-    queries,
-  } = props;
-
-  // fetch store from <SendbirdProvider />
-  const globalStore = useSendbirdStateContext();
-  const { config, stores } = globalStore;
+const ChannelSettingsContext = React.createContext<ChannelSettingsProviderInterface | null>(null);
+
+const ChannelSettingsProvider = ({
+  children,
+  className,
+  channelUrl,
+  onCloseClick,
+  onLeaveChannel,
+  onChannelModified,
+  overrideInviteUser,
+  onBeforeUpdateChannel,
+  queries,
+  renderUserProfile,
+  disableUserProfile,
+}: ChannelSettingsContextProps) => {
+  const { config, stores } = useSendbirdStateContext();
   const { sdkStore } = stores;
   const { logger, onUserProfileMessage } = config;
 
   // hack to keep track of channel updates by triggering useEffect
-  const [channelUpdateId, setChannelUpdateId] = useState(uuidv4());
+  const [channelUpdateId, setChannelUpdateId] = useState(() => uuidv4());
   const forceUpdateUI = () => setChannelUpdateId(uuidv4());
 
   const {
@@ -109,7 +107,7 @@ const ChannelSettingsProvider: React.FC<ChannelSettingsContextProps> = (props: C
 
   useEffect(() => {
     refresh();
-  }, [channelUrl, sdkStore.initialized, channelUpdateId]);
+  }, [channelUrl, channelUpdateId]);
 
   return (
     <ChannelSettingsContext.Provider
@@ -129,8 +127,8 @@ const ChannelSettingsProvider: React.FC<ChannelSettingsContextProps> = (props: C
       }}
     >
       <UserProfileProvider
-        renderUserProfile={props?.renderUserProfile}
-        disableUserProfile={props?.disableUserProfile ?? config?.disableUserProfile}
+        renderUserProfile={renderUserProfile}
+        disableUserProfile={disableUserProfile ?? config?.disableUserProfile}
         onUserProfileMessage={onUserProfileMessage}
       >
         <div className={`sendbird-channel-settings ${className}`}>{children}</div>
@@ -139,7 +137,5 @@ const ChannelSettingsProvider: React.FC<ChannelSettingsContextProps> = (props: C
   );
 };
 
-export type UseChannelSettingsType = () => ChannelSettingsProviderInterface;
-const useChannelSettingsContext: UseChannelSettingsType = () => React.useContext(ChannelSettingsContext);
-
+const useChannelSettingsContext = () => React.useContext(ChannelSettingsContext);
 export { ChannelSettingsProvider, useChannelSettingsContext };