Merge pull request #642 from GetStream/fix-nav-issues-found-in-docs

fix nav issues found in docs

Author: nhannah

src/components/Channel/Channel.tsx

@@ -737,7 +737,7 @@ const ChannelWithContext = <
       client.off('connection.changed', connectionChangedHandler);
       channel?.off(handleEvent);
     };
-  }, [channelId]);
+  }, [channelId, connectionRecoveredHandler, handleEvent]);
 
   const channelQueryCall = async (queryCall: () => void = () => null) => {
     setError(false);
@@ -1579,7 +1579,6 @@ const ChannelWithContext = <
     MessageAvatar,
     MessageContent,
     messageContentOrder,
-    MessageDeleted,
     MessageFooter,
     MessageHeader,
     MessageList,

src/components/Message/Message.tsx

@@ -408,6 +408,18 @@ const MessageWithContext = <
   const doubleTapRef = useRef<TapGestureHandler>(null);
   const pressActive = useSharedValue(false);
   const scale = useSharedValue(1);
+
+  /**
+   * This is a cleanup effect to prevent the onLongPress
+   * handler from being called if the component has dismounted.
+   */
+  useEffect(
+    () => () => {
+      pressActive.value = false;
+      cancelAnimation(scale);
+    },
+    [],
+  );
   const scaleStyle = useAnimatedStyle<ViewStyle>(
     () => ({
       transform: [

src/components/MessageInput/MessageInput.tsx

@@ -23,6 +23,10 @@ import {
   useSuggestionsContext,
 } from '../../contexts/suggestionsContext/SuggestionsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import {
+  ThreadContextValue,
+  useThreadContext,
+} from '../../contexts/threadContext/ThreadContext';
 import {
   TranslationContextValue,
   useTranslationContext,
@@ -150,6 +154,7 @@ type MessageInputPropsWithContext<
     SuggestionsContextValue<Co, Us>,
     'componentType' | 'suggestions' | 'suggestionsTitle'
   > &
+  Pick<ThreadContextValue, 'thread'> &
   Pick<TranslationContextValue, 't'> & {
     threadList?: boolean;
   };
@@ -200,6 +205,7 @@ const MessageInputWithContext = <
     suggestions,
     suggestionsTitle,
     t,
+    thread,
     threadList,
     uploadNewImage,
     watchers,
@@ -260,54 +266,85 @@ const MessageInputWithContext = <
     return closeAttachmentPicker;
   }, []);
 
-  const selectedImagesLength = selectedImages.length;
-  const imageUploadsLength = imageUploads.length;
+  const [hasResetImages, setHasResetImages] = useState(false);
+  const selectedImagesLength = hasResetImages ? selectedImages.length : 0;
+  const imageUploadsLength = hasResetImages ? imageUploads.length : 0;
+  const imagesForInput = (!!thread && !!threadList) || (!thread && !threadList);
+
+  useEffect(() => {
+    setSelectedImages([]);
+    if (imageUploads.length) {
+      imageUploads.forEach((image) => removeImage(image.id));
+    }
+    return () => setSelectedImages([]);
+  }, []);
+
+  useEffect(() => {
+    if (
+      hasResetImages === false &&
+      imageUploadsLength === 0 &&
+      selectedImagesLength === 0
+    ) {
+      setHasResetImages(true);
+    }
+  }, [imageUploadsLength, selectedImagesLength]);
+
   useEffect(() => {
-    if (selectedImagesLength > imageUploadsLength) {
-      const imagesToUpload = selectedImages.filter((selectedImage) => {
-        const uploadedImage = imageUploads.find(
+    if (imagesForInput === false && imageUploads.length) {
+      imageUploads.forEach((image) => removeImage(image.id));
+    }
+  }, [imagesForInput]);
+
+  useEffect(() => {
+    if (imagesForInput) {
+      if (selectedImagesLength > imageUploadsLength) {
+        const imagesToUpload = selectedImages.filter((selectedImage) => {
+          const uploadedImage = imageUploads.find(
+            (imageUpload) =>
+              imageUpload.file.uri === selectedImage.uri ||
+              imageUpload.url === selectedImage.uri,
+          );
+          return !uploadedImage;
+        });
+        imagesToUpload.forEach((image) => uploadNewImage(image));
+      } else if (selectedImagesLength < imageUploadsLength) {
+        const imagesToRemove = imageUploads.filter(
           (imageUpload) =>
-            imageUpload.file.uri === selectedImage.uri ||
-            imageUpload.url === selectedImage.uri,
+            !selectedImages.find(
+              (selectedImage) =>
+                selectedImage.uri === imageUpload.file.uri ||
+                selectedImage.uri === imageUpload.url,
+            ),
         );
-        return !uploadedImage;
-      });
-      imagesToUpload.forEach((image) => uploadNewImage(image));
-    } else if (selectedImagesLength < imageUploadsLength) {
-      const imagesToRemove = imageUploads.filter(
-        (imageUpload) =>
-          !selectedImages.find(
-            (selectedImage) =>
-              selectedImage.uri === imageUpload.file.uri ||
-              selectedImage.uri === imageUpload.url,
-          ),
-      );
-      imagesToRemove.forEach((image) => removeImage(image.id));
+        imagesToRemove.forEach((image) => removeImage(image.id));
+      }
     }
   }, [selectedImagesLength]);
 
   useEffect(() => {
-    if (imageUploadsLength < selectedImagesLength) {
-      const updatedSelectedImages = selectedImages.filter((selectedImage) => {
-        const uploadedImage = imageUploads.find(
-          (imageUpload) =>
-            imageUpload.file.uri === selectedImage.uri ||
-            imageUpload.url === selectedImage.uri,
+    if (imagesForInput) {
+      if (imageUploadsLength < selectedImagesLength) {
+        const updatedSelectedImages = selectedImages.filter((selectedImage) => {
+          const uploadedImage = imageUploads.find(
+            (imageUpload) =>
+              imageUpload.file.uri === selectedImage.uri ||
+              imageUpload.url === selectedImage.uri,
+          );
+          return uploadedImage;
+        });
+        setSelectedImages(updatedSelectedImages);
+      } else if (imageUploadsLength > selectedImagesLength) {
+        setSelectedImages(
+          imageUploads
+            .map((imageUpload) => ({
+              height: imageUpload.file.height,
+              source: imageUpload.file.source,
+              uri: imageUpload.url,
+              width: imageUpload.file.width,
+            }))
+            .filter(Boolean) as Asset[],
         );
-        return uploadedImage;
-      });
-      setSelectedImages(updatedSelectedImages);
-    } else if (imageUploadsLength > selectedImagesLength) {
-      setSelectedImages(
-        imageUploads
-          .map((imageUpload) => ({
-            height: imageUpload.file.height,
-            source: imageUpload.file.source,
-            uri: imageUpload.url,
-            width: imageUpload.file.width,
-          }))
-          .filter(Boolean) as Asset[],
-      );
+      }
     }
   }, [imageUploadsLength]);
 
@@ -592,6 +629,7 @@ const areEqual = <
     suggestions: prevSuggestions,
     suggestionsTitle: prevSuggestionsTitle,
     t: prevT,
+    thread: prevThread,
     threadList: prevThreadList,
   } = prevProps;
   const {
@@ -610,6 +648,7 @@ const areEqual = <
     suggestions: nextSuggestions,
     suggestionsTitle: nextSuggestionsTitle,
     t: nextT,
+    thread: nextThread,
     threadList: nextThreadList,
   } = nextProps;
 
@@ -676,6 +715,12 @@ const areEqual = <
   const suggestionsTitleEqual = prevSuggestionsTitle === nextSuggestionsTitle;
   if (!suggestionsTitleEqual) return false;
 
+  const threadEqual =
+    prevThread?.id === nextThread?.id &&
+    prevThread?.text === nextThread?.text &&
+    prevThread?.reply_count === nextThread?.reply_count;
+  if (!threadEqual) return false;
+
   const threadListEqual = prevThreadList === nextThreadList;
   if (!threadListEqual) return false;
 
@@ -767,6 +812,8 @@ export const MessageInput = <
     suggestionsTitle,
   } = useSuggestionsContext<Co, Us>();
 
+  const { thread } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
+
   const { t } = useTranslationContext();
 
   return (
@@ -807,6 +854,7 @@ export const MessageInput = <
         suggestions,
         suggestionsTitle,
         t,
+        thread,
         uploadNewImage,
         watchers,
       }}