@planningcenter/chat-react-native 1.5.0 → 1.6.0

package/src/components/display/text.tsx

@@ -1,24 +1,41 @@
 import { useTheme } from '../../hooks'
 import React from 'react'
-import {
-  Platform,
-  StyleSheet,
-  Text as ReactNativeText,
-  TextProps as ReactNativeTextProps,
-} from 'react-native'
+import { Platform, StyleSheet, Text as ReactNativeText } from 'react-native'
+import type { TextStyle, TextProps as ReactNativeTextProps } from 'react-native'
 import { tokens } from '../../vendor/tapestry/tokens'
 
-interface TextProps extends ReactNativeTextProps {
-  variant?: 'plain' | 'secondary' | 'tertiary' | 'footnote'
+// =================================
+// ====== Constants ================
+// =================================
+
+const VARIANTS = {
+  plain: 'plain',
+  secondary: 'secondary',
+  tertiary: 'tertiary',
+  footnote: 'footnote',
+} as const
+
+type VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS]
+type VariantStyles = Record<VariantUnion, TextStyle>
+
+// =================================
+// ====== Component ================
+// =================================
+
+export interface TextProps extends ReactNativeTextProps {
+  /**
+   * Changes the styles and size of the text.
+   */
+  variant?: VariantUnion
 }
 
 export function Text({ style, variant = 'plain', children, ...props }: TextProps) {
   const styles = useStyles()
-  const variantStyleMap = {
-    plain: styles.plain,
-    secondary: styles.secondary,
-    tertiary: styles.tertiary,
-    footnote: styles.footnote,
+  const variantStyleMap: VariantStyles = {
+    [VARIANTS.plain]: styles.plain,
+    [VARIANTS.secondary]: styles.secondary,
+    [VARIANTS.tertiary]: styles.tertiary,
+    [VARIANTS.footnote]: styles.footnote,
   }
 
   return (
@@ -28,6 +45,10 @@ export function Text({ style, variant = 'plain', children, ...props }: TextProps
   )
 }
 
+// =================================
+// ====== Styles ===================
+// =================================
+
 const useStyles = () => {
   const { colors } = useTheme()
   return StyleSheet.create({

package/src/components/display/text_button.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import { Pressable, StyleSheet } from 'react-native'
+import type { PressableProps } from 'react-native'
+import { useTheme } from '../../hooks'
+import { platformFontWeightMedium } from '../../utils'
+import { Text } from './text'
+import type { TextProps } from './text'
+import { getColorKey, useColorOptionMap } from './button_color_utils'
+import type { AppearanceUnion } from './button_color_utils'
+
+// =================================
+// ====== Component ================
+// =================================
+
+interface TextButtonProps extends PressableProps {
+  /**
+   * Specifies whether fonts should be scaled down automatically to fit given style constraints.
+   */
+  adjustsFontSizeToFit?: boolean
+  /**
+   * Specifies whether fonts should scale to respect the device's text size accessibility settings. The default is true.
+   */
+  allowFontScaling?: boolean
+  /**
+   * Updates the button's colors
+   */
+  appearance?: AppearanceUnion
+  /**
+   * Renders text within a `Text`
+   */
+  children?: TextProps['children']
+  /**
+   * Specifies the maximum size a font can reach when allowFontScaling is enabled.
+   */
+  maxFontSizeMultiplier?: number
+  /**
+   * Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).
+   */
+  minimumFontScale?: number
+  /**
+   * Fill buttons are visually more propmonitent then outline buttons
+   */
+  variant?: TextProps['variant']
+}
+
+export function TextButton({
+  adjustsFontSizeToFit = false,
+  allowFontScaling = true,
+  appearance = 'primary',
+  disabled = false,
+  children,
+  maxFontSizeMultiplier,
+  minimumFontScale,
+  variant = 'plain',
+  ...props
+}: TextButtonProps) {
+  const styles = useStyles({ appearance, disabled })
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={disabled}
+      style={({ pressed }) => pressed && styles.pressed} // Android & iOS intentionally get the same pressed style
+      {...props}
+    >
+      <Text
+        adjustsFontSizeToFit={adjustsFontSizeToFit}
+        allowFontScaling={allowFontScaling}
+        maxFontSizeMultiplier={maxFontSizeMultiplier}
+        minimumFontScale={minimumFontScale}
+        numberOfLines={1}
+        style={[styles.text, disabled && styles.disabled]}
+        variant={variant}
+      >
+        {children}
+      </Text>
+    </Pressable>
+  )
+}
+
+// =================================
+// ====== Styles ===================
+// =================================
+
+const useStyles = ({ appearance = 'primary', disabled = false }: Partial<TextButtonProps>) => {
+  const { colors } = useTheme()
+  const colorKey = getColorKey({ disabled, appearance })
+  const colorOptionMap = useColorOptionMap()
+
+  return StyleSheet.create({
+    text: {
+      fontWeight: platformFontWeightMedium,
+      color: colorOptionMap[colorKey],
+    },
+    disabled: {
+      color: colors.textColorDefaultDisabled,
+    },
+    pressed: {
+      opacity: 0.5,
+    },
+  })
+}

package/src/components/display/text_inline_button.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react'
+import { Platform, StyleSheet } from 'react-native'
+import { useTheme } from '../../hooks'
+import { Text } from './text'
+import type { TextProps } from './text'
+import { platformFontWeightMedium } from '../../utils'
+import colorFunction from 'color'
+import { getColorKey, useColorOptionMap } from './button_color_utils'
+import type { AppearanceUnion } from './button_color_utils'
+
+// =================================
+// ====== Component ================
+// =================================
+
+interface TextInlineButtonProps extends TextProps {
+  /**
+   * Updates the button's colors
+   */
+  appearance?: AppearanceUnion
+}
+
+export function TextInlineButton({
+  appearance = 'primary',
+  children,
+  disabled = false,
+  onPress,
+  ...props
+}: TextInlineButtonProps) {
+  const styles = useStyles({ appearance, disabled })
+  const [isPressed, setIsPressed] = useState(false)
+
+  const platformPressedStyle = Platform.select({
+    ios: null,
+    android: styles.pressedAndroid,
+  })
+
+  return (
+    <Text
+      accessibilityRole="button"
+      numberOfLines={1}
+      style={[
+        styles.text,
+        styles.underline,
+        disabled && styles.disabled,
+        isPressed && platformPressedStyle,
+      ]}
+      onPress={!disabled ? onPress : undefined}
+      onPressIn={() => setIsPressed(true)}
+      onPressOut={() => setIsPressed(false)}
+      {...props}
+    >
+      {children}
+    </Text>
+  )
+}
+
+// =================================
+// ====== Styles ===================
+// =================================
+
+const useStyles = ({
+  appearance = 'primary',
+  disabled = false,
+}: Partial<TextInlineButtonProps>) => {
+  const { colors } = useTheme()
+  const colorKey = getColorKey({ disabled, appearance })
+  const colorOptionMap = useColorOptionMap()
+
+  // Android doesn't show a "pressed" state and so we need to simulate it.
+  // Lowering the Text's opacity doesn't work as it inherits it's parent's Text's opacity.
+  // We can simulate the effect by changing the color's opacity instead.
+  const pressedColor = colorFunction(colorOptionMap[colorKey]).alpha(0.5).string()
+
+  return StyleSheet.create({
+    text: {
+      fontWeight: platformFontWeightMedium,
+      color: colorOptionMap[colorKey],
+    },
+    underline: {
+      textDecorationLine: 'underline',
+      textDecorationColor: colorOptionMap[colorKey],
+      textDecorationStyle: 'solid',
+    },
+    disabled: {
+      color: colors.textColorDefaultDisabled,
+    },
+    pressedAndroid: {
+      color: pressedColor,
+    },
+  })
+}

package/src/components/index.tsx

@@ -1,2 +1,3 @@
 export * from './conversations'
 export * from './error_boundary'
+export * from './display'

package/src/components/primitive/avatar_primitive.tsx

@@ -94,7 +94,7 @@ interface AvatarRootProps {
 
 function AvatarRoot({ children, size = 'md' }: AvatarRootProps) {
   const [allImagesLoaded, setAllImagesLoaded] = useState(false)
-  const styles = useStyles(size)
+  const styles = useStyles({ size })
 
   return (
     <AvatarContext.Provider value={{ size, allImagesLoaded, setAllImagesLoaded }}>
@@ -127,14 +127,14 @@ AvatarMask.displayName = 'Avatar.Mask'
 // ====== AvatarImage   ============
 // =================================
 
-interface AvatarImageProps extends Omit<ImageProps, 'source'> {
+interface AvatarImageProps extends Omit<ImageProps, 'source' | 'alt'> {
   sourceUri: string
 }
 
 function AvatarImage({ sourceUri, ...props }: AvatarImageProps) {
   const { size } = useAvatarContext()
 
-  return <Image source={{ uri: sourceUri }} loaderSize={AVATAR_PX[size]} {...props} />
+  return <Image source={{ uri: sourceUri }} loaderSize={AVATAR_PX[size]} {...props} alt="" />
 }
 
 AvatarImage.displayName = 'Avatar.Image'
@@ -152,6 +152,7 @@ function AvatarGroupImage({ sourceUri, style, onLoad }: AvatarGroupImageProps) {
       loadingEnabled={false}
       wrapperStyle={style}
       onLoad={onLoad}
+      alt=""
     />
   )
 }
@@ -279,7 +280,7 @@ AvatarGroup.displayName = 'Avatar.Group'
 
 function AvatarGroupLoader() {
   const { size, allImagesLoaded } = useAvatarContext()
-  const styles = useStyles(size)
+  const styles = useStyles({ size })
 
   if (allImagesLoaded) return null
 
@@ -302,7 +303,7 @@ interface AvatarPresenceProps extends ViewProps {
 
 function AvatarPresence({ presence, ...props }: AvatarPresenceProps) {
   const { size } = useAvatarContext()
-  const styles = useStyles(size, presence)
+  const styles = useStyles({ size, presence })
 
   return <View style={styles.presence} {...props} />
 }
@@ -313,7 +314,12 @@ AvatarPresence.displayName = 'Avatar.Presence'
 // ====== Styles ===================
 // =================================
 
-const useStyles = (size: AvatarSize = 'md', presence: AvatarPresenceType = 'offline') => {
+interface Styles {
+  size?: AvatarSize
+  presence?: AvatarPresenceType
+}
+
+const useStyles = ({ size = 'md', presence = 'offline' }: Styles = {}) => {
   const { colors } = useTheme()
   const PRESENCE_COLOR = {
     online: colors.fillColorInteractionOnlineDefault,

package/src/contexts/api_provider.tsx

@@ -1,53 +1,45 @@
-import { JSONAPIResponse } from '@planningcenter/chat-core'
 import { QueryClient, QueryClientProvider, QueryKey } from '@tanstack/react-query'
 import React, { useEffect } from 'react'
 import { ViewProps } from 'react-native'
-import { OAuthToken } from '../types'
-import apiRequest from '../utils/api'
-import { ENV, session } from '../utils/session'
-import Uri from '../utils/uri'
+import { Client } from '../utils'
+import { GetRequest } from '../utils/client/types'
 
-let handleTokenExpired: () => void
+let apiClient: Client | undefined
 
 const defaultQueryFn = ({ queryKey }: { queryKey: QueryKey }) => {
-  if (!session.token) {
+  if (!apiClient) {
     throw new Error('No token present')
   }
 
-  const uri = new Uri({ session })
-  const url = uri.api(queryKey[0])
-
-  return apiRequest<JSONAPIResponse>(url)
-    .then(r => r.json)
-    .catch(error => {
-      if (error.message === 'Token expired') {
-        handleTokenExpired()
-      }
-      return null
-    })
+  const data = queryKey[0] as GetRequest
+
+  return apiClient.get(data)
 }
 
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       queryFn: defaultQueryFn,
+      retry: 3,
     },
   },
 })
 
 export function ApiProvider({
   children,
-  env = 'production',
-  token,
-  onTokenExpired,
-}: ViewProps & { env?: ENV; token?: OAuthToken; onTokenExpired: () => void }) {
-  session.env = env
-  session.token = token
-  handleTokenExpired = onTokenExpired
+  client,
+  sessionChanged,
+}: ViewProps & { client: Client; sessionChanged: boolean }) {
+  useEffect(() => {
+    apiClient = client
+  }, [client])
 
+  // TODO: CREATE CALLBACK TO INVALIDATE QUERIES
   useEffect(() => {
+    if (!sessionChanged) return
+
     queryClient.invalidateQueries()
-  }, [env, token])
+  }, [sessionChanged])
 
   return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 }

package/src/contexts/chat_context.tsx

@@ -1,39 +1,93 @@
 import { merge } from 'lodash'
-import React, { createContext, useMemo } from 'react'
+import React, { createContext, useEffect, useMemo, useRef } from 'react'
 import { ColorSchemeName, useColorScheme } from 'react-native'
 import { DeepPartial, OAuthToken } from '../types'
 import { defaultTheme, DefaultTheme } from '../utils/theme'
 import { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'
 import { ApiProvider } from './api_provider'
+import { Client, ENV, Session } from '../utils'
 
-type ContextValue = {
+type ChatContextValue = {
   token?: OAuthToken
   onTokenExpired: () => void
   theme: any
-  env?: 'production' | 'staging' | 'development'
+  env?: ENV
+  client: Client
 }
 
-export const ChatContext = createContext<ContextValue>({
+const defaultChatClient = new Client({
+  app: 'chat',
+  session: new Session(),
+  version: '2018-11-01',
+  onTokenExpired: () => null,
+})
+
+export const ChatContext = createContext<ChatContextValue>({
   theme: undefined,
   token: undefined,
   env: undefined,
   onTokenExpired: () => {},
+  client: defaultChatClient,
 })
 
-export function ChatProvider({ children, value }: { children: any; value: ContextValue }) {
+export function ChatProvider({
+  children,
+  value,
+}: {
+  children: any
+  value: Omit<ChatContextValue, 'client'>
+}) {
+  const { env, token, onTokenExpired } = value
   const theme = useCreateChatTheme(value.theme)
+  const session = useMemo(() => new Session({ token, env }), [env, token])
+  const client = useMemo(
+    () =>
+      new Client({
+        app: 'chat',
+        session,
+        version: '2018-11-01',
+        onTokenExpired,
+      }),
+    [onTokenExpired, session]
+  )
+  const sessionChanged = useSessionChanged({ token, env })
+
+  const contextValue: ChatContextValue = {
+    env,
+    token,
+    onTokenExpired,
+    theme,
+    client,
+  }
 
   if (!Object.keys(value.token || {}).length) return null
 
   return (
-    <ChatContext.Provider value={{ ...value, theme }}>
-      <ApiProvider env={value.env} token={value.token} onTokenExpired={value.onTokenExpired}>
+    <ChatContext.Provider value={contextValue}>
+      <ApiProvider sessionChanged={sessionChanged} client={client}>
         {children}
       </ApiProvider>
     </ChatContext.Provider>
   )
 }
 
+function useSessionChanged(value: Pick<ChatContextValue, 'token' | 'env'>): boolean {
+  const { token: newToken, env: newEnv } = value
+  const { token: prevToken, env: prevEnv } = usePrevious<typeof value>(value)
+
+  return Boolean(prevToken && newToken !== prevToken) || Boolean(prevEnv && newEnv !== prevEnv)
+}
+
+function usePrevious<T>(value) {
+  const ref = useRef<T>(value)
+
+  useEffect(() => {
+    ref.current = value
+  }, [value])
+
+  return ref.current
+}
+
 interface CreateChatThemeProps {
   theme?: DeepPartial<DefaultTheme>
   colorScheme?: ColorSchemeName

package/src/hooks/index.ts

@@ -1,2 +1,6 @@
 export * from './use_async_storage'
 export * from './use_theme'
+export * from './use_suspense_api'
+export * from './use_current_person'
+export * from './use_font_scale'
+export * from './use_create_android_ripple_color'

package/src/hooks/use_create_android_ripple_color.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react'
+import colorFunction from 'color'
+import { useTheme } from './use_theme'
+
+export const useCreateAndroidRippleColor = ({ color }: { color: string }) => {
+  const { colors } = useTheme()
+  const intensity = colors.name === 'dark' ? 0.4 : 0.35
+
+  const androidRippleColor = useMemo(() => {
+    return colorFunction(color)
+      .hsl()
+      [colors.name === 'dark' ? 'lighten' : 'darken'](intensity)
+      .alpha(intensity)
+      .string()
+  }, [color, colors.name, intensity])
+
+  return androidRippleColor
+}

package/src/hooks/use_current_person.ts

@@ -0,0 +1,15 @@
+import { PersonResource } from '../types'
+import { useSuspenseGet } from './use_suspense_api'
+
+export const useCurrentPerson = () => {
+  const { data: person } = useSuspenseGet<PersonResource>({
+    url: '/me',
+    data: {
+      fields: {
+        Person: ['id', 'name', 'avatar', 'unread_count', 'pco_chat_enabled'],
+      },
+    },
+  })
+
+  return person
+}

package/src/hooks/use_font_scale.ts

@@ -0,0 +1,9 @@
+import { useWindowDimensions } from 'react-native'
+
+export const useFontScale = ({ maxFontSizeMultiplier }: { maxFontSizeMultiplier?: number }) => {
+  const { fontScale: nativeFontScale } = useWindowDimensions()
+  const scaleLimit = maxFontSizeMultiplier || nativeFontScale
+  const fontScale = Math.min(scaleLimit, nativeFontScale)
+
+  return fontScale
+}

package/src/hooks/use_suspense_api.ts

@@ -0,0 +1,60 @@
+import { InfiniteData, useSuspenseInfiniteQuery, useSuspenseQuery } from '@tanstack/react-query'
+import { useContext } from 'react'
+import { ChatContext } from '../contexts'
+import { ApiCollection, ApiResource, ResourceObject } from '../types'
+import { GetRequest, RequestData } from '../utils/client/types'
+
+export const useSuspenseGet = <T extends ResourceObject | ResourceObject[]>(args: GetRequest) => {
+  type Resource = T extends ResourceObject ? ApiResource<T> : ApiCollection<T>
+
+  const { data, ...query } = useSuspenseQuery<Resource, Response>({
+    queryKey: [args],
+  })
+
+  return { ...data, ...query }
+}
+
+type NextMeta = Partial<{
+  offset: string
+  idLt: string
+}>
+
+export const useSuspensePaginator = <T extends ResourceObject>(args: GetRequest) => {
+  const { client } = useContext(ChatContext)
+  const query = useSuspenseInfiniteQuery<
+    ApiCollection<T>,
+    Response,
+    InfiniteData<ApiCollection<T>>,
+    any,
+    Partial<RequestData> | undefined
+  >({
+    queryKey: [args.url, args.data],
+    queryFn: ({ pageParam }) => {
+      const pageParmWhere = pageParam?.where || {}
+      const argsWhere = args.data.where || {}
+      const where = { ...argsWhere, ...pageParmWhere }
+
+      const offset = pageParam?.offset || args.data.offset
+      const data = { ...args.data, where, offset }
+
+      return client.get({
+        url: args.url,
+        data,
+      })
+    },
+    initialPageParam: {} as Partial<RequestData>,
+    getNextPageParam: lastPage => {
+      const next: NextMeta = lastPage.meta?.next || {}
+      const { offset, idLt } = next
+
+      if (idLt) return { where: { id_lt: idLt } }
+      if (offset) return { offset: Number(offset) }
+
+      return undefined
+    },
+  })
+
+  const data: T[] = query.data?.pages.flatMap(page => page.data) || []
+
+  return { ...query, data }
+}

package/src/navigation/index.tsx

@@ -5,7 +5,8 @@ import { NotFound } from '../screens/not_found'
 import { ScreenLayout } from './screenLayout'
 import { ConversationsScreen } from '../screens/conversations_screen'
 import { ConversationScreen } from '../screens/conversation_screen'
-import { HeaderBackButton } from '@react-navigation/elements'
+import { HeaderBackButton, PlatformPressable } from '@react-navigation/elements'
+import { Icon } from '../components'
 
 export const ChatStack = createNativeStackNavigator({
   screenLayout: ScreenLayout,
@@ -13,9 +14,18 @@ export const ChatStack = createNativeStackNavigator({
     Conversations: {
       screen: ConversationsScreen,
       options: ({ route, navigation }) => ({
-        headerTitle: (route.params as { title?: string })?.title ?? 'Conversations',
-        // This goes back on the parent so it doesn't automatically show up on the first screen
-        headerLeft: () => <HeaderBackButton onPress={navigation.goBack} />,
+        headerTitle: (route.params as { title?: string })?.title ?? 'Chat',
+        headerLeft: () => (
+          <PlatformPressable onPress={() => null}>
+            <Icon name="general.threeReducingHorizontalBars" size={18} />
+          </PlatformPressable>
+        ),
+        headerRight: () => (
+          <HeaderBackButton
+            onPress={navigation.goBack}
+            backImage={() => <Icon name="general.x" size={18} />}
+          />
+        ),
       }),
     },
     Conversation: {