@planningcenter/chat-react-native 3.2.0-rc.2 → 3.2.0-rc.21

package/src/contexts/swipeable_active_conversation.tsx

@@ -1,27 +0,0 @@
-import React, { createContext, useContext, useState } from 'react'
-
-type ConversationActionsValue = {
-  activeConversationId?: number
-  setActiveConversationId: (_id: number) => void
-}
-const ConversationActionsContext = createContext<ConversationActionsValue>({
-  activeConversationId: undefined,
-  setActiveConversationId: () => {},
-})
-
-export const ConversationActionsProvider = ({ children }: { children: React.ReactNode }) => {
-  const [activeConversationId, setActiveConversationId] = useState<number | undefined>()
-
-  return (
-    <ConversationActionsContext.Provider
-      value={{
-        activeConversationId,
-        setActiveConversationId,
-      }}
-    >
-      {children}
-    </ConversationActionsContext.Provider>
-  )
-}
-
-export const useConversationActionsContext = () => useContext(ConversationActionsContext)

package/src/screens/create/conversation_create_screen.tsx

@@ -1,151 +0,0 @@
-import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
-import React, { useCallback, useState } from 'react'
-import { StyleSheet, TextInput, View } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Text } from '../../components'
-import { ActionButton } from '../../components/display/action_button'
-import { useSuspenseGet, useTheme } from '../../hooks'
-import { useApiClient } from '../../hooks/use_api_client'
-import { useMutation } from '@tanstack/react-query'
-import { ApiResource, ConversationResource, GroupsGroupResource, ResourceObject } from '../../types'
-
-type ConversationCreateScreenProps = StaticScreenProps<{
-  group_id?: string
-  team_ids?: string[]
-}>
-
-interface ChatConversationPayload extends ResourceObject {
-  value: string
-}
-
-export const ConversationCreateScreen = ({ route }: ConversationCreateScreenProps) => {
-  const styles = useStyles()
-  const navigation = useNavigation()
-  const [title, setTitle] = useState<string>()
-  const apiClient = useApiClient()
-  const { data: group } = useSuspenseGet<GroupsGroupResource>({
-    url: `/me/groups/${route.params.group_id}`,
-    data: {
-      fields: {
-        Group: [],
-      },
-    },
-    app: 'groups',
-  })
-  const { mutate: handleSave } = useMutation({
-    throwOnError: true,
-    onSuccess: result => {
-      handleRedirectToConversation({ conversation_id: result.data.id })
-    },
-    mutationFn: () =>
-      apiClient.groups
-        .post<ApiResource<ChatConversationPayload>>({
-          url: `/me/groups/${route.params.group_id}/chat_conversation_payload`,
-          data: {
-            data: {
-              type: '',
-              attributes: {
-                title,
-              },
-            },
-          },
-        })
-        .then(res => res.data.value)
-        .then(payload =>
-          apiClient.chat.post<ApiResource<ConversationResource>>({
-            url: '/me/conversations',
-            data: {
-              data: {
-                type: 'Conversation',
-                attributes: {
-                  payload,
-                },
-              },
-            },
-          })
-        ),
-  })
-
-  const handleRedirectToConversation = useCallback(
-    ({ conversation_id }: { conversation_id: number }) => {
-      // exit from the create stack
-      navigation.getParent()?.goBack()
-      // navigate to the conversation screen
-      navigation.dispatch(
-        StackActions.push('Conversation', {
-          conversation_id,
-        })
-      )
-    },
-    [navigation]
-  )
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.section}>
-        <View style={styles.to}>
-          <Text>To:</Text>
-          <View>
-            <Text>{group.name}</Text>
-            <Text>{group.membershipsCount} members</Text>
-          </View>
-        </View>
-        <View style={styles.titleContainer}>
-          <Text style={styles.titleLabel}>Title</Text>
-          <TextInput
-            placeholder="Topic of conversation (required)"
-            value={title}
-            onChangeText={setTitle}
-            style={styles.titleInput}
-          />
-        </View>
-      </View>
-      <ActionButton title="Start Conversation" onPress={() => handleSave()} />
-    </View>
-  )
-}
-
-const useStyles = () => {
-  const { bottom } = useSafeAreaInsets()
-  const theme = useTheme()
-
-  return StyleSheet.create({
-    container: {
-      flex: 1,
-      gap: 8,
-    },
-    section: {
-      padding: 16,
-      flex: 1,
-    },
-    sectionHeader: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-    },
-    selectTeamsButton: {},
-    routeDebug: {
-      alignContent: 'center',
-      padding: 16,
-      paddingBottom: bottom,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.fillColorNeutral050Base,
-    },
-    titleContainer: {
-      paddingVertical: 12,
-      borderBottomWidth: 1,
-      borderBottomColor: theme.colors.fillColorNeutral050Base,
-      gap: 8,
-    },
-    titleInput: {
-      fontSize: 18,
-    },
-    titleLabel: {},
-    to: {
-      flexDirection: 'row',
-      gap: 8,
-      paddingVertical: 12,
-      borderBottomWidth: 1,
-      borderBottomColor: theme.colors.fillColorNeutral050Base,
-    },
-  })
-}

package/src/screens/create/conversation_filter_recipients_screen.tsx

@@ -1,79 +0,0 @@
-import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
-import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Button } from '../../components'
-import { useTheme } from '../../hooks'
-
-export const ConversationFilterReceipientsScreenOptions: NativeStackNavigationOptions = {
-  presentation: 'formSheet',
-  headerShown: false,
-  sheetAllowedDetents: [0.75],
-  sheetGrabberVisible: true,
-}
-
-type ConversationFilterRecipientsScreenProps = StaticScreenProps<{}>
-
-export const ConversationFilterRecipientsScreen = ({}: ConversationFilterRecipientsScreenProps) => {
-  const styles = useStyles()
-  const navigation = useNavigation()
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.section}>
-        <Button
-          style={styles.selectTeamsButton}
-          onPress={() =>
-            navigation.dispatch(
-              StackActions.popTo('ConversationSelectRecipients', {
-                chat_group_graph_id: 'TBD',
-              })
-            )
-          }
-          title="Redirect to select"
-          variant="outline"
-        />
-
-        <Button
-          style={styles.selectTeamsButton}
-          onPress={() =>
-            navigation.dispatch(
-              StackActions.popTo('ConversationCreate', {
-                chat_group_graph_id: 'TBD',
-              })
-            )
-          }
-          title="Redirect to form"
-          variant="outline"
-        />
-      </View>
-    </View>
-  )
-}
-
-const useStyles = () => {
-  const { bottom } = useSafeAreaInsets()
-  const theme = useTheme()
-
-  return StyleSheet.create({
-    container: {
-      flex: 1,
-      gap: 8,
-    },
-    section: {
-      padding: 16,
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      flex: 1,
-    },
-    selectTeamsButton: {},
-    routeDebug: {
-      alignContent: 'center',
-      padding: 16,
-      paddingBottom: bottom,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.fillColorNeutral050Base,
-    },
-  })
-}

package/src/screens/create/conversation_select_recipients_screen.tsx

@@ -1,128 +0,0 @@
-import { PlatformPressable } from '@react-navigation/elements'
-import { StaticScreenProps, useNavigation } from '@react-navigation/native'
-import React from 'react'
-import { ScrollView, StyleSheet, View } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Button, Heading, Icon, Image, Text } from '../../components'
-import { useTheme } from '../../hooks'
-import { GroupsGroupResource } from '../../types'
-import { useGroupsGroups } from '../../hooks/use_groups_groups'
-
-type ConversationSelectRecipientsScreenProps = StaticScreenProps<{
-  chat_group_graph_id?: string
-}>
-
-const ASPECT_RATIO = 16 / 9
-const THUMBNAIL_WIDTH = 80
-const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO
-
-export const ConversationSelectRecipientsScreen = ({}: ConversationSelectRecipientsScreenProps) => {
-  const styles = useStyles()
-  const navigation = useNavigation()
-  const { data: groups = [] } = useGroupsGroups()
-  const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)
-
-  const handleNavigateToCreateConversation = (group: GroupsGroupResource) => {
-    navigation.navigate('Create', {
-      screen: 'ConversationCreate',
-      params: {
-        group_id: group.id,
-      },
-    })
-  }
-
-  return (
-    <ScrollView style={styles.container}>
-      <View style={styles.section}>
-        <View style={styles.sectionHeader}>
-          <Heading>My groups</Heading>
-        </View>
-        <View>
-          {groupsWithCreatePermission.map(group => (
-            <PlatformPressable
-              key={group.id}
-              style={styles.row}
-              onPress={() => handleNavigateToCreateConversation(group)}
-            >
-              <Image
-                source={{ uri: group.headerImage?.thumbnail }}
-                resizeMode="cover"
-                style={styles.rowImage}
-                alt={`Image for ${group.name}`}
-              />
-              <View>
-                <Heading variant="h3">{group.name}</Heading>
-                <Text>{group.membershipsCount} members</Text>
-              </View>
-              <Icon name="general.rightChevron" size={16} style={styles.rowIconRight} />
-            </PlatformPressable>
-          ))}
-        </View>
-      </View>
-      <View style={styles.section}>
-        <View style={styles.sectionHeader}>
-          <Heading>Teams I lead</Heading>
-          <Button
-            style={styles.selectTeamsButton}
-            onPress={() =>
-              navigation.navigate('Create', {
-                screen: 'ConversationFilterRecipients',
-                params: {
-                  conversation_id: '2196252',
-                },
-              })
-            }
-            title="Select teams"
-            variant="outline"
-            iconNameLeft="general.search"
-          />
-        </View>
-      </View>
-    </ScrollView>
-  )
-}
-
-const useStyles = () => {
-  const { bottom } = useSafeAreaInsets()
-  const theme = useTheme()
-
-  return StyleSheet.create({
-    container: {
-      flex: 1,
-      gap: 8,
-    },
-    section: {
-      padding: 16,
-      flex: 1,
-    },
-    sectionHeader: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-    },
-    selectTeamsButton: {},
-    row: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 12,
-      paddingVertical: 16,
-      borderBottomWidth: 1,
-      borderColor: theme.colors.fillColorNeutral050Base,
-    },
-    rowImage: {
-      width: THUMBNAIL_WIDTH,
-      height: THUMBNAIL_HEIGHT,
-      borderRadius: 4,
-    },
-    rowIconRight: {
-      marginLeft: 'auto',
-      color: theme.colors.fillColorNeutral030,
-    },
-    routeDebug: {
-      alignContent: 'center',
-      padding: 16,
-      paddingBottom: bottom,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.fillColorNeutral050Base,
-    },
-  })
-}