Single chat components

Author: gabrieleandro

packages/components/modules/messages/native/SingleChatCreate/CreateRoomList/CreateRoomListItem/index.tsx

@@ -0,0 +1,69 @@
+import { useCurrentProfile } from '@baseapp-frontend/authentication'
+import { AvatarWithPlaceholder } from '@baseapp-frontend/design-system/components/native/avatars'
+import { Text } from '@baseapp-frontend/design-system/components/native/typographies'
+import { View } from '@baseapp-frontend/design-system/components/native/views'
+import { useTheme } from '@baseapp-frontend/design-system/providers/native'
+
+import { router } from 'expo-router'
+import { Pressable } from 'react-native'
+import { ConnectionHandler, useFragment } from 'react-relay'
+
+import { ProfileItemFragment$key } from '../../../../../../__generated__/ProfileItemFragment.graphql'
+import { ProfileItemFragment } from '../../../../../profiles/common'
+import { useCreateChatRoomMutation } from '../../../../common'
+import { createStyles } from './styles'
+
+const ChatRoomListItem = ({ profile: profileRef }: { profile: ProfileItemFragment$key }) => {
+  const theme = useTheme()
+  const styles = createStyles(theme)
+
+  const node = useFragment(ProfileItemFragment, profileRef)
+  const [commit] = useCreateChatRoomMutation()
+
+  const { currentProfile } = useCurrentProfile()
+
+  const handleRoomCompleted = (roomRef: string) => {
+    router.push(`/rooms/${roomRef}`)
+  }
+
+  const handleRoomCreation = () => {
+    if (currentProfile?.id) {
+      commit({
+        variables: {
+          input: { profileId: currentProfile.id, participants: [node?.id] },
+          connections: [
+            ConnectionHandler.getConnectionID(currentProfile.id, 'roomsList_chatRooms', {
+              unreadMessages: false,
+              archived: false,
+              q: '',
+            }),
+          ],
+        },
+        onCompleted: (response) => {
+          const roomId = response?.chatRoomCreate?.room?.node?.id
+          if (roomId) {
+            handleRoomCompleted(roomId)
+          }
+        },
+      })
+    }
+  }
+
+  return (
+    <Pressable key={`chat-room-item-${node?.id}`} onPress={handleRoomCreation}>
+      <View style={styles.cardContainer}>
+        <View>
+          <AvatarWithPlaceholder imgSource={node?.image?.url} />
+        </View>
+        <View>
+          <Text variant="subtitle2">{node?.name}</Text>
+          <Text variant="caption">
+            {node?.urlPath?.path && `@${node?.urlPath.path?.replace('/', '')}`}
+          </Text>
+        </View>
+      </View>
+    </Pressable>
+  )
+}
+
+export default ChatRoomListItem

packages/components/modules/messages/native/SingleChatCreate/CreateRoomList/CreateRoomListItem/styles.ts

@@ -0,0 +1,15 @@
+import { Theme } from '@baseapp-frontend/design-system/styles/native'
+
+import { StyleSheet } from 'react-native'
+
+export const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    cardContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      paddingVertical: 12,
+      flex: 1,
+      backgroundColor: theme.colors.surface.background,
+    },
+  })

packages/components/modules/messages/native/SingleChatCreate/CreateRoomList/index.tsx

@@ -0,0 +1,76 @@
+import React, { Suspense, useEffect, useRef, useTransition } from 'react'
+
+import { View } from '@baseapp-frontend/design-system/components/native/views'
+import { useTheme } from '@baseapp-frontend/design-system/providers/native'
+
+import { Dimensions } from 'react-native'
+import { FlatList } from 'react-native-gesture-handler'
+
+import { useAllProfilesList } from '../../../../profiles/common'
+import { withChatRoomProvider } from '../../../common'
+import SearchNotFoundState from '../../SearchNotFoundState'
+import ChatRoomListItem from './CreateRoomListItem'
+import { createStyles } from './styles'
+import { CreateRoomListProps } from './types'
+
+const CreateRoomList = ({ targetRef, searchParam }: CreateRoomListProps) => {
+  const theme = useTheme()
+  const styles = createStyles(theme)
+
+  const [isPending, startTransition] = useTransition()
+  const { data, refetch, loadNext, hasNext } = useAllProfilesList(targetRef)
+
+  const profiles = data?.allProfiles?.edges ?? []
+  const layoutTriggeredRef = useRef(false)
+  const screenHeight = Dimensions.get('window').height
+
+  const loadNextBasedOnHeight = (height: number) => {
+    if (!layoutTriggeredRef.current && hasNext && height < screenHeight) {
+      layoutTriggeredRef.current = true
+      loadNext(10)
+    }
+  }
+
+  const handleEmptySearch = () => {
+    if (searchParam && !isPending && !profiles.length) {
+      return <SearchNotFoundState />
+    }
+    return null
+  }
+
+  useEffect(() => {
+    layoutTriggeredRef.current = false
+    startTransition(() => {
+      refetch({ q: searchParam })
+    })
+  }, [refetch, searchParam])
+
+  return (
+    <View style={styles.flatListWrapper}>
+      <FlatList
+        data={profiles}
+        keyExtractor={(item, i) => (item && item.node?.id) || i.toString()}
+        renderItem={({ item }) => (item?.node ? <ChatRoomListItem profile={item.node} /> : null)}
+        onEndReached={() => {
+          if (hasNext) loadNext(10)
+        }}
+        onEndReachedThreshold={0.8}
+        onContentSizeChange={(width, height) => loadNextBasedOnHeight(height)}
+        contentContainerStyle={styles.contentContainer}
+        style={styles.flatList}
+        keyboardShouldPersistTaps="handled"
+        ListEmptyComponent={handleEmptySearch}
+      />
+    </View>
+  )
+}
+
+const CreateRoomListWithProvider = withChatRoomProvider(CreateRoomList)
+
+const SuspendedCreateRoomList = (props: CreateRoomListProps) => (
+  <Suspense>
+    <CreateRoomListWithProvider {...props} />
+  </Suspense>
+)
+
+export default SuspendedCreateRoomList

packages/components/modules/messages/native/SingleChatCreate/CreateRoomList/styles.ts

@@ -0,0 +1,19 @@
+import { Theme } from '@baseapp-frontend/design-system/styles/native'
+
+import { StyleSheet } from 'react-native'
+
+export const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    flatListWrapper: {
+      flex: 1,
+    },
+    contentContainer: {
+      paddingBottom: 16,
+      width: '100%',
+    },
+    flatList: {
+      flex: 1,
+      width: '100%',
+      backgroundColor: theme.colors.surface.background,
+    },
+  })

packages/components/modules/messages/native/SingleChatCreate/CreateRoomList/types.ts

@@ -0,0 +1,6 @@
+// import { CreateRoomPageQuery$data } from '__generated__/CreateRoomPageQuery.graphql'
+
+export interface CreateRoomListProps {
+  targetRef: any // CreateRoomPageQuery$data
+  searchParam: string
+}

packages/components/modules/messages/native/SingleChatCreate/index.tsx

@@ -0,0 +1,13 @@
+import { Theme } from '@baseapp-frontend/design-system/styles/native'
+
+import { StyleSheet } from 'react-native'
+
+export const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    container: {
+      backgroundColor: theme.colors.surface.background,
+      flex: 1,
+      flexGrow: 1,
+      paddingHorizontal: 12,
+    },
+  })

packages/components/modules/messages/native/SingleChatCreate/styles.ts

@@ -3,4 +3,4 @@ export * from './graphql/subscriptions/useMessagesListSubscription'
 export * from './graphql/subscriptions/useRoomListSubscription'
 export { default as ChatRooms } from './ChatRooms'
 export { default as RoomsList } from './RoomsList'
-export { default as SearchNotFoundState } from './SearchNotFoundState'
+export { default as CreateRoomList } from './SingleChatCreate/CreateRoomList'