@planningcenter/chat-react-native 1.3.0-rc.2 → 1.3.0-rc.4

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.0-rc.4](https://github.com/planningcenter/chat-js/compare/v1.2.0...v1.3.0-rc.4) (2025-02-07)
+
+
+### Features
+
+* add auth to the example app ([#50](https://github.com/planningcenter/chat-js/issues/50)) ([5e0ae00](https://github.com/planningcenter/chat-js/commit/5e0ae008345743f6bba388e982a3ad768265971a))
+* create higher fidelity components ([#54](https://github.com/planningcenter/chat-js/issues/54)) ([367b707](https://github.com/planningcenter/chat-js/commit/367b7076b6d3a81ede7852248e98a199adea9978))
+* drop stream and set global dependencies ([#49](https://github.com/planningcenter/chat-js/issues/49)) ([1214b9f](https://github.com/planningcenter/chat-js/commit/1214b9fbc17f4ab67a1de1d39954604a28268f35))
+* **StreamChat:** export core package ([#41](https://github.com/planningcenter/chat-js/issues/41)) ([e9afde0](https://github.com/planningcenter/chat-js/commit/e9afde0e2a11d9c7e13b84f8eee8a6cfa7aff795)), closes [#45](https://github.com/planningcenter/chat-js/issues/45)
+
+
+
+## [1.3.0-rc.3](https://github.com/planningcenter/chat-js/compare/v1.2.0...v1.3.0-rc.3) (2025-02-06)
+
+
+### Features
+
+* add auth to the example app ([#50](https://github.com/planningcenter/chat-js/issues/50)) ([5e0ae00](https://github.com/planningcenter/chat-js/commit/5e0ae008345743f6bba388e982a3ad768265971a))
+* drop stream and set global dependencies ([#49](https://github.com/planningcenter/chat-js/issues/49)) ([1214b9f](https://github.com/planningcenter/chat-js/commit/1214b9fbc17f4ab67a1de1d39954604a28268f35))
+* **StreamChat:** export core package ([#41](https://github.com/planningcenter/chat-js/issues/41)) ([e9afde0](https://github.com/planningcenter/chat-js/commit/e9afde0e2a11d9c7e13b84f8eee8a6cfa7aff795)), closes [#45](https://github.com/planningcenter/chat-js/issues/45)
+
+
+
 ## [1.3.0-rc.2](https://github.com/planningcenter/chat-js/compare/v1.2.0...v1.3.0-rc.2) (2025-02-06)
 
 

package/build/components/conversations.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function Conversations(): React.JSX.Element;
+//# sourceMappingURL=conversations.d.ts.map

package/build/components/conversations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAYnD,wBAAgB,aAAa,sBAQ5B"}

package/build/components/conversations.js

@@ -0,0 +1,49 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import React, { Suspense, useContext } from 'react';
+import { FlatList, StyleSheet, Text } from 'react-native';
+import { ChatContext } from '../context/chat_context';
+import ErrorBoundary from './error_boundary';
+export function Conversations() {
+    return (<ErrorBoundary>
+      <Suspense fallback={<></>}>
+        <Loaded />
+      </Suspense>
+    </ErrorBoundary>);
+}
+const Loaded = () => {
+    const { token, onTokenExpired } = useContext(ChatContext);
+    const styles = useStyles();
+    const { data: conversations } = useSuspenseQuery({
+        queryKey: ['conversations', token],
+        queryFn: () => 
+        // TODO: replace with an api client
+        fetch('https://api.planningcenteronline.com/chat/v2/me/conversations', {
+            headers: {
+                Authorization: `Bearer ${token?.access_token}`,
+            },
+        })
+            .then(validateResponse)
+            .then(response => response.json())
+            .catch(error => {
+            if (error.message === 'Token expired') {
+                onTokenExpired();
+            }
+            return null;
+        }),
+    });
+    return (<FlatList data={conversations?.data} ListEmptyComponent={<Text>No conversations</Text>} contentContainerStyle={styles.container} ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>} renderItem={({ item }) => <Text>{item.attributes.title}</Text>}/>);
+};
+const useStyles = () => {
+    return StyleSheet.create({
+        container: { columnGap: 16 },
+        foo: { fontSize: 24 },
+    });
+};
+const validateResponse = (response) => {
+    const isExpired = response.status === 401;
+    if (isExpired) {
+        throw new Error('Token expired');
+    }
+    return response;
+};
+//# sourceMappingURL=conversations.js.map

package/build/components/conversations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAErD,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAQ5C,MAAM,UAAU,aAAa;IAC3B,OAAO,CACL,CAAC,aAAa,CACZ;MAAA,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CACxB;QAAA,CAAC,MAAM,CAAC,AAAD,EACT;MAAA,EAAE,QAAQ,CACZ;IAAA,EAAE,aAAa,CAAC,CACjB,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,GAAG,EAAE;IAClB,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IACzD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAwB;QACtE,QAAQ,EAAE,CAAC,eAAe,EAAE,KAAK,CAAC;QAClC,OAAO,EAAE,GAAG,EAAE;QACZ,mCAAmC;QACnC,KAAK,CAAC,+DAA+D,EAAE;YACrE,OAAO,EAAE;gBACP,aAAa,EAAE,UAAU,KAAK,EAAE,YAAY,EAAE;aAC/C;SACF,CAAC;aACC,IAAI,CAAC,gBAAgB,CAAC;aACtB,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;aACjC,KAAK,CAAC,KAAK,CAAC,EAAE;YACb,IAAI,KAAK,CAAC,OAAO,KAAK,eAAe,EAAE,CAAC;gBACtC,cAAc,EAAE,CAAA;YAClB,CAAC;YACD,OAAO,IAAI,CAAA;QACb,CAAC,CAAC;KACP,CAAC,CAAA;IAEF,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAC1B,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC,CAClD,qBAAqB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxC,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CACnE,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC,EAC/D,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE;QAC5B,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;KACtB,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,QAAkB,EAAE,EAAE;IAC9C,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,KAAK,GAAG,CAAA;IACzC,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC,CAAA;IAClC,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA","sourcesContent":["import { useSuspenseQuery } from '@tanstack/react-query'\nimport React, { Suspense, useContext } from 'react'\nimport { FlatList, StyleSheet, Text } from 'react-native'\nimport { ChatContext } from '../context/chat_context'\nimport { ConversationRecord } from '../types'\nimport ErrorBoundary from './error_boundary'\n\ntype ConversationsResponse = {\n  data: ConversationRecord[]\n  links: Record<string, string>\n  meta: Record<string, string>\n}\n\nexport function Conversations() {\n  return (\n    <ErrorBoundary>\n      <Suspense fallback={<></>}>\n        <Loaded />\n      </Suspense>\n    </ErrorBoundary>\n  )\n}\n\nconst Loaded = () => {\n  const { token, onTokenExpired } = useContext(ChatContext)\n  const styles = useStyles()\n  const { data: conversations } = useSuspenseQuery<ConversationsResponse>({\n    queryKey: ['conversations', token],\n    queryFn: () =>\n      // TODO: replace with an api client\n      fetch('https://api.planningcenteronline.com/chat/v2/me/conversations', {\n        headers: {\n          Authorization: `Bearer ${token?.access_token}`,\n        },\n      })\n        .then(validateResponse)\n        .then(response => response.json())\n        .catch(error => {\n          if (error.message === 'Token expired') {\n            onTokenExpired()\n          }\n          return null\n        }),\n  })\n\n  return (\n    <FlatList\n      data={conversations?.data}\n      ListEmptyComponent={<Text>No conversations</Text>}\n      contentContainerStyle={styles.container}\n      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}\n      renderItem={({ item }) => <Text>{item.attributes.title}</Text>}\n    />\n  )\n}\n\nconst useStyles = () => {\n  return StyleSheet.create({\n    container: { columnGap: 16 },\n    foo: { fontSize: 24 },\n  })\n}\n\nconst validateResponse = (response: Response) => {\n  const isExpired = response.status === 401\n  if (isExpired) {\n    throw new Error('Token expired')\n  }\n\n  return response\n}\n"]}

package/build/components/error_boundary.d.ts

@@ -0,0 +1,12 @@
+import React, { PropsWithChildren } from 'react';
+declare class ErrorBoundary extends React.Component<PropsWithChildren<{}>> {
+    state: {
+        error: null;
+        unsubscriber: () => void;
+    };
+    componentDidCatch(error: any): void;
+    handleError(error: any): void;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+}
+export default ErrorBoundary;
+//# sourceMappingURL=error_boundary.d.ts.map

package/build/components/error_boundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error_boundary.d.ts","sourceRoot":"","sources":["../../src/components/error_boundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAGhD,cAAM,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;IAChE,KAAK;;;MAGJ;IAED,iBAAiB,CAAC,KAAK,EAAE,GAAG;IAI5B,WAAW,CAAC,KAAK,EAAE,GAAG;IAItB,MAAM;CAOP;AAED,eAAe,aAAa,CAAA"}

package/build/components/error_boundary.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text } from 'react-native';
+class ErrorBoundary extends React.Component {
+    state = {
+        error: null,
+        unsubscriber: () => { },
+    };
+    componentDidCatch(error) {
+        this.handleError(error);
+    }
+    handleError(error) {
+        this.setState({ error });
+    }
+    render() {
+        if (this.state.error) {
+            return <Text>{JSON.stringify(this.state.error, null, 2)}</Text>;
+        }
+        else {
+            return this.props.children;
+        }
+    }
+}
+export default ErrorBoundary;
+//# sourceMappingURL=error_boundary.js.map

package/build/components/error_boundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error_boundary.js","sourceRoot":"","sources":["../../src/components/error_boundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEnC,MAAM,aAAc,SAAQ,KAAK,CAAC,SAAgC;IAChE,KAAK,GAAG;QACN,KAAK,EAAE,IAAI;QACX,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;KACvB,CAAA;IAED,iBAAiB,CAAC,KAAU;QAC1B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC;IAED,WAAW,CAAC,KAAU;QACpB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;IAC1B,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACrB,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA;QACjE,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;QAC5B,CAAC;IACH,CAAC;CACF;AAED,eAAe,aAAa,CAAA","sourcesContent":["import React, { PropsWithChildren } from 'react'\nimport { Text } from 'react-native'\n\nclass ErrorBoundary extends React.Component<PropsWithChildren<{}>> {\n  state = {\n    error: null,\n    unsubscriber: () => {},\n  }\n\n  componentDidCatch(error: any) {\n    this.handleError(error)\n  }\n\n  handleError(error: any) {\n    this.setState({ error })\n  }\n\n  render() {\n    if (this.state.error) {\n      return <Text>{JSON.stringify(this.state.error, null, 2)}</Text>\n    } else {\n      return this.props.children\n    }\n  }\n}\n\nexport default ErrorBoundary\n"]}

package/build/context/chat_context.d.ts

@@ -0,0 +1,9 @@
+import { OauthToken } from '../types';
+type ContextValue = {
+    token: OauthToken | null;
+    onTokenExpired: () => void;
+    theme: any;
+};
+export declare const ChatContext: import("react").Context<ContextValue>;
+export {};
+//# sourceMappingURL=chat_context.d.ts.map

package/build/context/chat_context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat_context.d.ts","sourceRoot":"","sources":["../../src/context/chat_context.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,UAAU,GAAG,IAAI,CAAA;IACxB,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,KAAK,EAAE,GAAG,CAAA;CACX,CAAA;AAED,eAAO,MAAM,WAAW,uCAItB,CAAA"}

package/build/context/chat_context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+export const ChatContext = createContext({
+    theme: null,
+    token: null,
+    onTokenExpired: () => { },
+});
+//# sourceMappingURL=chat_context.js.map

package/build/context/chat_context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat_context.js","sourceRoot":"","sources":["../../src/context/chat_context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AASrC,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAe;IACrD,KAAK,EAAE,IAAI;IACX,KAAK,EAAE,IAAI;IACX,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC;CACzB,CAAC,CAAA","sourcesContent":["import { createContext } from 'react'\nimport { OauthToken } from '../types'\n\ntype ContextValue = {\n  token: OauthToken | null\n  onTokenExpired: () => void\n  theme: any\n}\n\nexport const ChatContext = createContext<ContextValue>({\n  theme: null,\n  token: null,\n  onTokenExpired: () => {},\n})\n"]}

package/build/index.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-export declare function PCOChat({ token, onTokenExpired, }: {
-    token?: OathToken;
-    onTokenExpired: () => void;
-}): React.JSX.Element;
+import { Conversations } from './components/conversations';
+import { ChatContext } from './context/chat_context';
+import { OauthToken } from './types';
+export { ChatContext, Conversations, OauthToken as OathToken };
 //# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAGlD,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,cAAc,GACf,EAAE;IACD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,cAAc,EAAE,MAAM,IAAI,CAAA;CAC3B,qBAiCA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEpC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,IAAI,SAAS,EAAE,CAAA"}

package/build/index.js

@@ -1,39 +1,4 @@
-import React, { useEffect, useState } from 'react';
-import { FlatList, StyleSheet, Text } from 'react-native';
-export function PCOChat({ token, onTokenExpired, }) {
-    const [conversations, setConversations] = useState(null);
-    const styles = useStyles();
-    useEffect(() => {
-        if (!token) {
-            return;
-        }
-        fetch('https://api.planningcenteronline.com/chat/v2/me/conversations', {
-            headers: {
-                Authorization: `Bearer ${token.access_token}`,
-            },
-        })
-            .then(validateResponse)
-            .then(response => response.json())
-            .then(setConversations)
-            .catch(error => {
-            if (error.message === 'Token expired') {
-                onTokenExpired();
-            }
-        });
-    }, [onTokenExpired, token]);
-    return (<FlatList data={conversations?.data} ListEmptyComponent={<Text>No conversations</Text>} contentContainerStyle={styles.container} ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>} renderItem={({ item }) => <Text>{item.attributes.title}</Text>}/>);
-}
-const useStyles = () => {
-    return StyleSheet.create({
-        container: { columnGap: 16 },
-        foo: { fontSize: 24 },
-    });
-};
-const validateResponse = (response) => {
-    const isExpired = response.status === 401;
-    if (isExpired) {
-        throw new Error('Token expired');
-    }
-    return response;
-};
+import { Conversations } from './components/conversations';
+import { ChatContext } from './context/chat_context';
+export { ChatContext, Conversations };
 //# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEzD,MAAM,UAAU,OAAO,CAAC,EACtB,KAAK,EACL,cAAc,GAIf;IACC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAM,IAAI,CAAC,CAAA;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAM;QACR,CAAC;QAED,KAAK,CAAC,+DAA+D,EAAE;YACrE,OAAO,EAAE;gBACP,aAAa,EAAE,UAAU,KAAK,CAAC,YAAY,EAAE;aAC9C;SACF,CAAC;aACC,IAAI,CAAC,gBAAgB,CAAC;aACtB,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;aACjC,IAAI,CAAC,gBAAgB,CAAC;aACtB,KAAK,CAAC,KAAK,CAAC,EAAE;YACb,IAAI,KAAK,CAAC,OAAO,KAAK,eAAe,EAAE,CAAC;gBACtC,cAAc,EAAE,CAAA;YAClB,CAAC;QACH,CAAC,CAAC,CAAA;IACN,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC,CAAA;IAE3B,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAC1B,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC,CAClD,qBAAqB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxC,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CACnE,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC,EAC/D,CACH,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE;QAC5B,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;KACtB,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,QAAkB,EAAE,EAAE;IAC9C,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,KAAK,GAAG,CAAA;IACzC,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC,CAAA;IAClC,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA","sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { FlatList, StyleSheet, Text } from 'react-native'\n\nexport function PCOChat({\n  token,\n  onTokenExpired,\n}: {\n  token?: OathToken\n  onTokenExpired: () => void\n}) {\n  const [conversations, setConversations] = useState<any>(null)\n  const styles = useStyles()\n\n  useEffect(() => {\n    if (!token) {\n      return\n    }\n\n    fetch('https://api.planningcenteronline.com/chat/v2/me/conversations', {\n      headers: {\n        Authorization: `Bearer ${token.access_token}`,\n      },\n    })\n      .then(validateResponse)\n      .then(response => response.json())\n      .then(setConversations)\n      .catch(error => {\n        if (error.message === 'Token expired') {\n          onTokenExpired()\n        }\n      })\n  }, [onTokenExpired, token])\n\n  return (\n    <FlatList\n      data={conversations?.data}\n      ListEmptyComponent={<Text>No conversations</Text>}\n      contentContainerStyle={styles.container}\n      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}\n      renderItem={({ item }) => <Text>{item.attributes.title}</Text>}\n    />\n  )\n}\n\nconst useStyles = () => {\n  return StyleSheet.create({\n    container: { columnGap: 16 },\n    foo: { fontSize: 24 },\n  })\n}\n\nconst validateResponse = (response: Response) => {\n  const isExpired = response.status === 401\n  if (isExpired) {\n    throw new Error('Token expired')\n  }\n\n  return response\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAGpD,OAAO,EAAE,WAAW,EAAE,aAAa,EAA2B,CAAA","sourcesContent":["import { Conversations } from './components/conversations'\nimport { ChatContext } from './context/chat_context'\nimport { OauthToken } from './types'\n\nexport { ChatContext, Conversations, OauthToken as OathToken }\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "1.3.0-rc.2",
+  "version": "1.3.0-rc.4",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -13,15 +13,17 @@
     "prepublishOnly": "expo-module prepublishOnly"
   },
   "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
     "@react-native/eslint-config": "^0.77.0",
+    "@tanstack/react-query": "^5.66.0",
     "@typescript-eslint/parser": "^8.23.0",
     "expo-module-scripts": "^3.4.0",
     "prettier": "^3.4.2",
     "react-native": "0.74.5"
   },
-  "gitHead": "01657a32952a72a2a82786e1de30edfc0f52b4f3"
+  "gitHead": "75d05da3bdb2dc2509914389d319df9b2868042f"
 }

package/src/__tests__/index.tsx

@@ -0,0 +1,5 @@
+describe('Chat', () => {
+  it('should do maths', () => {
+    expect(1 + 1).toBe(2)
+  })
+})

package/src/components/conversations.tsx

@@ -0,0 +1,71 @@
+import { useSuspenseQuery } from '@tanstack/react-query'
+import React, { Suspense, useContext } from 'react'
+import { FlatList, StyleSheet, Text } from 'react-native'
+import { ChatContext } from '../context/chat_context'
+import { ConversationRecord } from '../types'
+import ErrorBoundary from './error_boundary'
+
+type ConversationsResponse = {
+  data: ConversationRecord[]
+  links: Record<string, string>
+  meta: Record<string, string>
+}
+
+export function Conversations() {
+  return (
+    <ErrorBoundary>
+      <Suspense fallback={<></>}>
+        <Loaded />
+      </Suspense>
+    </ErrorBoundary>
+  )
+}
+
+const Loaded = () => {
+  const { token, onTokenExpired } = useContext(ChatContext)
+  const styles = useStyles()
+  const { data: conversations } = useSuspenseQuery<ConversationsResponse>({
+    queryKey: ['conversations', token],
+    queryFn: () =>
+      // TODO: replace with an api client
+      fetch('https://api.planningcenteronline.com/chat/v2/me/conversations', {
+        headers: {
+          Authorization: `Bearer ${token?.access_token}`,
+        },
+      })
+        .then(validateResponse)
+        .then(response => response.json())
+        .catch(error => {
+          if (error.message === 'Token expired') {
+            onTokenExpired()
+          }
+          return null
+        }),
+  })
+
+  return (
+    <FlatList
+      data={conversations?.data}
+      ListEmptyComponent={<Text>No conversations</Text>}
+      contentContainerStyle={styles.container}
+      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}
+      renderItem={({ item }) => <Text>{item.attributes.title}</Text>}
+    />
+  )
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    container: { columnGap: 16 },
+    foo: { fontSize: 24 },
+  })
+}
+
+const validateResponse = (response: Response) => {
+  const isExpired = response.status === 401
+  if (isExpired) {
+    throw new Error('Token expired')
+  }
+
+  return response
+}

package/src/components/error_boundary.tsx

@@ -0,0 +1,27 @@
+import React, { PropsWithChildren } from 'react'
+import { Text } from 'react-native'
+
+class ErrorBoundary extends React.Component<PropsWithChildren<{}>> {
+  state = {
+    error: null,
+    unsubscriber: () => {},
+  }
+
+  componentDidCatch(error: any) {
+    this.handleError(error)
+  }
+
+  handleError(error: any) {
+    this.setState({ error })
+  }
+
+  render() {
+    if (this.state.error) {
+      return <Text>{JSON.stringify(this.state.error, null, 2)}</Text>
+    } else {
+      return this.props.children
+    }
+  }
+}
+
+export default ErrorBoundary

package/src/context/chat_context.tsx

@@ -0,0 +1,14 @@
+import { createContext } from 'react'
+import { OauthToken } from '../types'
+
+type ContextValue = {
+  token: OauthToken | null
+  onTokenExpired: () => void
+  theme: any
+}
+
+export const ChatContext = createContext<ContextValue>({
+  theme: null,
+  token: null,
+  onTokenExpired: () => {},
+})

package/src/index.tsx

@@ -1,59 +1,5 @@
-import React, { useEffect, useState } from 'react'
-import { FlatList, StyleSheet, Text } from 'react-native'
+import { Conversations } from './components/conversations'
+import { ChatContext } from './context/chat_context'
+import { OauthToken } from './types'
 
-export function PCOChat({
-  token,
-  onTokenExpired,
-}: {
-  token?: OathToken
-  onTokenExpired: () => void
-}) {
-  const [conversations, setConversations] = useState<any>(null)
-  const styles = useStyles()
-
-  useEffect(() => {
-    if (!token) {
-      return
-    }
-
-    fetch('https://api.planningcenteronline.com/chat/v2/me/conversations', {
-      headers: {
-        Authorization: `Bearer ${token.access_token}`,
-      },
-    })
-      .then(validateResponse)
-      .then(response => response.json())
-      .then(setConversations)
-      .catch(error => {
-        if (error.message === 'Token expired') {
-          onTokenExpired()
-        }
-      })
-  }, [onTokenExpired, token])
-
-  return (
-    <FlatList
-      data={conversations?.data}
-      ListEmptyComponent={<Text>No conversations</Text>}
-      contentContainerStyle={styles.container}
-      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}
-      renderItem={({ item }) => <Text>{item.attributes.title}</Text>}
-    />
-  )
-}
-
-const useStyles = () => {
-  return StyleSheet.create({
-    container: { columnGap: 16 },
-    foo: { fontSize: 24 },
-  })
-}
-
-const validateResponse = (response: Response) => {
-  const isExpired = response.status === 401
-  if (isExpired) {
-    throw new Error('Token expired')
-  }
-
-  return response
-}
+export { ChatContext, Conversations, OauthToken as OathToken }

package/src/types.d.ts

@@ -0,0 +1,19 @@
+export type ConversationRecord = {
+  id: string
+  type: 'Conversation'
+  attributes: {
+    title: string
+    created_at: string
+    updated_at: string
+  }
+}
+
+export type OauthToken = {
+  subdomain: any
+  type: any
+  access_token: any
+  created_at: number
+  expires_in: any
+  person: any
+  refresh_token: any
+}