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

package/src/screens/conversation_filters_screen.tsx

@@ -1,309 +1,130 @@
-import { PlatformPressable } from '@react-navigation/elements'
+import { HeaderTitle, HeaderTitleProps, useHeaderHeight } from '@react-navigation/elements'
+import { createComponentForStaticNavigation, RouteProp, useRoute } from '@react-navigation/native'
 import {
-  RouteProp,
-  StackActions,
-  StaticScreenProps,
-  useNavigation,
-  useRoute,
-} from '@react-navigation/native'
-import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
-import React, { createContext, PropsWithChildren, useContext, useMemo, useState } from 'react'
-import {
-  Animated,
-  FlatList,
-  Platform,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-  ViewStyle,
-} from 'react-native'
+  createNativeStackNavigator,
+  NativeStackNavigationOptions,
+} from '@react-navigation/native-stack'
+import React from 'react'
+import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Button, Heading, Icon, Image, Text, TextButton } from '../components'
+import { Button, TextButton } from '../components'
+import {
+  FilterContext,
+  FilterProvider,
+} from './conversation_filters/context/conversation_filter_context'
+import { ConversationFilters } from './conversation_filters/components/conversation_filters'
+import { GroupFilters } from './conversation_filters/group_filters'
+import {
+  ConversationFiltersScreenProps,
+  ConversationFilterStackParamList,
+} from './conversation_filters/screen_props'
 import { useTheme } from '../hooks'
-import { useGroups } from '../hooks/use_groups'
-import { useGroupsGroups } from '../hooks/use_groups_groups'
-import { useServicesTeamsMap } from '../hooks/use_services_team'
-import { useTeams } from '../hooks/use_teams'
-import { GroupsGroupResource, TeamOptionResponseItem } from '../types'
-import { GraphId, GroupResource } from '../types/resources/group_resource'
-
-// =========================================
-// ====== Factory Constants & Types ========
-// =========================================
+import { TeamFilters } from './conversation_filters/team_filters'
 
-enum SectionTypes {
-  filterBar,
-  filter,
-  groups,
-  header,
-  teams,
-  hidden,
+const FilterHeaderTitle = ({ tintColor }: HeaderTitleProps) => {
+  const styles = useStyles()
+  return <HeaderTitle style={[styles.headerTitle, { color: tintColor }]}>Filters</HeaderTitle>
 }
 
-type SectionListData = Array<
-  | DataItem<FilterProps, SectionTypes.filter>
-  | DataItem<GroupRowProps, SectionTypes.groups>
-  | DataItem<HeaderProps, SectionTypes.header>
-  | DataItem<TeamRowProps, SectionTypes.teams>
-  | DataItem<{}, SectionTypes.filterBar>
-  | DataItem<any, SectionTypes.hidden>
->
+const HeaderRight = () => {
+  const { resetFilter, applyFilters } = React.useContext(FilterContext)
+  const route = useRoute<RouteProp<ConversationFiltersScreenProps['route']>>()
+  const styles = useStyles()
 
-interface DataItem<T, TName extends SectionTypes> {
-  type: TName
-  data: T
-  sectionStyle?: ViewStyle
+  return (
+    <View style={styles.headerRight}>
+      <TextButton onPress={resetFilter}>Reset</TextButton>
+      <Button title="Apply" onPress={() => applyFilters(route.params)} />
+    </View>
+  )
 }
 
-const ASPECT_RATIO = 16 / 9
-const THUMBNAIL_WIDTH = 80
-const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO
-
-enum FilterTypes {
-  All = 'All conversations',
-  Groups = 'All my groups',
-  Teams = 'All my teams and plans',
-  More = 'More',
+const HeaderRightWithContext = () => {
+  return (
+    <FilterProvider>
+      <HeaderRight />
+    </FilterProvider>
+  )
 }
 
-// =================================
-// ====== Components ===============
-// =================================
-
 export const ConversationFiltersScreenOptions: NativeStackNavigationOptions = {
-  presentation: 'formSheet',
-  headerShown: false,
-  sheetAllowedDetents: [0.75],
+  presentation: Platform.select({ android: 'modal', ios: 'formSheet' }),
+  sheetAllowedDetents: Platform.select({
+    android: [0.75, 0.94],
+    default: [0.75, 1],
+  }),
   sheetGrabberVisible: true,
-}
-
-type ConversationFilters = {
-  chat_group_graph_id?: GraphId
-  group_source_app_name?: string
-}
-type ConversationFiltersScreenProps = StaticScreenProps<ConversationFilters>
-
-const FilterContext = createContext<{
-  scrollOffset: number
-  resetFilter: () => void
-  setGroupFilter: (params: ConversationFilters) => void
-  setAppFilter: (params: ConversationFilters) => void
-  applyFilters: (params: ConversationFilters) => void
-}>({
-  scrollOffset: 0,
-  resetFilter: () => {},
-  setGroupFilter: () => {},
-  setAppFilter: () => {},
-  applyFilters: () => {},
-})
-
-export const ConversationFiltersScreen = ({}: ConversationFiltersScreenProps) => {
-  const styles = useStyles()
-  const navigation = useNavigation()
-  const route = useRoute<RouteProp<ConversationFiltersScreenProps['route']>>()
-  const { chat_group_graph_id, group_source_app_name = '' } = route.params
-
-  const [scrollOffset, setScrollOffset] = useState(0)
-
-  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 = [], fetchNextPage: fetchNextGroupsPage } = useGroupsToFilter()
-  const { teams = [], fetchNextPage: fetchNextTeamsPage } = useTeamsToFilter()
-
-  const activeGroupId = chat_group_graph_id
-  const isExactGroupFilter = activeFilter === FilterTypes.More
-
-  // @ts-expect-error
-  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 hideAppFilters = groupItems.length < 1 || teamItems.length < 1
-
-  const listData: SectionListData = [
-    {
-      type: SectionTypes.filterBar,
-      data: {},
-    },
-    {
-      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,
+  headerBackVisible: false,
+  headerRight: HeaderRightWithContext,
+  headerTitle: FilterHeaderTitle,
+  headerTitleAlign: 'left',
+}
+
+const FilterNavigator = createNativeStackNavigator<ConversationFilterStackParamList>({
+  initialRouteName: 'Filters',
+  screens: {
+    Filters: {
+      screen: ConversationFilters,
+      options: {
+        headerShown: false,
       },
     },
-    {
-      type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,
-      data: {
-        filter: FilterTypes.Teams,
-        group_source_app_name: 'services',
-        isActive: activeFilter === FilterTypes.Teams,
+    GroupFilters: {
+      screen: GroupFilters,
+      options: {
+        headerTitle: Platform.select({
+          android: 'Groups',
+          ios: '',
+        }),
+        headerBackTitle: 'Groups',
       },
     },
-    {
-      type: groupItems.length ? SectionTypes.header : SectionTypes.hidden,
-      data: { title: 'Groups' },
-    },
-    ...groupItems,
-    {
-      type: teamItems.length ? SectionTypes.header : SectionTypes.hidden,
-      data: { title: 'Teams' },
-    },
-    ...teamItems,
-  ]
-
-  function handleOnEndReached() {
-    fetchNextTeamsPage()
-    fetchNextGroupsPage()
-  }
-
-  const filterContextValue = {
-    scrollOffset,
-    resetFilter: () => {
-      navigation.dispatch(
-        StackActions.popTo('Conversations', {
-          chat_group_graph_id: undefined,
-          group_source_app_name: undefined,
-        })
-      )
-    },
-    setGroupFilter: (params: Omit<ConversationFilters, 'group_source_app_name'>) => {
-      navigation.setParams({
-        chat_group_graph_id: params.chat_group_graph_id,
-        group_source_app_name: undefined,
-      })
-    },
-    setAppFilter: (params: Omit<ConversationFilters, 'chat_group_graph_id'>) => {
-      navigation.setParams({
-        chat_group_graph_id: undefined,
-        group_source_app_name: params.group_source_app_name,
-      })
-    },
-    applyFilters: (params: ConversationFilters) => {
-      navigation.dispatch(StackActions.popTo('Conversations', params))
+    TeamFilters: {
+      screen: TeamFilters,
+      options: {
+        headerTitle: Platform.select({
+          android: 'Teams',
+          ios: '',
+        }),
+        headerBackTitle: 'Teams',
+      },
     },
-  }
+  },
+})
 
-  return (
-    <View style={styles.container}>
-      <FilterContext.Provider value={filterContextValue}>
-        <FlatList
-          data={listData}
-          contentContainerStyle={styles.flatlistContainer}
-          onEndReached={handleOnEndReached}
-          stickyHeaderIndices={[0]}
-          nestedScrollEnabled={true}
-          onScroll={e => setScrollOffset(e.nativeEvent.contentOffset.y)}
-          renderItem={({ item }) => {
-            switch (item.type) {
-              case SectionTypes.filterBar:
-                return <FilterBar {...item.data} />
-              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} />
-              default:
-                return null
-            }
-          }}
-        />
-      </FilterContext.Provider>
-    </View>
-  )
-}
+const Filters = createComponentForStaticNavigation(FilterNavigator, 'Filters')
 
-function FilterBar({ style }: { style?: ViewStyle }) {
+export const ConversationFiltersScreen = (_props: ConversationFiltersScreenProps) => {
   const styles = useStyles()
-  const { scrollOffset, resetFilter, applyFilters } = React.useContext(FilterContext)
-  const route = useRoute<RouteProp<ConversationFiltersScreenProps['route']>>()
 
   return (
-    <Animated.View style={[styles.filterBar, scrollOffset > 0 && styles.filterBarScroll, style]}>
-      <Heading variant="h3">Filters</Heading>
-      <View style={styles.filterBarActions}>
-        <TextButton onPress={resetFilter}>Reset</TextButton>
-        <Button title="Apply" onPress={() => applyFilters(route.params)} />
+    <FilterProvider>
+      <View style={styles.container}>
+        <Filters />
       </View>
-    </Animated.View>
+    </FilterProvider>
   )
 }
 
 const useStyles = () => {
+  const { top } = useSafeAreaInsets()
   const { height } = useWindowDimensions()
-  const { bottom } = useSafeAreaInsets()
+  const headerHeight = useHeaderHeight()
   const theme = useTheme()
 
+  const containerHeight = Platform.select({
+    android: height,
+    ios: height - top - headerHeight,
+  })
+
   return StyleSheet.create({
     container: {
-      gap: 8,
-      paddingTop: 12,
-    },
-    flatlistContainer: {
-      paddingBottom: bottom,
-      height: Platform.select({
-        ios: undefined,
-        android: height,
-      }),
+      height: containerHeight,
     },
-    section: {
+    headerTitle: {
+      textAlign: 'left',
       flex: 1,
     },
-    sectionHeader: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      paddingTop: 24,
-      paddingBottom: 8,
-      paddingHorizontal: 16,
-    },
-    selectTeamsButton: {},
-    row: {},
-    rowImage: {
-      width: THUMBNAIL_WIDTH,
-      height: THUMBNAIL_HEIGHT,
-      borderRadius: 4,
-    },
-    rowIconRight: {
-      marginLeft: 'auto',
-      color: theme.colors.statusSuccessIcon,
-    },
-    rowTitle: {
-      fontSize: 16,
-    },
     filterBar: {
       backgroundColor: theme.colors.fillColorNeutral100Inverted,
       flexDirection: 'row',
@@ -322,167 +143,10 @@ const useStyles = () => {
       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 FilterProps = { group_source_app_name?: string; isActive: boolean; filter: FilterTypes }
-
-const FilterRow = ({ group_source_app_name, isActive, filter }: FilterProps) => {
-  const styles = useStyles()
-  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>
-  )
-}
-
-type GroupRowProps = {
-  group: FilteredGroup
-  isActive: boolean
-}
-
-const GroupRow = ({ group, isActive }: GroupRowProps) => {
-  const styles = useStyles()
-  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>
-  )
-}
-
-type TeamRowProps = {
-  team: Partial<TeamOptionResponseItem> & Pick<GroupResource, 'id'>
-  isActive: boolean
-}
-
-const TeamRow = ({ team }: TeamRowProps) => {
-  const styles = useStyles()
-  const { setGroupFilter } = useContext(FilterContext)
-  const servicesTeams = useServicesTeamsMap()
-  const route = useRoute<RouteProp<ConversationFiltersScreenProps['route']>>()
-  const { chat_group_graph_id } = route.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>
-  )
-}
-
-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 useRowStyles = () => {
-  const theme = useTheme()
-  return StyleSheet.create({
-    container: {
-      paddingLeft: 16,
-    },
-    innerContainer: {
+    headerRight: {
       flexDirection: 'row',
+      gap: 8,
       alignItems: 'center',
-      gap: 12,
-      borderBottomWidth: 1,
-      borderBottomColor: theme.colors.fillColorNeutral050Base,
-      paddingVertical: 12,
-      paddingRight: 16,
     },
   })
 }
-
-const useTeamsToFilter = () => {
-  const { data: teams = [], fetchNextPage } = useTeams()
-
-  return { teams, fetchNextPage }
-}
-
-interface FilteredGroup
-  extends GroupResource,
-    Partial<Pick<GroupsGroupResource, 'headerImage' | 'membershipsCount'>> {}
-
-const useGroupsToFilter = () => {
-  const { data: groups = [] } = useGroups({ source_app_name: 'Groups', source_type: 'Group' })
-  const { data: groupsData = [], fetchNextPage } = useGroupsGroups()
-
-  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 }
-}