feature/BA-26-26-Single chat components

packages/components/modules/__shared__/common/index.ts

@@ -2,3 +2,4 @@
 
 export * from './constants'
 export type * from './types'
+export * from './utils'

packages/components/modules/__shared__/common/utils.ts

@@ -0,0 +1,4 @@
+export function formatHandle(path?: string): string | null {
+  if (!path) return null
+  return `@${path.replace('/', '')}`
+}

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

@@ -0,0 +1,70 @@
+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 { formatHandle } from '../../../../../__shared__/common'
+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>
+          {node?.urlPath?.path && (
+            <Text variant="caption">{formatHandle(node?.urlPath?.path)}</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 { InfiniteScrollerView, View } from '@baseapp-frontend/design-system/components/native/views'
+import { useTheme } from '@baseapp-frontend/design-system/providers/native'
+
+import { Dimensions } from 'react-native'
+
+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, isLoadingNext, 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}>
+      <InfiniteScrollerView
+        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}
+        isLoading={isLoadingNext}
+      />
+    </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: CreateRoomPageQuery$data
+  searchParam: string
+}

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

@@ -0,0 +1,70 @@
+import { Suspense, useTransition } from 'react'
+
+import {
+  DEFAULT_FORM_VALUES,
+  FORM_VALUES,
+  SearchInput,
+  SearchInputFormValues,
+} from '@baseapp-frontend/design-system/components/native/inputs'
+import { View } from '@baseapp-frontend/design-system/components/native/views'
+import { useTheme } from '@baseapp-frontend/design-system/providers/native'
+
+import { useForm } from 'react-hook-form'
+import { useLazyLoadQuery } from 'react-relay'
+
+import { CreateRoomPageQuery } from '../../../../__generated__/CreateRoomPageQuery.graphql'
+import { profilesListQuery } from '../graphql/queries/CreateRoomPageQuery'
+import CreateRoomList from './CreateRoomList'
+import { createStyles } from './styles'
+
+const CreateRoomPage = () => {
+  const theme = useTheme()
+  const styles = createStyles(theme)
+  const { control, watch, setValue, reset } = useForm<SearchInputFormValues>({
+    defaultValues: DEFAULT_FORM_VALUES,
+  })
+
+  const searchParam = watch(FORM_VALUES.search)
+  const [isPending, startTransition] = useTransition()
+
+  const queryData = useLazyLoadQuery<CreateRoomPageQuery>(profilesListQuery, {
+    count: 10,
+    cursor: null,
+  })
+
+  const handleSearchChange = (text: string) => {
+    if (isPending) return
+    startTransition(() => {
+      setValue(FORM_VALUES.search, text)
+    })
+  }
+
+  const resetInput = () => {
+    setValue(FORM_VALUES.search, DEFAULT_FORM_VALUES.search)
+    reset(DEFAULT_FORM_VALUES)
+  }
+
+  return (
+    <View style={styles.container}>
+      <SearchInput
+        placeholder="Search"
+        onChangeText={handleSearchChange}
+        control={control}
+        name={FORM_VALUES.search}
+        searchParam={searchParam}
+        resetInput={resetInput}
+        autoComplete="off"
+        autoCorrect={false}
+        autoFocus
+      />
+      <CreateRoomList targetRef={queryData} searchParam={searchParam} />
+    </View>
+  )
+}
+
+const SupendedCreateRoomPage = () => (
+  <Suspense>
+    <CreateRoomPage />
+  </Suspense>
+)
+export default SupendedCreateRoomPage

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

@@ -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/graphql/queries/CreateRoomPageQuery.ts

@@ -0,0 +1,7 @@
+import { graphql } from 'react-relay'
+
+export const profilesListQuery = graphql`
+  query CreateRoomPageQuery($count: Int, $cursor: String) {
+    ...AllProfilesListFragment @arguments(count: $count, cursor: $cursor)
+  }
+`

packages/components/modules/messages/native/index.ts

@@ -3,4 +3,5 @@ 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'
+export { default as SingleChatCreate } from './SingleChatCreate'