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

package/src/screens/conversation_filters/components/conversation_filters.tsx

@@ -0,0 +1,233 @@
+import React, { useContext, useMemo } from 'react'
+import { FlatList, RefreshControl, StyleSheet, View, ViewStyle } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Heading } from '../../../components'
+import { useTheme } from '../../../hooks'
+import { FilterContext } from '../context/conversation_filter_context'
+import { FilterTypes } from '../filter_types'
+import { useGroupsToFilter, useTeamsToFilter } from '../hooks/filters'
+import {
+  FilterProps,
+  FilterRow,
+  GroupRow,
+  GroupRowProps,
+  TeamRow,
+  TeamRowProps,
+  ViewMore,
+  ViewMoreRowProps,
+} from './rows'
+
+// =========================================
+// ====== Factory Constants & Types ========
+// =========================================
+
+enum SectionTypes {
+  filter,
+  groups,
+  header,
+  hidden,
+  more,
+  teams,
+}
+
+type SectionListData = Array<
+  | DataItem<FilterProps, SectionTypes.filter>
+  | DataItem<GroupRowProps, SectionTypes.groups>
+  | DataItem<HeaderProps, SectionTypes.header>
+  | DataItem<any, SectionTypes.hidden>
+  | DataItem<ViewMoreRowProps, SectionTypes.more>
+  | DataItem<TeamRowProps, SectionTypes.teams>
+>
+
+interface DataItem<T, TName extends SectionTypes> {
+  type: TName
+  data: T
+  sectionStyle?: ViewStyle
+}
+
+// =================================
+// ====== Components ===============
+// =================================
+
+export const ConversationFilters = () => {
+  const styles = useStyles()
+  const { setScrollOffset, params } = useContext(FilterContext)
+  const { chat_group_graph_id, group_source_app_name = '' } = params
+
+  const activeFilter: 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 { groups = [] } = useGroupsToFilter()
+  const { teams = [] } = useTeamsToFilter()
+
+  const activeGroupId = chat_group_graph_id
+  const isExactGroupFilter = activeFilter === FilterTypes.More
+
+  const teamItems: DataItem<TeamRowProps, SectionTypes.teams>[] = teams.map(team => ({
+    type: SectionTypes.teams,
+    data: {
+      team,
+      isActive: isExactGroupFilter && team.id.toString() === activeGroupId,
+    },
+  }))
+
+  const groupItems: DataItem<GroupRowProps, SectionTypes.groups>[] = groups.map(group => ({
+    type: SectionTypes.groups,
+    data: {
+      group,
+      isActive: isExactGroupFilter && group?.id.toString() === activeGroupId,
+    },
+  }))
+  const groupItemData = selectActiveWithFirst(5)(groupItems)
+  const teamItemData = selectActiveWithFirst(5)(teamItems)
+
+  const hideAppFilters = groupItems.length < 1 || teamItems.length < 1
+
+  const listData: SectionListData = [
+    {
+      type: hideAppFilters ? SectionTypes.hidden : SectionTypes.header,
+      data: { title: 'General Filters' },
+    },
+    {
+      type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,
+      data: { filter: FilterTypes.All, isActive: activeFilter === FilterTypes.All },
+    },
+    {
+      type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,
+      data: {
+        filter: FilterTypes.Groups,
+        group_source_app_name: 'groups',
+        isActive: activeFilter === FilterTypes.Groups,
+      },
+    },
+    {
+      type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,
+      data: {
+        filter: FilterTypes.Teams,
+        group_source_app_name: 'services',
+        isActive: activeFilter === FilterTypes.Teams,
+      },
+    },
+    {
+      type: groupItems.length ? SectionTypes.header : SectionTypes.hidden,
+      data: { title: 'Groups' },
+    },
+    ...groupItemData,
+    {
+      type: groupItems.length > 5 ? SectionTypes.more : SectionTypes.hidden,
+      data: { routeName: 'GroupFilters' },
+    },
+    {
+      type: teamItems.length ? SectionTypes.header : SectionTypes.hidden,
+      data: { title: 'Teams' },
+    },
+    ...teamItemData,
+    {
+      type: teamItems.length > 5 ? SectionTypes.more : SectionTypes.hidden,
+      data: { routeName: 'TeamFilters' },
+    },
+  ]
+
+  return (
+    <FlatList
+      data={listData}
+      contentContainerStyle={styles.flatlistContainer}
+      nestedScrollEnabled={true}
+      onScroll={e => setScrollOffset(e.nativeEvent.contentOffset.y)}
+      renderItem={({ item }) => {
+        switch (item.type) {
+          case SectionTypes.header:
+            return <Header {...item.data} />
+          case SectionTypes.filter:
+            return <FilterRow {...item.data} />
+          case SectionTypes.groups:
+            return <GroupRow {...item.data} />
+          case SectionTypes.teams:
+            return <TeamRow {...item.data} />
+          case SectionTypes.more:
+            return <ViewMore {...item.data} />
+          default:
+            return null
+        }
+      }}
+    />
+  )
+}
+
+const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
+  const theme = useTheme()
+
+  return StyleSheet.create({
+    flatlistContainer: {
+      paddingBottom: 64 + bottom,
+    },
+    section: {},
+    sectionHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingTop: 24,
+      paddingBottom: 8,
+      paddingHorizontal: 16,
+    },
+    selectTeamsButton: {},
+    filterBar: {
+      backgroundColor: theme.colors.fillColorNeutral100Inverted,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      paddingVertical: 16,
+      gap: 8,
+    },
+    filterBarScroll: {
+      elevation: 4,
+      boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.1)',
+    },
+    filterBarActions: {
+      flexDirection: 'row',
+      gap: 8,
+      alignItems: 'center',
+    },
+  })
+}
+
+type HeaderProps = {
+  title: string
+}
+
+const Header = ({ title }: HeaderProps) => {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.sectionHeader}>
+      <Heading variant="h3">{title}</Heading>
+    </View>
+  )
+}
+
+type GroupSectionType =
+  | DataItem<TeamRowProps, SectionTypes.teams>
+  | DataItem<GroupRowProps, SectionTypes.groups>
+
+const selectActiveWithFirst =
+  (number: number) =>
+  <T extends GroupSectionType>(groups: T[]): T[] => {
+    const activeGroupIndex = groups.findIndex(group => group.data.isActive)
+    const activeGroup = groups[activeGroupIndex]
+
+    if (!activeGroup || activeGroupIndex <= number) {
+      return groups.slice(0, number)
+    }
+
+    return [activeGroup, ...groups].slice(0, number)
+  }

package/src/screens/conversation_filters/components/rows.tsx

@@ -0,0 +1,164 @@
+import { PlatformPressable } from '@react-navigation/elements'
+import { NavigationProp, useNavigation } from '@react-navigation/native'
+import React, { PropsWithChildren, useContext } from 'react'
+import { StyleSheet, View, ViewStyle } from 'react-native'
+import { Heading, Icon, Image, Text, TextButton } from '../../../components'
+import { useTheme } from '../../../hooks'
+import { useServicesTeamsMap } from '../../../hooks/use_services_team'
+import { GroupResource } from '../../../types/resources/group_resource'
+import { FilterContext } from '../context/conversation_filter_context'
+import { FilterTypes } from '../filter_types'
+import { FilteredGroup } from '../hooks/filters'
+import { ConversationFilterStackParamList } from '../screen_props'
+
+export type FilterProps = { group_source_app_name?: string; isActive: boolean; filter: FilterTypes }
+
+export const FilterRow = ({ group_source_app_name, isActive, filter }: FilterProps) => {
+  const styles = useRowStyles()
+  const { setAppFilter } = useContext(FilterContext)
+
+  return (
+    <PressableRow style={styles.row} onPress={() => setAppFilter({ group_source_app_name })}>
+      <Text>{filter}</Text>
+      {isActive ? <Icon name="general.check" size={16} style={styles.rowIconRight} /> : null}
+    </PressableRow>
+  )
+}
+
+export type GroupRowProps = {
+  group: FilteredGroup
+  isActive: boolean
+}
+
+export const GroupRow = ({ group, isActive }: GroupRowProps) => {
+  const styles = useRowStyles()
+  const { setGroupFilter } = useContext(FilterContext)
+
+  const handleFilterByGroup = () => {
+    setGroupFilter({ chat_group_graph_id: group.id })
+  }
+
+  const { headerImage, membershipsCount } = group
+
+  return (
+    <PressableRow style={styles.row} onPress={handleFilterByGroup}>
+      {headerImage?.thumbnail && (
+        <Image
+          source={{ uri: headerImage?.thumbnail }}
+          resizeMode="cover"
+          style={styles.rowImage}
+          alt={`Image for ${group.name}`}
+        />
+      )}
+      <View>
+        <Heading variant="h3" style={styles.rowTitle}>
+          {group.name}
+        </Heading>
+        {membershipsCount && <Text>{group.membershipsCount} members</Text>}
+      </View>
+      {isActive ? <Icon name="general.check" size={16} style={styles.rowIconRight} /> : null}
+    </PressableRow>
+  )
+}
+
+export type TeamRowProps = {
+  team: GroupResource
+  isActive: boolean
+}
+
+export const TeamRow = ({ team }: TeamRowProps) => {
+  const styles = useRowStyles()
+  const { setGroupFilter } = useContext(FilterContext)
+  const servicesTeams = useServicesTeamsMap()
+  const { params } = useContext(FilterContext)
+  const { chat_group_graph_id } = params
+  const isActive = chat_group_graph_id === team.id.toString()
+
+  const handleFilterByGroup = () => {
+    setGroupFilter({ chat_group_graph_id: team.id })
+  }
+
+  const servicesTeam = servicesTeams[team.id]
+  const serviceTypeName = servicesTeam?.serviceTypeName || servicesTeam?.group
+
+  return (
+    <PressableRow style={styles.row} onPress={handleFilterByGroup}>
+      <View>
+        <Heading variant="h3" style={styles.rowTitle}>
+          {team.name}
+        </Heading>
+        <Text>{serviceTypeName}</Text>
+      </View>
+      {isActive ? <Icon name="general.check" size={16} style={styles.rowIconRight} /> : null}
+    </PressableRow>
+  )
+}
+
+export type ViewMoreRowProps = { routeName: keyof ConversationFilterStackParamList }
+
+export const ViewMore = ({ routeName }: ViewMoreRowProps) => {
+  const styles = useRowStyles()
+  const navigation = useNavigation<NavigationProp<ConversationFilterStackParamList, 'Filters'>>()
+
+  return (
+    <View style={[styles.borderLessRow]}>
+      <TextButton onPress={() => navigation.navigate(routeName, {})}>View more</TextButton>
+    </View>
+  )
+}
+
+export const PressableRow = ({
+  children,
+  onPress,
+  style,
+}: PropsWithChildren<{ onPress: () => void; style?: ViewStyle }>) => {
+  const styles = useRowStyles()
+  return (
+    <PlatformPressable style={styles.container} onPress={onPress}>
+      <View style={[styles.innerContainer, style]}>{children}</View>
+    </PlatformPressable>
+  )
+}
+
+const ASPECT_RATIO = 16 / 9
+const THUMBNAIL_WIDTH = 80
+const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO
+
+const useRowStyles = () => {
+  const theme = useTheme()
+  return StyleSheet.create({
+    container: {
+      paddingLeft: 16,
+    },
+    innerContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
+      paddingVertical: 12,
+      paddingRight: 16,
+    },
+    borderLessRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      paddingVertical: 12,
+      paddingRight: 16,
+      paddingLeft: 16,
+    },
+    row: {},
+    rowImage: {
+      width: THUMBNAIL_WIDTH,
+      height: THUMBNAIL_HEIGHT,
+      borderRadius: 4,
+    },
+    rowIconRight: {
+      marginLeft: 'auto',
+      color: theme.colors.statusSuccessIcon,
+    },
+    rowTitle: {
+      fontSize: 16,
+    },
+  })
+}

package/src/screens/conversation_filters/context/conversation_filter_context.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { createContext, PropsWithChildren, useState } from 'react'
+import { ConversationFiltersParams, ConversationFiltersScreenProps } from '../screen_props'
+import { RouteProp, StackActions, useNavigation, useRoute } from '@react-navigation/native'
+
+export const FilterContext = createContext<{
+  params: ConversationFiltersParams
+  scrollOffset: number
+  setScrollOffset: (offset: number) => void
+  resetFilter: () => void
+  setGroupFilter: (params: ConversationFiltersParams) => void
+  setAppFilter: (params: ConversationFiltersParams) => void
+  applyFilters: (params: ConversationFiltersParams) => void
+}>({
+  params: {
+    chat_group_graph_id: undefined,
+    group_source_app_name: undefined,
+  },
+  scrollOffset: 0,
+  setScrollOffset: () => {},
+  resetFilter: () => {},
+  setGroupFilter: () => {},
+  setAppFilter: () => {},
+  applyFilters: () => {},
+})
+
+export const FilterProvider = ({ children }: PropsWithChildren) => {
+  const [scrollOffset, setScrollOffset] = useState(0)
+  const navigation = useNavigation()
+  const route = useRoute<RouteProp<ConversationFiltersScreenProps['route']>>()
+  const filterContextValue = {
+    params: route.params,
+    scrollOffset,
+    setScrollOffset,
+    resetFilter: () => {
+      navigation.dispatch(
+        StackActions.popTo('Conversations', {
+          chat_group_graph_id: undefined,
+          group_source_app_name: undefined,
+        })
+      )
+    },
+    setGroupFilter: (params: Omit<ConversationFiltersParams, 'group_source_app_name'>) => {
+      navigation.setParams({
+        chat_group_graph_id: params.chat_group_graph_id,
+        group_source_app_name: undefined,
+      })
+    },
+    setAppFilter: (params: Omit<ConversationFiltersParams, 'chat_group_graph_id'>) => {
+      navigation.setParams({
+        chat_group_graph_id: undefined,
+        group_source_app_name: params.group_source_app_name,
+      })
+    },
+    applyFilters: (params: ConversationFiltersParams) => {
+      navigation.dispatch(StackActions.popTo('Conversations', params))
+    },
+  }
+
+  return <FilterContext.Provider value={filterContextValue}>{children}</FilterContext.Provider>
+}
+
+export const useFilterContext = () => {
+  return React.useContext(FilterContext)
+}

package/src/screens/conversation_filters/filter_types.ts

@@ -0,0 +1,6 @@
+export enum FilterTypes {
+  All = 'All conversations',
+  Groups = 'All my groups',
+  Teams = 'All my teams and plans',
+  More = 'More',
+}

package/src/screens/conversation_filters/group_filters.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { FlatList, RefreshControl, View } from 'react-native'
+import { Text } from '../../components/display'
+import { ConversationFiltersParams } from './screen_props'
+import { StaticScreenProps } from '@react-navigation/native'
+import { useGroupsToFilter } from './hooks/filters'
+import { GroupRow } from './components/rows'
+import { useFilterContext } from './context/conversation_filter_context'
+
+export type GroupFiltersScreenProps = StaticScreenProps<ConversationFiltersParams>
+
+export const GroupFilters = () => {
+  const { groups, fetchNextPage, isRefetching, refetch } = useGroupsToFilter()
+  const { params } = useFilterContext()
+  const { chat_group_graph_id } = params
+
+  return (
+    <View>
+      <FlatList
+        data={groups}
+        renderItem={({ item }) => (
+          <GroupRow group={item} isActive={item?.id.toString() === chat_group_graph_id} />
+        )}
+        ListEmptyComponent={<Text>No groups available</Text>}
+        refreshing={isRefetching}
+        refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
+        onEndReached={() => fetchNextPage()}
+      />
+    </View>
+  )
+}

package/src/screens/conversation_filters/hooks/filters.ts

@@ -0,0 +1,68 @@
+import { useMemo } from 'react'
+import { useGroups } from '../../../hooks/use_groups'
+import { useGroupsGroups } from '../../../hooks/use_groups_groups'
+import { useTeams } from '../../../hooks/use_teams'
+import { GroupResource } from '../../../types/resources/group_resource'
+import { GroupsGroupResource } from '../../../types'
+
+export const useTeamsToFilter = () => {
+  const { data: teams = [], ...rest } = useTeams()
+
+  return { teams, ...rest }
+}
+
+export interface FilteredGroup
+  extends GroupResource,
+    Partial<Pick<GroupsGroupResource, 'headerImage' | 'membershipsCount'>> {}
+
+export const useGroupsToFilter = () => {
+  const {
+    data: groups = [],
+    fetchNextPage: fetchNextGroups,
+    refetch: refetchGroups,
+    ...rest
+  } = useGroups({
+    source_app_name: 'Groups',
+    source_type: 'Group',
+  })
+
+  const {
+    data: groupsData = [],
+    fetchNextPage: fetchNextGroupsGroups,
+    refetch: refetchGroupsGroups,
+  } = useGroupsGroups()
+
+  const handleRefetch = () => {
+    refetchGroups()
+    refetchGroupsGroups()
+  }
+
+  const handleFetchNextPage = () => {
+    fetchNextGroups()
+    fetchNextGroupsGroups()
+  }
+
+  const filteredGroups: FilteredGroup[] = useMemo(
+    () =>
+      groups
+        .map(group => {
+          const groupsGroup = groupsData.find(g => group.id.includes(g.id))
+          const { membershipsCount, headerImage } = groupsGroup || {}
+
+          return {
+            ...group,
+            membershipsCount,
+            headerImage,
+          }
+        })
+        .filter(g => typeof g !== 'undefined'),
+    [groups, groupsData]
+  )
+
+  return {
+    groups: filteredGroups,
+    fetchNextPage: handleFetchNextPage,
+    refetch: handleRefetch,
+    ...rest,
+  }
+}

package/src/screens/conversation_filters/screen_props.ts

@@ -0,0 +1,15 @@
+import { StaticScreenProps } from '@react-navigation/native'
+import { GraphId } from '../../types/resources/group_resource'
+
+export type ConversationFiltersParams = {
+  chat_group_graph_id?: GraphId
+  group_source_app_name?: string
+}
+
+export type ConversationFiltersScreenProps = StaticScreenProps<ConversationFiltersParams>
+
+export type ConversationFilterStackParamList = {
+  Filters: ConversationFiltersParams
+  GroupFilters: ConversationFiltersParams
+  TeamFilters: ConversationFiltersParams
+}

package/src/screens/conversation_filters/team_filters.tsx

@@ -0,0 +1,31 @@
+import { StaticScreenProps } from '@react-navigation/native'
+import React from 'react'
+import { FlatList, RefreshControl, View } from 'react-native'
+import { Text } from '../../components/display'
+import { TeamRow } from './components/rows'
+import { useFilterContext } from './context/conversation_filter_context'
+import { useTeamsToFilter } from './hooks/filters'
+import { ConversationFiltersParams } from './screen_props'
+
+export type GroupFiltersScreenProps = StaticScreenProps<ConversationFiltersParams>
+
+export const TeamFilters = () => {
+  const { teams, fetchNextPage, isRefetching, refetch } = useTeamsToFilter()
+  const { params } = useFilterContext()
+  const { chat_group_graph_id } = params
+
+  return (
+    <View>
+      <FlatList
+        data={teams}
+        renderItem={({ item }) => (
+          <TeamRow team={item} isActive={item?.id.toString() === chat_group_graph_id} />
+        )}
+        refreshing={isRefetching}
+        refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
+        ListEmptyComponent={<Text>No teams available</Text>}
+        onEndReached={() => fetchNextPage()}
+      />
+    </View>
+  )
+}