Skip to content

Commit

Permalink
fix: update ChannelHeader and ChannelPreview titles and images on cha…
Browse files Browse the repository at this point in the history
…nnel.updated
  • Loading branch information
MartinCupela committed Sep 13, 2024
1 parent 153bd75 commit dfba1ed
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 46 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
10 changes: 4 additions & 6 deletions src/components/ChannelHeader/ChannelHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
33 changes: 17 additions & 16 deletions src/components/ChannelPreview/hooks/useChannelPreviewInfo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
38 changes: 14 additions & 24 deletions src/components/ChannelPreview/utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);

0 comments on commit dfba1ed

Please sign in to comment.