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

package/src/screens/create/conversation_select_recipients_screen.tsx

@@ -0,0 +1,136 @@
+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 { useSuspenseGet, useTheme } from '../../hooks'
+import { GroupsGroupResource } from '../../types'
+
+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 = [] } = useSuspenseGet<GroupsGroupResource[]>({
+    url: '/me/groups',
+    data: {
+      perPage: 100,
+      fields: {
+        Group: ['can_create_conversation', 'name', 'header_image', 'memberships_count'],
+      },
+    },
+    app: 'groups',
+  })
+  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,
+    },
+  })
+}

package/src/types/resources/app_grant.ts

@@ -0,0 +1,6 @@
+import { ResourceObject } from '../api_primitives'
+
+export interface AppGrantsResource extends ResourceObject {
+  createConversations: boolean
+  appName: string
+}

package/src/types/resources/groups/groups_group_resource.ts

@@ -0,0 +1,12 @@
+import { ResourceObject } from '../../api_primitives'
+
+export interface GroupsGroupResource extends ResourceObject {
+  headerImage: {
+    thumbnail: string
+    medium: string
+    original: string
+  }
+  name: string
+  membershipsCount: number
+  canCreateConversation: boolean
+}

package/src/types/resources/groups/index.ts

@@ -0,0 +1 @@
+export * from './groups_group_resource'

package/src/types/resources/index.ts

@@ -3,3 +3,5 @@ export * from './member'
 export * from './message'
 export * from './oauth_token'
 export * from './person'
+export * from './groups'
+export * from './app_grant'

package/build/contexts/index.d.ts

@@ -1,3 +0,0 @@
-export * from './api_provider';
-export * from './chat_context';
-//# sourceMappingURL=index.d.ts.map

package/build/contexts/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA"}

package/build/contexts/index.js

@@ -1,3 +0,0 @@
-export * from './api_provider';
-export * from './chat_context';
-//# sourceMappingURL=index.js.map

package/build/contexts/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA","sourcesContent":["export * from './api_provider'\nexport * from './chat_context'\n"]}

package/src/contexts/index.ts

@@ -1,2 +0,0 @@
-export * from './api_provider'
-export * from './chat_context'