feat(lib): react to changes in users atom and expose loading flags (#132)

* feat(lib): react to changes in users atom and expose loading flags

---------

Co-authored-by: PubNub Release Bot <[email protected]>

Author: piotr-suwala

.pubnub.yml

@@ -1,12 +1,17 @@
 ---
 name: pubnub-react-chat-components
-version: v0.32.0
+version: v0.33.0
 scm: github.com/pubnub/react-chat-components
 schema: 1
 files:
   - lib/dist/index.js
   - lib/dist/index.es.js
 changelog:
+  - date: 2023-12-11
+    version: v0.33.0
+    changes:
+      - type: feature
+        text: "Expose "isLoading" flags to hooks."
   - date: 2023-10-05
     version: v0.32.0
     changes:

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/common-chat-components",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "main": "src/index.ts",
   "license": "MIT",
   "scripts": {

packages/common/src/hooks/use-channel-members.ts

@@ -4,7 +4,7 @@ import { usePubNub } from "pubnub-react";
 import { merge, cloneDeep } from "lodash";
 import { UserEntityWithMembership } from "../types";
 
-type HookReturnValue = [UserEntityWithMembership[], () => void, () => void, number, Error];
+type HookReturnValue = [UserEntityWithMembership[], () => void, () => void, number, Error, boolean];
 
 export const useChannelMembers = (options: GetChannelMembersParameters): HookReturnValue => {
   const jsonOptions = JSON.stringify(options);
@@ -110,5 +110,5 @@ export const useChannelMembers = (options: GetChannelMembersParameters): HookRet
     };
   }, [pubnub, paginatedOptions.channel]);
 
-  return [members, fetchMoreMembers, resetHook, totalCount, error];
+  return [members, fetchMoreMembers, resetHook, totalCount, error, doFetch];
 };

packages/common/src/hooks/use-channels.ts

@@ -4,7 +4,7 @@ import { usePubNub } from "pubnub-react";
 import { merge, cloneDeep } from "lodash";
 import { ChannelEntity } from "../types";
 
-type HookReturnValue = [ChannelEntity[], () => void, number, Error];
+type HookReturnValue = [ChannelEntity[], () => void, number, Error, boolean];
 
 export const useChannels = (options: GetAllMetadataParameters = {}): HookReturnValue => {
   const pubnub = usePubNub();
@@ -79,5 +79,5 @@ export const useChannels = (options: GetAllMetadataParameters = {}): HookReturnV
     };
   }, [pubnub]);
 
-  return [channels, fetchMoreChannels, totalCount, error];
+  return [channels, fetchMoreChannels, totalCount, error, doFetch];
 };

packages/common/src/hooks/use-presence.ts

@@ -4,7 +4,7 @@ import { usePubNub } from "pubnub-react";
 import { cloneDeep } from "lodash";
 
 type ChannelsOccupancy = HereNowResponse["channels"];
-type HookReturnValue = [ChannelsOccupancy, () => void, number, Error];
+type HookReturnValue = [ChannelsOccupancy, () => void, number, Error, boolean];
 
 export const usePresence = (options: HereNowParameters = {}): HookReturnValue => {
   const jsonOptions = JSON.stringify(options);
@@ -97,5 +97,5 @@ export const usePresence = (options: HereNowParameters = {}): HookReturnValue =>
     };
   }, [pubnub, options.includeUUIDs]);
 
-  return [presence, resetHook, total, error];
+  return [presence, resetHook, total, error, doFetch];
 };

packages/common/src/hooks/use-user-memberships.ts

@@ -4,7 +4,14 @@ import { usePubNub } from "pubnub-react";
 import { merge, cloneDeep } from "lodash";
 import { ChannelEntityWithMembership } from "../types";
 
-type HookReturnValue = [ChannelEntityWithMembership[], () => void, () => void, number, Error];
+type HookReturnValue = [
+  ChannelEntityWithMembership[],
+  () => void,
+  () => void,
+  number,
+  Error,
+  boolean
+];
 
 export const useUserMemberships = (options: GetMembershipsParametersv2 = {}): HookReturnValue => {
   const jsonOptions = JSON.stringify(options);
@@ -111,5 +118,5 @@ export const useUserMemberships = (options: GetMembershipsParametersv2 = {}): Ho
     };
   }, [pubnub, paginatedOptions.uuid]);
 
-  return [channels, fetchMoreMemberships, resetHook, totalCount, error];
+  return [channels, fetchMoreMemberships, resetHook, totalCount, error, doFetch];
 };

packages/common/src/hooks/use-user.ts

@@ -4,7 +4,7 @@ import { usePubNub } from "pubnub-react";
 import { cloneDeep } from "lodash";
 import { UserEntity } from "../types";
 
-export const useUser = (options: GetUUIDMetadataParameters = {}): [UserEntity, Error] => {
+export const useUser = (options: GetUUIDMetadataParameters = {}): [UserEntity, Error, boolean] => {
   const jsonOptions = JSON.stringify(options);
 
   const pubnub = usePubNub();
@@ -68,5 +68,5 @@ export const useUser = (options: GetUUIDMetadataParameters = {}): [UserEntity, E
     };
   }, [pubnub]);
 
-  return [user, error];
+  return [user, error, doFetch];
 };

packages/common/src/hooks/use-users.ts

@@ -4,7 +4,7 @@ import { usePubNub } from "pubnub-react";
 import { merge, cloneDeep } from "lodash";
 import { UserEntity } from "../types";
 
-type HookReturnValue = [UserEntity[], () => void, number, Error];
+type HookReturnValue = [UserEntity[], () => void, number, Error, boolean];
 
 export const useUsers = (options: GetAllMetadataParameters = {}): HookReturnValue => {
   const pubnub = usePubNub();
@@ -79,5 +79,5 @@ export const useUsers = (options: GetAllMetadataParameters = {}): HookReturnValu
     };
   }, [pubnub]);
 
-  return [users, fetchMoreUsers, totalCount, error];
+  return [users, fetchMoreUsers, totalCount, error, doFetch];
 };

packages/common/test/use-channel-members.test.tsx

@@ -14,14 +14,16 @@ describe("useChannelMembers", () => {
     const { result } = renderHook(() => useChannelMembers({ channel: "test-channel" }), {
       wrapper,
     });
+    expect(result.current[5]).toBe(true);
 
     await waitFor(() => {
-      const [receivedMembers, fetchMore, resetHook, total, error] = result.current;
+      const [receivedMembers, fetchMore, resetHook, total, error, loading] = result.current;
       expect(receivedMembers).toHaveLength(users.length);
       expect(typeof fetchMore).toEqual("function");
       expect(typeof resetHook).toEqual("function");
       expect(total).toEqual(users.length);
       expect(error).toEqual(undefined);
+      expect(loading).toBe(false);
     });
   });
 

packages/common/test/use-channels.test.tsx

@@ -12,13 +12,15 @@ const wrapper = ({ children }) => <PubNubProvider client={pubnub}>{children}</Pu
 describe("useChannels", () => {
   test("fetches and returns the full list of channels", async () => {
     const { result } = renderHook(() => useChannels(), { wrapper });
+    expect(result.current[4]).toBe(true);
 
     await waitFor(() => {
-      const [receivedChannels, fetchMore, total, error] = result.current;
+      const [receivedChannels, fetchMore, total, error, loading] = result.current;
       expect(receivedChannels).toHaveLength(channels.length);
       expect(typeof fetchMore).toEqual("function");
       expect(total).toEqual(channels.length);
       expect(error).toEqual(undefined);
+      expect(loading).toEqual(false);
     });
   });
 
@@ -27,9 +29,10 @@ describe("useChannels", () => {
     const { result } = renderHook(() => useChannels({ limit }), { wrapper });
 
     await waitFor(() => {
-      const [receivedChannels, fetchMore, total] = result.current;
+      const [receivedChannels, fetchMore, total, , loading] = result.current;
       expect(receivedChannels).toHaveLength(limit);
       expect(total).toEqual(channels.length);
+      expect(loading).toEqual(false);
       fetchMore();
     });
 

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/react-native-chat-components",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "PubNub Chat Components is a development kit of React Native components that aims to help you to easily build Chat applications using PubNub infrastructure. It removes the complexicity of picking an adequate Chat engine, learning its APIs and dealing with its low-level internals. As the same time it allows you to create apps of various use cases, with different functionalities and customizable looks.",
   "author": "PubNub <[email protected]>",
   "main": "dist/commonjs/index",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/react-chat-components",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "PubNub Chat Components is a development kit of React components that aims to help you to easily build Chat applications using PubNub infrastructure. It removes the complexicity of picking an adequate Chat engine, learning its APIs and dealing with its low-level internals. As the same time it allows you to create apps of various use cases, with different functionalities and customizable looks.",
   "author": "PubNub <[email protected]>",
   "main": "dist/index.js",

packages/react/src/message-list/message-item.tsx

@@ -43,6 +43,7 @@ export type ItemProps = Pick<
 export const MessageListItem = React.memo(Item, (prev, next) => {
   if (prev.envelope.timetoken !== next.envelope.timetoken) return false;
   if (!isEqual(prev.envelope.actions, next.envelope.actions)) return false;
+  if (!isEqual(prev.users, next.users)) return false;
   return true;
 });