fix: poll composer crash bug

Author: khushal87

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -88,16 +88,13 @@ export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
     (newText: string) => {
       setLocalText(newText);
 
-      /**
-       * This is a hack to ensure the selection is up to date. We should find a better way to do this.
-       * The onSelectChange event is triggered after the onChangeText event currently which is why the selection value is stale.
-       */
-      setTimeout(() => {
-        textComposer.handleChange({
-          selection: textComposer.selection,
-          text: newText,
-        });
-      }, 0);
+      textComposer.handleChange({
+        selection: {
+          end: newText.length,
+          start: newText.length,
+        },
+        text: newText,
+      });
     },
     [textComposer],
   );
@@ -110,7 +107,7 @@ export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
   } = useTheme();
 
   const placeholderText = useMemo(() => {
-    return command ? t('Search GIFs') : cooldownActive ? t('Slow mode ON') : t('Send a message');
+    return command ? t('Search') : cooldownActive ? t('Slow mode ON') : t('Send a message');
   }, [command, cooldownActive, t]);
 
   const handleContentSizeChange = useCallback(

package/src/components/Poll/CreatePollContent.tsx

@@ -45,15 +45,14 @@ export const CreatePollContent = () => {
     pollComposerStateSelector,
   );
 
-  const firstOption = options[0];
-
-  const { createPollOptionHeight } = useCreatePollContentContext();
+  const { createPollOptionHeight, closePollCreationDialog, createAndSendPoll } =
+    useCreatePollContentContext();
 
   // positions and index lookup map
   // TODO: Please rethink the structure of this, bidirectional data flow is not great
   const currentOptionPositions = useSharedValue<CurrentOptionPositionsCache>({
-    inverseIndexCache: { 0: firstOption.id },
-    positionCache: { [firstOption.id]: { updatedIndex: 0, updatedTop: 0 } },
+    inverseIndexCache: {},
+    positionCache: {},
   });
 
   const {
@@ -86,9 +85,21 @@ export const CreatePollContent = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [createPollOptionHeight, options.length]);
 
+  const onBackPressHandler = useCallback(() => {
+    pollComposer.initState();
+    closePollCreationDialog?.();
+  }, [pollComposer, closePollCreationDialog]);
+
+  const onCreatePollPressHandler = useCallback(async () => {
+    await createAndSendPoll();
+  }, [createAndSendPoll]);
+
   return (
     <>
-      <CreatePollHeader />
+      <CreatePollHeader
+        onBackPressHandler={onBackPressHandler}
+        onCreatePollPressHandler={onCreatePollPressHandler}
+      />
       <ScrollView
         contentContainerStyle={{ paddingBottom: 70 }}
         style={[styles.scrollView, { backgroundColor: white }, scrollView]}
@@ -149,18 +160,16 @@ export const CreatePoll = ({
 > &
   Pick<InputMessageInputContextValue, 'CreatePollContent'>) => {
   const messageComposer = useMessageComposer();
-  const { pollComposer } = messageComposer;
 
   const createAndSendPoll = useCallback(async () => {
     try {
       await messageComposer.createPoll();
       await sendMessage();
-      await pollComposer.initState();
       closePollCreationDialog?.();
     } catch (error) {
       console.log('error', error);
     }
-  }, [messageComposer, sendMessage, pollComposer, closePollCreationDialog]);
+  }, [messageComposer, sendMessage, closePollCreationDialog]);
 
   return (
     <CreatePollContentProvider

package/src/components/Poll/components/CreatePollHeader.tsx

@@ -1,21 +1,32 @@
 import React from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
 
-import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
-import { useCreatePollContentContext } from '../../../contexts/pollContext/createPollContentContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { SendPoll } from '../../../icons';
 import { PollModalHeader } from '../components';
 import { useCanCreatePoll } from '../hooks/useCanCreatePoll';
 
-export const CreatePollHeader = () => {
+export type CreatePollHeaderProps = {
+  /**
+   * Handler for back button press
+   * @returns void
+   */
+  onBackPressHandler: () => void;
+  /**
+   * Handler for create poll button press
+   * @returns void
+   */
+  onCreatePollPressHandler: () => void;
+};
+
+export const CreatePollHeader = ({
+  onBackPressHandler,
+  onCreatePollPressHandler,
+}: CreatePollHeaderProps) => {
   const { t } = useTranslationContext();
 
-  const messageComposer = useMessageComposer();
   const canCreatePoll = useCanCreatePoll();
-  const { pollComposer } = messageComposer;
-  const { closePollCreationDialog, createAndSendPoll } = useCreatePollContentContext();
 
   const {
     theme: {
@@ -28,18 +39,10 @@ export const CreatePollHeader = () => {
 
   return (
     <View style={[styles.headerContainer, { backgroundColor: white }, headerContainer]}>
-      <PollModalHeader
-        onPress={() => {
-          pollComposer.initState();
-          closePollCreationDialog?.();
-        }}
-        title={t('Create Poll')}
-      />
+      <PollModalHeader onPress={onBackPressHandler} title={t<string>('Create Poll')} />
       <Pressable
         disabled={!canCreatePoll}
-        onPress={async () => {
-          await createAndSendPoll();
-        }}
+        onPress={onCreatePollPressHandler}
         style={({ pressed }) => [{ opacity: pressed ? 0.5 : 1 }, styles.sendButton, sendButton]}
       >
         <SendPoll

package/src/components/Poll/components/CreatePollOptions.tsx

@@ -63,6 +63,7 @@ export const CreatePollOption = ({
   option,
   onNewOrder,
 }: CreatePollOptionType) => {
+  const { t } = useTranslationContext();
   const { createPollOptionHeight = POLL_OPTION_HEIGHT } = useCreatePollContentContext();
   const top = useSharedValue(index * createPollOptionHeight);
   const isDraggingDerived = useDerivedValue(() => isDragging.value);
@@ -93,14 +94,19 @@ export const CreatePollOption = ({
   // used for swapping with newIndex
   const currentIndex = useSharedValue<number | null>(null);
 
+  // The sanity check for position cache updated index, is added because after a poll is sent its been reset
+  // by the composer and it throws an undefined error. This can be removed in future.
   useAnimatedReaction(
-    () => currentOptionPositionsDerived.value.positionCache[option.id].updatedIndex,
+    () =>
+      currentOptionPositionsDerived.value.positionCache[option.id]
+        ? currentOptionPositionsDerived.value.positionCache[option.id].updatedIndex
+        : 0,
     (currentValue, previousValue) => {
       if (currentValue !== previousValue) {
-        top.value = withSpring(
-          currentOptionPositionsDerived.value.positionCache[option.id].updatedIndex *
-            createPollOptionHeight,
-        );
+        const updatedIndex = currentOptionPositionsDerived.value.positionCache[option.id]
+          ? currentOptionPositionsDerived.value.positionCache[option.id].updatedIndex
+          : 0;
+        top.value = withSpring(updatedIndex * createPollOptionHeight);
       }
     },
   );
@@ -209,9 +215,12 @@ export const CreatePollOption = ({
     },
   } = useTheme();
 
-  const onChangeTextHandler = (newText: string) => {
-    handleChangeText(newText, index);
-  };
+  const onChangeTextHandler = useCallback(
+    (newText: string) => {
+      handleChangeText(newText, index);
+    },
+    [handleChangeText, index],
+  );
 
   return (
     <Animated.View
@@ -235,13 +244,13 @@ export const CreatePollOption = ({
             optionStyle.validationErrorText,
           ]}
         >
-          {error}
+          {t<string>(error)}
         </Text>
       ) : null}
       <TextInput
         onBlur={handleBlur}
         onChangeText={onChangeTextHandler}
-        placeholder={'Add an option'}
+        placeholder={t<string>('Add an option')}
         style={[styles.optionInput, { color: black }, optionStyle.input]}
       />
       <GestureDetector gesture={gesture}>
@@ -270,6 +279,7 @@ export const CreatePollOptions = ({ currentOptionPositions }: CreatePollOptionsP
   const { pollComposer } = messageComposer;
   const { errors, options } = useStateStore(pollComposer.state, pollComposerStateSelector);
   const { createPollOptionHeight = POLL_OPTION_HEIGHT } = useCreatePollContentContext();
+
   const updateOption = useCallback(
     (newText: string, index: number) => {
       pollComposer.updateFields({
@@ -305,20 +315,23 @@ export const CreatePollOptions = ({ currentOptionPositions }: CreatePollOptionsP
     },
   } = useTheme();
 
-  const onNewOrderChange = async (newOrder: CurrentOptionPositionsCache['inverseIndexCache']) => {
-    const reorderedPollOptions = [];
+  const onNewOrderChange = useCallback(
+    async (newOrder: CurrentOptionPositionsCache['inverseIndexCache']) => {
+      const reorderedPollOptions = [];
 
-    for (let i = 0; i < options.length; i++) {
-      const currentOption = options.find((option) => option.id === newOrder[i]);
-      if (currentOption) {
-        reorderedPollOptions.push(currentOption);
+      for (let i = 0; i < options.length; i++) {
+        const currentOption = options.find((option) => option.id === newOrder[i]);
+        if (currentOption) {
+          reorderedPollOptions.push(currentOption);
+        }
       }
-    }
 
-    await pollComposer.updateFields({
-      options: reorderedPollOptions,
-    });
-  };
+      await pollComposer.updateFields({
+        options: reorderedPollOptions,
+      });
+    },
+    [options, pollComposer],
+  );
 
   return (
     <View style={[styles.container, container]}>

package/src/components/Poll/components/MultipleAnswersField.tsx

@@ -17,6 +17,7 @@ export const MultipleAnswersField = () => {
   const { t } = useTranslationContext();
   const messageComposer = useMessageComposer();
   const { pollComposer } = messageComposer;
+  const { handleFieldBlur, updateFields } = pollComposer;
   const { enforce_unique_vote, error, max_votes_allowed } = useStateStore(
     pollComposer.state,
     pollComposerStateSelector,
@@ -33,21 +34,21 @@ export const MultipleAnswersField = () => {
 
   const onEnforceUniqueVoteHandler = useCallback(
     async (value: boolean) => {
-      await pollComposer.updateFields({ enforce_unique_vote: !value });
+      await updateFields({ enforce_unique_vote: !value });
     },
-    [pollComposer],
+    [updateFields],
   );
 
   const onChangeTextHandler = useCallback(
     async (newText: string) => {
-      await pollComposer.updateFields({ max_votes_allowed: newText });
+      await updateFields({ max_votes_allowed: newText });
     },
-    [pollComposer],
+    [updateFields],
   );
 
   const onBlurHandler = useCallback(async () => {
-    await pollComposer.handleFieldBlur('max_votes_allowed');
-  }, [pollComposer]);
+    await handleFieldBlur('max_votes_allowed');
+  }, [handleFieldBlur]);
 
   return (
     <View
@@ -69,15 +70,15 @@ export const MultipleAnswersField = () => {
                 maxVotes.validationText,
               ]}
             >
-              {error}
+              {t<string>(error)}
             </Text>
           ) : null}
           <View style={{ flexDirection: 'row' }}>
             <TextInput
               inputMode='numeric'
               onBlur={onBlurHandler}
               onChangeText={onChangeTextHandler}
-              placeholder={t('Maximum votes per person')}
+              placeholder={t<string>('Maximum votes per person')}
               style={[styles.maxVotesInput, { color: black }, maxVotes.input]}
             />
           </View>

package/src/components/Poll/components/NameField.tsx

@@ -8,6 +8,7 @@ export const NameField = () => {
   const { t } = useTranslationContext();
   const messageComposer = useMessageComposer();
   const { pollComposer } = messageComposer;
+  const { handleFieldBlur, updateFields } = pollComposer;
 
   const {
     theme: {
@@ -20,14 +21,14 @@ export const NameField = () => {
 
   const onChangeText = useCallback(
     async (newText: string) => {
-      await pollComposer.updateFields({ name: newText });
+      await updateFields({ name: newText });
     },
-    [pollComposer],
+    [updateFields],
   );
 
   const onBlur = useCallback(async () => {
-    await pollComposer.handleFieldBlur('name');
-  }, [pollComposer]);
+    await handleFieldBlur('name');
+  }, [handleFieldBlur]);
 
   return (
     <View>

package/src/i18n/en.json

@@ -68,6 +68,7 @@
   "Only visible to you": "Only visible to you",
   "Open Settings": "Open Settings",
   "Option": "Option",
+  "Option already exists": "Option already exists",
   "Options": "Options",
   "Photo": "Photo",
   "Photos and Videos": "Photos and Videos",
@@ -85,7 +86,7 @@
   "Reply to Message": "Reply to Message",
   "Resend": "Resend",
   "SEND": "SEND",
-  "Search GIFs": "Search GIFs",
+  "Search": "Search",
   "See all {{count}} options_one": "See all {{count}} options",
   "See all {{count}} options_other": "See all {{count}} options",
   "Select More Photos": "Select More Photos",
@@ -103,7 +104,6 @@
   "The message has been reported to a moderator.": "The message has been reported to a moderator.",
   "The source message was deleted": "The source message was deleted",
   "Thinking...": "Thinking...",
-  "This is already an option": "This is already an option",
   "This reply was deleted": "This reply was deleted",
   "Thread Reply": "Thread Reply",
   "Type a number from 2 to 10": "Type a number from 2 to 10",

package/src/i18n/es.json

@@ -68,6 +68,7 @@
   "Only visible to you": "Solo visible para ti",
   "Open Settings": "Configuración abierta",
   "Option": "Opción",
+  "Option already exists": "La opción ya existe",
   "Options": "Opciones",
   "Photo": "Foto",
   "Photos and Videos": "Fotos y videos",
@@ -85,7 +86,7 @@
   "Reply to Message": "Responder al mensaje",
   "Resend": "Reenviar",
   "SEND": "ENVIAR",
-  "Search GIFs": "Buscar GIFs",
+  "Search": "Buscar",
   "See all {{count}} options_many": "Ver las {{count}} opciones",
   "See all {{count}} options_one": "Ver las {{count}} opciones",
   "See all {{count}} options_other": "Ver las {{count}} opciones",
@@ -105,7 +106,6 @@
   "The message has been reported to a moderator.": "El mensaje ha sido reportado a un moderador.",
   "The source message was deleted": "El mensaje original fue eliminado",
   "Thinking...": "Pensando...",
-  "This is already an option": "Esto ya es una opción",
   "This reply was deleted": "Esta respuesta fue eliminada",
   "Thread Reply": "Respuesta de hilo",
   "Type a number from 2 to 10": "Escribe un número de 2 a 10",