stream-chat-react-native-core 5.0.0-offline-support.14 → 5.1.0-beta.1

package/src/components/Message/MessageSimple/MessageTextContainer.tsx

@@ -117,8 +117,16 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   prevProps: MessageTextContainerPropsWithContext<StreamChatGenerics>,
   nextProps: MessageTextContainerPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { message: prevMessage, onlyEmojis: prevOnlyEmojis } = prevProps;
-  const { message: nextMessage, onlyEmojis: nextOnlyEmojis } = nextProps;
+  const {
+    markdownStyles: prevMarkdownStyles,
+    message: prevMessage,
+    onlyEmojis: prevOnlyEmojis,
+  } = prevProps;
+  const {
+    markdownStyles: nextMarkdownStyles,
+    message: nextMessage,
+    onlyEmojis: nextOnlyEmojis,
+  } = nextProps;
 
   const messageTextEqual = prevMessage.text === nextMessage.text;
   if (!messageTextEqual) return false;
@@ -134,6 +142,18 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
         prevMessage.mentioned_users[0].name === nextMessage.mentioned_users[0].name));
   if (!mentionedUsersEqual) return false;
 
+  // stringify could be an expensive operation, so lets rule out the obvious
+  // possibilities first such as different object reference or empty objects etc.
+  // Also keeping markdown equality check at the last to make sure other less
+  // expensive equality checks get executed first and markdown check will be skipped if returned
+  // false from previous checks.
+  const markdownStylesEqual =
+    prevMarkdownStyles === nextMarkdownStyles ||
+    (Object.keys(prevMarkdownStyles || {}).length === 0 &&
+      Object.keys(nextMarkdownStyles || {}).length === 0) ||
+    JSON.stringify(prevMarkdownStyles) === JSON.stringify(nextMarkdownStyles);
+  if (!markdownStylesEqual) return false;
+
   return true;
 };
 

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap

@@ -47,6 +47,7 @@ exports[`MessageAvatar should render message avatar 1`] = `
               "width": 32,
             },
             Object {
+              "backgroundColor": "#ececec",
               "borderRadius": 16,
               "height": 32,
               "width": 32,

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -261,7 +261,7 @@ export const renderText = <
   );
 
   const customRules = {
-    link: { link },
+    link: { react: link },
     list: { react: list },
     // Truncate long text content in the message overlay
     paragraph: messageTextNumberOfLines ? { react: paragraphText } : {},

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { FlatList, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+  FlatList,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+} from 'react-native';
 
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
@@ -87,9 +95,8 @@ const ImageUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { overlay, white },
       messageInput: {
-        imageUploadPreview: { dismiss, flatList, itemContainer, upload },
+        imageUploadPreview: { flatList, itemContainer, upload },
       },
     },
   } = useTheme();
@@ -140,15 +147,11 @@ const ImageUploadPreviewWithContext = <
             style={[styles.upload, upload]}
           />
         </UploadProgressIndicator>
-        <TouchableOpacity
+        <DismissUpload
           onPress={() => {
             removeImage(item.id);
           }}
-          style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
-          testID='remove-image-upload-preview'
-        >
-          <Close pathFill={white} />
-        </TouchableOpacity>
+        />
         <UnsupportedImageTypeIndicator indicatorType={indicatorType} />
       </View>
     );
@@ -170,6 +173,29 @@ const ImageUploadPreviewWithContext = <
   ) : null;
 };
 
+type DismissUploadProps = Pick<TouchableOpacityProps, 'onPress'>;
+
+const DismissUpload = ({ onPress }: DismissUploadProps) => {
+  const {
+    theme: {
+      colors: { overlay, white },
+      messageInput: {
+        imageUploadPreview: { dismiss, dismissIconColor },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
+      testID='remove-image-upload-preview'
+    >
+      <Close pathFill={dismissIconColor || white} />
+    </TouchableOpacity>
+  );
+};
+
 const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
   prevProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
   nextProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,

package/src/components/MessageList/MessageList.tsx

@@ -124,7 +124,7 @@ type MessageListPropsWithContext<
     | 'targetedMessage'
   > &
   Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
-  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImages'> &
+  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setMessages'> &
   Pick<
     PaginatedMessageListContextValue<StreamChatGenerics>,
     'hasNoMoreRecentMessagesToLoad' | 'loadMore' | 'loadMoreRecent'
@@ -270,7 +270,7 @@ const MessageListWithContext = <
     scrollToFirstUnreadThreshold,
     selectedPicker,
     setFlatListRef,
-    setImages,
+    setMessages,
     setSelectedPicker,
     setTargetedMessage,
     StickyHeader,
@@ -530,7 +530,7 @@ const MessageListWithContext = <
     index: number;
     item: MessageType<StreamChatGenerics>;
   }) => {
-    if (!channel || (!channel.initialized && !channel.staticState)) return null;
+    if (!channel || (!channel.initialized && !channel.offlineMode)) return null;
 
     const lastRead = channel.lastRead();
 
@@ -898,7 +898,7 @@ const MessageListWithContext = <
       isListActive &&
       ((threadList && thread) || (!threadList && !thread))
     ) {
-      setImages(messagesWithImages as MessageType<StreamChatGenerics>[]);
+      setMessages(messagesWithImages as MessageType<StreamChatGenerics>[]);
     }
   }, [
     imageString,
@@ -1044,7 +1044,7 @@ export const MessageList = <
     targetedMessage,
   } = useChannelContext<StreamChatGenerics>();
   const { client } = useChatContext<StreamChatGenerics>();
-  const { setImages } = useImageGalleryContext<StreamChatGenerics>();
+  const { setMessages } = useImageGalleryContext<StreamChatGenerics>();
   const {
     DateHeader,
     deletedMessagesVisibilityType,
@@ -1104,7 +1104,7 @@ export const MessageList = <
         ScrollToBottomButton,
         scrollToFirstUnreadThreshold,
         selectedPicker,
-        setImages,
+        setMessages,
         setSelectedPicker,
         setTargetedMessage,
         StickyHeader,

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -321,6 +321,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "width": 32,
                                   },
                                   Object {
+                                    "backgroundColor": "#ececec",
                                     "borderRadius": 16,
                                     "height": 32,
                                     "width": 32,
@@ -569,6 +570,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "width": 32,
                                   },
                                   Object {
+                                    "backgroundColor": "#ececec",
                                     "borderRadius": 16,
                                     "height": 32,
                                     "width": 32,
@@ -817,6 +819,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "width": 32,
                                   },
                                   Object {
+                                    "backgroundColor": "#ececec",
                                     "borderRadius": 16,
                                     "height": 32,
                                     "width": 32,
@@ -1108,6 +1111,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                       "width": 32,
                                     },
                                     Object {
+                                      "backgroundColor": "#ececec",
                                       "borderRadius": 16,
                                       "height": 32,
                                       "width": 32,

package/src/contexts/imageGalleryContext/ImageGalleryContext.md

@@ -8,7 +8,7 @@ can get access to context as following:
 import { useChannelsContext } from 'stream-chat-react-native';
 
 const SomeChildComponent = () => {
-  const { image, setImage, setImages } = useImageGalleryContext();
+  const { selectedMessage, setSelectedMessage, setMessages } = useImageGalleryContext();
 
   return (
     <View />

package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx

@@ -7,13 +7,18 @@ import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
+type SelectedMessage = {
+  messageId?: string;
+  url?: string;
+};
+
 export type ImageGalleryContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
-  images: MessageType<StreamChatGenerics>[];
-  setImage: React.Dispatch<React.SetStateAction<{ messageId?: string; url?: string } | undefined>>;
-  setImages: React.Dispatch<React.SetStateAction<MessageType<StreamChatGenerics>[]>>;
-  image?: { messageId?: string; url?: string };
+  messages: MessageType<StreamChatGenerics>[];
+  setMessages: React.Dispatch<React.SetStateAction<MessageType<StreamChatGenerics>[]>>;
+  setSelectedMessage: React.Dispatch<React.SetStateAction<SelectedMessage | undefined>>;
+  selectedMessage?: SelectedMessage;
 };
 
 export const ImageGalleryContext = React.createContext(
@@ -25,19 +30,19 @@ export const ImageGalleryProvider = <
 >({
   children,
 }: PropsWithChildren<UnknownType>) => {
-  const [images, setImages] = useState<MessageType<StreamChatGenerics>[]>([]);
-  const [image, setImage] = useState<{ messageId?: string; url?: string }>();
-
-  const imageGalleryContext = {
-    image,
-    images,
-    setImage,
-    setImages,
-  };
+  const [messages, setMessages] = useState<MessageType<StreamChatGenerics>[]>([]);
+  const [selectedMessage, setSelectedMessage] = useState<SelectedMessage>();
 
   return (
     <ImageGalleryContext.Provider
-      value={imageGalleryContext as unknown as ImageGalleryContextValue}
+      value={
+        {
+          messages,
+          selectedMessage,
+          setMessages,
+          setSelectedMessage,
+        } as unknown as ImageGalleryContextValue
+      }
     >
       {children}
     </ImageGalleryContext.Provider>

package/src/contexts/themeContext/utils/theme.ts

@@ -267,6 +267,7 @@ export type Theme = {
     };
     imageUploadPreview: {
       dismiss: ViewStyle;
+      dismissIconColor: Color;
       flatList: ViewStyle;
       itemContainer: ViewStyle;
       upload: ImageStyle;
@@ -766,6 +767,7 @@ export const defaultTheme: Theme = {
     },
     imageUploadPreview: {
       dismiss: {},
+      dismissIconColor: '',
       flatList: {},
       itemContainer: {},
       upload: {},

package/src/index.ts

@@ -22,3 +22,6 @@ export { default as heTranslations } from './i18n/he.json';
 
 export { QuickSqliteClient } from './store/QuickSqliteClient';
 export { version } from './version.json';
+
+import * as OfflineStoreApis from './store/apis';
+export { OfflineStoreApis };

package/src/mock-builders/DB/mock.ts

@@ -1,8 +1,8 @@
-import Database from 'better-sqlite3';
+import Sqlite3 from 'better-sqlite3';
 
 import type { PreparedQueries } from '../../store/types';
 
-export let db: Database;
+export let db: Sqlite3.Database;
 
 export const sqliteMock = {
   close: () => {
@@ -15,7 +15,7 @@ export const sqliteMock = {
   executeSql: (dbName: string, queryInput: string, params: unknown[]) => {
     const query = queryInput.trim().toLowerCase();
     const stmt = db.prepare(query);
-    let result = [];
+    let result: unknown[] = [];
 
     if (query.indexOf('select') === 0) {
       if (params) {
@@ -98,15 +98,10 @@ export const sqliteMock = {
     };
   },
   open: () => {
-    db = new Database('foobar.db');
+    db = new Sqlite3('foobar.db');
     return {
       message: '',
       status: 0,
     };
   },
 };
-
-export const initializeDBMocking = () => {
-  global.sqlite = sqliteMock;
-};
-export const resetDBMocking = () => (global.sqlite = undefined);

package/src/mock-builders/event/messageNew.js

@@ -1,6 +1,8 @@
 export default (client, newMessage, channel = {}) => {
   client.dispatchEvent({
     channel,
+    channel_id: channel.id,
+    channel_type: channel.type,
     cid: channel.cid,
     message: newMessage,
     type: 'message.new',

package/src/store/QuickSqliteClient.ts

@@ -1,11 +1,9 @@
 /* eslint-disable no-underscore-dangle */
-// Importing following package just to avoid errors using sqlite global.
-// @ts-ignore
-// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-import types from 'react-native-quick-sqlite';
+import type { QuickSQLite } from 'react-native-quick-sqlite';
+let sqlite: typeof QuickSQLite;
 
 try {
-  require('react-native-quick-sqlite');
+  sqlite = require('react-native-quick-sqlite')?.QuickSQLite;
 } catch (e) {
   // Failed for one of the reason
   // 1. Running on expo, where we don't support offline storage yet.
@@ -17,13 +15,18 @@ import { tables } from './schema';
 import { createCreateTableQuery } from './sqlite-utils/createCreateTableQuery';
 import type { PreparedQueries, Table } from './types';
 
+/**
+ * QuickSqliteClient takes care of any direct interaction with sqlite.
+ * This way usage react-native-quick-sqlite package is scoped to a single class/file.
+ */
 export class QuickSqliteClient {
-  static dbVersion = 0;
+  static dbVersion = 2;
 
   static dbName = DB_NAME;
   static dbLocation = DB_LOCATION;
 
   static getDbVersion = () => this.dbVersion;
+  // Force a specific db version. This is mainly useful for testsuit.
   static setDbVersion = (version: number) => (this.dbVersion = version);
 
   static openDB = () => {
@@ -89,13 +92,14 @@ export class QuickSqliteClient {
 
   static initializeDatabase = () => {
     // @ts-ignore
-    if (window.sqlite === undefined) {
+    if (sqlite === undefined) {
       throw new Error(
         'Please install "react-native-quick-sqlite" package to enable offline support',
       );
     }
 
     const version = this.getUserPragmaVersion();
+
     if (version !== this.dbVersion) {
       this.dropTables();
       this.updateUserPragmaVersion(this.dbVersion);

package/src/store/apis/index.ts

@@ -0,0 +1,20 @@
+export * from './deleteChannel';
+export * from './deleteMember';
+export * from './deleteMessagesForChannel';
+export * from './deleteReactions';
+export * from './getAllChannelIds';
+export * from './getChannelMessages';
+export * from './getChannels';
+export * from './getChannelsForFilterSort';
+export * from './getLastSyncedAt';
+export * from './getMembers';
+export * from './getReads';
+export * from './updateMessage';
+export * from './updateReaction';
+export * from './upsertChannelData';
+export * from './upsertChannels';
+export * from './upsertCidsForQuery';
+export * from './upsertLastSyncedAt';
+export * from './upsertMembers';
+export * from './upsertMessages';
+export * from './upsertReads';

package/src/{__tests__/utils → test-utils}/BetterSqlite.js

@@ -1,6 +1,6 @@
 import Database from 'better-sqlite3';
 
-import { tables } from '../../store/schema';
+import { tables } from '../store/schema';
 
 export class BetterSqlite {
   db = null;

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.0.0-offline-support.14"
+  "version": "5.1.0-beta.1"
 }