feat: offline support (#1527)

* feat: offline support

* refactor: drop un-used function pragmaUserVersion

* refactor: reverting changes to ChannelPreview

* fix: fixing migration code issue

* refactor: drop limits from queries

* refactor: handling of message.read events and reads entity

* refactor: added members to separate table

* refactor: relative explicit query with left join to enrich users

* refactor: cleanup and reorganizing

* refactor: added index and foreign key constraints

* refactor: changes to be compatible with js client

* test: mocking sqlite

* refactor: added missing fields on channels table

* refactor: changes to be in sync with event from js client

* refactor: renaming table and cleanup of columns

* refactor: moving all quick-sqlite logic to separate class

* test: added simple test for offline support

* refactor: handle member related events

* refactor: added usage of sync api

* refactor: cleaning up un-necessary packages

* refactor: fixed issue with update message foreign key constraint failure

* refactor: cleanup

* refactor: cleanup

* tests: writing tests for offline feature

* refactor: removed dev-menu package and usage

* refactor: remove unused initDevMenu import

* refactor: remove un-used flipper packages

* docs: adding code comments

* refactor: removing unnecessary generics

* refactor: cleanup of mapper functions

* refactor: renaming offlineChannelsActive to staticChannelsActive

* refactor: removed metro config changes

* buiild: fixed issue with manual release script

* refactor: cleanup of handleEventToSyncDB

* refactor: fixing lint issue

* fix: removed redundant usage of useStreami18n hook

* fix: issue with message not displayed in static state

* build: updating stream-chat version

* fix: issue with appendWhereClause and undefined value

* fix: issue with members state initialization

* build: do not format on save

* fix: issue mapping memberCount to api response

* build: upgrading stream-chat version

* fix: reposition image error indicator

* refactor: use network error handling to useLoadingImage

* fix: image loading issue after network is recovered

* fix: logic for sync api and lint issues

* feat: point cameraroll dependency to the stream fork version

* fix: message.new event handling

* refactor: remove unnecessary client as hook dep

* refactor: code review changes

* refactor: moving offline support logic to Chat component

* refactor: fix lint and typescript issues

* refactor: handle quick-sqlite not being installed in better way

* docs: lint fixes

Co-authored-by: Mads Røskar <[email protected]>
Co-authored-by: stevegalili <[email protected]>
Co-authored-by: Santhosh Vaiyapuri <[email protected]>

Author: 4 people

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
   "editor.formatOnSave": true
-}
+}

bin/release.sh

@@ -30,13 +30,15 @@ cd ..
 sed -e 's|"version": "[^"]*"|"version": "'"$1"'"|g' -i.bak src/version.json
 rm src/version.json.bak
 
+git add package.json
 git add {expo,native}-package/package.json
 git add src/version.json
 
+git add yarn.lock
 git add expo-package/yarn.lock
 git add native-package/yarn.lock
 
-npm version "$1" --force
+npm version --no-git-tag-version "$1"
 
 npm publish --tag="$tag"
 
@@ -45,6 +47,4 @@ npm publish --tag="$tag"
 
 
 cd ../expo-package
-npm publish --tag="$tag"
-
-git push --follow-tags
+npm publish --tag="$tag"

docusaurus/docs/reactnative/basics/upgrade_helper.mdx

@@ -8,7 +8,7 @@ import TabItem from '@theme/TabItem';
 
 ## Update Camera Roll dependency
 
-Replace the `@react-native-community/cameraroll` with `@stream-io/react-native-cameraroll`. We had to roll out our fork as `@react-native-community/cameraroll` is no longer accepting pull requests for important fixes like Android 11 compatibility. 
+Replace the `@react-native-community/cameraroll` with `@stream-io/react-native-cameraroll`. We had to roll out our fork as `@react-native-community/cameraroll` is no longer accepting pull requests for important fixes like Android 11 compatibility.
 
 ```bash
 # Remove existing cameraroll dependency
@@ -32,14 +32,15 @@ Offline Support is a major opt-in feature introduced in v5 of SDK. To enable off
 
   Until v4, you could provide separate `Chat` component for each usage of `Channel` component or `ChannelList` component.
   But from v5, it is necessary that you provide only one instance of `Chat` component within your application.
-  This component needs to be a parent for all the chat related components such as `ChannelList`, `Channel` or `Thread`. 
+  This component needs to be a parent for all the chat related components such as `ChannelList`, `Channel` or `Thread`.
 
 - **Do not wait for `connectUser` call to succeed**
 
   It is important that you call `connectUser` method on chat client, before you render Chat components.
   But you don't need to wait for `connectUser` to succeed before rendering Chat components. This is to ensure:
-    - Chat components have access to current user information, which is important to store/access offline data.
-    - In case or slow or no network, Chat components will still load the chat data without waiting for connectUser to succeed.
+
+  - Chat components have access to current user information, which is important to store/access offline data.
+  - In case or slow or no network, Chat components will still load the chat data without waiting for connectUser to succeed.
 
   ```tsx {7,8,16}
   const chatClient = StreamChat.getInstance('API_KEY');
@@ -48,23 +49,23 @@ Offline Support is a major opt-in feature introduced in v5 of SDK. To enable off
 
     useEffect(() => {
       const startChat = async () => {
-        const connectPromise = chatClient.connectUser(user, tokenOrTokenProvider)
+        const connectPromise = chatClient.connectUser(user, tokenOrTokenProvider);
         setIsClientReady(true); // this allows components to render
         await connectPromise();
         // Any other post-connectUser logic you may have goes here.
-      }
+      };
 
       startChat();
-    }, [])
+    }, []);
 
     if (!isClientReady) return null; // or some loading indicator;
 
     return (
       <Chat client={chatClient} enableOfflineSupport>
         ...
       </Chat>
-    )
-  }
+    );
+  };
   ```
 
 - **Add `enableOfflineSupport` prop on Chat component**
@@ -74,5 +75,5 @@ Offline Support is a major opt-in feature introduced in v5 of SDK. To enable off
 
   <Chat client={chatClient} enableOfflineSupport>
     ...
-  </Chat>
-  ```
+  </Chat>;
+  ```

examples/ExpoMessaging/yarn.lock

@@ -6904,6 +6904,21 @@ [email protected]:
     jsonwebtoken "^8.5.1"
     ws "^7.4.4"
 
+[email protected]:
+  version "7.0.0-offline-support.3"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-7.0.0-offline-support.3.tgz#de18a7401f6007b89f5aaf6015ee933b45e218de"
+  integrity sha512-uYeDt1MqCDsZ9AIdBw5c7hRM0dshxLUkaYy3Co6gdAqh6AXCEVVDSzjxXT2w1wpKZpxpwZoy4YyQJTYKrNcJNA==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@types/jsonwebtoken" "^8.5.6"
+    "@types/ws" "^7.4.0"
+    axios "^0.22.0"
+    base64-js "^1.5.1"
+    form-data "^4.0.0"
+    isomorphic-ws "^4.0.1"
+    jsonwebtoken "^8.5.1"
+    ws "^7.4.4"
+
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"

examples/SampleApp/App.tsx

@@ -31,6 +31,9 @@ import { UserSelectorScreen } from './src/screens/UserSelectorScreen';
 
 import type { StreamChat } from 'stream-chat';
 
+LogBox.ignoreLogs(["Seems like you're using an old API"]);
+LogBox.ignoreLogs(['Each child in a list should have a unique']);
+
 import type {
   StackNavigatorParamList,
   StreamChatGenerics,
@@ -128,7 +131,7 @@ const App = () => {
           }}
         >
           <AppContext.Provider value={{ chatClient, loginUser, logout, switchUser }}>
-            {isConnecting ? (
+            {isConnecting && !chatClient ? (
               <LoadingScreen />
             ) : chatClient ? (
               <DrawerNavigatorWrapper chatClient={chatClient} />
@@ -165,7 +168,7 @@ const DrawerNavigatorWrapper: React.FC<{
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <OverlayProvider<StreamChatGenerics> bottomInset={bottom} value={{ style: streamChatTheme }}>
-        <Chat<StreamChatGenerics> client={chatClient}>
+        <Chat<StreamChatGenerics> client={chatClient} enableOfflineSupport>
           <AppOverlayProvider>
             <UserSearchProvider>
               <DrawerNavigator />

examples/SampleApp/ios/Podfile.lock

@@ -54,7 +54,7 @@ PODS:
     - FirebaseCoreDiagnostics (~> 8.0)
     - GoogleUtilities/Environment (~> 7.7)
     - GoogleUtilities/Logger (~> 7.7)
-  - FirebaseCoreDiagnostics (8.14.0):
+  - FirebaseCoreDiagnostics (8.15.0):
     - GoogleDataTransport (~> 9.1)
     - GoogleUtilities/Environment (~> 7.7)
     - GoogleUtilities/Logger (~> 7.7)
@@ -66,7 +66,7 @@ PODS:
     - GoogleUtilities/Environment (~> 7.7)
     - nanopb (~> 2.30908.0)
     - PromisesObjC (< 3.0, >= 1.2)
-  - FirebaseInstallations (8.14.0):
+  - FirebaseInstallations (8.15.0):
     - FirebaseCore (~> 8.0)
     - GoogleUtilities/Environment (~> 7.7)
     - GoogleUtilities/UserDefaults (~> 7.7)
@@ -162,9 +162,9 @@ PODS:
     - GoogleUtilities/Network (~> 7.7)
     - "GoogleUtilities/NSData+zlib (~> 7.7)"
     - nanopb (~> 2.30908.0)
-  - GoogleDataTransport (9.1.2):
-    - GoogleUtilities/Environment (~> 7.2)
-    - nanopb (~> 2.30908.0)
+  - GoogleDataTransport (9.1.4):
+    - GoogleUtilities/Environment (~> 7.7)
+    - nanopb (< 2.30910.0, >= 2.30908.0)
     - PromisesObjC (< 3.0, >= 1.2)
   - GoogleUtilities/AppDelegateSwizzler (7.7.0):
     - GoogleUtilities/Environment
@@ -193,7 +193,7 @@ PODS:
   - nanopb/decode (2.30908.0)
   - nanopb/encode (2.30908.0)
   - OpenSSL-Universal (1.1.180)
-  - PromisesObjC (2.0.0)
+  - PromisesObjC (2.1.0)
   - RCT-Folly (2021.06.28.00-v2):
     - boost
     - DoubleConversion
@@ -409,14 +409,18 @@ PODS:
   - React-jsinspector (0.67.3)
   - React-logger (0.67.3):
     - glog
-  - react-native-cameraroll (4.0.4):
+  - react-native-cameraroll (4.2.0):
     - React-Core
   - react-native-document-picker (5.0.4):
     - React-Core
   - react-native-image-resizer (1.4.5):
     - React-Core
   - react-native-netinfo (6.0.0):
     - React-Core
+  - react-native-quick-sqlite (3.1.8):
+    - React
+    - React-callinvoker
+    - React-Core
   - react-native-safe-area-context (3.2.0):
     - React-Core
   - react-native-video (5.2.0):
@@ -606,10 +610,11 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
-  - "react-native-cameraroll (from `../node_modules/@react-native-community/cameraroll`)"
+  - "react-native-cameraroll (from `../node_modules/@stream-io/react-native-cameraroll`)"
   - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-image-resizer (from `../node_modules/react-native-image-resizer`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
+  - react-native-quick-sqlite (from `../node_modules/react-native-quick-sqlite`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-video (from `../node_modules/react-native-video`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -709,13 +714,15 @@ EXTERNAL SOURCES:
   React-logger:
     :path: "../node_modules/react-native/ReactCommon/logger"
   react-native-cameraroll:
-    :path: "../node_modules/@react-native-community/cameraroll"
+    :path: "../node_modules/@stream-io/react-native-cameraroll"
   react-native-document-picker:
     :path: "../node_modules/react-native-document-picker"
   react-native-image-resizer:
     :path: "../node_modules/react-native-image-resizer"
   react-native-netinfo:
     :path: "../node_modules/@react-native-community/netinfo"
+  react-native-quick-sqlite:
+    :path: "../node_modules/react-native-quick-sqlite"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-video:
@@ -783,9 +790,9 @@ SPEC CHECKSUMS:
   FirebaseAnalytics: 2fc3876e2eb347673ad2f35e249ae7b15d6c88f5
   FirebaseAppDistribution: 54c3de22099cd46d93b6a24b1e70474530bb3188
   FirebaseCore: b84a44ee7ba999e0f9f76d198a9c7f60a797b848
-  FirebaseCoreDiagnostics: fd0c8490f34287229c1d6c103d3a55f81ec85712
+  FirebaseCoreDiagnostics: 92e07a649aeb66352b319d43bdd2ee3942af84cb
   FirebaseCrashlytics: 079ef36f5c4b7161188928faec40fa276ebefd84
-  FirebaseInstallations: 7d1d967a307c12f1aadd76844fc321cef699b1ce
+  FirebaseInstallations: 40bd9054049b2eae9a2c38ef1c3dd213df3605cd
   FirebaseMessaging: 5ebc42d281567658a2cb72b9ef3506e4a1a1a6e4
   Flipper: 30e8eeeed6abdc98edaf32af0cda2f198be4b733
   Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c
@@ -799,13 +806,13 @@ SPEC CHECKSUMS:
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   glog: 85ecdd10ee8d8ec362ef519a6a45ff9aa27b2e85
   GoogleAppMeasurement: 71156240babd3cc6ced03e0d54816f01a880c730
-  GoogleDataTransport: 629c20a4d363167143f30ea78320d5a7eb8bd940
+  GoogleDataTransport: 5fffe35792f8b96ec8d6775f5eccd83c998d5a3b
   GoogleUtilities: e0913149f6b0625b553d70dae12b49fc62914fd1
   hermes-engine: bf7577d12ac6ccf53ab8b5af3c6ccf0dd8458c5c
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   nanopb: a0ba3315591a9ae0a16a309ee504766e90db0c96
   OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
-  PromisesObjC: 68159ce6952d93e17b2dfe273b8c40907db5ba58
+  PromisesObjC: 99b6f43f9e1044bd87a95a60beff28c2c44ddb72
   RCT-Folly: 803a9cfd78114b2ec0f140cfa6fa2a6bafb2d685
   RCTRequired: 3c77b683474faf23920fbefc71c4e13af21470c0
   RCTTypeSafety: 720b1841260dac692444c2822b27403178da8b28
@@ -819,10 +826,11 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 15ea57ead631a11fad57634ff69f78e797113a39
   React-jsinspector: 1e1e03345cf6d47779e2061d679d0a87d9ae73d8
   React-logger: 1e10789cb84f99288479ba5f20822ce43ced6ffe
-  react-native-cameraroll: 88f4e62d9ecd0e1f253abe4f685474f2ea14bfa2
+  react-native-cameraroll: 71a4a68ebcff2fcb7305f4b408f9a972658bcdc7
   react-native-document-picker: 1a7518132d4a06b67f459be9bb1464a567d2b3b4
   react-native-image-resizer: d9fb629a867335bdc13230ac2a58702bb8c8828f
   react-native-netinfo: e849fc21ca2f4128a5726c801a82fc6f4a6db50d
+  react-native-quick-sqlite: e31f937c9385597bfb402ea0e7677e0093bc17d0
   react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
   react-native-video: a4c2635d0802f983594b7057e1bce8f442f0ad28
   React-perflogger: 93d3f142d6d9a46e635f09ba0518027215a41098

examples/SampleApp/package.json

@@ -26,7 +26,6 @@
   "dependencies": {
     "@notifee/react-native": "^5.0.3",
     "@react-native-async-storage/async-storage": "1.15.17",
-    "@react-native-community/cameraroll": "4.0.4",
     "@react-native-community/masked-view": "0.1.11",
     "@react-native-community/netinfo": "6.0.0",
     "@react-native-firebase/app": "^14.7.0",
@@ -36,6 +35,7 @@
     "@react-navigation/native": "5.9.4",
     "@react-navigation/stack": "5.14.5",
     "@stream-io/flat-list-mvcp": "0.10.2",
+    "@stream-io/react-native-cameraroll": "^4.2.0",
     "patch-package": "6.4.7",
     "react": "17.0.2",
     "react-native": "0.67.3",
@@ -46,6 +46,7 @@
     "react-native-image-crop-picker": "0.36.2",
     "react-native-image-resizer": "1.4.5",
     "react-native-markdown-package": "1.8.1",
+    "react-native-quick-sqlite": "^3.1.5",
     "react-native-reanimated": "2.7.0",
     "react-native-safe-area-context": "3.2.0",
     "react-native-screens": "3.2.0",

examples/SampleApp/src/hooks/useChatClient.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { StreamChat } from 'stream-chat';
 import messaging from '@react-native-firebase/messaging';
 import notifee from '@notifee/react-native';
-
+import { QuickSqliteClient } from 'stream-chat-react-native';
 import { USER_TOKENS, USERS } from '../ChatUsers';
 import AsyncStore from '../utils/AsyncStore';
 
@@ -74,15 +74,17 @@ export const useChatClient = () => {
     unsubscribePushListenersRef.current?.();
     const client = StreamChat.getInstance<StreamChatGenerics>(config.apiKey, {
       timeout: 6000,
+      // logger: (type, msg) => console.log(type, msg)
     });
 
     const user = {
       id: config.userId,
       image: config.userImage,
       name: config.userName,
     };
-
-    await client.connectUser(user, config.userToken);
+    const promise = client.connectUser(user, config.userToken);
+    setChatClient(client);
+    await promise;
     await AsyncStore.setItem('@stream-rn-sampleapp-login-config', config);
 
     const permissionAuthStatus = await messaging().hasPermission();
@@ -162,6 +164,7 @@ export const useChatClient = () => {
   };
 
   const logout = async () => {
+    QuickSqliteClient.resetDB();
     setChatClient(null);
     chatClient?.disconnectUser();
     await AsyncStore.removeItem('@stream-rn-sampleapp-login-config');

examples/SampleApp/src/screens/ChannelListScreen.tsx

@@ -57,7 +57,6 @@ const options = {
   state: true,
   watch: true,
 };
-
 export const ChannelListScreen: React.FC = () => {
   const { chatClient } = useAppContext();
   const navigation = useNavigation();
@@ -81,7 +80,7 @@ export const ChannelListScreen: React.FC = () => {
     () => ({
       ...baseFilters,
       members: {
-        $in: [chatClientUserId || ''],
+        $in: [chatClientUserId],
       },
     }),
     [chatClientUserId],
@@ -98,12 +97,14 @@ export const ChannelListScreen: React.FC = () => {
     </View>
   );
 
-  if (!chatClient) return null;
-
   const setScrollRef = (ref: React.RefObject<FlatList<Channel<StreamChatGenerics>> | null>) => {
     scrollRef.current = ref;
   };
 
+  if (!chatClient) {
+    return null;
+  }
+
   return (
     <View
       style={[

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -121,15 +121,15 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
       if (!chatClient || !channelId) return;
 
       const newChannel = chatClient?.channel('messaging', channelId);
+      setChannel(newChannel);
 
       if (!newChannel?.initialized) {
         await newChannel?.watch();
       }
-      setChannel(newChannel);
     };
 
     initChannel();
-  }, [channelId]);
+  }, [channelId, chatClient]);
 
   useFocusEffect(() => {
     setSelectedThread(undefined);