@planningcenter/chat-react-native 2.2.1 → 2.2.2-rc.1

package/src/screens/conversation_details_screen.tsx

@@ -1,11 +1,20 @@
+import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  type SetStateAction,
+  type Dispatch,
+  type ReactNode,
+} from 'react'
 import {
-  StaticScreenProps,
-  useNavigation,
-  useTheme as useNavigationTheme,
-} from '@react-navigation/native'
-import React, { PropsWithChildren, useCallback, useEffect, useState } from 'react'
-import { FlatList, StyleSheet, TextInput, View } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
+  StyleSheet,
+  TextInput,
+  View,
+  type TextStyle,
+  type ViewStyle,
+  type ViewProps,
+} from 'react-native'
 import { Avatar, Badge, Heading, Icon, Switch, Text } from '../components'
 import { useSuspenseGet, useTheme } from '../hooks'
 import {
@@ -13,19 +22,55 @@ import {
   useConversationMute,
   useConversationUpdate,
 } from '../hooks/use_conversation'
-import { MemberResource } from '../types'
+import { MemberBadge, MemberResource, isDefined } from '../types'
 import { HeaderRightButton } from '../navigation/header'
+import { FlashList } from '@shopify/flash-list'
+import { space } from '../utils'
+
+// =========================================
+// ====== Factory Constants & Types ========
+// =========================================
+
+enum SectionTypes {
+  header,
+  hidden,
+  members,
+  setting,
+  view,
+}
+
+type SectionListData = Array<
+  | DataItem<{ title: string }, SectionTypes.header>
+  | DataItem<MemberResource, SectionTypes.members>
+  | DataItem<ViewProps, SectionTypes.view>
+  | DataItem<{ title: string }, SectionTypes.setting>
+  | DataItem<any, SectionTypes.hidden>
+>
+
+interface DataItem<T, TName extends SectionTypes> {
+  type: TName
+  data: T
+  sectionStyle?: ViewStyle
+}
+
+// =================================
+// ====== Components ===============
+// =================================
 
 export type ConversationDetailsScreenProps = StaticScreenProps<{
   conversation_id: string
 }>
 
 export function ConversationDetailsScreen({ route }: ConversationDetailsScreenProps) {
-  const styles = useStyles()
   const navigation = useNavigation()
+  const styles = useStyles()
+
   const { data: conversation } = useConversation(route.params)
-  const canUpdate = conversation.memberAbility?.canUpdate
+  const [title, setTitle] = useState(conversation.title)
+  const { muted, setMuted } = useConversationMute(route.params)
+  const { mutate: saveTitle } = useConversationUpdate(route.params)
 
+  const canUpdate = conversation.memberAbility?.canUpdate || false
   const { data: members } = useSuspenseGet<MemberResource[]>({
     url: `/me/conversations/${route.params.conversation_id}/members`,
     data: {
@@ -36,9 +81,11 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     },
   })
 
-  const { muted, setMuted } = useConversationMute(route.params)
-  const { mutate: saveTitle } = useConversationUpdate(route.params)
-  const [title, setTitle] = useState(conversation.title)
+  const memberItems = members.map(data => ({
+    type: SectionTypes.members,
+    data,
+  }))
+
   const HeaderRight = useCallback(() => {
     return (
       <HeaderRightButton
@@ -58,148 +105,266 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     })
   }, [HeaderRight, navigation])
 
+  const listData = [
+    {
+      type: SectionTypes.view,
+      data: {
+        children: <TitleInput canUpdate={canUpdate} title={title} setTitle={setTitle} />,
+        style: styles.titleContainer,
+      },
+    },
+    {
+      type: SectionTypes.header,
+      data: { title: 'Settings' },
+      sectionStyle: styles.addBottomBorder,
+    },
+    {
+      type: SectionTypes.setting,
+      data: {
+        title: 'Mute',
+        rightItem: <Switch value={muted} onChange={() => setMuted(!muted)} />,
+      },
+    },
+    {
+      type: SectionTypes.header,
+      data: { title: 'Members' },
+    },
+    ...memberItems,
+  ].filter(item => item.type !== SectionTypes.hidden)
+
+  const headerIndices = listData
+    .map(({ type }, index) => (type === SectionTypes.header ? index : undefined))
+    .filter(isDefined)
+
   return (
-    <View style={styles.container}>
-      <SectionList>
-        <View style={styles.titleContainer}>
-          <View style={[styles.titleLabelContainer, !canUpdate && styles.titleInputDisabled]}>
-            <Text variant="tertiary">Title</Text>
-            {!canUpdate && <Icon name="general.lock" />}
-          </View>
-          <TextInput
-            editable={canUpdate}
-            onChangeText={setTitle}
-            style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]}
-            value={title}
-          />
-        </View>
-      </SectionList>
-      <SectionList>
-        <SectionListHeader>Settings</SectionListHeader>
-        <View style={styles.muteContainer}>
-          <Text variant="plain" style={styles.muteText}>
-            Mute
-          </Text>
-          <Switch value={muted} onChange={() => setMuted(!muted)} />
-        </View>
-      </SectionList>
-      <SectionList>
-        <SectionListHeader divider={false}>Members</SectionListHeader>
-        <FlatList
-          data={members}
-          renderItem={({ item }) => (
-            <View style={styles.member}>
-              <Avatar sourceUri={item.avatar} />
-              <View style={styles.memberBody}>
-                <Text style={styles.memberName}>{item.name}</Text>
-                <View style={styles.memberBadges}>
-                  {item.badges?.map((badge, index) => (
-                    <View key={index} style={styles.memberBadge}>
-                      <Badge label={badge.title} />
-                    </View>
-                  ))}
-                </View>
-              </View>
+    <FlashList
+      data={listData as SectionListData}
+      estimatedItemSize={52}
+      contentContainerStyle={styles.contentContainer}
+      renderItem={({ item, index }) => {
+        const [isStart, isEnd] = [
+          index === 0 || headerIndices.includes(index),
+          index === listData.length - 1 || headerIndices.includes(index + 1),
+        ]
+
+        switch (item.type) {
+          case SectionTypes.header:
+            return (
+              <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
+                <SectionHeading title={item.data.title} />
+              </ListSection>
+            )
+          case SectionTypes.members:
+            return (
+              <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
+                <MemberRow {...item.data} />
+              </ListSection>
+            )
+          case SectionTypes.setting:
+            return (
+              <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
+                <SettingRow {...item.data} />
+              </ListSection>
+            )
+          case SectionTypes.view:
+            return (
+              <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
+                <View {...item.data} style={item.data.style} />
+              </ListSection>
+            )
+          default:
+            return null
+        }
+      }}
+    />
+  )
+}
+
+interface ListSectionProps {
+  isStart?: boolean
+  isEnd?: boolean
+  style?: ViewStyle
+  children: ReactNode
+}
+
+function ListSection({ isStart, isEnd, style, children }: ListSectionProps) {
+  const styles = useStyles({ isStart, isEnd })
+
+  return (
+    <View style={styles.sectionOuter}>
+      <View style={[styles.sectionInner, style]}>{children}</View>
+    </View>
+  )
+}
+
+interface SectionHeadingProps {
+  title: string
+}
+
+function SectionHeading({ title }: SectionHeadingProps) {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.header}>
+      <Heading variant="h3">{title}</Heading>
+    </View>
+  )
+}
+
+interface InputProps {
+  canUpdate: boolean
+  title: string
+  setTitle: Dispatch<SetStateAction<string>>
+}
+
+function TitleInput({ canUpdate, title, setTitle }: InputProps) {
+  const styles = useStyles()
+  return (
+    <>
+      <View style={[styles.titleLabelContainer, !canUpdate && styles.titleInputDisabled]}>
+        <Text variant="tertiary">Title</Text>
+        {!canUpdate && <Icon name="general.lock" />}
+      </View>
+      <TextInput
+        editable={canUpdate}
+        onChangeText={setTitle}
+        style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]}
+        value={title}
+      />
+    </>
+  )
+}
+
+interface SettingRowProps {
+  title: string
+  style?: ViewStyle
+  rightItem?: ReactNode
+  titleStyle?: TextStyle
+  subtitle?: string
+  rightItemStyle?: ViewStyle
+}
+
+function SettingRow({
+  title,
+  style,
+  titleStyle = {},
+  subtitle,
+  rightItem,
+  rightItemStyle = {},
+}: SettingRowProps) {
+  const styles = useStyles()
+
+  return (
+    <View style={[styles.settingRow, style]}>
+      <View style={styles.settingRowContent}>
+        <Text variant="plain" style={[styles.settingRowText, titleStyle]}>
+          {title}
+        </Text>
+        {Boolean(subtitle) && <Text variant="footnote">{subtitle}</Text>}
+      </View>
+      {Boolean(rightItem) && <View style={rightItemStyle}>{rightItem}</View>}
+    </View>
+  )
+}
+
+interface MemberRowProps {
+  avatar: string
+  name: string
+  style?: ViewStyle
+  badges?: MemberBadge[]
+}
+
+function MemberRow({ avatar, name, style, badges }: MemberRowProps) {
+  const styles = useStyles()
+
+  return (
+    <View style={[styles.member, style]}>
+      <Avatar sourceUri={avatar} />
+      <View style={styles.memberBody}>
+        <Text style={styles.memberName}>{name}</Text>
+        <View style={styles.memberBadges}>
+          {badges?.map((badge, index) => (
+            <View key={index} style={styles.memberBadge}>
+              <Badge label={badge.title} />
             </View>
-          )}
-          keyExtractor={item => item.id}
-          contentContainerStyle={styles.listContainer}
-        />
-      </SectionList>
+          ))}
+        </View>
+      </View>
     </View>
   )
 }
 
-const useStyles = () => {
-  const theme = useTheme()
-  const { bottom } = useSafeAreaInsets()
+// =================================
+// ====== Styles ===================
+// =================================
+
+const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } = {}) => {
+  const { colors } = useTheme()
 
   return StyleSheet.create({
-    container: {
-      flex: 1,
-      paddingTop: 16,
-      paddingHorizontal: 16,
-      backgroundColor: theme.colors.fillColorNeutral080,
-      paddingBottom: bottom,
-      gap: 16,
-    },
-    listContainer: {
-      gap: 12,
+    contentContainer: {
+      backgroundColor: colors.fillColorNeutral080,
+      padding: space(2),
     },
-    member: {
-      flexDirection: 'row',
-      gap: 8,
+    sectionOuter: {
+      paddingTop: space(1),
+      paddingLeft: space(2),
+      backgroundColor: colors.fillColorNeutral100Inverted,
+      borderTopLeftRadius: isStart ? space(1) : 0,
+      borderTopRightRadius: isStart ? space(1) : 0,
+      borderBottomLeftRadius: isEnd ? space(1) : 0,
+      borderBottomRightRadius: isEnd ? space(1) : 0,
+      marginBottom: isEnd ? space(2) : 0,
     },
-    memberBody: {
-      gap: 4,
+    sectionInner: {
+      borderBottomWidth: 0,
+      borderBottomColor: colors.borderColorDefaultBase,
+      paddingRight: space(2),
+      paddingBottom: space(1),
     },
-    memberName: {
-      lineHeight: 16,
+    addBottomBorder: {
+      borderBottomWidth: isEnd ? 0 : 1,
     },
-    memberBadges: {
+    titleContainer: {},
+    titleLabel: {},
+    titleLabelContainer: {
       flexDirection: 'row',
+      alignItems: 'center',
       gap: 8,
     },
-    memberBadge: {},
-    muteContainer: {
+    titleInput: {
+      color: colors.textColorDefaultPrimary,
+    },
+    titleInputDisabled: { opacity: 0.7 },
+    header: {
+      paddingVertical: space(1.5),
+    },
+    settingRow: {
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
+      gap: space(1),
     },
-    muteText: {
+    settingRowContent: {
+      flex: 1,
+    },
+    settingRowText: {
       lineHeight: 20,
     },
-    titleContainer: {},
-    titleLabel: {},
-    titleLabelContainer: {
+    member: {
       flexDirection: 'row',
-      alignItems: 'center',
-      gap: 8,
+      gap: space(1),
     },
-    titleInput: {
-      color: theme.colors.textColorDefaultPrimary,
-    },
-    titleInputDisabled: { opacity: 0.7 },
-  })
-}
-
-const SectionList = ({ children }: PropsWithChildren) => {
-  const styles = useSectionListStyles()
-
-  return <View style={styles.container}>{children}</View>
-}
-
-const SectionListHeader = ({
-  children,
-  divider = true,
-}: PropsWithChildren & { divider?: boolean }) => {
-  const styles = useSectionListStyles()
-
-  return (
-    <Heading variant="h3" style={[styles.heading, divider && styles.headingDivider]}>
-      {children}
-    </Heading>
-  )
-}
-
-const useSectionListStyles = () => {
-  const theme = useTheme()
-  const navigationTheme = useNavigationTheme()
-
-  return StyleSheet.create({
-    container: {
-      padding: 16,
-      backgroundColor: navigationTheme.colors.card,
-      borderRadius: 8,
-      flexDirection: 'column',
-      gap: 8,
+    memberBody: {
+      gap: space(0.5),
     },
-    heading: {
-      paddingBottom: 12,
+    memberName: {
+      lineHeight: space(2),
     },
-    headingDivider: {
-      borderBottomWidth: 1,
-      borderBottomColor: theme.colors.fillColorNeutral050Base,
+    memberBadges: {
+      flexDirection: 'row',
+      gap: space(1),
     },
+    memberBadge: {},
   })
 }

package/src/types/api_primitives.ts

@@ -3,6 +3,14 @@ export interface ResourceObject {
   type: string
 }
 
+export interface ErrorObject {
+  source?: { parameter: string }
+  detail: string
+  meta?: { associated_resources: any[]; resource: string }
+  title: string
+  status: string
+}
+
 export type ApiResource<Type = ResourceObject> = {
   data: Type
   links: Record<string, string>
@@ -15,6 +23,10 @@ export type ApiCollection<Type = ResourceObject> = {
   meta: CollectionMeta
 }
 
+export interface ApiError {
+  errors: ErrorObject[]
+}
+
 export interface CollectionMeta {
   count: number
   totalCount: number

package/src/types/utils/index.ts

@@ -4,3 +4,7 @@
 export type DeepPartial<T> = {
   [P in keyof T]?: DeepPartial<T[P]>
 }
+
+export function isDefined<T>(argument: T | undefined): argument is T {
+  return argument !== undefined
+}

package/src/utils/client/client.ts

@@ -1,4 +1,4 @@
-import { ApiCollection, ApiResource } from '../../types'
+import { ApiCollection, ApiError, ApiResource } from '../../types'
 import { Session } from '../session'
 import { Uri } from '../uri'
 import {
@@ -15,7 +15,8 @@ import { DeleteRequest, GetRequest, PatchRequest, PostRequest, WalkRequest } fro
 type ClientArgs = {
   version: string
   defaultHeaders?: Record<string, string>
-  onTokenExpired: () => void
+  onForceLogout?: () => void
+  onTokenExpired?: () => void
   session: Session
   app: string
 }
@@ -24,13 +25,22 @@ export class Client {
   version: string = ''
   defaultHeaders: Record<string, string> = {}
   uri: Uri
-  onTokenExpired: () => void
-
-  constructor({ version, defaultHeaders = {}, session, app, onTokenExpired }: ClientArgs) {
+  onTokenExpired?: () => void
+  onForceLogout?: () => void
+
+  constructor({
+    version,
+    defaultHeaders = {},
+    session,
+    app,
+    onTokenExpired,
+    onForceLogout,
+  }: ClientArgs) {
     this.version = version
     this.uri = new Uri({ session, app })
     this.defaultHeaders = defaultHeaders
     this.onTokenExpired = onTokenExpired
+    this.onForceLogout = onForceLogout
   }
 
   async get<T extends ApiCollection | ApiResource>(args: GetRequest): Promise<T> {
@@ -69,7 +79,7 @@ export class Client {
 
     const handler = isWalking ? walkRequest : makeRequest
 
-    return throwErrorIfFieldsMissing(handler, requestArgs).catch(this.handleTokenExpired)
+    return throwErrorIfFieldsMissing(handler, requestArgs).catch(this.handleNotOk)
   }
 
   async patch(args: PatchRequest) {
@@ -78,7 +88,7 @@ export class Client {
 
     const requestArgs: MakeRequestArgs = { data: args.data, url, action: 'PATCH', headers }
 
-    return ensureNoQueryParamsInDev(makeRequest, requestArgs).catch(this.handleTokenExpired)
+    return ensureNoQueryParamsInDev(makeRequest, requestArgs).catch(this.handleNotOk)
   }
 
   async post(args: PostRequest) {
@@ -87,7 +97,7 @@ export class Client {
 
     const requestArgs: MakeRequestArgs = { ...args, data: args.data, url, action: 'POST', headers }
 
-    return ensureNoQueryParamsInDev(makeRequest, requestArgs).catch(this.handleTokenExpired)
+    return ensureNoQueryParamsInDev(makeRequest, requestArgs).catch(this.handleNotOk)
   }
 
   async delete(args: DeleteRequest) {
@@ -96,17 +106,30 @@ export class Client {
 
     const requestArgs: MakeRequestArgs = { url, action: 'DELETE', headers }
 
-    return makeRequest(requestArgs).catch(this.handleTokenExpired)
+    return makeRequest(requestArgs).catch(this.handleNotOk)
   }
 
-  handleTokenExpired = (response: Response) => {
+  handleNotOk = async (response: Response) => {
     if (response.status === 401) {
-      this.onTokenExpired()
+      const parsed = await this.parseErrorResponse(response)
+      const errors = parsed?.errors || []
+      const isTokenExpired = errors.some(e => /baboon/i.test(e.detail))
+      const isForceLogout = errors.some(e => /capuchin/i.test(e.detail))
+      isTokenExpired && this.onTokenExpired?.()
+      isForceLogout && this.onForceLogout?.()
     }
 
     return Promise.reject(response)
   }
 
+  parseErrorResponse = async (response: Response): Promise<ApiError | undefined> => {
+    try {
+      return (await response.json()) as ApiError
+    } catch {
+      return undefined
+    }
+  }
+
   get headers() {
     return {
       Accept: 'application/vnd.api+json',

package/src/vendor/tapestry/alias_tokens_color_map.ts

@@ -51,6 +51,12 @@ const neutralsDark: NeutralColors = {
 
 interface SemanticAliasesColors {
   name: string
+  borderColorDefaultBase: string
+  borderColorDefaultDark: string
+  borderColorDefaultDarker: string
+  borderColorDefaultDisabled: string
+  borderColorDefaultDim: string
+  borderColorDefaultWhite: string
   iconColorDefaultPrimary: string
   iconColorDefaultSecondary: string
   iconColorDefaultDim: string
@@ -72,6 +78,12 @@ interface SemanticAliasesColors {
 
 const semanticAliasesLight: SemanticAliasesColors = {
   name: 'light',
+  borderColorDefaultBase: neutralsLight.fillColorNeutral050Base,
+  borderColorDefaultDark: neutralsLight.fillColorNeutral040,
+  borderColorDefaultDarker: neutralsLight.fillColorNeutral020,
+  borderColorDefaultDisabled: neutralsLight.fillColorNeutral050Base,
+  borderColorDefaultDim: neutralsLight.fillColorNeutral070,
+  borderColorDefaultWhite: neutralsLight.fillColorNeutral100Inverted,
   iconColorDefaultPrimary: neutralsLight.fillColorNeutral010,
   iconColorDefaultSecondary: neutralsLight.fillColorNeutral020,
   iconColorDefaultDim: neutralsLight.fillColorNeutral030,
@@ -93,6 +105,12 @@ const semanticAliasesLight: SemanticAliasesColors = {
 
 const semanticAliasesDark: SemanticAliasesColors = {
   name: 'dark',
+  borderColorDefaultBase: neutralsDark.fillColorNeutral050Base,
+  borderColorDefaultDark: neutralsDark.fillColorNeutral040,
+  borderColorDefaultDarker: neutralsDark.fillColorNeutral020,
+  borderColorDefaultDisabled: neutralsDark.fillColorNeutral050Base,
+  borderColorDefaultDim: neutralsDark.fillColorNeutral070,
+  borderColorDefaultWhite: neutralsDark.fillColorNeutral100Inverted,
   iconColorDefaultPrimary: neutralsDark.fillColorNeutral010,
   iconColorDefaultSecondary: neutralsDark.fillColorNeutral020,
   iconColorDefaultDim: neutralsDark.fillColorNeutral030,