@planningcenter/chat-react-native 3.1.0 → 3.2.0-rc.1

package/src/screens/conversations/components/list_header_component.tsx

@@ -0,0 +1,125 @@
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
+import React, { useMemo } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Heading, TextButton, ToggleButton } from '../../../components'
+import { useTheme } from '../../../hooks'
+import { useCanDisplayGroups } from '../../../hooks/use_groups'
+import { ConversationScreenProps } from '../conversations_screen'
+import { ChatGroupBadge } from './chat_group_badge'
+
+enum FilterTypes {
+  All = 'All',
+  Groups = 'Groups',
+  Teams = 'Teams',
+  More = 'More',
+}
+
+export const ListHeaderComponent = () => {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })
+  const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })
+  const route = useRoute<RouteProp<ConversationScreenProps['route']>>()
+  const { chat_group_graph_id, group_source_app_name = '' } = route.params
+
+  const active: FilterTypes = useMemo(() => {
+    if (chat_group_graph_id) {
+      return FilterTypes.More
+    } else if (/groups/i.test(group_source_app_name)) {
+      return FilterTypes.Groups
+    } else if (/services/i.test(group_source_app_name)) {
+      return FilterTypes.Teams
+    }
+
+    return FilterTypes.All
+  }, [chat_group_graph_id, group_source_app_name])
+
+  const showAppFilters = canFilterByGroups && canFilterByTeams
+
+  return (
+    <View style={styles.listHeader}>
+      <View style={styles.titleRow}>
+        <Heading numberOfLines={1} variant="h2">
+          Conversations
+        </Heading>
+        <TextButton>Mark all read</TextButton>
+      </View>
+      <View style={styles.filterRow}>
+        {showAppFilters && (
+          <>
+            <ToggleButton
+              title={FilterTypes.All}
+              active={active === FilterTypes.All}
+              onPress={() =>
+                navigation.setParams({
+                  chat_group_graph_id: undefined,
+                  group_source_app_name: undefined,
+                })
+              }
+              accessibilityLabel="Show all conversations"
+            />
+            <ToggleButton
+              title={FilterTypes.Groups}
+              active={active === FilterTypes.Groups}
+              onPress={() =>
+                navigation.setParams({
+                  chat_group_graph_id: undefined,
+                  group_source_app_name: 'Groups',
+                })
+              }
+              accessibilityLabel="Filter to group conversations"
+            />
+
+            <ToggleButton
+              title={FilterTypes.Teams}
+              active={active === FilterTypes.Teams}
+              onPress={() =>
+                navigation.setParams({
+                  chat_group_graph_id: undefined,
+                  group_source_app_name: 'Services',
+                })
+              }
+              accessibilityLabel="Filter to team conversations"
+            />
+          </>
+        )}
+        <ToggleButton
+          title={showAppFilters ? FilterTypes.More : 'Filter'}
+          onPress={() =>
+            navigation.navigate('ConversationFilters', {
+              chat_group_graph_id,
+              group_source_app_name,
+            })
+          }
+          active={active === FilterTypes.More}
+          iconNameRight="general.threeReducingHorizontalBars"
+          accessibilityLabel={showAppFilters ? 'View all filters' : 'View more filters'}
+        />
+      </View>
+      <ChatGroupBadge />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const theme = useTheme()
+  return StyleSheet.create({
+    listHeader: {
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
+      paddingHorizontal: 16,
+      paddingBottom: 16,
+      gap: 12,
+    },
+    titleRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingTop: 8,
+    },
+    filterRow: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      gap: 8,
+    },
+  })
+}

package/src/screens/conversations/conversations_screen.tsx

@@ -0,0 +1,56 @@
+import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import React, { useMemo } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Conversations } from '../../components'
+import { ActionButton } from '../../components/display/action_button'
+import { useCanCreateConversations } from '../../hooks'
+import { GraphId } from '../../types/resources/group_resource'
+import { ListHeaderComponent } from './components/list_header_component'
+
+export type ConversationScreenProps = StaticScreenProps<{
+  title?: string
+  chat_group_graph_id?: GraphId
+  group_source_app_name?: string
+}>
+
+export function ConversationsScreen({ route }: ConversationScreenProps) {
+  const navigation = useNavigation()
+  const canCreateConversations = useCanCreateConversations()
+  const styles = useStyles()
+  const { chat_group_graph_id, group_source_app_name } = route.params
+
+  const filter = useMemo(() => {
+    if (chat_group_graph_id) {
+      return 'group'
+    } else if (group_source_app_name) {
+      return 'group_source_app_name'
+    }
+
+    return 'mine_or_not_empty'
+  }, [chat_group_graph_id, group_source_app_name])
+
+  return (
+    <View style={styles.container}>
+      <Conversations
+        ListHeaderComponent={ListHeaderComponent}
+        group={chat_group_graph_id}
+        group_source_app_name={group_source_app_name}
+        filter={filter}
+      />
+      <ActionButton
+        visible={canCreateConversations}
+        title="New conversation"
+        onPress={() => navigation.navigate('Create')}
+      />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+    },
+  })
+}

package/src/screens/design_system_screen.tsx

@@ -9,6 +9,7 @@ import {
   Banner,
   BannerCollapsible,
   Button,
+  ToggleButton,
   Heading,
   Icon,
   IconButton,
@@ -253,6 +254,7 @@ function HeadingTextSection({ isLast }: SectionProps) {
 
 function PressablesSection({ isLast }: SectionProps) {
   const styles = useStyles()
+  const [filterSelected, setFilterSelected] = useState('Groups')
 
   return (
     <CollapsableSection title="Pressables" isLast={isLast}>
@@ -402,6 +404,32 @@ function PressablesSection({ isLast }: SectionProps) {
           />
         </Row>
       </Group>
+      <Group
+        title="ToggleButton"
+        description="Button with active and deactive states. Supports right & left icons, along with standard pressable props."
+      >
+        <Row>
+          <ToggleButton
+            onPress={() => setFilterSelected('Groups')}
+            title="Groups"
+            active={filterSelected === 'Groups'}
+            accessibilityLabel="Filter to group conversations"
+          />
+          <ToggleButton
+            onPress={() => setFilterSelected('Teams')}
+            title="Teams"
+            active={filterSelected === 'Teams'}
+            accessibilityLabel="Filter to team conversations"
+          />
+          <ToggleButton
+            onPress={() => setFilterSelected('More')}
+            title="More"
+            active={filterSelected === 'More'}
+            iconNameRight="general.threeReducingHorizontalBars"
+            accessibilityLabel="View more filters"
+          />
+        </Row>
+      </Group>
       <Group
         title="IconButton"
         description="Supports different appearances, sizes, along with loading & disabled states. Use `iconStyle` for custom colors and font sizes. Requires `accessibilityLabel` as icon's don't provide context to screen readers."

package/build/screens/conversations_screen.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"conversations_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversations_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,iBAAiB,EAA2B,MAAM,0BAA0B,CAAA;AAChG,OAAO,KAA+B,MAAM,OAAO,CAAA;AAMnD,OAAO,EAAE,OAAO,EAAiB,MAAM,mCAAmC,CAAA;AAG1E,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CAAC;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B,CAAC,CAAA;AAEF,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,EAAE,uBAAuB,qBA+BrE"}

package/build/screens/conversations_screen.js

@@ -1,144 +0,0 @@
-import { useNavigation, useRoute } from '@react-navigation/native';
-import React, { useCallback, useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { Badge, Button, Conversations, Heading, TextButton } from '../components';
-import { ActionButton } from '../components/display/action_button';
-import { useCanCreateConversations, useTheme } from '../hooks';
-import { useApiGet } from '../hooks/use_api';
-import { useCanDisplayGroups } from '../hooks/use_groups';
-export function ConversationsScreen({ route }) {
-    const navigation = useNavigation();
-    const canCreateConversations = useCanCreateConversations();
-    const styles = useStyles();
-    const { chat_group_graph_id, group_source_app_name } = route.params;
-    const filter = useMemo(() => {
-        if (chat_group_graph_id) {
-            return 'group';
-        }
-        else if (group_source_app_name) {
-            return 'group_source_app_name';
-        }
-        return 'mine_or_not_empty';
-    }, [chat_group_graph_id, group_source_app_name]);
-    return (<View style={styles.container}>
-      <Conversations ListHeaderComponent={ListHeaderComponent} group={chat_group_graph_id} group_source_app_name={group_source_app_name} filter={filter}/>
-      <ActionButton visible={canCreateConversations} title="New conversation" onPress={() => navigation.navigate('Create')}/>
-    </View>);
-}
-var FilterTypes;
-(function (FilterTypes) {
-    FilterTypes["All"] = "All";
-    FilterTypes["Groups"] = "Groups";
-    FilterTypes["Teams"] = "Teams";
-    FilterTypes["More"] = "More";
-})(FilterTypes || (FilterTypes = {}));
-const ListHeaderComponent = () => {
-    const styles = useStyles();
-    const navigation = useNavigation();
-    const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' });
-    const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' });
-    const route = useRoute();
-    const { chat_group_graph_id, group_source_app_name = '' } = route.params;
-    const active = useMemo(() => {
-        if (chat_group_graph_id) {
-            return FilterTypes.More;
-        }
-        else if (/groups/i.test(group_source_app_name)) {
-            return FilterTypes.Groups;
-        }
-        else if (/services/i.test(group_source_app_name)) {
-            return FilterTypes.Teams;
-        }
-        return FilterTypes.All;
-    }, [chat_group_graph_id, group_source_app_name]);
-    const hideAppFilters = !canFilterByGroups || !canFilterByTeams;
-    return (<View style={styles.listHeader}>
-      <View style={styles.titleRow}>
-        <Heading numberOfLines={1} variant="h2">
-          Conversations
-        </Heading>
-        <TextButton>Mark all read</TextButton>
-      </View>
-      <View style={styles.filterRow}>
-        <FilterButton title={FilterTypes.All} activeTitle={active} hidden={!canFilterByGroups || !canFilterByTeams} onPress={() => navigation.setParams({
-            chat_group_graph_id: undefined,
-            group_source_app_name: undefined,
-        })}/>
-        <FilterButton title={FilterTypes.Groups} activeTitle={active} hidden={hideAppFilters} onPress={() => navigation.setParams({
-            chat_group_graph_id: undefined,
-            group_source_app_name: 'Groups',
-        })}/>
-        <FilterButton title={FilterTypes.Teams} activeTitle={active} hidden={hideAppFilters} onPress={() => navigation.setParams({
-            chat_group_graph_id: undefined,
-            group_source_app_name: 'Services',
-        })}/>
-        <Button title={hideAppFilters ? 'Filter' : FilterTypes.More} onPress={() => navigation.navigate('ConversationFilters', {
-            chat_group_graph_id,
-            group_source_app_name,
-        })} variant={active === FilterTypes.More ? 'fill' : 'outline'} iconNameRight="general.threeReducingHorizontalBars"/>
-      </View>
-      <Badges />
-    </View>);
-};
-const Badges = () => {
-    const styles = useStyles();
-    const navigation = useNavigation();
-    const route = useRoute();
-    const { chat_group_graph_id } = route.params;
-    const { data: group } = useApiGet({
-        url: `/me/groups/${chat_group_graph_id}`,
-        data: {
-            fields: {
-                Group: [],
-            },
-        },
-        enabled: !!chat_group_graph_id,
-        app: 'chat',
-    });
-    const handleBadgePress = useCallback(() => {
-        navigation.setParams({
-            chat_group_graph_id: undefined,
-            group_source_app_name: undefined,
-        });
-    }, [navigation]);
-    if (!group)
-        return null;
-    return (<View style={styles.groupBadge}>
-      <Badge iconNameRight="general.x" label={group?.name || ''} onPress={handleBadgePress}/>
-    </View>);
-};
-function FilterButton({ title, activeTitle, onPress, hidden = false, ...restProps }) {
-    if (hidden)
-        return null;
-    return (<Button title={title} variant={activeTitle === title ? 'fill' : 'outline'} onPress={onPress} {...restProps}/>);
-}
-const useStyles = () => {
-    const theme = useTheme();
-    return StyleSheet.create({
-        container: {
-            flex: 1,
-            justifyContent: 'center',
-        },
-        listHeader: {
-            borderBottomWidth: 1,
-            borderBottomColor: theme.colors.fillColorNeutral050Base,
-            paddingHorizontal: 16,
-            paddingBottom: 16,
-            gap: 12,
-        },
-        titleRow: {
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            paddingTop: 8,
-        },
-        filterRow: {
-            flexDirection: 'row',
-            justifyContent: 'flex-start',
-            gap: 8,
-        },
-        groupBadge: {
-            flexDirection: 'row',
-        },
-    });
-};
-//# sourceMappingURL=conversations_screen.js.map

package/build/screens/conversations_screen.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"conversations_screen.js","sourceRoot":"","sources":["../../src/screens/conversations_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,aAAa,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAChG,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,EAAe,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC9F,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAClE,OAAO,EAAE,yBAAyB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAE5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAQzD,MAAM,UAAU,mBAAmB,CAAC,EAAE,KAAK,EAA2B;IACpE,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,sBAAsB,GAAG,yBAAyB,EAAE,CAAA;IAC1D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,GAAG,KAAK,CAAC,MAAM,CAAA;IAEnE,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,mBAAmB,EAAE,CAAC;YACxB,OAAO,OAAO,CAAA;QAChB,CAAC;aAAM,IAAI,qBAAqB,EAAE,CAAC;YACjC,OAAO,uBAAuB,CAAA;QAChC,CAAC;QAED,OAAO,mBAAmB,CAAA;IAC5B,CAAC,EAAE,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,CAAC,CAAA;IAEhD,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,aAAa,CACZ,mBAAmB,CAAC,CAAC,mBAAmB,CAAC,CACzC,KAAK,CAAC,CAAC,mBAAmB,CAAC,CAC3B,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,MAAM,CAAC,CAAC,MAAM,CAAC,EAEjB;MAAA,CAAC,YAAY,CACX,OAAO,CAAC,CAAC,sBAAsB,CAAC,CAChC,KAAK,CAAC,kBAAkB,CACxB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAEjD;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,IAAK,WAKJ;AALD,WAAK,WAAW;IACd,0BAAW,CAAA;IACX,gCAAiB,CAAA;IACjB,8BAAe,CAAA;IACf,4BAAa,CAAA;AACf,CAAC,EALI,WAAW,KAAX,WAAW,QAKf;AAED,MAAM,mBAAmB,GAAG,GAAG,EAAE;IAC/B,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAA;IAClG,MAAM,iBAAiB,GAAG,mBAAmB,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,CAAA;IAClG,MAAM,KAAK,GAAG,QAAQ,EAA+C,CAAA;IACrE,MAAM,EAAE,mBAAmB,EAAE,qBAAqB,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC,MAAM,CAAA;IAExE,MAAM,MAAM,GAAgB,OAAO,CAAC,GAAG,EAAE;QACvC,IAAI,mBAAmB,EAAE,CAAC;YACxB,OAAO,WAAW,CAAC,IAAI,CAAA;QACzB,CAAC;aAAM,IAAI,SAAS,CAAC,IAAI,CAAC,qBAAqB,CAAC,EAAE,CAAC;YACjD,OAAO,WAAW,CAAC,MAAM,CAAA;QAC3B,CAAC;aAAM,IAAI,WAAW,CAAC,IAAI,CAAC,qBAAqB,CAAC,EAAE,CAAC;YACnD,OAAO,WAAW,CAAC,KAAK,CAAA;QAC1B,CAAC;QAED,OAAO,WAAW,CAAC,GAAG,CAAA;IACxB,CAAC,EAAE,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,CAAC,CAAA;IAEhD,MAAM,cAAc,GAAG,CAAC,iBAAiB,IAAI,CAAC,gBAAgB,CAAA;IAE9D,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAC7B;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAC3B;QAAA,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CACrC;;QACF,EAAE,OAAO,CACT;QAAA,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CACvC;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;QAAA,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CACvB,WAAW,CAAC,CAAC,MAAM,CAAC,CACpB,MAAM,CAAC,CAAC,CAAC,iBAAiB,IAAI,CAAC,gBAAgB,CAAC,CAChD,OAAO,CAAC,CAAC,GAAG,EAAE,CACZ,UAAU,CAAC,SAAS,CAAC;YACnB,mBAAmB,EAAE,SAAS;YAC9B,qBAAqB,EAAE,SAAS;SACjC,CACH,CAAC,EAEH;QAAA,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAC1B,WAAW,CAAC,CAAC,MAAM,CAAC,CACpB,MAAM,CAAC,CAAC,cAAc,CAAC,CACvB,OAAO,CAAC,CAAC,GAAG,EAAE,CACZ,UAAU,CAAC,SAAS,CAAC;YACnB,mBAAmB,EAAE,SAAS;YAC9B,qBAAqB,EAAE,QAAQ;SAChC,CACH,CAAC,EAEH;QAAA,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CACzB,WAAW,CAAC,CAAC,MAAM,CAAC,CACpB,MAAM,CAAC,CAAC,cAAc,CAAC,CACvB,OAAO,CAAC,CAAC,GAAG,EAAE,CACZ,UAAU,CAAC,SAAS,CAAC;YACnB,mBAAmB,EAAE,SAAS;YAC9B,qBAAqB,EAAE,UAAU;SAClC,CACH,CAAC,EAEH;QAAA,CAAC,MAAM,CACL,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CACpD,OAAO,CAAC,CAAC,GAAG,EAAE,CACZ,UAAU,CAAC,QAAQ,CAAC,qBAAqB,EAAE;YACzC,mBAAmB;YACnB,qBAAqB;SACtB,CACH,CAAC,CACD,OAAO,CAAC,CAAC,MAAM,KAAK,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAC1D,aAAa,CAAC,qCAAqC,EAEvD;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,MAAM,CAAC,AAAD,EACT;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,GAAG,EAAE;IAClB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,KAAK,GAAG,QAAQ,EAA+C,CAAA;IACrE,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,MAAM,CAAA;IAC5C,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,SAAS,CAAgB;QAC/C,GAAG,EAAE,cAAc,mBAAmB,EAAE;QACxC,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,KAAK,EAAE,EAAE;aACV;SACF;QACD,OAAO,EAAE,CAAC,CAAC,mBAAmB;QAC9B,GAAG,EAAE,MAAM;KACZ,CAAC,CAAA;IAEF,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,UAAU,CAAC,SAAS,CAAC;YACnB,mBAAmB,EAAE,SAAS;YAC9B,qBAAqB,EAAE,SAAS;SACjC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA;IAEvB,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAC7B;MAAA,CAAC,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,EACvF;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,WAAW,EACX,OAAO,EACP,MAAM,GAAG,KAAK,EACd,GAAG,SAAS,EAMC;IACb,IAAI,MAAM;QAAE,OAAO,IAAI,CAAA;IAEvB,OAAO,CACL,CAAC,MAAM,CACL,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CACpD,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,SAAS,CAAC,EACd,CACH,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,IAAI,EAAE,CAAC;YACP,cAAc,EAAE,QAAQ;SACzB;QACD,UAAU,EAAE;YACV,iBAAiB,EAAE,CAAC;YACpB,iBAAiB,EAAE,KAAK,CAAC,MAAM,CAAC,uBAAuB;YACvD,iBAAiB,EAAE,EAAE;YACrB,aAAa,EAAE,EAAE;YACjB,GAAG,EAAE,EAAE;SACR;QACD,QAAQ,EAAE;YACR,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,eAAe;YAC/B,UAAU,EAAE,CAAC;SACd;QACD,SAAS,EAAE;YACT,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,YAAY;YAC5B,GAAG,EAAE,CAAC;SACP;QACD,UAAU,EAAE;YACV,aAAa,EAAE,KAAK;SACrB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { RouteProp, StaticScreenProps, useNavigation, useRoute } from '@react-navigation/native'\nimport React, { useCallback, useMemo } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Badge, Button, ButtonProps, Conversations, Heading, TextButton } from '../components'\nimport { ActionButton } from '../components/display/action_button'\nimport { useCanCreateConversations, useTheme } from '../hooks'\nimport { useApiGet } from '../hooks/use_api'\nimport { GraphId, GroupResource } from '../types/resources/group_resource'\nimport { useCanDisplayGroups } from '../hooks/use_groups'\n\nexport type ConversationScreenProps = StaticScreenProps<{\n  title?: string\n  chat_group_graph_id?: GraphId\n  group_source_app_name?: string\n}>\n\nexport function ConversationsScreen({ route }: ConversationScreenProps) {\n  const navigation = useNavigation()\n  const canCreateConversations = useCanCreateConversations()\n  const styles = useStyles()\n  const { chat_group_graph_id, group_source_app_name } = route.params\n\n  const filter = useMemo(() => {\n    if (chat_group_graph_id) {\n      return 'group'\n    } else if (group_source_app_name) {\n      return 'group_source_app_name'\n    }\n\n    return 'mine_or_not_empty'\n  }, [chat_group_graph_id, group_source_app_name])\n\n  return (\n    <View style={styles.container}>\n      <Conversations\n        ListHeaderComponent={ListHeaderComponent}\n        group={chat_group_graph_id}\n        group_source_app_name={group_source_app_name}\n        filter={filter}\n      />\n      <ActionButton\n        visible={canCreateConversations}\n        title=\"New conversation\"\n        onPress={() => navigation.navigate('Create')}\n      />\n    </View>\n  )\n}\n\nenum FilterTypes {\n  All = 'All',\n  Groups = 'Groups',\n  Teams = 'Teams',\n  More = 'More',\n}\n\nconst ListHeaderComponent = () => {\n  const styles = useStyles()\n  const navigation = useNavigation()\n  const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })\n  const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })\n  const route = useRoute<RouteProp<ConversationScreenProps['route']>>()\n  const { chat_group_graph_id, group_source_app_name = '' } = route.params\n\n  const active: FilterTypes = useMemo(() => {\n    if (chat_group_graph_id) {\n      return FilterTypes.More\n    } else if (/groups/i.test(group_source_app_name)) {\n      return FilterTypes.Groups\n    } else if (/services/i.test(group_source_app_name)) {\n      return FilterTypes.Teams\n    }\n\n    return FilterTypes.All\n  }, [chat_group_graph_id, group_source_app_name])\n\n  const hideAppFilters = !canFilterByGroups || !canFilterByTeams\n\n  return (\n    <View style={styles.listHeader}>\n      <View style={styles.titleRow}>\n        <Heading numberOfLines={1} variant=\"h2\">\n          Conversations\n        </Heading>\n        <TextButton>Mark all read</TextButton>\n      </View>\n      <View style={styles.filterRow}>\n        <FilterButton\n          title={FilterTypes.All}\n          activeTitle={active}\n          hidden={!canFilterByGroups || !canFilterByTeams}\n          onPress={() =>\n            navigation.setParams({\n              chat_group_graph_id: undefined,\n              group_source_app_name: undefined,\n            })\n          }\n        />\n        <FilterButton\n          title={FilterTypes.Groups}\n          activeTitle={active}\n          hidden={hideAppFilters}\n          onPress={() =>\n            navigation.setParams({\n              chat_group_graph_id: undefined,\n              group_source_app_name: 'Groups',\n            })\n          }\n        />\n        <FilterButton\n          title={FilterTypes.Teams}\n          activeTitle={active}\n          hidden={hideAppFilters}\n          onPress={() =>\n            navigation.setParams({\n              chat_group_graph_id: undefined,\n              group_source_app_name: 'Services',\n            })\n          }\n        />\n        <Button\n          title={hideAppFilters ? 'Filter' : FilterTypes.More}\n          onPress={() =>\n            navigation.navigate('ConversationFilters', {\n              chat_group_graph_id,\n              group_source_app_name,\n            })\n          }\n          variant={active === FilterTypes.More ? 'fill' : 'outline'}\n          iconNameRight=\"general.threeReducingHorizontalBars\"\n        />\n      </View>\n      <Badges />\n    </View>\n  )\n}\n\nconst Badges = () => {\n  const styles = useStyles()\n  const navigation = useNavigation()\n  const route = useRoute<RouteProp<ConversationScreenProps['route']>>()\n  const { chat_group_graph_id } = route.params\n  const { data: group } = useApiGet<GroupResource>({\n    url: `/me/groups/${chat_group_graph_id}`,\n    data: {\n      fields: {\n        Group: [],\n      },\n    },\n    enabled: !!chat_group_graph_id,\n    app: 'chat',\n  })\n\n  const handleBadgePress = useCallback(() => {\n    navigation.setParams({\n      chat_group_graph_id: undefined,\n      group_source_app_name: undefined,\n    })\n  }, [navigation])\n\n  if (!group) return null\n\n  return (\n    <View style={styles.groupBadge}>\n      <Badge iconNameRight=\"general.x\" label={group?.name || ''} onPress={handleBadgePress} />\n    </View>\n  )\n}\n\nfunction FilterButton({\n  title,\n  activeTitle,\n  onPress,\n  hidden = false,\n  ...restProps\n}: {\n  title: string\n  activeTitle: string\n  onPress: () => void\n  hidden?: boolean\n} & ButtonProps) {\n  if (hidden) return null\n\n  return (\n    <Button\n      title={title}\n      variant={activeTitle === title ? 'fill' : 'outline'}\n      onPress={onPress}\n      {...restProps}\n    />\n  )\n}\n\nconst useStyles = () => {\n  const theme = useTheme()\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      justifyContent: 'center',\n    },\n    listHeader: {\n      borderBottomWidth: 1,\n      borderBottomColor: theme.colors.fillColorNeutral050Base,\n      paddingHorizontal: 16,\n      paddingBottom: 16,\n      gap: 12,\n    },\n    titleRow: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      paddingTop: 8,\n    },\n    filterRow: {\n      flexDirection: 'row',\n      justifyContent: 'flex-start',\n      gap: 8,\n    },\n    groupBadge: {\n      flexDirection: 'row',\n    },\n  })\n}\n"]}

package/src/screens/conversations_screen.tsx

@@ -1,222 +0,0 @@
-import { RouteProp, StaticScreenProps, useNavigation, useRoute } from '@react-navigation/native'
-import React, { useCallback, useMemo } from 'react'
-import { StyleSheet, View } from 'react-native'
-import { Badge, Button, ButtonProps, Conversations, Heading, TextButton } from '../components'
-import { ActionButton } from '../components/display/action_button'
-import { useCanCreateConversations, useTheme } from '../hooks'
-import { useApiGet } from '../hooks/use_api'
-import { GraphId, GroupResource } from '../types/resources/group_resource'
-import { useCanDisplayGroups } from '../hooks/use_groups'
-
-export type ConversationScreenProps = StaticScreenProps<{
-  title?: string
-  chat_group_graph_id?: GraphId
-  group_source_app_name?: string
-}>
-
-export function ConversationsScreen({ route }: ConversationScreenProps) {
-  const navigation = useNavigation()
-  const canCreateConversations = useCanCreateConversations()
-  const styles = useStyles()
-  const { chat_group_graph_id, group_source_app_name } = route.params
-
-  const filter = useMemo(() => {
-    if (chat_group_graph_id) {
-      return 'group'
-    } else if (group_source_app_name) {
-      return 'group_source_app_name'
-    }
-
-    return 'mine_or_not_empty'
-  }, [chat_group_graph_id, group_source_app_name])
-
-  return (
-    <View style={styles.container}>
-      <Conversations
-        ListHeaderComponent={ListHeaderComponent}
-        group={chat_group_graph_id}
-        group_source_app_name={group_source_app_name}
-        filter={filter}
-      />
-      <ActionButton
-        visible={canCreateConversations}
-        title="New conversation"
-        onPress={() => navigation.navigate('Create')}
-      />
-    </View>
-  )
-}
-
-enum FilterTypes {
-  All = 'All',
-  Groups = 'Groups',
-  Teams = 'Teams',
-  More = 'More',
-}
-
-const ListHeaderComponent = () => {
-  const styles = useStyles()
-  const navigation = useNavigation()
-  const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })
-  const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })
-  const route = useRoute<RouteProp<ConversationScreenProps['route']>>()
-  const { chat_group_graph_id, group_source_app_name = '' } = route.params
-
-  const active: FilterTypes = useMemo(() => {
-    if (chat_group_graph_id) {
-      return FilterTypes.More
-    } else if (/groups/i.test(group_source_app_name)) {
-      return FilterTypes.Groups
-    } else if (/services/i.test(group_source_app_name)) {
-      return FilterTypes.Teams
-    }
-
-    return FilterTypes.All
-  }, [chat_group_graph_id, group_source_app_name])
-
-  const hideAppFilters = !canFilterByGroups || !canFilterByTeams
-
-  return (
-    <View style={styles.listHeader}>
-      <View style={styles.titleRow}>
-        <Heading numberOfLines={1} variant="h2">
-          Conversations
-        </Heading>
-        <TextButton>Mark all read</TextButton>
-      </View>
-      <View style={styles.filterRow}>
-        <FilterButton
-          title={FilterTypes.All}
-          activeTitle={active}
-          hidden={!canFilterByGroups || !canFilterByTeams}
-          onPress={() =>
-            navigation.setParams({
-              chat_group_graph_id: undefined,
-              group_source_app_name: undefined,
-            })
-          }
-        />
-        <FilterButton
-          title={FilterTypes.Groups}
-          activeTitle={active}
-          hidden={hideAppFilters}
-          onPress={() =>
-            navigation.setParams({
-              chat_group_graph_id: undefined,
-              group_source_app_name: 'Groups',
-            })
-          }
-        />
-        <FilterButton
-          title={FilterTypes.Teams}
-          activeTitle={active}
-          hidden={hideAppFilters}
-          onPress={() =>
-            navigation.setParams({
-              chat_group_graph_id: undefined,
-              group_source_app_name: 'Services',
-            })
-          }
-        />
-        <Button
-          title={hideAppFilters ? 'Filter' : FilterTypes.More}
-          onPress={() =>
-            navigation.navigate('ConversationFilters', {
-              chat_group_graph_id,
-              group_source_app_name,
-            })
-          }
-          variant={active === FilterTypes.More ? 'fill' : 'outline'}
-          iconNameRight="general.threeReducingHorizontalBars"
-        />
-      </View>
-      <Badges />
-    </View>
-  )
-}
-
-const Badges = () => {
-  const styles = useStyles()
-  const navigation = useNavigation()
-  const route = useRoute<RouteProp<ConversationScreenProps['route']>>()
-  const { chat_group_graph_id } = route.params
-  const { data: group } = useApiGet<GroupResource>({
-    url: `/me/groups/${chat_group_graph_id}`,
-    data: {
-      fields: {
-        Group: [],
-      },
-    },
-    enabled: !!chat_group_graph_id,
-    app: 'chat',
-  })
-
-  const handleBadgePress = useCallback(() => {
-    navigation.setParams({
-      chat_group_graph_id: undefined,
-      group_source_app_name: undefined,
-    })
-  }, [navigation])
-
-  if (!group) return null
-
-  return (
-    <View style={styles.groupBadge}>
-      <Badge iconNameRight="general.x" label={group?.name || ''} onPress={handleBadgePress} />
-    </View>
-  )
-}
-
-function FilterButton({
-  title,
-  activeTitle,
-  onPress,
-  hidden = false,
-  ...restProps
-}: {
-  title: string
-  activeTitle: string
-  onPress: () => void
-  hidden?: boolean
-} & ButtonProps) {
-  if (hidden) return null
-
-  return (
-    <Button
-      title={title}
-      variant={activeTitle === title ? 'fill' : 'outline'}
-      onPress={onPress}
-      {...restProps}
-    />
-  )
-}
-
-const useStyles = () => {
-  const theme = useTheme()
-  return StyleSheet.create({
-    container: {
-      flex: 1,
-      justifyContent: 'center',
-    },
-    listHeader: {
-      borderBottomWidth: 1,
-      borderBottomColor: theme.colors.fillColorNeutral050Base,
-      paddingHorizontal: 16,
-      paddingBottom: 16,
-      gap: 12,
-    },
-    titleRow: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      paddingTop: 8,
-    },
-    filterRow: {
-      flexDirection: 'row',
-      justifyContent: 'flex-start',
-      gap: 8,
-    },
-    groupBadge: {
-      flexDirection: 'row',
-    },
-  })
-}