fix: update ChannelHeader and ChannelPreview titles and images on channel.updated

Author: MartinCupela

src/components/Channel/hooks/useCreateChannelStateContext.ts

@@ -140,6 +140,7 @@ export const useCreateChannelStateContext = <
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
+      channel.data?.name, // otherwise ChannelHeader will not be updated
       channelId,
       channelUnreadUiState,
       debounceURLEnrichmentMs,

src/components/ChannelHeader/ChannelHeader.tsx

@@ -24,7 +24,10 @@ export type ChannelHeaderProps = {
   title?: string;
 };
 
-const UnMemoizedChannelHeader = <
+/**
+ * The ChannelHeader component renders some basic information about a Channel.
+ */
+export const ChannelHeader = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >(
   props: ChannelHeaderProps,
@@ -86,8 +89,3 @@ const UnMemoizedChannelHeader = <
     </div>
   );
 };
-
-/**
- * The ChannelHeader component renders some basic information about a Channel.
- */
-export const ChannelHeader = React.memo(UnMemoizedChannelHeader) as typeof UnMemoizedChannelHeader;

src/components/ChannelPreview/hooks/useChannelPreviewInfo.ts

@@ -21,28 +21,29 @@ export const useChannelPreviewInfo = <
 ) => {
   const { channel, overrideImage, overrideTitle } = props;
 
-  const { client } = useChatContext<StreamChatGenerics>('ChannelPreview');
-  const [displayTitle, setDisplayTitle] = useState(getDisplayTitle(channel, client.user));
-  const [displayImage, setDisplayImage] = useState(getDisplayImage(channel, client.user));
+  const { client } = useChatContext<StreamChatGenerics>('useChannelPreviewInfo');
+  const [displayTitle, setDisplayTitle] = useState(
+    overrideTitle || getDisplayTitle(channel, client.user),
+  );
+  const [displayImage, setDisplayImage] = useState(
+    overrideImage || getDisplayImage(channel, client.user),
+  );
 
   useEffect(() => {
-    const handleEvent = () => {
-      setDisplayTitle((displayTitle) => {
-        const newDisplayTitle = getDisplayTitle(channel, client.user);
-        return displayTitle !== newDisplayTitle ? newDisplayTitle : displayTitle;
-      });
-      setDisplayImage((displayImage) => {
-        const newDisplayImage = getDisplayImage(channel, client.user);
-        return displayImage !== newDisplayImage ? newDisplayImage : displayImage;
-      });
+    if (overrideTitle && overrideImage) return;
+
+    const updateTitles = () => {
+      if (!overrideTitle) setDisplayTitle(getDisplayTitle(channel, client.user));
+      if (!overrideImage) setDisplayImage(getDisplayImage(channel, client.user));
     };
 
-    client.on('user.updated', handleEvent);
+    updateTitles();
+
+    client.on('user.updated', updateTitles);
     return () => {
-      client.off('user.updated', handleEvent);
+      client.off('user.updated', updateTitles);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [channel, channel.data, client, overrideImage, overrideTitle]);
 
   return {
     displayImage: overrideImage || displayImage,

src/components/ChannelPreview/utils.tsx

@@ -47,40 +47,30 @@ export const getLatestMessagePreview = <
   return t('Empty message...');
 };
 
-export const getDisplayTitle = <
+const getChannelDisplayInfo = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >(
+  info: 'name' | 'image',
   channel: Channel<StreamChatGenerics>,
   currentUser?: UserResponse<StreamChatGenerics>,
 ) => {
-  let title = channel.data?.name;
+  if (channel.data?.[info]) return channel.data[info];
   const members = Object.values(channel.state.members);
-
-  if (!title && members.length === 2) {
-    const otherMember = members.find((member) => member.user?.id !== currentUser?.id);
-    if (otherMember?.user?.name) {
-      title = otherMember.user.name;
-    }
-  }
-
-  return title;
+  if (members.length !== 2) return;
+  const otherMember = members.find((member) => member.user?.id !== currentUser?.id);
+  return otherMember?.user?.[info];
 };
 
-export const getDisplayImage = <
+export const getDisplayTitle = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >(
   channel: Channel<StreamChatGenerics>,
   currentUser?: UserResponse<StreamChatGenerics>,
-) => {
-  let image = channel.data?.image;
-  const members = Object.values(channel.state.members);
+) => getChannelDisplayInfo('name', channel, currentUser);
 
-  if (!image && members.length === 2) {
-    const otherMember = members.find((member) => member.user?.id !== currentUser?.id);
-    if (otherMember?.user?.image) {
-      image = otherMember.user.image;
-    }
-  }
-
-  return image;
-};
+export const getDisplayImage = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+>(
+  channel: Channel<StreamChatGenerics>,
+  currentUser?: UserResponse<StreamChatGenerics>,
+) => getChannelDisplayInfo('image', channel, currentUser);