@planningcenter/chat-react-native 1.5.0 → 1.6.0

package/src/types/resources/conversation.ts

@@ -0,0 +1,15 @@
+import type { ResourceObject } from '../api_primitives'
+
+export interface ConversationResource extends ResourceObject {
+  title: string
+  subtitle: string
+  createdAt: string
+  updatedAt: string
+  repliesDisabled: boolean
+  lastMessageAuthorId: string
+  lastMessageAuthorName: string
+  lastMessageCreatedAt: string
+  lastMessageTextPreview: string
+  unreadCount: number
+  muted: boolean
+}

package/src/types/resources/index.ts

@@ -0,0 +1,4 @@
+export * from './conversation'
+export * from './message'
+export * from './person'
+export * from './oauth_token'

package/src/types/resources/message.ts

@@ -0,0 +1,18 @@
+import type { PersonResource } from './person'
+import type { ReactionCountResource } from './reaction'
+
+export interface MessageResource {
+  type: 'Message'
+  id: string
+  text: string
+  createdAt: string
+  textEditedAt: string | null
+  mine: boolean
+  attachments: unknown[]
+  author: PersonResource
+  reactionCounts: ReactionCountResource[]
+
+  // Custom Local Properties we set for rendering
+  renderAuthor?: boolean
+  renderTime?: boolean
+}

package/src/types/resources/oauth_token.ts

@@ -0,0 +1,8 @@
+export type OAuthToken = {
+  token_type: any
+  access_token: any
+  created_at: number
+  expires_in: any
+  scope: string
+  refresh_token: any
+}

package/src/types/resources/person.ts

@@ -0,0 +1,9 @@
+import { ResourceObject } from '../api_primitives'
+
+export interface PersonResource extends ResourceObject {
+  name: string
+  avatar: string
+  canChat: boolean
+  unreadCount: number
+  pcoChatEnabled: boolean
+}

package/src/types/resources/reaction.ts

@@ -0,0 +1,9 @@
+export interface ReactionCountResource {
+  type: 'ReactionCount'
+  id: string
+  value: 'thumbs_up' | 'thumbs_down' | 'pray' | 'laugh' | 'heart'
+  count: number
+  mine: number
+  messageId: string
+  authorIds: number[]
+}

package/src/types/utils/index.ts

@@ -0,0 +1,6 @@
+// Sets all the properties of of a deeply nested object to optional.
+// Example: `DeepPartial<ChatTheme>`
+
+export type DeepPartial<T> = {
+  [P in keyof T]?: DeepPartial<T[P]>
+}

package/src/utils/client/client.ts

@@ -1,4 +1,5 @@
-import { JSONAPIResponse } from '@planningcenter/chat-core'
+import { ApiCollection, ApiResource } from '../../types'
+import { Session } from '../session'
 import Uri from '../uri'
 import {
   concatRecords,
@@ -8,37 +9,34 @@ import {
   throwErrorIfFieldsMissing,
   throwErrorIfQueryParams,
 } from './request_helpers'
-import {
-  ApiClient,
-  DeleteRequest,
-  GetRequest,
-  PatchRequest,
-  PostRequest,
-  WalkRequest,
-} from './types'
-
-export class Client implements ApiClient {
+
+import { DeleteRequest, GetRequest, PatchRequest, PostRequest, WalkRequest } from './types'
+
+type ClientArgs = {
+  version: string
+  defaultHeaders?: Record<string, string>
+  onTokenExpired: () => void
+  session: Session
+  app: string
+}
+
+export class Client {
   version: string = ''
   defaultHeaders: Record<string, string> = {}
   uri: Uri
+  onTokenExpired: () => void
 
-  constructor({ version, defaultHeaders = {}, session, app }) {
+  constructor({ version, defaultHeaders = {}, session, app, onTokenExpired }: ClientArgs) {
     this.version = version
     this.uri = new Uri({ session, app })
-    this.defaultHeaders = {
-      Accept: 'application/vnd.api+json',
-      'Content-Type': 'application/json',
-      'X-PCO-API-Version': version,
-      ...this.uri.headers,
-      ...defaultHeaders,
-    }
+    this.defaultHeaders = defaultHeaders
+    this.onTokenExpired = onTokenExpired
   }
 
-  async get(args: GetRequest): Promise<JSONAPIResponse> {
+  async get<T extends ApiCollection | ApiResource>(args: GetRequest): Promise<T> {
     const { walk, ...data } = args.data
     const isWalking = Boolean(walk)
-    const { defaultHeaders } = this.config
-    const headers = { ...defaultHeaders, ...args.headers }
+    const headers = { ...this.headers, ...args.headers }
     const url = this.uri.appUrl(args.url)
 
     await throwErrorIfQueryParams(url)
@@ -71,42 +69,51 @@ export class Client implements ApiClient {
 
     const handler = isWalking ? walkRequest : makeRequest
 
-    return throwErrorIfFieldsMissing(handler, requestArgs)
+    return throwErrorIfFieldsMissing(handler, requestArgs).catch(this.handleTokenExpired)
   }
 
   async patch(args: PatchRequest) {
-    const { defaultHeaders } = this.config
-    const headers = { ...defaultHeaders, ...args.headers }
+    const headers = { ...this.headers, ...args.headers }
     const url = this.uri.appUrl(args.url)
 
     const requestArgs: MakeRequestArgs = { data: args.data, url, action: 'PATCH', headers }
 
-    return ensureNoQueryParamsInDev(makeRequest, requestArgs)
+    return ensureNoQueryParamsInDev(makeRequest, requestArgs).catch(this.handleTokenExpired)
   }
 
   async post(args: PostRequest) {
-    const { defaultHeaders } = this.config
-    const headers = { ...defaultHeaders, ...args.headers }
+    const headers = { ...this.headers, ...args.headers }
     const url = this.uri.appUrl(args.url)
 
     const requestArgs: MakeRequestArgs = { ...args, data: args.data, url, action: 'POST', headers }
 
-    return ensureNoQueryParamsInDev(makeRequest, requestArgs)
+    return ensureNoQueryParamsInDev(makeRequest, requestArgs).catch(this.handleTokenExpired)
   }
 
   async delete(args: DeleteRequest) {
-    const { defaultHeaders } = this.config
-    const headers = { ...defaultHeaders, ...args.headers }
+    const headers = { ...this.headers, ...args.headers }
     const url = this.uri.appUrl(args.url)
 
     const requestArgs: MakeRequestArgs = { url, action: 'DELETE', headers }
 
-    return makeRequest(requestArgs)
+    return makeRequest(requestArgs).catch(this.handleTokenExpired)
+  }
+
+  handleTokenExpired = (response: Response) => {
+    if (response.status === 401) {
+      this.onTokenExpired()
+    }
+
+    return Promise.reject(response)
   }
 
-  get config() {
+  get headers() {
     return {
-      defaultHeaders: this.defaultHeaders,
+      Accept: 'application/vnd.api+json',
+      'Content-Type': 'application/json',
+      'X-PCO-API-Version': this.version,
+      ...this.uri.headers,
+      ...this.defaultHeaders,
     }
   }
 }

package/src/utils/client/types.d.ts

@@ -21,6 +21,7 @@ export interface GetRequest extends GenericRequest {
     include?: string[]
     order?: string
     perPage?: number
+    offset?: number
     walk?: boolean
   }
 }
@@ -61,4 +62,5 @@ export type RequestData = {
   include: string[]
   data: Record<string, unknown>
   perPage: number
+  offset: number
 }

package/src/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './session'
 export * from './theme'
 export * from './styles'
+export * from './space'
 export * from './client'
 export * from './uri'

package/src/utils/session.ts

@@ -1,5 +1,4 @@
 import { OAuthToken } from '../types'
-import Uri from './uri'
 
 export type ENV = 'production' | 'staging' | 'development'
 
@@ -19,27 +18,17 @@ type SessionProps = { env?: ENV; token?: OAuthToken } | undefined
 export class Session {
   env: ENV
   token: OAuthToken | undefined
-  uri: Uri
 
   constructor(props?: SessionProps) {
     const { env = 'production', token } = props || {}
     this.env = env
     this.token = token
-    this.uri = new Uri({ session: this })
   }
 
   get isAuthenticated() {
     return Boolean(this.token)
   }
 
-  get host() {
-    return this.uri.host
-  }
-
-  get baseUrl() {
-    return this.uri.baseUrl
-  }
-
   toString() {
     return JSON.stringify({ env: this.env, token: this.token })
   }
@@ -53,5 +42,3 @@ export class Session {
     }
   }
 }
-
-export let session = new Session({ env: 'development' })

package/src/utils/styles.ts

@@ -1,7 +1,19 @@
 import { Platform } from 'react-native'
 import { tokens } from '../vendor/tapestry/tokens'
 
+export const MAX_FONT_SIZE_MULTIPLIER = 1.5
+
+export const platformFontWeightMedium = Platform.select({
+  ios: tokens.fontWeightMedium,
+  android: tokens.fontWeightBold,
+})
+
 export const platformFontWeightBold = Platform.select({
   ios: tokens.fontWeightSemiBold,
   android: tokens.fontWeightBold,
 })
+
+export const platformPressedOpacityStyle = Platform.select({
+  ios: { opacity: 0.5 },
+  android: { opacity: 1 },
+})

package/src/utils/theme.ts

@@ -51,19 +51,25 @@ export type TemporaryDefaultColorsType = Partial<ChatColors>
 
 interface ChatColors {
   name: string
-  temporaryButtonBackgroundColor: string
+  buttonStart: string | undefined
+  buttonEnd: string | undefined
+  interaction: string
   testColor: string
 }
 
 const colorsChatLight: ChatColors = {
   name: 'light',
-  temporaryButtonBackgroundColor: tokens.colorNeutral95,
+  buttonStart: undefined,
+  buttonEnd: undefined,
+  interaction: tokens.fillColorInteractionDefault,
   testColor: 'red',
 }
 
 const colorsChatDark: ChatColors = {
   name: 'dark',
-  temporaryButtonBackgroundColor: tokens.colorNeutral17,
+  buttonStart: undefined,
+  buttonEnd: undefined,
+  interaction: tokens.fillColorInteractionDefaultDark,
   testColor: 'blue',
 }
 

package/src/vendor/tapestry/alias_tokens_color_map.ts

@@ -63,6 +63,10 @@ interface SemanticAliasesColors {
   textColorDefaultPlaceholder: string
   textColorDefaultInverted: string
   fillColorInteractionOnlineDefault: string
+  fillColorInteractionDefault: string
+  fillColorStatusErrorMedium: string
+  fillColorButtonNeutralSolidDisabled: string
+  androidRippleNeutral: string
 }
 
 const semanticAliasesLight: SemanticAliasesColors = {
@@ -79,6 +83,10 @@ const semanticAliasesLight: SemanticAliasesColors = {
   textColorDefaultPlaceholder: neutralsLight.fillColorNeutral030,
   textColorDefaultInverted: tokens.colorNeutral100White,
   fillColorInteractionOnlineDefault: tokens.colorInteractionOnlineDefault,
+  fillColorInteractionDefault: tokens.fillColorInteractionDefault,
+  fillColorStatusErrorMedium: tokens.fillColorStatusErrorMedium,
+  fillColorButtonNeutralSolidDisabled: neutralsLight.fillColorNeutral070,
+  androidRippleNeutral: tokens.fillColorTransparencyDark020,
 } as const
 
 const semanticAliasesDark: SemanticAliasesColors = {
@@ -95,6 +103,10 @@ const semanticAliasesDark: SemanticAliasesColors = {
   textColorDefaultPlaceholder: neutralsDark.fillColorNeutral030,
   textColorDefaultInverted: tokens.colorNeutral7,
   fillColorInteractionOnlineDefault: tokens.colorInteractionOnlineDefault,
+  fillColorInteractionDefault: tokens.fillColorInteractionDefaultDark,
+  fillColorStatusErrorMedium: tokens.fillColorStatusErrorMedium,
+  fillColorButtonNeutralSolidDisabled: neutralsDark.fillColorNeutral070,
+  androidRippleNeutral: tokens.fillColorTransparencyLight020,
 }
 
 export const aliasTokensColorMap = {

package/src/vendor/tapestry/tokens.ts

@@ -21,6 +21,25 @@ const colorPrimitives = {
   colorNeutral97: 'hsl(0, 0%, 97%)',
   colorNeutral98: 'hsl(0, 0%, 98%)',
   colorNeutral100White: 'hsl(0, 0%, 100%)',
+  fillColorInteractionDefault: 'hsl(204, 100%, 40%)',
+  fillColorTransparencyLight010: 'hsla(0, 0%, 100%, 0.1)',
+  fillColorTransparencyLight020: 'hsla(0, 0%, 100%, 0.2)',
+  fillColorTransparencyLight030: 'hsla(0, 0%, 100%, 0.3)',
+  fillColorTransparencyLight040: 'hsla(0, 0%, 100%, 0.4)',
+  fillColorTransparencyLight050: 'hsla(0, 0%, 100%, 0.5)',
+  fillColorTransparencyLight060: 'hsla(0, 0%, 100%, 0.6)',
+  fillColorTransparencyLight070: 'hsla(0, 0%, 100%, 0.7)',
+  fillColorTransparencyLight080: 'hsla(0, 0%, 100%, 0.8)',
+  fillColorTransparencyLight090: 'hsla(0, 0%, 100%, 0.9)',
+  fillColorTransparencyDark010: 'hsla(0, 0%, 0%, 0.1)',
+  fillColorTransparencyDark020: 'hsla(0, 0%, 0%, 0.2)',
+  fillColorTransparencyDark030: 'hsla(0, 0%, 0%, 0.3)',
+  fillColorTransparencyDark040: 'hsla(0, 0%, 0%, 0.4)',
+  fillColorTransparencyDark050: 'hsla(0, 0%, 0%, 0.5)',
+  fillColorTransparencyDark060: 'hsla(0, 0%, 0%, 0.6)',
+  fillColorTransparencyDark070: 'hsla(0, 0%, 0%, 0.7)',
+  fillColorTransparencyDark080: 'hsla(0, 0%, 0%, 0.8)',
+  fillColorTransparencyDark090: 'hsla(0, 0%, 0%, 0.9)',
 } as const
 
 const numericPrimtives = {
@@ -62,6 +81,8 @@ const numericAliases = {
 // These tokens are specfic to Chat will not be replaced by the Tapestry library
 const localChatTokens = {
   colorInteractionOnlineDefault: 'hsl(123, 38%, 57%)',
+  fillColorInteractionDefaultDark: 'hsl(204, 100%, 40%)',
+  fillColorStatusErrorMedium: 'hsl(0, 72%, 45%)',
 } as const
 
 export const tokens = {

package/build/utils/api.d.ts

@@ -1,9 +0,0 @@
-export default function apiRequest<T = unknown>(url: string, { method, data }?: {
-    method?: string | undefined;
-    data?: null | undefined;
-}): Promise<{
-    json: T;
-    ok: boolean;
-    response: Response;
-}>;
-//# sourceMappingURL=api.d.ts.map

package/build/utils/api.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../src/utils/api.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,GAAG,OAAO,EAC5C,GAAG,EAAE,MAAM,EACX,EAAE,MAAc,EAAE,IAAW,EAAE;;;CAAK,GACnC,OAAO,CAAC;IAAE,IAAI,EAAE,CAAC,CAAC;IAAC,EAAE,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,QAAQ,CAAA;CAAE,CAAC,CAuBvD"}

package/build/utils/api.js

@@ -1,36 +0,0 @@
-import DeviceInfo from 'react-native-device-info';
-import { session } from './session';
-const brand = DeviceInfo.getBrand();
-const model = DeviceInfo.getModel();
-const systemName = DeviceInfo.getSystemName();
-const systemVersion = DeviceInfo.getSystemVersion();
-const readableVersion = DeviceInfo.getReadableVersion();
-const appName = DeviceInfo.getApplicationName();
-export default function apiRequest(url, { method = 'GET', data = null } = {}) {
-    const options = {
-        headers: {
-            Accept: 'application/vnd.api+json',
-            'Content-Type': 'application/json',
-            'User-Agent': `${appName}/${readableVersion} (${brand}, ${model}, ${systemName}, ${systemVersion})`,
-            Authorization: `Bearer ${session.token?.access_token}`,
-        },
-        method,
-    };
-    if (data && method !== 'GET') {
-        options.body = JSON.stringify(data);
-    }
-    return fetch(url, options)
-        .then(validateResponse)
-        .then(response => response
-        .json()
-        .then(json => ({ json: json, ok: response.ok, response }))
-        .catch(() => ({ json: null, ok: response.ok, response })));
-}
-const validateResponse = (response) => {
-    const isExpired = response.status === 401;
-    if (isExpired) {
-        throw new Error('Token expired');
-    }
-    return response;
-};
-//# sourceMappingURL=api.js.map

package/build/utils/api.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"api.js","sourceRoot":"","sources":["../../src/utils/api.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC,MAAM,KAAK,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAA;AACnC,MAAM,KAAK,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAA;AACnC,MAAM,UAAU,GAAG,UAAU,CAAC,aAAa,EAAE,CAAA;AAC7C,MAAM,aAAa,GAAG,UAAU,CAAC,gBAAgB,EAAE,CAAA;AACnD,MAAM,eAAe,GAAG,UAAU,CAAC,kBAAkB,EAAE,CAAA;AACvD,MAAM,OAAO,GAAG,UAAU,CAAC,kBAAkB,EAAE,CAAA;AAE/C,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,GAAW,EACX,EAAE,MAAM,GAAG,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,EAAE;IAEpC,MAAM,OAAO,GAAgB;QAC3B,OAAO,EAAE;YACP,MAAM,EAAE,0BAA0B;YAClC,cAAc,EAAE,kBAAkB;YAClC,YAAY,EAAE,GAAG,OAAO,IAAI,eAAe,KAAK,KAAK,KAAK,KAAK,KAAK,UAAU,KAAK,aAAa,GAAG;YACnG,aAAa,EAAE,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,EAAE;SACvD;QACD,MAAM;KACP,CAAA;IAED,IAAI,IAAI,IAAI,MAAM,KAAK,KAAK,EAAE,CAAC;QAC7B,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;IACrC,CAAC;IAED,OAAO,KAAK,CAAC,GAAG,EAAE,OAAO,CAAC;SACvB,IAAI,CAAC,gBAAgB,CAAC;SACtB,IAAI,CAAC,QAAQ,CAAC,EAAE,CACf,QAAQ;SACL,IAAI,EAAE;SACN,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAS,EAAE,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;SAC9D,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAS,EAAE,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,CACjE,CAAA;AACL,CAAC;AAED,MAAM,gBAAgB,GAAG,CAAC,QAAkB,EAAE,EAAE;IAC9C,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,KAAK,GAAG,CAAA;IAEzC,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC,CAAA;IAClC,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA","sourcesContent":["import DeviceInfo from 'react-native-device-info'\nimport { session } from './session'\n\nconst brand = DeviceInfo.getBrand()\nconst model = DeviceInfo.getModel()\nconst systemName = DeviceInfo.getSystemName()\nconst systemVersion = DeviceInfo.getSystemVersion()\nconst readableVersion = DeviceInfo.getReadableVersion()\nconst appName = DeviceInfo.getApplicationName()\n\nexport default function apiRequest<T = unknown>(\n  url: string,\n  { method = 'GET', data = null } = {}\n): Promise<{ json: T; ok: boolean; response: Response }> {\n  const options: RequestInit = {\n    headers: {\n      Accept: 'application/vnd.api+json',\n      'Content-Type': 'application/json',\n      'User-Agent': `${appName}/${readableVersion} (${brand}, ${model}, ${systemName}, ${systemVersion})`,\n      Authorization: `Bearer ${session.token?.access_token}`,\n    },\n    method,\n  }\n\n  if (data && method !== 'GET') {\n    options.body = JSON.stringify(data)\n  }\n\n  return fetch(url, options)\n    .then(validateResponse)\n    .then(response =>\n      response\n        .json()\n        .then(json => ({ json: json as T, ok: response.ok, response }))\n        .catch(() => ({ json: null as T, ok: response.ok, response }))\n    )\n}\n\nconst validateResponse = (response: Response) => {\n  const isExpired = response.status === 401\n\n  if (isExpired) {\n    throw new Error('Token expired')\n  }\n\n  return response\n}\n"]}

package/src/types.d.ts

@@ -1,35 +0,0 @@
-export type ConversationRecord = {
-  id: string
-  type: 'Conversation'
-  attributes: {
-    title: string
-    created_at: string
-    updated_at: string
-  }
-}
-
-export type OAuthToken = {
-  token_type: any
-  access_token: any
-  created_at: number
-  expires_in: any
-  scope: string
-  refresh_token: any
-}
-
-// Sets all the properties of of a deeply nested object to optional.
-// Example: `DeepPartial<ChatTheme>`
-export type DeepPartial<T> = {
-  [P in keyof T]?: DeepPartial<T[P]>
-}
-
-export type RootStackParamList = {
-  Settings: undefined
-  Conversations: undefined
-}
-
-declare global {
-  namespace ReactNavigation {
-    interface RootParamList extends RootStackParamList {}
-  }
-}

package/src/utils/api.ts

@@ -1,47 +0,0 @@
-import DeviceInfo from 'react-native-device-info'
-import { session } from './session'
-
-const brand = DeviceInfo.getBrand()
-const model = DeviceInfo.getModel()
-const systemName = DeviceInfo.getSystemName()
-const systemVersion = DeviceInfo.getSystemVersion()
-const readableVersion = DeviceInfo.getReadableVersion()
-const appName = DeviceInfo.getApplicationName()
-
-export default function apiRequest<T = unknown>(
-  url: string,
-  { method = 'GET', data = null } = {}
-): Promise<{ json: T; ok: boolean; response: Response }> {
-  const options: RequestInit = {
-    headers: {
-      Accept: 'application/vnd.api+json',
-      'Content-Type': 'application/json',
-      'User-Agent': `${appName}/${readableVersion} (${brand}, ${model}, ${systemName}, ${systemVersion})`,
-      Authorization: `Bearer ${session.token?.access_token}`,
-    },
-    method,
-  }
-
-  if (data && method !== 'GET') {
-    options.body = JSON.stringify(data)
-  }
-
-  return fetch(url, options)
-    .then(validateResponse)
-    .then(response =>
-      response
-        .json()
-        .then(json => ({ json: json as T, ok: response.ok, response }))
-        .catch(() => ({ json: null as T, ok: response.ok, response }))
-    )
-}
-
-const validateResponse = (response: Response) => {
-  const isExpired = response.status === 401
-
-  if (isExpired) {
-    throw new Error('Token expired')
-  }
-
-  return response
-}