stream-chat-react-native-core 5.11.3-beta.7 → 5.12.0-beta.2

package/lib/module/hooks/useLoadingImage.js

@@ -4,29 +4,70 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useLoadingImage = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
-var _netinfo = require("@react-native-community/netinfo");
+var _ChatContext = require("../contexts/chatContext/ChatContext");
+function reducer(prevState, action) {
+  switch (action.type) {
+    case 'reloadImage':
+      return (0, _extends2["default"])({}, prevState, {
+        isLoadingImage: true,
+        isLoadingImageError: false
+      });
+    case 'setLoadingImage':
+      return (0, _extends2["default"])({}, prevState, {
+        isLoadingImage: action.isLoadingImage
+      });
+    case 'setLoadingImageError':
+      return (0, _extends2["default"])({}, prevState, {
+        isLoadingImageError: action.isLoadingImageError
+      });
+    default:
+      return prevState;
+  }
+}
 var useLoadingImage = function useLoadingImage() {
-  var _useState = (0, _react.useState)(true),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isLoadingImage = _useState2[0],
-    setLoadingImage = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    isLoadingImageError = _useState4[0],
-    setLoadingImageError = _useState4[1];
-  var _useNetInfo = (0, _netinfo.useNetInfo)(),
-    isConnected = _useNetInfo.isConnected;
+  var _useReducer = (0, _react.useReducer)(reducer, {
+      isLoadingImage: true,
+      isLoadingImageError: false
+    }),
+    _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
+    imageState = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var isLoadingImage = imageState.isLoadingImage,
+    isLoadingImageError = imageState.isLoadingImageError;
+  var onReloadImageRef = (0, _react.useRef)(function () {
+    return dispatch({
+      type: 'reloadImage'
+    });
+  });
+  var setLoadingImageRef = (0, _react.useRef)(function (isLoadingImage) {
+    return dispatch({
+      isLoadingImage: isLoadingImage,
+      type: 'setLoadingImage'
+    });
+  });
+  var setLoadingImageErrorRef = (0, _react.useRef)(function (isLoadingImageError) {
+    return dispatch({
+      isLoadingImageError: isLoadingImageError,
+      type: 'setLoadingImageError'
+    });
+  });
+  var _useChatContext = (0, _ChatContext.useChatContext)(),
+    isOnline = _useChatContext.isOnline;
+  var hasImageLoadedErroredRef = (0, _react.useRef)(isLoadingImageError);
+  hasImageLoadedErroredRef.current = isLoadingImageError;
   (0, _react.useEffect)(function () {
-    if (isConnected) {
-      setLoadingImageError(false);
+    if (isOnline && hasImageLoadedErroredRef.current) {
+      onReloadImageRef.current();
     }
-  }, [isConnected]);
+  }, [isOnline]);
   return {
     isLoadingImage: isLoadingImage,
     isLoadingImageError: isLoadingImageError,
-    setLoadingImage: setLoadingImage,
-    setLoadingImageError: setLoadingImageError
+    onReloadImage: onReloadImageRef.current,
+    setLoadingImage: setLoadingImageRef.current,
+    setLoadingImageError: setLoadingImageErrorRef.current
   };
 };
 exports.useLoadingImage = useLoadingImage;

package/lib/module/hooks/useLoadingImage.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_netinfo","useLoadingImage","_useState","useState","_useState2","_slicedToArray2","isLoadingImage","setLoadingImage","_useState3","_useState4","isLoadingImageError","setLoadingImageError","_useNetInfo","useNetInfo","isConnected","useEffect","exports"],"sources":["useLoadingImage.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useNetInfo } from '@react-native-community/netinfo';\n\nexport const useLoadingImage = () => {\n  const [isLoadingImage, setLoadingImage] = useState(true);\n  const [isLoadingImageError, setLoadingImageError] = useState(false);\n  const { isConnected } = useNetInfo();\n  useEffect(() => {\n    if (isConnected) {\n      setLoadingImageError(false);\n    }\n  }, [isConnected]);\n\n  return { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AAEO,IAAME,eAAe,GAAG,SAAlBA,eAAeA,CAAA,EAAS;EACnC,IAAAC,SAAA,GAA0C,IAAAC,eAAQ,EAAC,IAAI,CAAC;IAAAC,UAAA,OAAAC,eAAA,aAAAH,SAAA;IAAjDI,cAAc,GAAAF,UAAA;IAAEG,eAAe,GAAAH,UAAA;EACtC,IAAAI,UAAA,GAAoD,IAAAL,eAAQ,EAAC,KAAK,CAAC;IAAAM,UAAA,OAAAJ,eAAA,aAAAG,UAAA;IAA5DE,mBAAmB,GAAAD,UAAA;IAAEE,oBAAoB,GAAAF,UAAA;EAChD,IAAAG,WAAA,GAAwB,IAAAC,mBAAU,GAAE;IAA5BC,WAAW,GAAAF,WAAA,CAAXE,WAAW;EACnB,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAID,WAAW,EAAE;MACfH,oBAAoB,CAAC,KAAK,CAAC;IAC7B;EACF,CAAC,EAAE,CAACG,WAAW,CAAC,CAAC;EAEjB,OAAO;IAAER,cAAc,EAAdA,cAAc;IAAEI,mBAAmB,EAAnBA,mBAAmB;IAAEH,eAAe,EAAfA,eAAe;IAAEI,oBAAoB,EAApBA;EAAqB,CAAC;AACvF,CAAC;AAACK,OAAA,CAAAf,eAAA,GAAAA,eAAA"}
+{"version":3,"names":["_react","require","_ChatContext","reducer","prevState","action","type","_extends2","isLoadingImage","isLoadingImageError","useLoadingImage","_useReducer","useReducer","_useReducer2","_slicedToArray2","imageState","dispatch","onReloadImageRef","useRef","setLoadingImageRef","setLoadingImageErrorRef","_useChatContext","useChatContext","isOnline","hasImageLoadedErroredRef","current","useEffect","onReloadImage","setLoadingImage","setLoadingImageError","exports"],"sources":["useLoadingImage.tsx"],"sourcesContent":["import { useEffect, useReducer, useRef } from 'react';\n\nimport { useChatContext } from '../contexts/chatContext/ChatContext';\n\ntype ImageState = {\n  isLoadingImage: boolean;\n  isLoadingImageError: boolean;\n};\n\ntype Action =\n  | { type: 'reloadImage' }\n  | { isLoadingImage: boolean; type: 'setLoadingImage' }\n  | { isLoadingImageError: boolean; type: 'setLoadingImageError' };\n\nfunction reducer(prevState: ImageState, action: Action) {\n  switch (action.type) {\n    case 'reloadImage':\n      return {\n        ...prevState,\n        isLoadingImage: true,\n        isLoadingImageError: false,\n      };\n    case 'setLoadingImage':\n      return { ...prevState, isLoadingImage: action.isLoadingImage };\n    case 'setLoadingImageError':\n      return { ...prevState, isLoadingImageError: action.isLoadingImageError };\n    default:\n      return prevState;\n  }\n}\nexport const useLoadingImage = () => {\n  const [imageState, dispatch] = useReducer(reducer, {\n    isLoadingImage: true,\n    isLoadingImageError: false,\n  });\n  const { isLoadingImage, isLoadingImageError } = imageState;\n  const onReloadImageRef = useRef(() => dispatch({ type: 'reloadImage' }));\n  const setLoadingImageRef = useRef((isLoadingImage: boolean) =>\n    dispatch({ isLoadingImage, type: 'setLoadingImage' }),\n  );\n  const setLoadingImageErrorRef = useRef((isLoadingImageError: boolean) =>\n    dispatch({ isLoadingImageError, type: 'setLoadingImageError' }),\n  );\n  const { isOnline } = useChatContext();\n\n  // storing the value of isLoadingImageError in a ref to avoid passing as a dep to useEffect\n  const hasImageLoadedErroredRef = useRef(isLoadingImageError);\n  hasImageLoadedErroredRef.current = isLoadingImageError;\n\n  useEffect(() => {\n    if (isOnline && hasImageLoadedErroredRef.current) {\n      // if there was an error previously, reload the image automatically when user comes back online\n      onReloadImageRef.current();\n    }\n  }, [isOnline]);\n\n  return {\n    isLoadingImage,\n    isLoadingImageError,\n    onReloadImage: onReloadImageRef.current,\n    setLoadingImage: setLoadingImageRef.current,\n    setLoadingImageError: setLoadingImageErrorRef.current,\n  };\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAD,OAAA;AAYA,SAASE,OAAOA,CAACC,SAAqB,EAAEC,MAAc,EAAE;EACtD,QAAQA,MAAM,CAACC,IAAI;IACjB,KAAK,aAAa;MAChB,WAAAC,SAAA,iBACKH,SAAS;QACZI,cAAc,EAAE,IAAI;QACpBC,mBAAmB,EAAE;MAAK;IAE9B,KAAK,iBAAiB;MACpB,WAAAF,SAAA,iBAAYH,SAAS;QAAEI,cAAc,EAAEH,MAAM,CAACG;MAAc;IAC9D,KAAK,sBAAsB;MACzB,WAAAD,SAAA,iBAAYH,SAAS;QAAEK,mBAAmB,EAAEJ,MAAM,CAACI;MAAmB;IACxE;MACE,OAAOL,SAAS;EAAC;AAEvB;AACO,IAAMM,eAAe,GAAG,SAAlBA,eAAeA,CAAA,EAAS;EACnC,IAAAC,WAAA,GAA+B,IAAAC,iBAAU,EAACT,OAAO,EAAE;MACjDK,cAAc,EAAE,IAAI;MACpBC,mBAAmB,EAAE;IACvB,CAAC,CAAC;IAAAI,YAAA,OAAAC,eAAA,aAAAH,WAAA;IAHKI,UAAU,GAAAF,YAAA;IAAEG,QAAQ,GAAAH,YAAA;EAI3B,IAAQL,cAAc,GAA0BO,UAAU,CAAlDP,cAAc;IAAEC,mBAAmB,GAAKM,UAAU,CAAlCN,mBAAmB;EAC3C,IAAMQ,gBAAgB,GAAG,IAAAC,aAAM,EAAC;IAAA,OAAMF,QAAQ,CAAC;MAAEV,IAAI,EAAE;IAAc,CAAC,CAAC;EAAA,EAAC;EACxE,IAAMa,kBAAkB,GAAG,IAAAD,aAAM,EAAC,UAACV,cAAuB;IAAA,OACxDQ,QAAQ,CAAC;MAAER,cAAc,EAAdA,cAAc;MAAEF,IAAI,EAAE;IAAkB,CAAC,CAAC;EAAA,EACtD;EACD,IAAMc,uBAAuB,GAAG,IAAAF,aAAM,EAAC,UAACT,mBAA4B;IAAA,OAClEO,QAAQ,CAAC;MAAEP,mBAAmB,EAAnBA,mBAAmB;MAAEH,IAAI,EAAE;IAAuB,CAAC,CAAC;EAAA,EAChE;EACD,IAAAe,eAAA,GAAqB,IAAAC,2BAAc,GAAE;IAA7BC,QAAQ,GAAAF,eAAA,CAARE,QAAQ;EAGhB,IAAMC,wBAAwB,GAAG,IAAAN,aAAM,EAACT,mBAAmB,CAAC;EAC5De,wBAAwB,CAACC,OAAO,GAAGhB,mBAAmB;EAEtD,IAAAiB,gBAAS,EAAC,YAAM;IACd,IAAIH,QAAQ,IAAIC,wBAAwB,CAACC,OAAO,EAAE;MAEhDR,gBAAgB,CAACQ,OAAO,EAAE;IAC5B;EACF,CAAC,EAAE,CAACF,QAAQ,CAAC,CAAC;EAEd,OAAO;IACLf,cAAc,EAAdA,cAAc;IACdC,mBAAmB,EAAnBA,mBAAmB;IACnBkB,aAAa,EAAEV,gBAAgB,CAACQ,OAAO;IACvCG,eAAe,EAAET,kBAAkB,CAACM,OAAO;IAC3CI,oBAAoB,EAAET,uBAAuB,CAACK;EAChD,CAAC;AACH,CAAC;AAACK,OAAA,CAAApB,eAAA,GAAAA,eAAA"}

package/lib/module/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.11.3-beta.7"
+  "version": "5.12.0-beta.2"
 }

package/lib/typescript/components/Attachment/ImageReloadIndicator.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+export declare const ImageReloadIndicator: ({ onReloadImage, style, }: {
+    onReloadImage: () => void;
+    style: React.ComponentProps<typeof Pressable>['style'];
+}) => JSX.Element;

package/lib/typescript/hooks/useLoadingImage.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 export declare const useLoadingImage: () => {
     isLoadingImage: boolean;
     isLoadingImageError: boolean;
-    setLoadingImage: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    setLoadingImageError: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    onReloadImage: () => void;
+    setLoadingImage: (isLoadingImage: boolean) => void;
+    setLoadingImageError: (isLoadingImageError: boolean) => void;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "5.11.3-beta.7",
+  "version": "5.12.0-beta.2",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/Gallery.tsx

@@ -4,6 +4,7 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import type { Attachment } from 'stream-chat';
 
 import { GalleryImage } from './GalleryImage';
+import { ImageReloadIndicator } from './ImageReloadIndicator';
 import { buildGallery } from './utils/buildGallery/buildGallery';
 
 import type { Thumbnail } from './utils/buildGallery/types';
@@ -67,6 +68,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     position: 'absolute',
   },
+  imageReloadContainerStyle: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   moreImagesContainer: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -452,8 +458,13 @@ const GalleryImageThumbnail = <
   GalleryThumbnailProps<StreamChatGenerics>,
   'ImageLoadingFailedIndicator' | 'ImageLoadingIndicator' | 'thumbnail' | 'borderRadius'
 >) => {
-  const { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError } =
-    useLoadingImage();
+  const {
+    isLoadingImage,
+    isLoadingImageError,
+    onReloadImage,
+    setLoadingImage,
+    setLoadingImageError,
+  } = useLoadingImage();
 
   const {
     theme: {
@@ -471,11 +482,17 @@ const GalleryImageThumbnail = <
       }}
     >
       {isLoadingImageError ? (
-        <ImageLoadingFailedIndicator style={[styles.imageLoadingErrorIndicatorStyle]} />
+        <>
+          <ImageLoadingFailedIndicator style={styles.imageLoadingErrorIndicatorStyle} />
+          <ImageReloadIndicator
+            onReloadImage={onReloadImage}
+            style={styles.imageReloadContainerStyle}
+          />
+        </>
       ) : (
         <>
           <GalleryImage
-            onError={(error) => {
+            onError={({ nativeEvent: { error } }) => {
               console.warn(error);
               setLoadingImage(false);
               setLoadingImageError(true);
@@ -494,7 +511,7 @@ const GalleryImageThumbnail = <
             uri={thumbnail.url}
           />
           {isLoadingImage && (
-            <View style={[styles.imageLoadingIndicatorContainer]}>
+            <View style={styles.imageLoadingIndicatorContainer}>
               <ImageLoadingIndicator style={styles.imageLoadingIndicatorStyle} />
             </View>
           )}

package/src/components/Attachment/ImageReloadIndicator.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Refresh } from '../../icons';
+
+const REFRESH_ICON_SIZE = 24;
+
+export const ImageReloadIndicator = ({
+  onReloadImage,
+  style,
+}: {
+  onReloadImage: () => void;
+  style: React.ComponentProps<typeof Pressable>['style'];
+}) => {
+  const {
+    theme: {
+      colors: { grey_dark },
+    },
+  } = useTheme();
+
+  return (
+    <Pressable onPress={onReloadImage} style={style}>
+      <Refresh height={REFRESH_ICON_SIZE} pathFill={grey_dark} width={REFRESH_ICON_SIZE} />
+    </Pressable>
+  );
+};

package/src/components/Attachment/__tests__/Gallery.test.js

@@ -270,7 +270,9 @@ describe('Gallery', () => {
       expect(queryAllByTestId('gallery-container').length).toBe(1);
     });
 
-    fireEvent(getByA11yLabel('Gallery Image'), 'error');
+    fireEvent(getByA11yLabel('Gallery Image'), 'error', {
+      nativeEvent: { error: 'error loading image' },
+    });
     expect(getByAccessibilityHint('image-loading-error')).toBeTruthy();
   });
 

package/src/components/Channel/Channel.tsx

@@ -640,7 +640,10 @@ const ChannelWithContext = <
   }, [threadPropsExists]);
 
   const handleAppBackground = useCallback(() => {
-    if (channel) {
+    const channelData = channel.data as
+      | Extract<typeof channel.data, { own_capabilities: string[] }>
+      | undefined;
+    if (channelData?.own_capabilities?.includes('send-typing-events')) {
       channel.sendEvent({
         parent_id: thread?.id,
         type: 'typing.stop',

package/src/hooks/useLoadingImage.tsx

@@ -1,16 +1,64 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useReducer, useRef } from 'react';
 
-import { useNetInfo } from '@react-native-community/netinfo';
+import { useChatContext } from '../contexts/chatContext/ChatContext';
 
+type ImageState = {
+  isLoadingImage: boolean;
+  isLoadingImageError: boolean;
+};
+
+type Action =
+  | { type: 'reloadImage' }
+  | { isLoadingImage: boolean; type: 'setLoadingImage' }
+  | { isLoadingImageError: boolean; type: 'setLoadingImageError' };
+
+function reducer(prevState: ImageState, action: Action) {
+  switch (action.type) {
+    case 'reloadImage':
+      return {
+        ...prevState,
+        isLoadingImage: true,
+        isLoadingImageError: false,
+      };
+    case 'setLoadingImage':
+      return { ...prevState, isLoadingImage: action.isLoadingImage };
+    case 'setLoadingImageError':
+      return { ...prevState, isLoadingImageError: action.isLoadingImageError };
+    default:
+      return prevState;
+  }
+}
 export const useLoadingImage = () => {
-  const [isLoadingImage, setLoadingImage] = useState(true);
-  const [isLoadingImageError, setLoadingImageError] = useState(false);
-  const { isConnected } = useNetInfo();
+  const [imageState, dispatch] = useReducer(reducer, {
+    isLoadingImage: true,
+    isLoadingImageError: false,
+  });
+  const { isLoadingImage, isLoadingImageError } = imageState;
+  const onReloadImageRef = useRef(() => dispatch({ type: 'reloadImage' }));
+  const setLoadingImageRef = useRef((isLoadingImage: boolean) =>
+    dispatch({ isLoadingImage, type: 'setLoadingImage' }),
+  );
+  const setLoadingImageErrorRef = useRef((isLoadingImageError: boolean) =>
+    dispatch({ isLoadingImageError, type: 'setLoadingImageError' }),
+  );
+  const { isOnline } = useChatContext();
+
+  // storing the value of isLoadingImageError in a ref to avoid passing as a dep to useEffect
+  const hasImageLoadedErroredRef = useRef(isLoadingImageError);
+  hasImageLoadedErroredRef.current = isLoadingImageError;
+
   useEffect(() => {
-    if (isConnected) {
-      setLoadingImageError(false);
+    if (isOnline && hasImageLoadedErroredRef.current) {
+      // if there was an error previously, reload the image automatically when user comes back online
+      onReloadImageRef.current();
     }
-  }, [isConnected]);
+  }, [isOnline]);
 
-  return { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError };
+  return {
+    isLoadingImage,
+    isLoadingImageError,
+    onReloadImage: onReloadImageRef.current,
+    setLoadingImage: setLoadingImageRef.current,
+    setLoadingImageError: setLoadingImageErrorRef.current,
+  };
 };

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.11.3-beta.7"
+  "version": "5.12.0-beta.2"
 }