fix: poll related edge cases with offline storage

Author: isekovanic

package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts

@@ -40,13 +40,15 @@ export type LatestMessagePreview<
 export type LatestMessagePreviewSelectorReturnType = {
   createdBy?: UserResponse | null;
   latestVotesByOption?: Record<string, PollVote[]>;
+  name?: string;
 };
 
 const selector = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
   nextValue: PollState<StreamChatGenerics>,
 ): LatestMessagePreviewSelectorReturnType => ({
   createdBy: nextValue.created_by,
   latestVotesByOption: nextValue.latest_votes_by_option,
+  name: nextValue.name,
 });
 
 const getMessageSenderName = <
@@ -145,8 +147,8 @@ const getLatestMessageDisplayText = <
       { bold: false, text: t('🏙 Attachment...') },
     ];
   }
-  if (message.poll && pollState) {
-    const { createdBy, latestVotesByOption } = pollState;
+  if (message.poll_id && pollState) {
+    const { createdBy, latestVotesByOption, name } = pollState;
     let latestVotes;
     if (latestVotesByOption) {
       latestVotes = Object.values(latestVotesByOption)
@@ -161,7 +163,7 @@ const getLatestMessageDisplayText = <
     }
     const previewMessage = `${
       client.userID === previewUser?.id ? 'You' : previewUser?.name
-    } ${previewAction}: ${message.poll.name}`;
+    } ${previewAction}: ${name}`;
     return [
       { bold: false, text: '📊 ' },
       { bold: false, text: previewMessage },
@@ -310,7 +312,7 @@ export const useLatestMessagePreview = <
   const poll = client.polls.fromState(pollId);
   const pollState: LatestMessagePreviewSelectorReturnType =
     useStateStore(poll?.state, selector) ?? {};
-  const { createdBy, latestVotesByOption } = pollState;
+  const { createdBy, latestVotesByOption, name } = pollState;
 
   useEffect(
     () =>
@@ -325,7 +327,15 @@ export const useLatestMessagePreview = <
         }),
       ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [channelLastMessageString, forceUpdate, readEvents, readStatus, latestVotesByOption, createdBy],
+    [
+      channelLastMessageString,
+      forceUpdate,
+      readEvents,
+      readStatus,
+      latestVotesByOption,
+      createdBy,
+      name,
+    ],
   );
 
   return latestMessagePreview;

package/src/components/Reply/Reply.tsx

@@ -6,8 +6,9 @@ import dayjs from 'dayjs';
 
 import merge from 'lodash/merge';
 
-import type { Attachment } from 'stream-chat';
+import type { Attachment, PollState } from 'stream-chat';
 
+import { useChatContext } from '../../contexts';
 import { useMessageContext } from '../../contexts/messageContext/MessageContext';
 import {
   MessageInputContext,
@@ -22,6 +23,7 @@ import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
+import { useStateStore } from '../../hooks';
 import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getTrimmedAttachmentTitle } from '../../utils/getTrimmedAttachmentTitle';
@@ -31,6 +33,7 @@ import { FileIcon as FileIconDefault } from '../Attachment/FileIcon';
 import { VideoThumbnail } from '../Attachment/VideoThumbnail';
 import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
 import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
+import { MessageType } from '../MessageList/hooks/useMessageList';
 
 const styles = StyleSheet.create({
   container: {
@@ -72,6 +75,16 @@ const styles = StyleSheet.create({
   },
 });
 
+export type ReplySelectorReturnType = {
+  name?: string;
+};
+
+const selector = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  nextValue: PollState<StreamChatGenerics>,
+): ReplySelectorReturnType => ({
+  name: nextValue.name,
+});
+
 type ReplyPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessageInputContextValue<StreamChatGenerics>, 'quotedMessage'> &
@@ -134,6 +147,7 @@ const ReplyWithContext = <
 >(
   props: ReplyPropsWithContext<StreamChatGenerics>,
 ) => {
+  const { client } = useChatContext();
   const {
     attachmentSize = 40,
     FileAttachmentIcon,
@@ -167,6 +181,9 @@ const ReplyWithContext = <
     },
   } = useTheme();
 
+  const poll = client.polls.fromState((quotedMessage as MessageType)?.poll_id ?? '');
+  const { name: pollName }: ReplySelectorReturnType = useStateStore(poll?.state, selector) ?? {};
+
   const messageText = typeof quotedMessage === 'boolean' ? '' : quotedMessage.text || '';
 
   const emojiOnlyText = useMemo(() => {
@@ -262,8 +279,8 @@ const ReplyWithContext = <
               text:
                 quotedMessage.type === 'deleted'
                   ? `_${t('Message deleted')}_`
-                  : quotedMessage.poll
-                  ? `📊 ${quotedMessage.poll.name}`
+                  : pollName
+                  ? `📊 ${pollName}`
                   : quotedMessage.text
                   ? quotedMessage.text.length > 170
                     ? `${quotedMessage.text.slice(0, 170)}...`

package/src/store/apis/updateMessage.ts

@@ -30,7 +30,13 @@ export const updateMessage = ({
     return queries;
   }
 
-  const storableMessage = mapMessageToStorable(message);
+  const { poll, poll_id } = messages[0];
+
+  const storableMessage = mapMessageToStorable({
+    ...(poll ? { poll: JSON.parse(poll) } : {}),
+    ...(poll_id ? { poll_id } : {}),
+    ...message,
+  });
 
   queries.push(
     createUpdateQuery('messages', storableMessage, {

package/src/store/apis/updatePollMessage.ts

@@ -22,10 +22,11 @@ export const updatePollMessage = ({
   );
 
   for (const message of messagesWithPoll) {
+    const { latest_votes, own_votes } = JSON.parse(message.poll);
     const storablePoll = JSON.stringify({
       ...poll,
-      latest_votes: message.poll.latest_votes,
-      own_votes: message.poll.own_votes,
+      latest_votes,
+      own_votes,
     });
     const storableMessage = { ...message, poll: storablePoll };