Draft: Zustand global state instead of React Context

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.27.0
+
+### xxx
+
+- xxx
+
 ## 0.26.2
 
 ### Misc

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@connectycube/use-chat",
   "description": "A React hook for state management in ConnectyCube-powered chat solutions",
-  "version": "0.26.2",
+  "version": "0.27.0",
   "homepage": "https://github.com/ConnectyCube/use-chat",
   "keywords": [
     "react",
@@ -40,7 +40,8 @@
   },
   "dependencies": {
     "date-fns": "^4.1.0",
-    "react-usestateref": "^1.0.9"
+    "react-usestateref": "^1.0.9",
+    "zustand": "^5.0.6"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.6",

src/ChatContext.tsx

@@ -1,13 +1,85 @@
-import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { createContext, ReactNode, useContext, useEffect, useRef, useState } from "react";
 import useStateRef from "react-usestateref";
 import ConnectyCube from "connectycube";
 import { Chat, ChatEvent, ChatType, Dialogs, DialogType, Messages } from "connectycube/types";
 import { formatDistanceToNow } from "date-fns";
-import { ChatContextType, ChatProviderType, ChatStatus, DialogEventSignal, MessageStatus } from "./types";
-import { useBlockList, useNetworkStatus, useUsers } from "./hooks";
+import { useBlockList, useChatStore, useNetworkStatus, useUsers } from "./hooks";
 import { getDialogTimestamp, parseDate } from "./helpers";
+import { BlockListHook } from "./hooks/useBlockList";
+import { UsersHookExports } from "./hooks/useUsers";
+
+export enum DialogEventSignal {
+  ADDED_TO_DIALOG = "dialog/ADDED_TO_DIALOG",
+  REMOVED_FROM_DIALOG = "dialog/REMOVED_FROM_DIALOG",
+  ADD_PARTICIPANTS = "dialog/ADD_PARTICIPANTS",
+  REMOVE_PARTICIPANTS = "dialog/REMOVE_PARTICIPANTS",
+  NEW_DIALOG = "dialog/NEW_DIALOG",
+}
+
+export enum MessageStatus {
+  WAIT = "wait",
+  LOST = "lost",
+  SENT = "sent",
+  READ = "read",
+}
+
+export enum ChatStatus {
+  DISCONNECTED = "disconnected",
+  CONNECTING = "connecting",
+  CONNECTED = "connected",
+  NOT_AUTHORIZED = "not-authorized",
+  ERROR = "error",
+}
+export interface ChatProviderType {
+  children?: ReactNode;
+}
+export interface ChatContextType extends BlockListHook, UsersHookExports {
+  isOnline: boolean;
+  isConnected: boolean;
+  chatStatus: ChatStatus;
+  connect: (credentials: Chat.ConnectionParams) => Promise<boolean>;
+  disconnect: () => Promise<boolean>;
+  terminate: () => void;
+  currentUserId?: number;
+  createChat: (userId: number, extensions?: { [key: string]: any }) => Promise<Dialogs.Dialog>;
+  createGroupChat: (
+    usersIds: number[],
+    name: string,
+    photo?: string,
+    extensions?: { [key: string]: any },
+  ) => Promise<Dialogs.Dialog>;
+  getDialogs: (filters?: Dialogs.ListParams) => Promise<Dialogs.Dialog[]>;
+  getNextDialogs: () => Promise<Dialogs.Dialog[]>;
+  totalDialogReached: boolean;
+  dialogs: Dialogs.Dialog[];
+  selectedDialog?: Dialogs.Dialog;
+  selectDialog: (dialog?: Dialogs.Dialog) => Promise<void>;
+  getDialogOpponentId: (dialog?: Dialogs.Dialog) => number | undefined;
+  unreadMessagesCount: { total: number; [dialogId: string]: number };
+  getMessages: (dialogId: string) => Promise<Messages.Message[]>;
+  getNextMessages: (dialogId: string) => Promise<Messages.Message[]>;
+  totalMessagesReached: { [dialogId: string]: boolean };
+  messages: { [key: string]: Messages.Message[] };
+  markDialogAsRead: (dialog: Dialogs.Dialog) => Promise<void>;
+  addUsersToGroupChat: (usersIds: number[]) => Promise<void>;
+  removeUsersFromGroupChat: (usersIds: number[]) => Promise<void>;
+  leaveGroupChat: () => Promise<void>;
+  sendSignal: (userIdOrIds: number | number[], signal: string, params?: any) => void;
+  sendMessage: (body: string, dialog?: Dialogs.Dialog) => void;
+  sendMessageWithAttachment: (files: File[], dialog?: Dialogs.Dialog) => Promise<void>;
+  readMessage: (messageId: string, userId: number, dialogId: string) => void;
+  sendTypingStatus: (dialog?: Dialogs.Dialog, isTyping?: boolean) => void;
+  typingStatus: { [dialogId: string]: number[] };
+  lastMessageSentTimeString: (dialog: Dialogs.Dialog) => string;
+  messageSentTimeString: (message: Messages.Message) => string;
+  processOnSignal: (fn: Chat.OnMessageSystemListener | null) => void;
+  processOnMessage: (fn: Chat.OnMessageListener | null) => void;
+  processOnMessageError: (fn: Chat.OnMessageErrorListener | null) => void;
+  processOnMessageSent: (fn: Chat.OnMessageSentListener | null) => void;
+}
 
 const ChatContext = createContext<ChatContextType | undefined>(undefined);
+
 ChatContext.displayName = "ChatContext";
 
 export const useChat = (): ChatContextType => {
@@ -44,8 +116,10 @@ export const ChatProvider = ({ children }: ChatProviderType): React.ReactElement
   // internal hooks
   const chatBlockList = useBlockList(isConnected);
   const chatUsers = useUsers(currentUserId);
-  const { isOnline } = useNetworkStatus(isConnected);
+  const isOnline = useNetworkStatus(isConnected);
   const { _retrieveAndStoreUsers } = chatUsers;
+  // global state
+  // const isOnline = useChatStore((state) => state.isOnline);
 
   const connect = async (credentials: Chat.ConnectionParams): Promise<boolean> => {
     setChatStatus(ChatStatus.CONNECTING);

src/hooks/index.ts

@@ -1,3 +1,6 @@
 export { default as useBlockList } from "./useBlockList";
 export { default as useNetworkStatus } from "./useNetworkStatus";
 export { default as useUsers } from "./useUsers";
+export { useChat as useChat } from "./useChat";
+export { default as useChatStore } from "./useChatStore";
+export { default as useChatStoreRef } from "./useChatStoreRef";

src/hooks/useBlockList.ts

@@ -1,6 +1,8 @@
 import ConnectyCube from "connectycube";
 import { PrivacyListAction } from "connectycube/types";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useRef } from "react";
+import useChatStore from "./useChatStore";
+import { useShallow } from "zustand/shallow";
 
 export const BLOCK_LIST_LOG_TAG = "[useChat][useBlockList]";
 export const BLOCK_LIST_NAME = "ConnectyCubeBlockList";
@@ -13,10 +15,12 @@ export type BlockListHook = {
 };
 
 function useBlockList(isConnected: boolean): BlockListHook {
-  const [state, setState] = useState<Set<number>>(new Set<number>());
   const isApplied = useRef<boolean>(false);
+  const [blockedUsers, setBlockedUsers] = useChatStore(
+    useShallow((state) => [state.blockedUsers, state.setBlockedUsers]),
+  );
 
-  const isBlocked = (userId: number): boolean => state.has(userId);
+  const isBlocked = (userId: number): boolean => blockedUsers.has(userId);
 
   const fetch = async (): Promise<void> => {
     if (!isConnected) {
@@ -37,7 +41,7 @@ function useBlockList(isConnected: boolean): BlockListHook {
 
       isApplied.current = true;
 
-      setState(newState);
+      setBlockedUsers(newState);
     }
   };
 
@@ -47,7 +51,7 @@ function useBlockList(isConnected: boolean): BlockListHook {
       return;
     }
 
-    const newState = new Set(state);
+    const newBlockedUsers = new Set(blockedUsers);
 
     const blockList = {
       name: BLOCK_LIST_NAME,
@@ -56,15 +60,15 @@ function useBlockList(isConnected: boolean): BlockListHook {
 
     try {
       if (action === PrivacyListAction.DENY) {
-        newState.add(user_id);
+        newBlockedUsers.add(user_id);
       } else if (action === PrivacyListAction.ALLOW) {
-        newState.delete(user_id);
+        newBlockedUsers.delete(user_id);
       }
 
       if (isApplied.current) {
         await ConnectyCube.chat.privacylist.setAsDefault(null);
         await ConnectyCube.chat.privacylist.update(blockList);
-        if (newState.size > 0) {
+        if (newBlockedUsers.size > 0) {
           await ConnectyCube.chat.privacylist.setAsDefault(BLOCK_LIST_NAME);
         }
       } else {
@@ -74,7 +78,7 @@ function useBlockList(isConnected: boolean): BlockListHook {
     } catch (error) {
       return;
     } finally {
-      setState(newState);
+      setBlockedUsers(blockedUsers);
     }
   };
 
@@ -103,7 +107,7 @@ function useBlockList(isConnected: boolean): BlockListHook {
   }, [isConnected]);
 
   return {
-    blockedUsers: Array.from(state),
+    blockedUsers: Array.from(blockedUsers),
     isBlockedUser: isBlocked,
     unblockUser: unblock,
     blockUser: block,