@planningcenter/chat-react-native 3.4.1 → 3.5.0-rc.1

package/build/hooks/use_app_state.d.ts

@@ -0,0 +1,2 @@
+export declare const useAppState: () => string;
+//# sourceMappingURL=use_app_state.d.ts.map

package/build/hooks/use_app_state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_app_state.d.ts","sourceRoot":"","sources":["../../src/hooks/use_app_state.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,cAgBvB,CAAA"}

package/build/hooks/use_app_state.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+import { AppState } from 'react-native';
+export const useAppState = () => {
+    const [appState, setAppState] = useState('active');
+    useEffect(() => {
+        const handleAppStateChange = (nextAppState) => {
+            setAppState(nextAppState);
+        };
+        const subscription = AppState.addEventListener('change', handleAppStateChange);
+        return () => {
+            subscription.remove();
+        };
+    }, []);
+    return appState;
+};
+//# sourceMappingURL=use_app_state.js.map

package/build/hooks/use_app_state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_app_state.js","sourceRoot":"","sources":["../../src/hooks/use_app_state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAA;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,oBAAoB,GAAG,CAAC,YAAoB,EAAE,EAAE;YACpD,WAAW,CAAC,YAAY,CAAC,CAAA;QAC3B,CAAC,CAAA;QAED,MAAM,YAAY,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAA;QAE9E,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,MAAM,EAAE,CAAA;QACvB,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA","sourcesContent":["import { useEffect, useState } from 'react'\nimport { AppState } from 'react-native'\n\nexport const useAppState = () => {\n  const [appState, setAppState] = useState('active')\n\n  useEffect(() => {\n    const handleAppStateChange = (nextAppState: string) => {\n      setAppState(nextAppState)\n    }\n\n    const subscription = AppState.addEventListener('change', handleAppStateChange)\n\n    return () => {\n      subscription.remove()\n    }\n  }, [])\n\n  return appState\n}\n"]}

package/build/hooks/use_conversations_actions.d.ts

@@ -16,9 +16,9 @@ export declare const useConversationsMarkRead: ({ conversation, }: {
     failureReason: Error | null;
     isPaused: boolean;
     submittedAt: number;
-    mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<ApiResource<ConversationResource>, Error, boolean, void>;
+    mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<import("../types").ApiCollection | ApiResource, Error, boolean, void>;
     read: boolean;
-    markRead: import("@tanstack/react-query").UseMutateFunction<ApiResource<ConversationResource>, Error, boolean, void>;
+    markRead: import("@tanstack/react-query").UseMutateFunction<import("../types").ApiCollection | ApiResource, Error, boolean, void>;
 } | {
     data: undefined;
     variables: boolean;
@@ -34,9 +34,9 @@ export declare const useConversationsMarkRead: ({ conversation, }: {
     failureReason: Error | null;
     isPaused: boolean;
     submittedAt: number;
-    mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<ApiResource<ConversationResource>, Error, boolean, void>;
+    mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<import("../types").ApiCollection | ApiResource, Error, boolean, void>;
     read: boolean;
-    markRead: import("@tanstack/react-query").UseMutateFunction<ApiResource<ConversationResource>, Error, boolean, void>;
+    markRead: import("@tanstack/react-query").UseMutateFunction<import("../types").ApiCollection | ApiResource, Error, boolean, void>;
 } | {
     data: undefined;
     error: Error;
@@ -52,11 +52,11 @@ export declare const useConversationsMarkRead: ({ conversation, }: {
     failureReason: Error | null;
     isPaused: boolean;
     submittedAt: number;
-    mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<ApiResource<ConversationResource>, Error, boolean, void>;
+    mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<import("../types").ApiCollection | ApiResource, Error, boolean, void>;
     read: boolean;
-    markRead: import("@tanstack/react-query").UseMutateFunction<ApiResource<ConversationResource>, Error, boolean, void>;
+    markRead: import("@tanstack/react-query").UseMutateFunction<import("../types").ApiCollection | ApiResource, Error, boolean, void>;
 } | {
-    data: ApiResource<ConversationResource>;
+    data: import("../types").ApiCollection | ApiResource;
     error: null;
     variables: boolean;
     isError: false;
@@ -70,9 +70,9 @@ export declare const useConversationsMarkRead: ({ conversation, }: {
     failureReason: Error | null;
     isPaused: boolean;
     submittedAt: number;
-    mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<ApiResource<ConversationResource>, Error, boolean, void>;
+    mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<import("../types").ApiCollection | ApiResource, Error, boolean, void>;
     read: boolean;
-    markRead: import("@tanstack/react-query").UseMutateFunction<ApiResource<ConversationResource>, Error, boolean, void>;
+    markRead: import("@tanstack/react-query").UseMutateFunction<import("../types").ApiCollection | ApiResource, Error, boolean, void>;
 };
 export declare const useConversationsMute: ({ conversation }: {
     conversation: ConversationResource;

package/build/hooks/use_conversations_actions.js

@@ -8,7 +8,7 @@ export const useConversationsMarkRead = ({ conversation, }) => {
     const apiClient = useApiClient();
     const { args } = useConversationsContext();
     const currentPersonCache = useCurrentPersonCache();
-    const { update, invalidate } = useConversationsCache(args);
+    const { update, invalidate, fetchUpdate } = useConversationsCache(args);
     function handlePersonUnreadCount(read) {
         currentPersonCache.update({}, person => {
             const currentUnread = person.unreadCount;
@@ -29,11 +29,11 @@ export const useConversationsMarkRead = ({ conversation, }) => {
             const action = read ? 'mark_read' : 'mark_unread';
             return apiClient.chat.post({
                 url: `/me/conversations/${conversation.id}/${action}`,
-                data: { data: { type: '', attributes: {} }, fields: { Conversation: 'unread_count' } },
+                data: { data: { type: '', attributes: {} }, fields: { Conversation: 'unread_count,id' } },
             });
         },
-        onSuccess: (response) => {
-            update(response.data);
+        onSuccess: () => {
+            fetchUpdate(conversation);
         },
         onError: () => {
             Alert.alert('Oops', 'Something went wrong updating this conversation, please try again');

package/build/hooks/use_conversations_actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_conversations_actions.js","sourceRoot":"","sources":["../../src/hooks/use_conversations_actions.ts"],"names":[],"mappings":"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","sourcesContent":["import { useMutation } from '@tanstack/react-query'\nimport { Alert } from 'react-native'\nimport { useConversationsContext } from '../contexts/conversations_context'\nimport { ApiResource, ConversationResource } from '../types'\nimport { useApiClient } from './use_api_client'\nimport { useConversationsCache } from './use_conversations_cache'\nimport { useCurrentPersonCache } from './use_current_person'\n\nexport const useConversationsMarkRead = ({\n  conversation,\n}: {\n  conversation: ConversationResource\n}) => {\n  const apiClient = useApiClient()\n  const { args } = useConversationsContext()\n  const currentPersonCache = useCurrentPersonCache()\n  const { update, invalidate } = useConversationsCache(args)\n\n  function handlePersonUnreadCount(read: boolean) {\n    currentPersonCache.update({}, person => {\n      const currentUnread = person.unreadCount\n      const updatedUnread = read ? Math.max(currentUnread - 1, 0) : currentUnread + 1\n      return { ...person, unreadCount: updatedUnread }\n    })\n  }\n\n  const { mutate: handleMarkRead, ...mutation } = useMutation({\n    onMutate: async (read: boolean) => {\n      update({\n        ...conversation,\n        unreadCount: read ? 0 : 1,\n      })\n      handlePersonUnreadCount(read)\n    },\n    mutationKey: ['markRead', conversation.id],\n    mutationFn: async (read: boolean) => {\n      const action = read ? 'mark_read' : 'mark_unread'\n\n      return apiClient.chat.post<ApiResource<ConversationResource>>({\n        url: `/me/conversations/${conversation.id}/${action}`,\n        data: { data: { type: '', attributes: {} }, fields: { Conversation: 'unread_count' } },\n      })\n    },\n    onSuccess: (response: ApiResource<ConversationResource>) => {\n      update(response.data)\n    },\n    onError: () => {\n      Alert.alert('Oops', 'Something went wrong updating this conversation, please try again')\n      invalidate()\n    },\n  })\n\n  return {\n    read: conversation.unreadCount < 1, // prefer cache\n    markRead: handleMarkRead,\n    ...mutation,\n  }\n}\n\nexport const useConversationsMute = ({ conversation }: { conversation: ConversationResource }) => {\n  const apiClient = useApiClient()\n  const { args } = useConversationsContext()\n  const { update, invalidate } = useConversationsCache(args)\n\n  const { mutate: setMuted, ...mutation } = useMutation({\n    onMutate: async (muted: boolean) => {\n      update({\n        ...conversation,\n        muted,\n      })\n    },\n    mutationKey: ['muteConversation'],\n    mutationFn: async (muted: boolean) => {\n      const action = muted ? 'mute' : 'unmute'\n\n      return apiClient.chat.post<ApiResource<ConversationResource>>({\n        url: `/me/conversations/${conversation.id}/${action}`,\n        data: { data: { type: '', attributes: {} }, fields: { Conversation: 'muted' } },\n      })\n    },\n    onSuccess: (response: ApiResource<ConversationResource>) => {\n      update(response.data)\n    },\n    onError: () => {\n      Alert.alert('Oops', 'Something went wrong muting this conversation, please try again')\n      invalidate()\n    },\n  })\n\n  return {\n    muted: conversation.muted, // prefer cache\n    setMuted,\n    ...mutation,\n  }\n}\n\nexport const useMarkAllRead = () => {\n  const apiClient = useApiClient()\n  const { args } = useConversationsContext()\n  const { invalidate, updateAll } = useConversationsCache(args)\n  const { mutate: markAllRead, ...query } = useMutation({\n    onMutate: () => {\n      updateAll({\n        unreadCount: 0,\n      })\n    },\n    mutationKey: ['markAllRead', args],\n    mutationFn: () =>\n      apiClient.chat.post({\n        url: '/me/mark_all_read',\n      }),\n    onSettled: invalidate,\n  })\n\n  return {\n    markAllRead,\n    ...query,\n  }\n}\n"]}
+{"version":3,"file":"use_conversations_actions.js","sourceRoot":"","sources":["../../src/hooks/use_conversations_actions.ts"],"names":[],"mappings":"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","sourcesContent":["import { useMutation } from '@tanstack/react-query'\nimport { Alert } from 'react-native'\nimport { useConversationsContext } from '../contexts/conversations_context'\nimport { ApiResource, ConversationResource } from '../types'\nimport { useApiClient } from './use_api_client'\nimport { useConversationsCache } from './use_conversations_cache'\nimport { useCurrentPersonCache } from './use_current_person'\n\nexport const useConversationsMarkRead = ({\n  conversation,\n}: {\n  conversation: ConversationResource\n}) => {\n  const apiClient = useApiClient()\n  const { args } = useConversationsContext()\n  const currentPersonCache = useCurrentPersonCache()\n  const { update, invalidate, fetchUpdate } = useConversationsCache(args)\n\n  function handlePersonUnreadCount(read: boolean) {\n    currentPersonCache.update({}, person => {\n      const currentUnread = person.unreadCount\n      const updatedUnread = read ? Math.max(currentUnread - 1, 0) : currentUnread + 1\n      return { ...person, unreadCount: updatedUnread }\n    })\n  }\n\n  const { mutate: handleMarkRead, ...mutation } = useMutation({\n    onMutate: async (read: boolean) => {\n      update({\n        ...conversation,\n        unreadCount: read ? 0 : 1,\n      })\n      handlePersonUnreadCount(read)\n    },\n    mutationKey: ['markRead', conversation.id],\n    mutationFn: async (read: boolean) => {\n      const action = read ? 'mark_read' : 'mark_unread'\n\n      return apiClient.chat.post({\n        url: `/me/conversations/${conversation.id}/${action}`,\n        data: { data: { type: '', attributes: {} }, fields: { Conversation: 'unread_count,id' } },\n      })\n    },\n    onSuccess: () => {\n      fetchUpdate(conversation)\n    },\n    onError: () => {\n      Alert.alert('Oops', 'Something went wrong updating this conversation, please try again')\n      invalidate()\n    },\n  })\n\n  return {\n    read: conversation.unreadCount < 1, // prefer cache\n    markRead: handleMarkRead,\n    ...mutation,\n  }\n}\n\nexport const useConversationsMute = ({ conversation }: { conversation: ConversationResource }) => {\n  const apiClient = useApiClient()\n  const { args } = useConversationsContext()\n  const { update, invalidate } = useConversationsCache(args)\n\n  const { mutate: setMuted, ...mutation } = useMutation({\n    onMutate: async (muted: boolean) => {\n      update({\n        ...conversation,\n        muted,\n      })\n    },\n    mutationKey: ['muteConversation'],\n    mutationFn: async (muted: boolean) => {\n      const action = muted ? 'mute' : 'unmute'\n\n      return apiClient.chat.post<ApiResource<ConversationResource>>({\n        url: `/me/conversations/${conversation.id}/${action}`,\n        data: { data: { type: '', attributes: {} }, fields: { Conversation: 'muted' } },\n      })\n    },\n    onSuccess: (response: ApiResource<ConversationResource>) => {\n      update(response.data)\n    },\n    onError: () => {\n      Alert.alert('Oops', 'Something went wrong muting this conversation, please try again')\n      invalidate()\n    },\n  })\n\n  return {\n    muted: conversation.muted, // prefer cache\n    setMuted,\n    ...mutation,\n  }\n}\n\nexport const useMarkAllRead = () => {\n  const apiClient = useApiClient()\n  const { args } = useConversationsContext()\n  const { invalidate, updateAll } = useConversationsCache(args)\n  const { mutate: markAllRead, ...query } = useMutation({\n    onMutate: () => {\n      updateAll({\n        unreadCount: 0,\n      })\n    },\n    mutationKey: ['markAllRead', args],\n    mutationFn: () =>\n      apiClient.chat.post({\n        url: '/me/mark_all_read',\n      }),\n    onSettled: invalidate,\n  })\n\n  return {\n    markAllRead,\n    ...query,\n  }\n}\n"]}

package/build/hooks/use_conversations_cache.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use_conversations_cache.d.ts","sourceRoot":"","sources":["../../src/hooks/use_conversations_cache.ts"],"names":[],"mappings":"AACA,OAAO,EAA8B,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAM3E,OAAO,EAAE,uBAAuB,EAA+B,MAAM,+BAA+B,CAAA;AAMpG,wBAAgB,qBAAqB,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC;2BAmB/B,oBAAoB;sBA2BrB;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE;0BANX;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE;0BAAd;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE;;2BArBhB,oBAAoB;wBAY/B,OAAO,CAAC,oBAAoB,CAAC;EAiC/D"}
+{"version":3,"file":"use_conversations_cache.d.ts","sourceRoot":"","sources":["../../src/hooks/use_conversations_cache.ts"],"names":[],"mappings":"AACA,OAAO,EAA8B,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAM3E,OAAO,EAAE,uBAAuB,EAA+B,MAAM,+BAA+B,CAAA;AAMpG,wBAAgB,qBAAqB,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC;2BAqB/B,oBAAoB;sBA8BrB;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE;0BAPX;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE;0BAAd;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE;;2BAvBhB,oBAAoB;wBAc/B,OAAO,CAAC,oBAAoB,CAAC;EAoC/D"}

package/build/hooks/use_conversations_cache.js

@@ -9,6 +9,8 @@ export function useConversationsCache(args) {
     const conversationsRequestArgs = getConversationsRequestArgs(args);
     const conversationQueryKey = getRequestQueryKey(conversationsRequestArgs);
     const fetchConversation = async (id) => {
+        if (!id)
+            return;
         const { data: argsData } = conversationsRequestArgs;
         const { data } = await apiClient.chat.get({
             url: `/me/conversations/${id}`,
@@ -20,6 +22,8 @@ export function useConversationsCache(args) {
         return data;
     };
     const updateOrCreate = async (conversation) => {
+        if (!conversation.id)
+            return;
         queryClient.setQueryData(conversationQueryKey, prev => updateOrCreateRecordInPagesData({
             data: prev,
             record: conversation,
@@ -36,9 +40,13 @@ export function useConversationsCache(args) {
     };
     const fetchAndUpdateOrCreate = async ({ id }) => {
         const conversation = await fetchConversation(id).catch(c => c);
+        if (!conversation.id)
+            return;
         updateOrCreate(conversation);
     };
     const handleConversationDestroy = ({ id }) => {
+        if (!id)
+            return;
         queryClient.setQueryData(conversationQueryKey, prev => deleteRecordInPagesData({
             data: prev,
             record: { id },

package/build/hooks/use_conversations_cache.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_conversations_cache.js","sourceRoot":"","sources":["../../src/hooks/use_conversations_cache.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEpE,OAAO,EACL,uBAAuB,EACvB,2BAA2B,EAC3B,+BAA+B,GAChC,MAAM,UAAU,CAAA;AACjB,OAAO,EAA2B,2BAA2B,EAAE,MAAM,+BAA+B,CAAA;AACpG,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAIvD,MAAM,UAAU,qBAAqB,CAAC,IAAuC;IAC3E,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IACpC,MAAM,wBAAwB,GAAG,2BAA2B,CAAC,IAAI,CAAC,CAAA;IAClE,MAAM,oBAAoB,GAAG,kBAAkB,CAAC,wBAAwB,CAAC,CAAA;IAEzE,MAAM,iBAAiB,GAAG,KAAK,EAAE,EAAU,EAAE,EAAE;QAC7C,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,wBAAwB,CAAA;QACnD,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,SAAS,CAAC,IAAI,CAAC,GAAG,CAAoC;YAC3E,GAAG,EAAE,qBAAqB,EAAE,EAAE;YAC9B,IAAI,EAAE;gBACJ,MAAM,EAAE,QAAQ,CAAC,MAAM;gBACvB,OAAO,EAAE,QAAQ,CAAC,OAAO;aAC1B;SACF,CAAC,CAAA;QAEF,OAAO,IAAI,CAAA;IACb,CAAC,CAAA;IAED,MAAM,cAAc,GAAG,KAAK,EAAE,YAAkC,EAAE,EAAE;QAClE,WAAW,CAAC,YAAY,CAAY,oBAAoB,EAAE,IAAI,CAAC,EAAE,CAC/D,+BAA+B,CAAC;YAC9B,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,YAAY;YACpB,aAAa,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE;gBACjC,OAAO,EAAE,GAAG,OAAO,EAAE,GAAG,MAAM,EAAE,CAAA;YAClC,CAAC;SACF,CAAC,CACH,CAAA;IACH,CAAC,CAAA;IAED,MAAM,SAAS,GAAG,KAAK,EAAE,MAAqC,EAAE,EAAE;QAChE,WAAW,CAAC,YAAY,CAAY,oBAAoB,EAAE,IAAI,CAAC,EAAE,CAC/D,2BAA2B,CAAC;YAC1B,IAAI,EAAE,IAAI;YACV,aAAa,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;SACpD,CAAC,CACH,CAAA;IACH,CAAC,CAAA;IAED,MAAM,sBAAsB,GAAG,KAAK,EAAE,EAAE,EAAE,EAAkB,EAAE,EAAE;QAC9D,MAAM,YAAY,GAAyB,MAAM,iBAAiB,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;QAEpF,cAAc,CAAC,YAAY,CAAC,CAAA;IAC9B,CAAC,CAAA;IAED,MAAM,yBAAyB,GAAG,CAAC,EAAE,EAAE,EAAkB,EAAE,EAAE;QAC3D,WAAW,CAAC,YAAY,CAAY,oBAAoB,EAAE,IAAI,CAAC,EAAE,CAC/D,uBAAuB,CAAC;YACtB,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,EAAE,EAAE,EAAE;SACf,CAAC,CACH,CAAA;IACH,CAAC,CAAA;IAED,OAAO;QACL,MAAM,EAAE,cAAc;QACtB,OAAO,EAAE,yBAAyB;QAClC,WAAW,EAAE,sBAAsB;QACnC,WAAW,EAAE,sBAAsB;QACnC,UAAU,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CAAC;QACnF,MAAM,EAAE,cAAc;QACtB,SAAS;KACV,CAAA;AACH,CAAC","sourcesContent":["import { InfiniteData, useQueryClient } from '@tanstack/react-query'\nimport { ApiCollection, ApiResource, ConversationResource } from '../types'\nimport {\n  deleteRecordInPagesData,\n  updateAllRecordsInPagesData,\n  updateOrCreateRecordInPagesData,\n} from '../utils'\nimport { ConversationRequestArgs, getConversationsRequestArgs } from '../utils/request/conversation'\nimport { useApiClient } from './use_api_client'\nimport { getRequestQueryKey } from './use_suspense_api'\n\ntype QueryData = InfiniteData<ApiCollection<ConversationResource>>\n\nexport function useConversationsCache(args?: Partial<ConversationRequestArgs>) {\n  const apiClient = useApiClient()\n  const queryClient = useQueryClient()\n  const conversationsRequestArgs = getConversationsRequestArgs(args)\n  const conversationQueryKey = getRequestQueryKey(conversationsRequestArgs)\n\n  const fetchConversation = async (id: number) => {\n    const { data: argsData } = conversationsRequestArgs\n    const { data } = await apiClient.chat.get<ApiResource<ConversationResource>>({\n      url: `/me/conversations/${id}`,\n      data: {\n        fields: argsData.fields,\n        include: argsData.include,\n      },\n    })\n\n    return data\n  }\n\n  const updateOrCreate = async (conversation: ConversationResource) => {\n    queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>\n      updateOrCreateRecordInPagesData({\n        data: prev,\n        record: conversation,\n        processRecord: (record, current) => {\n          return { ...current, ...record }\n        },\n      })\n    )\n  }\n\n  const updateAll = async (update: Partial<ConversationResource>) => {\n    queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>\n      updateAllRecordsInPagesData({\n        data: prev,\n        processRecord: record => ({ ...record, ...update }),\n      })\n    )\n  }\n\n  const fetchAndUpdateOrCreate = async ({ id }: { id: number }) => {\n    const conversation: ConversationResource = await fetchConversation(id).catch(c => c)\n\n    updateOrCreate(conversation)\n  }\n\n  const handleConversationDestroy = ({ id }: { id: number }) => {\n    queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>\n      deleteRecordInPagesData({\n        data: prev,\n        record: { id },\n      })\n    )\n  }\n\n  return {\n    create: updateOrCreate,\n    destroy: handleConversationDestroy,\n    fetchCreate: fetchAndUpdateOrCreate,\n    fetchUpdate: fetchAndUpdateOrCreate,\n    invalidate: () => queryClient.invalidateQueries({ queryKey: conversationQueryKey }),\n    update: updateOrCreate,\n    updateAll,\n  }\n}\n"]}
+{"version":3,"file":"use_conversations_cache.js","sourceRoot":"","sources":["../../src/hooks/use_conversations_cache.ts"],"names":[],"mappings":"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","sourcesContent":["import { InfiniteData, useQueryClient } from '@tanstack/react-query'\nimport { ApiCollection, ApiResource, ConversationResource } from '../types'\nimport {\n  deleteRecordInPagesData,\n  updateAllRecordsInPagesData,\n  updateOrCreateRecordInPagesData,\n} from '../utils'\nimport { ConversationRequestArgs, getConversationsRequestArgs } from '../utils/request/conversation'\nimport { useApiClient } from './use_api_client'\nimport { getRequestQueryKey } from './use_suspense_api'\n\ntype QueryData = InfiniteData<ApiCollection<ConversationResource>>\n\nexport function useConversationsCache(args?: Partial<ConversationRequestArgs>) {\n  const apiClient = useApiClient()\n  const queryClient = useQueryClient()\n  const conversationsRequestArgs = getConversationsRequestArgs(args)\n  const conversationQueryKey = getRequestQueryKey(conversationsRequestArgs)\n\n  const fetchConversation = async (id: number) => {\n    if (!id) return\n\n    const { data: argsData } = conversationsRequestArgs\n    const { data } = await apiClient.chat.get<ApiResource<ConversationResource>>({\n      url: `/me/conversations/${id}`,\n      data: {\n        fields: argsData.fields,\n        include: argsData.include,\n      },\n    })\n\n    return data\n  }\n\n  const updateOrCreate = async (conversation: ConversationResource) => {\n    if (!conversation.id) return\n\n    queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>\n      updateOrCreateRecordInPagesData({\n        data: prev,\n        record: conversation,\n        processRecord: (record, current) => {\n          return { ...current, ...record }\n        },\n      })\n    )\n  }\n\n  const updateAll = async (update: Partial<ConversationResource>) => {\n    queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>\n      updateAllRecordsInPagesData({\n        data: prev,\n        processRecord: record => ({ ...record, ...update }),\n      })\n    )\n  }\n\n  const fetchAndUpdateOrCreate = async ({ id }: { id: number }) => {\n    const conversation: ConversationResource = await fetchConversation(id).catch(c => c)\n    if (!conversation.id) return\n\n    updateOrCreate(conversation)\n  }\n\n  const handleConversationDestroy = ({ id }: { id: number }) => {\n    if (!id) return\n\n    queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>\n      deleteRecordInPagesData({\n        data: prev,\n        record: { id },\n      })\n    )\n  }\n\n  return {\n    create: updateOrCreate,\n    destroy: handleConversationDestroy,\n    fetchCreate: fetchAndUpdateOrCreate,\n    fetchUpdate: fetchAndUpdateOrCreate,\n    invalidate: () => queryClient.invalidateQueries({ queryKey: conversationQueryKey }),\n    update: updateOrCreate,\n    updateAll,\n  }\n}\n"]}

package/build/hooks/use_jolt.d.ts

@@ -2,8 +2,8 @@ import JoltClient from '@planningcenter/jolt-client';
 import { CustomMessage } from '@planningcenter/jolt-client/dist/types/JoltConnection';
 import { JoltSubscription } from '@planningcenter/jolt-client/dist/types/JoltSubscription';
 export declare const useJoltClient: () => JoltClient | undefined;
-export declare function useJoltChannel(channelName: string): JoltSubscription | undefined;
+export declare function useJoltChannel(channelName: string): JoltSubscription | undefined | null;
 type UserCallbackFn<T> = (_event: T) => void;
-export declare function useJoltEvent<T extends CustomMessage>(channel: JoltSubscription | undefined, eventName: string, callback: UserCallbackFn<T>): void;
+export declare function useJoltEvent<T extends CustomMessage>(channel: JoltSubscription | undefined | null, eventName: string, callback: UserCallbackFn<T>): void;
 export {};
 //# sourceMappingURL=use_jolt.d.ts.map

package/build/hooks/use_jolt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use_jolt.d.ts","sourceRoot":"","sources":["../../src/hooks/use_jolt.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,6BAA6B,CAAA;AACpD,OAAO,EACL,aAAa,EAEd,MAAM,uDAAuD,CAAA;AAC9D,OAAO,EAEL,gBAAgB,EACjB,MAAM,yDAAyD,CAAA;AAahE,eAAO,MAAM,aAAa,QAAO,UAAU,GAAG,SAiG7C,CAAA;AAED,wBAAgB,cAAc,CAAC,WAAW,EAAE,MAAM,gCAWjD;AAED,KAAK,cAAc,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAA;AAE5C,wBAAgB,YAAY,CAAC,CAAC,SAAS,aAAa,EAClD,OAAO,EAAE,gBAAgB,GAAG,SAAS,EACrC,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,QAO5B"}
+{"version":3,"file":"use_jolt.d.ts","sourceRoot":"","sources":["../../src/hooks/use_jolt.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,6BAA6B,CAAA;AACpD,OAAO,EACL,aAAa,EAEd,MAAM,uDAAuD,CAAA;AAC9D,OAAO,EAEL,gBAAgB,EACjB,MAAM,yDAAyD,CAAA;AAchE,eAAO,MAAM,aAAa,QAAO,UAAU,GAAG,SAiG7C,CAAA;AAED,wBAAgB,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,gBAAgB,GAAG,SAAS,GAAG,IAAI,CAuCvF;AAED,KAAK,cAAc,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAA;AAE5C,wBAAgB,YAAY,CAAC,CAAC,SAAS,aAAa,EAClD,OAAO,EAAE,gBAAgB,GAAG,SAAS,GAAG,IAAI,EAC5C,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,QAO5B"}

package/build/hooks/use_jolt.js

@@ -1,8 +1,9 @@
 import JoltClient from '@planningcenter/jolt-client';
 import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useChatContext } from '../contexts/chat_context';
 import { Client, Uri } from '../utils';
+import { useAppState } from './use_app_state';
 export const useJoltClient = () => {
     const { session } = useChatContext();
     const sessionAccessToken = session.token?.access_token;
@@ -83,15 +84,37 @@ export const useJoltClient = () => {
     return joltClient;
 };
 export function useJoltChannel(channelName) {
-    const [joltChannel, setJoltChannel] = useState();
     const jolt = useJoltClient();
-    useEffect(() => {
+    const appState = useAppState();
+    const queryClient = useQueryClient();
+    const handleSubscribe = useCallback(async () => {
         if (!jolt)
-            return () => { };
-        setJoltChannel(jolt.subscribe(channelName));
-        return () => jolt.unsubscribe(channelName);
+            return null;
+        // If the subscription already exists, we don't need to subscribe again
+        const alreadySubscribed = jolt.subscriptions.find(c => c.channel === channelName);
+        if (alreadySubscribed)
+            return alreadySubscribed;
+        return jolt.subscribe(channelName);
     }, [channelName, jolt]);
-    return joltChannel;
+    const { data: subscription } = useQuery({
+        queryKey: ['jolt-subscription', channelName],
+        queryFn: handleSubscribe,
+        enabled: Boolean(jolt) && appState !== 'background',
+    });
+    const handleUnsubscribe = useCallback(() => {
+        queryClient.removeQueries({
+            queryKey: ['jolt-subscription', channelName],
+            exact: true,
+        });
+        jolt?.unsubscribe(channelName);
+    }, [queryClient, channelName, jolt]);
+    useEffect(() => {
+        if (appState !== 'background')
+            return handleUnsubscribe;
+        handleUnsubscribe();
+        return () => null;
+    }, [appState, handleUnsubscribe]);
+    return subscription;
 }
 export function useJoltEvent(channel, eventName, callback) {
     useEffect(() => {

package/build/hooks/use_jolt.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_jolt.js","sourceRoot":"","sources":["../../src/hooks/use_jolt.ts"],"names":[],"mappings":"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","sourcesContent":["import JoltClient from '@planningcenter/jolt-client'\nimport {\n  CustomMessage,\n  FetchAuthToken,\n} from '@planningcenter/jolt-client/dist/types/JoltConnection'\nimport {\n  FetchSubscribeToken,\n  JoltSubscription,\n} from '@planningcenter/jolt-client/dist/types/JoltSubscription'\nimport { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'\nimport { useEffect, useMemo, useState } from 'react'\nimport { useChatContext } from '../contexts/chat_context'\nimport { ApiResource } from '../types'\nimport { Client, Uri } from '../utils'\n\ninterface JoltResponse {\n  type: 'JoltToken'\n  id: string\n  wssUrl: string\n}\n\nexport const useJoltClient = (): JoltClient | undefined => {\n  const { session } = useChatContext()\n  const sessionAccessToken = session.token?.access_token\n  const queryClient = useQueryClient()\n  const uri = useMemo(() => new Uri({ session }), [session])\n  const apiClient = useMemo(\n    () =>\n      new Client({\n        root: uri.api(`/chat/v2`),\n        defaultHeaders: uri.headers,\n        version: '2018-11-01',\n      }),\n    [uri]\n  )\n\n  const fetchJoltToken = async () => {\n    return queryClient.fetchQuery({\n      queryKey: ['jolt-token'],\n      queryFn: () => {\n        return apiClient.post<ApiResource<JoltResponse>>({\n          url: '/me/jolt_authorize',\n          data: {\n            data: {\n              type: 'JoltToken',\n              attributes: {},\n            },\n          },\n        })\n      },\n      staleTime: 5000, // 5 seconds\n    })\n  }\n\n  /** The wssUrl is static and doesn't change so we can cache it to infinity and beyond */\n  const { data: wssUrl } = useSuspenseQuery<string>({\n    queryKey: ['wss-url'],\n    queryFn: () => fetchJoltToken().then(res => res.data.wssUrl),\n    staleTime: Infinity,\n    gcTime: Infinity,\n  })\n\n  const fetchAuthTokenFn: FetchAuthToken = () => {\n    return queryClient.fetchQuery({\n      queryKey: ['jolt-auth-token'],\n      queryFn: () => fetchJoltToken().then(res => res.data.id),\n    })\n  }\n\n  const fetchSubscribeToken: FetchSubscribeToken = (channel: string, connectionId: string) => {\n    return apiClient\n      .post<ApiResource<JoltResponse>>({\n        url: '/me/jolt_subscribe',\n        data: {\n          data: {\n            type: 'JoltSubscribeToken',\n            attributes: { channel, cid: connectionId },\n          },\n        },\n      })\n      .then(res => res.data.id)\n      .catch((res: unknown) => {\n        console.error('failed to subscribe to Jolt channel', res)\n        return ''\n      })\n  }\n\n  const fetchSubscribeTokenFn: FetchSubscribeToken = (\n    channel: string,\n    connectionId: string,\n    options\n  ) => {\n    return queryClient.fetchQuery({\n      queryKey: ['jolt-subscribe-token', channel, connectionId],\n      queryFn: () => fetchSubscribeToken(channel, connectionId, options),\n    })\n  }\n\n  const { data: joltClient } = useQuery({\n    enabled: Boolean(wssUrl),\n    queryKey: ['jolt-client', wssUrl, sessionAccessToken],\n    queryFn: async () => {\n      if (!wssUrl) return undefined\n\n      return new JoltClient(\n        wssUrl,\n        {\n          fetchAuthTokenFn,\n          fetchSubscribeTokenFn,\n        },\n        { logToConsole: false }\n      )\n    },\n    staleTime: Infinity,\n    gcTime: Infinity,\n  })\n\n  return joltClient\n}\n\nexport function useJoltChannel(channelName: string) {\n  const [joltChannel, setJoltChannel] = useState<JoltSubscription>()\n  const jolt = useJoltClient()\n\n  useEffect(() => {\n    if (!jolt) return () => {}\n    setJoltChannel(jolt.subscribe(channelName))\n    return () => jolt.unsubscribe(channelName)\n  }, [channelName, jolt])\n\n  return joltChannel\n}\n\ntype UserCallbackFn<T> = (_event: T) => void\n\nexport function useJoltEvent<T extends CustomMessage>(\n  channel: JoltSubscription | undefined,\n  eventName: string,\n  callback: UserCallbackFn<T>\n) {\n  useEffect(() => {\n    if (!channel) return () => {}\n\n    return channel.bind(eventName, e => callback(e as T))\n  }, [channel, eventName, callback])\n}\n"]}
+{"version":3,"file":"use_jolt.js","sourceRoot":"","sources":["../../src/hooks/use_jolt.ts"],"names":[],"mappings":"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","sourcesContent":["import JoltClient from '@planningcenter/jolt-client'\nimport {\n  CustomMessage,\n  FetchAuthToken,\n} from '@planningcenter/jolt-client/dist/types/JoltConnection'\nimport {\n  FetchSubscribeToken,\n  JoltSubscription,\n} from '@planningcenter/jolt-client/dist/types/JoltSubscription'\nimport { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'\nimport { useCallback, useEffect, useMemo } from 'react'\nimport { useChatContext } from '../contexts/chat_context'\nimport { ApiResource } from '../types'\nimport { Client, Uri } from '../utils'\nimport { useAppState } from './use_app_state'\n\ninterface JoltResponse {\n  type: 'JoltToken'\n  id: string\n  wssUrl: string\n}\n\nexport const useJoltClient = (): JoltClient | undefined => {\n  const { session } = useChatContext()\n  const sessionAccessToken = session.token?.access_token\n  const queryClient = useQueryClient()\n  const uri = useMemo(() => new Uri({ session }), [session])\n  const apiClient = useMemo(\n    () =>\n      new Client({\n        root: uri.api(`/chat/v2`),\n        defaultHeaders: uri.headers,\n        version: '2018-11-01',\n      }),\n    [uri]\n  )\n\n  const fetchJoltToken = async () => {\n    return queryClient.fetchQuery({\n      queryKey: ['jolt-token'],\n      queryFn: () => {\n        return apiClient.post<ApiResource<JoltResponse>>({\n          url: '/me/jolt_authorize',\n          data: {\n            data: {\n              type: 'JoltToken',\n              attributes: {},\n            },\n          },\n        })\n      },\n      staleTime: 5000, // 5 seconds\n    })\n  }\n\n  /** The wssUrl is static and doesn't change so we can cache it to infinity and beyond */\n  const { data: wssUrl } = useSuspenseQuery<string>({\n    queryKey: ['wss-url'],\n    queryFn: () => fetchJoltToken().then(res => res.data.wssUrl),\n    staleTime: Infinity,\n    gcTime: Infinity,\n  })\n\n  const fetchAuthTokenFn: FetchAuthToken = () => {\n    return queryClient.fetchQuery({\n      queryKey: ['jolt-auth-token'],\n      queryFn: () => fetchJoltToken().then(res => res.data.id),\n    })\n  }\n\n  const fetchSubscribeToken: FetchSubscribeToken = (channel: string, connectionId: string) => {\n    return apiClient\n      .post<ApiResource<JoltResponse>>({\n        url: '/me/jolt_subscribe',\n        data: {\n          data: {\n            type: 'JoltSubscribeToken',\n            attributes: { channel, cid: connectionId },\n          },\n        },\n      })\n      .then(res => res.data.id)\n      .catch((res: unknown) => {\n        console.error('failed to subscribe to Jolt channel', res)\n        return ''\n      })\n  }\n\n  const fetchSubscribeTokenFn: FetchSubscribeToken = (\n    channel: string,\n    connectionId: string,\n    options\n  ) => {\n    return queryClient.fetchQuery({\n      queryKey: ['jolt-subscribe-token', channel, connectionId],\n      queryFn: () => fetchSubscribeToken(channel, connectionId, options),\n    })\n  }\n\n  const { data: joltClient } = useQuery({\n    enabled: Boolean(wssUrl),\n    queryKey: ['jolt-client', wssUrl, sessionAccessToken],\n    queryFn: async () => {\n      if (!wssUrl) return undefined\n\n      return new JoltClient(\n        wssUrl,\n        {\n          fetchAuthTokenFn,\n          fetchSubscribeTokenFn,\n        },\n        { logToConsole: false }\n      )\n    },\n    staleTime: Infinity,\n    gcTime: Infinity,\n  })\n\n  return joltClient\n}\n\nexport function useJoltChannel(channelName: string): JoltSubscription | undefined | null {\n  const jolt = useJoltClient()\n  const appState = useAppState()\n  const queryClient = useQueryClient()\n\n  const handleSubscribe = useCallback(async () => {\n    if (!jolt) return null\n\n    // If the subscription already exists, we don't need to subscribe again\n    const alreadySubscribed = jolt.subscriptions.find(c => c.channel === channelName)\n    if (alreadySubscribed) return alreadySubscribed\n\n    return jolt.subscribe(channelName)\n  }, [channelName, jolt])\n\n  const { data: subscription } = useQuery<JoltSubscription | null>({\n    queryKey: ['jolt-subscription', channelName],\n    queryFn: handleSubscribe,\n    enabled: Boolean(jolt) && appState !== 'background',\n  })\n\n  const handleUnsubscribe = useCallback(() => {\n    queryClient.removeQueries({\n      queryKey: ['jolt-subscription', channelName],\n      exact: true,\n    })\n\n    jolt?.unsubscribe(channelName)\n  }, [queryClient, channelName, jolt])\n\n  useEffect(() => {\n    if (appState !== 'background') return handleUnsubscribe\n\n    handleUnsubscribe()\n\n    return () => null\n  }, [appState, handleUnsubscribe])\n\n  return subscription\n}\n\ntype UserCallbackFn<T> = (_event: T) => void\n\nexport function useJoltEvent<T extends CustomMessage>(\n  channel: JoltSubscription | undefined | null,\n  eventName: string,\n  callback: UserCallbackFn<T>\n) {\n  useEffect(() => {\n    if (!channel) return () => {}\n\n    return channel.bind(eventName, e => callback(e as T))\n  }, [channel, eventName, callback])\n}\n"]}

package/build/screens/conversations/components/list_header_component.js

@@ -57,7 +57,7 @@ export const ListHeaderComponent = () => {
           Mark all read
         </TextButton>
       </View>
-      <View style={styles.filterRow}>
+      <View accessibilityRole="toolbar" style={styles.filterRow}>
         {showAppFilters && (<>
             <ToggleButton title={FilterTypes.All} active={active === FilterTypes.All} onPress={() => navigation.setParams({
                 chat_group_graph_id: undefined,

package/build/screens/conversations/components/list_header_component.js.map

@@ -1 +1 @@
-{"version":3,"file":"list_header_component.js","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'\nimport React, { useCallback, useMemo } from 'react'\nimport { Alert, StyleSheet, View } from 'react-native'\nimport { Heading, TextButton, ToggleButton } from '../../../components'\nimport { useCurrentPerson, useCurrentPersonCache, useTheme } from '../../../hooks'\nimport { useMarkAllRead } from '../../../hooks/use_conversations_actions'\nimport { useCanDisplayGroups } from '../../../hooks/use_groups'\nimport { ConversationScreenProps } from '../conversations_screen'\nimport { ChatGroupBadge } from './chat_group_badge'\n\nenum FilterTypes {\n  All = 'All',\n  Groups = 'Groups',\n  Teams = 'Teams',\n  More = 'More',\n}\n\nexport const ListHeaderComponent = () => {\n  const styles = useStyles()\n  const navigation = useNavigation()\n  const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })\n  const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })\n  const route = useRoute<RouteProp<ConversationScreenProps['route']>>()\n  const { chat_group_graph_id, group_source_app_name = '' } = route.params || {}\n\n  const { unreadCount } = useCurrentPerson()\n  const currentPersonCache = useCurrentPersonCache()\n  const { markAllRead, isPending } = useMarkAllRead()\n\n  const active: FilterTypes = useMemo(() => {\n    if (chat_group_graph_id) {\n      return FilterTypes.More\n    } else if (/groups/i.test(group_source_app_name)) {\n      return FilterTypes.Groups\n    } else if (/services/i.test(group_source_app_name)) {\n      return FilterTypes.Teams\n    }\n\n    return FilterTypes.All\n  }, [chat_group_graph_id, group_source_app_name])\n\n  const handleMarkAllRead = useCallback(() => {\n    currentPersonCache.update({ unreadCount: 0 })\n    markAllRead()\n  }, [currentPersonCache, markAllRead])\n\n  const alertMarkAllRead = useCallback(() => {\n    if (active === FilterTypes.All) return handleMarkAllRead()\n\n    Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [\n      { text: 'Cancel' },\n      { text: 'OK', onPress: () => handleMarkAllRead() },\n    ])\n  }, [active, handleMarkAllRead])\n\n  const showAppFilters = canFilterByGroups && canFilterByTeams\n\n  return (\n    <View style={styles.listHeader}>\n      <View style={styles.titleRow}>\n        <Heading numberOfLines={1} variant=\"h2\">\n          Conversations\n        </Heading>\n        <TextButton onPress={alertMarkAllRead} disabled={isPending || !unreadCount}>\n          Mark all read\n        </TextButton>\n      </View>\n      <View style={styles.filterRow}>\n        {showAppFilters && (\n          <>\n            <ToggleButton\n              title={FilterTypes.All}\n              active={active === FilterTypes.All}\n              onPress={() =>\n                navigation.setParams({\n                  chat_group_graph_id: undefined,\n                  group_source_app_name: undefined,\n                })\n              }\n              accessibilityLabel=\"Show all conversations\"\n            />\n            <ToggleButton\n              title={FilterTypes.Groups}\n              active={active === FilterTypes.Groups}\n              onPress={() =>\n                navigation.setParams({\n                  chat_group_graph_id: undefined,\n                  group_source_app_name: 'Groups',\n                })\n              }\n              accessibilityLabel=\"Filter to group conversations\"\n            />\n\n            <ToggleButton\n              title={FilterTypes.Teams}\n              active={active === FilterTypes.Teams}\n              onPress={() =>\n                navigation.setParams({\n                  chat_group_graph_id: undefined,\n                  group_source_app_name: 'Services',\n                })\n              }\n              accessibilityLabel=\"Filter to team conversations\"\n            />\n          </>\n        )}\n        <ToggleButton\n          title={showAppFilters ? FilterTypes.More : 'Filter'}\n          onPress={() =>\n            navigation.navigate('ConversationFilters', {\n              chat_group_graph_id,\n              group_source_app_name,\n            })\n          }\n          active={active === FilterTypes.More}\n          iconNameRight=\"general.threeReducingHorizontalBars\"\n          accessibilityLabel={showAppFilters ? 'View all filters' : 'View more filters'}\n        />\n      </View>\n      <ChatGroupBadge />\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const theme = useTheme()\n  return StyleSheet.create({\n    listHeader: {\n      borderBottomWidth: 1,\n      borderBottomColor: theme.colors.fillColorNeutral050Base,\n      paddingHorizontal: 16,\n      paddingBottom: 16,\n      gap: 12,\n    },\n    titleRow: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      paddingTop: 8,\n    },\n    filterRow: {\n      flexDirection: 'row',\n      justifyContent: 'flex-start',\n      gap: 8,\n    },\n  })\n}\n"]}
+{"version":3,"file":"list_header_component.js","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'\nimport React, { useCallback, useMemo } from 'react'\nimport { Alert, StyleSheet, View } from 'react-native'\nimport { Heading, TextButton, ToggleButton } from '../../../components'\nimport { useCurrentPerson, useCurrentPersonCache, useTheme } from '../../../hooks'\nimport { useMarkAllRead } from '../../../hooks/use_conversations_actions'\nimport { useCanDisplayGroups } from '../../../hooks/use_groups'\nimport { ConversationScreenProps } from '../conversations_screen'\nimport { ChatGroupBadge } from './chat_group_badge'\n\nenum FilterTypes {\n  All = 'All',\n  Groups = 'Groups',\n  Teams = 'Teams',\n  More = 'More',\n}\n\nexport const ListHeaderComponent = () => {\n  const styles = useStyles()\n  const navigation = useNavigation()\n  const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })\n  const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })\n  const route = useRoute<RouteProp<ConversationScreenProps['route']>>()\n  const { chat_group_graph_id, group_source_app_name = '' } = route.params || {}\n\n  const { unreadCount } = useCurrentPerson()\n  const currentPersonCache = useCurrentPersonCache()\n  const { markAllRead, isPending } = useMarkAllRead()\n\n  const active: FilterTypes = useMemo(() => {\n    if (chat_group_graph_id) {\n      return FilterTypes.More\n    } else if (/groups/i.test(group_source_app_name)) {\n      return FilterTypes.Groups\n    } else if (/services/i.test(group_source_app_name)) {\n      return FilterTypes.Teams\n    }\n\n    return FilterTypes.All\n  }, [chat_group_graph_id, group_source_app_name])\n\n  const handleMarkAllRead = useCallback(() => {\n    currentPersonCache.update({ unreadCount: 0 })\n    markAllRead()\n  }, [currentPersonCache, markAllRead])\n\n  const alertMarkAllRead = useCallback(() => {\n    if (active === FilterTypes.All) return handleMarkAllRead()\n\n    Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [\n      { text: 'Cancel' },\n      { text: 'OK', onPress: () => handleMarkAllRead() },\n    ])\n  }, [active, handleMarkAllRead])\n\n  const showAppFilters = canFilterByGroups && canFilterByTeams\n\n  return (\n    <View style={styles.listHeader}>\n      <View style={styles.titleRow}>\n        <Heading numberOfLines={1} variant=\"h2\">\n          Conversations\n        </Heading>\n        <TextButton onPress={alertMarkAllRead} disabled={isPending || !unreadCount}>\n          Mark all read\n        </TextButton>\n      </View>\n      <View accessibilityRole=\"toolbar\" style={styles.filterRow}>\n        {showAppFilters && (\n          <>\n            <ToggleButton\n              title={FilterTypes.All}\n              active={active === FilterTypes.All}\n              onPress={() =>\n                navigation.setParams({\n                  chat_group_graph_id: undefined,\n                  group_source_app_name: undefined,\n                })\n              }\n              accessibilityLabel=\"Show all conversations\"\n            />\n            <ToggleButton\n              title={FilterTypes.Groups}\n              active={active === FilterTypes.Groups}\n              onPress={() =>\n                navigation.setParams({\n                  chat_group_graph_id: undefined,\n                  group_source_app_name: 'Groups',\n                })\n              }\n              accessibilityLabel=\"Filter to group conversations\"\n            />\n\n            <ToggleButton\n              title={FilterTypes.Teams}\n              active={active === FilterTypes.Teams}\n              onPress={() =>\n                navigation.setParams({\n                  chat_group_graph_id: undefined,\n                  group_source_app_name: 'Services',\n                })\n              }\n              accessibilityLabel=\"Filter to team conversations\"\n            />\n          </>\n        )}\n        <ToggleButton\n          title={showAppFilters ? FilterTypes.More : 'Filter'}\n          onPress={() =>\n            navigation.navigate('ConversationFilters', {\n              chat_group_graph_id,\n              group_source_app_name,\n            })\n          }\n          active={active === FilterTypes.More}\n          iconNameRight=\"general.threeReducingHorizontalBars\"\n          accessibilityLabel={showAppFilters ? 'View all filters' : 'View more filters'}\n        />\n      </View>\n      <ChatGroupBadge />\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const theme = useTheme()\n  return StyleSheet.create({\n    listHeader: {\n      borderBottomWidth: 1,\n      borderBottomColor: theme.colors.fillColorNeutral050Base,\n      paddingHorizontal: 16,\n      paddingBottom: 16,\n      gap: 12,\n    },\n    titleRow: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      paddingTop: 8,\n    },\n    filterRow: {\n      flexDirection: 'row',\n      justifyContent: 'flex-start',\n      gap: 8,\n    },\n  })\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.4.1",
+  "version": "3.5.0-rc.1",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -54,5 +54,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "79c431bf63429ded8df305bafd970e258029db26"
+  "gitHead": "79206d6a755064cf39e479e5c253ba6cc7a72227"
 }

package/src/hooks/use_app_state.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react'
+import { AppState } from 'react-native'
+
+export const useAppState = () => {
+  const [appState, setAppState] = useState('active')
+
+  useEffect(() => {
+    const handleAppStateChange = (nextAppState: string) => {
+      setAppState(nextAppState)
+    }
+
+    const subscription = AppState.addEventListener('change', handleAppStateChange)
+
+    return () => {
+      subscription.remove()
+    }
+  }, [])
+
+  return appState
+}

package/src/hooks/use_conversations_actions.ts

@@ -14,7 +14,7 @@ export const useConversationsMarkRead = ({
   const apiClient = useApiClient()
   const { args } = useConversationsContext()
   const currentPersonCache = useCurrentPersonCache()
-  const { update, invalidate } = useConversationsCache(args)
+  const { update, invalidate, fetchUpdate } = useConversationsCache(args)
 
   function handlePersonUnreadCount(read: boolean) {
     currentPersonCache.update({}, person => {
@@ -36,13 +36,13 @@ export const useConversationsMarkRead = ({
     mutationFn: async (read: boolean) => {
       const action = read ? 'mark_read' : 'mark_unread'
 
-      return apiClient.chat.post<ApiResource<ConversationResource>>({
+      return apiClient.chat.post({
         url: `/me/conversations/${conversation.id}/${action}`,
-        data: { data: { type: '', attributes: {} }, fields: { Conversation: 'unread_count' } },
+        data: { data: { type: '', attributes: {} }, fields: { Conversation: 'unread_count,id' } },
       })
     },
-    onSuccess: (response: ApiResource<ConversationResource>) => {
-      update(response.data)
+    onSuccess: () => {
+      fetchUpdate(conversation)
     },
     onError: () => {
       Alert.alert('Oops', 'Something went wrong updating this conversation, please try again')

package/src/hooks/use_conversations_cache.ts

@@ -18,6 +18,8 @@ export function useConversationsCache(args?: Partial<ConversationRequestArgs>) {
   const conversationQueryKey = getRequestQueryKey(conversationsRequestArgs)
 
   const fetchConversation = async (id: number) => {
+    if (!id) return
+
     const { data: argsData } = conversationsRequestArgs
     const { data } = await apiClient.chat.get<ApiResource<ConversationResource>>({
       url: `/me/conversations/${id}`,
@@ -31,6 +33,8 @@ export function useConversationsCache(args?: Partial<ConversationRequestArgs>) {
   }
 
   const updateOrCreate = async (conversation: ConversationResource) => {
+    if (!conversation.id) return
+
     queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>
       updateOrCreateRecordInPagesData({
         data: prev,
@@ -53,11 +57,14 @@ export function useConversationsCache(args?: Partial<ConversationRequestArgs>) {
 
   const fetchAndUpdateOrCreate = async ({ id }: { id: number }) => {
     const conversation: ConversationResource = await fetchConversation(id).catch(c => c)
+    if (!conversation.id) return
 
     updateOrCreate(conversation)
   }
 
   const handleConversationDestroy = ({ id }: { id: number }) => {
+    if (!id) return
+
     queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>
       deleteRecordInPagesData({
         data: prev,

package/src/hooks/use_jolt.ts

@@ -8,10 +8,11 @@ import {
   JoltSubscription,
 } from '@planningcenter/jolt-client/dist/types/JoltSubscription'
 import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import { useChatContext } from '../contexts/chat_context'
 import { ApiResource } from '../types'
 import { Client, Uri } from '../utils'
+import { useAppState } from './use_app_state'
 
 interface JoltResponse {
   type: 'JoltToken'
@@ -118,23 +119,51 @@ export const useJoltClient = (): JoltClient | undefined => {
   return joltClient
 }
 
-export function useJoltChannel(channelName: string) {
-  const [joltChannel, setJoltChannel] = useState<JoltSubscription>()
+export function useJoltChannel(channelName: string): JoltSubscription | undefined | null {
   const jolt = useJoltClient()
+  const appState = useAppState()
+  const queryClient = useQueryClient()
 
-  useEffect(() => {
-    if (!jolt) return () => {}
-    setJoltChannel(jolt.subscribe(channelName))
-    return () => jolt.unsubscribe(channelName)
+  const handleSubscribe = useCallback(async () => {
+    if (!jolt) return null
+
+    // If the subscription already exists, we don't need to subscribe again
+    const alreadySubscribed = jolt.subscriptions.find(c => c.channel === channelName)
+    if (alreadySubscribed) return alreadySubscribed
+
+    return jolt.subscribe(channelName)
   }, [channelName, jolt])
 
-  return joltChannel
+  const { data: subscription } = useQuery<JoltSubscription | null>({
+    queryKey: ['jolt-subscription', channelName],
+    queryFn: handleSubscribe,
+    enabled: Boolean(jolt) && appState !== 'background',
+  })
+
+  const handleUnsubscribe = useCallback(() => {
+    queryClient.removeQueries({
+      queryKey: ['jolt-subscription', channelName],
+      exact: true,
+    })
+
+    jolt?.unsubscribe(channelName)
+  }, [queryClient, channelName, jolt])
+
+  useEffect(() => {
+    if (appState !== 'background') return handleUnsubscribe
+
+    handleUnsubscribe()
+
+    return () => null
+  }, [appState, handleUnsubscribe])
+
+  return subscription
 }
 
 type UserCallbackFn<T> = (_event: T) => void
 
 export function useJoltEvent<T extends CustomMessage>(
-  channel: JoltSubscription | undefined,
+  channel: JoltSubscription | undefined | null,
   eventName: string,
   callback: UserCallbackFn<T>
 ) {

package/src/screens/conversations/components/list_header_component.tsx

@@ -65,7 +65,7 @@ export const ListHeaderComponent = () => {
           Mark all read
         </TextButton>
       </View>
-      <View style={styles.filterRow}>
+      <View accessibilityRole="toolbar" style={styles.filterRow}>
         {showAppFilters && (
           <>
             <ToggleButton