fix: added option reordering fix

Author: khushal87

package/src/components/Poll/CreatePollContent.tsx

@@ -77,8 +77,7 @@ export const CreatePollContent = () => {
 
   useEffect(() => {
     if (!createPollOptionHeight) return;
-    const newID = options.find((option) => option.text === '')?.id;
-    const newIndex = options.findIndex((option) => option.id === newID);
+    const newIndex = options.length;
     currentOptionPositions.value = {
       inverseIndexCache: {
         ...currentOptionPositions.value.inverseIndexCache,
@@ -93,7 +92,7 @@ export const CreatePollContent = () => {
       },
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [createPollOptionHeight, options]);
+  }, [createPollOptionHeight, options.length]);
 
   useEffect(() => {
     const seenTexts = new Set<string>();
@@ -134,7 +133,7 @@ export const CreatePollContent = () => {
                 reorderedPollOptions.push(currentOption);
               }
             }
-            pollComposer.updateFields({
+            await pollComposer.updateFields({
               options: reorderedPollOptions,
             });
             await createAndSendPoll();

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { StyleSheet, Text, TextInput, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   interpolate,
@@ -224,7 +224,7 @@ export const CreatePollOption = ({
       ) : null}
       <TextInput
         onChangeText={(newText) => handleChangeText(newText, index)}
-        placeholder={t<string>('Option')}
+        placeholder={'Add an option'}
         style={[styles.optionInput, { color: black }, optionStyle.input]}
         value={option.text}
       />
@@ -274,10 +274,10 @@ export const CreatePollOptions = (props: {
 
   const {
     theme: {
-      colors: { black, bg_user },
+      colors: { black },
       poll: {
         createContent: {
-          pollOptions: { addOption, container, title },
+          pollOptions: { container, title },
         },
       },
     },
@@ -301,34 +301,6 @@ export const CreatePollOptions = (props: {
           />
         ))}
       </View>
-      <Pressable
-        onPress={() => {
-          const newIndex = options.length;
-          currentOptionPositions.value = {
-            inverseIndexCache: {
-              ...currentOptionPositions.value.inverseIndexCache,
-              [newIndex]: newIndex,
-            },
-            positionCache: {
-              ...currentOptionPositions.value.positionCache,
-              [newIndex]: {
-                updatedIndex: newIndex,
-                updatedTop: newIndex * createPollOptionHeight,
-              },
-            },
-          };
-        }}
-        style={({ pressed }) => [
-          { opacity: pressed ? 0.5 : 1 },
-          styles.addOptionWrapper,
-          { backgroundColor: bg_user },
-          addOption.wrapper,
-        ]}
-      >
-        <Text style={[styles.text, { color: black }, addOption.text]}>
-          {t<string>('Add an option')}
-        </Text>
-      </Pressable>
     </View>
   );
 };

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

@@ -8,7 +8,6 @@ import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/
 import { useStateStore } from '../../../hooks/useStateStore';
 
 const pollComposerStateSelector = (state: PollComposerState) => ({
-  error: state.errors.name,
   name: state.data.name,
 });
 
@@ -27,12 +26,20 @@ export const NameField = () => {
     },
   } = useTheme();
 
+  const onChangeText = async (text: string) => {
+    await pollComposer.updateFields({ name: text });
+  };
+
+  const onBlur = async () => {
+    await pollComposer.handleFieldBlur('name');
+  };
+
   return (
     <View>
       <Text style={[styles.text, { color: black }, name.title]}>{t<string>('Questions')}</Text>
       <TextInput
-        onBlur={() => pollComposer.handleFieldBlur('name')}
-        onChangeText={(text) => pollComposer.updateFields({ name: text })}
+        onBlur={onBlur}
+        onChangeText={onChangeText}
         placeholder={t('Ask a question')}
         style={[
           styles.textInputWrapper,