feature/BA-2626-chatroom-list

packages/components/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @baseapp-frontend/components
 
+## 1.4.8
+
+### Minor Changes
+
+- Added roomslist components and illustrations
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/design-system@1.1.5
+
 ## 1.4.7
 
 ### Patch Changes

packages/components/modules/__shared__/native/EmptyView/index.tsx

@@ -0,0 +1,29 @@
+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 { createStyles } from './styles'
+import { EmptyViewProps } from './types'
+
+const EmptyView = ({ icon, title, message, style }: EmptyViewProps) => {
+  const theme = useTheme()
+  const styles = createStyles(theme)
+
+  return (
+    <View style={[styles.container, style]}>
+      {icon && <View style={styles.imageWrapper}>{icon}</View>}
+      <View style={styles.textWrapper}>
+        <Text variant="subtitle2" style={styles.text}>
+          {title}
+        </Text>
+        {message && (
+          <Text variant="caption" style={styles.text}>
+            {message}
+          </Text>
+        )}
+      </View>
+    </View>
+  )
+}
+
+export default EmptyView

packages/components/modules/__shared__/native/EmptyView/styles.ts

@@ -0,0 +1,30 @@
+import { Theme } from '@baseapp-frontend/design-system/styles/native'
+
+import { StyleSheet } from 'react-native'
+
+export const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      padding: 32,
+      flexDirection: 'column',
+      gap: 12,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    imageWrapper: {
+      flex: 1,
+      alignItems: 'center',
+    },
+    textWrapper: {
+      flex: 1,
+      maxWidth: '100%',
+      padding: 16,
+      justifyContent: 'flex-end',
+      alignItems: 'center',
+      gap: 10,
+    },
+    text: {
+      color: theme.colors.object.low,
+    },
+  })

packages/components/modules/__shared__/native/EmptyView/types.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react'
+
+import { StyleProp, ViewStyle } from 'react-native'
+
+export interface EmptyViewProps {
+  icon?: ReactNode
+  title: string
+  message?: string
+  style?: StyleProp<ViewStyle>
+}

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

@@ -0,0 +1,2 @@
+export { default as EmptyView } from './EmptyView'
+export type * from './EmptyView/types'

packages/components/modules/messages/common/graphql/fragments/ChatRoom.ts

@@ -0,0 +1,16 @@
+import { graphql } from 'react-relay'
+
+export const ChatRoomFragment = graphql`
+  fragment ChatRoomFragment on ChatRoom @refetchable(queryName: "ChatRoomFragmentRefetchQuery") {
+    id
+    isGroup
+    isArchived
+    unreadMessages {
+      count
+      markedUnread
+    }
+    participantsCount
+    ...TitleFragment
+    ...MessagesListFragment
+  }
+`

packages/components/modules/messages/common/graphql/queries/ChatRoomQuery.ts

@@ -8,6 +8,7 @@ export const ChatRoomQuery = graphql`
       participantsCount
       ...TitleFragment
       ...MessagesListFragment
+      ...ChatRoomFragment
     }
   }
 `

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

@@ -0,0 +1,139 @@
+import { FC, Suspense, useState, useTransition } from 'react'
+
+import { useCurrentProfile } from '@baseapp-frontend/authentication'
+import { LoadingScreen } from '@baseapp-frontend/design-system/components/native/displays'
+import {
+  DEFAULT_FORM_VALUES,
+  FORM_VALUES,
+  SearchInput,
+  SearchInputFormValues,
+} from '@baseapp-frontend/design-system/components/native/inputs'
+import { Tab, Tabs } from '@baseapp-frontend/design-system/components/native/tabs'
+import { Text } from '@baseapp-frontend/design-system/components/native/typographies'
+import { PageViewWithHeader, View } from '@baseapp-frontend/design-system/components/native/views'
+import { useTheme } from '@baseapp-frontend/design-system/providers/native'
+import { useAppStateSubscription } from '@baseapp-frontend/utils/hooks/useAppStateSubscription'
+
+import { useForm } from 'react-hook-form'
+import { useLazyLoadQuery, useRelayEnvironment } from 'react-relay'
+
+import { ChatRoomsQuery as ChatRoomsQueryType } from '../../../../__generated__/ChatRoomsQuery.graphql'
+import { RoomsListFragment$key } from '../../../../__generated__/RoomsListFragment.graphql'
+import { useRoomsList } from '../../common'
+import { ChatRoomsQuery } from '../../common/graphql/queries/ChatRoomsQuery'
+import { NewChatButton } from '../NewChatButton'
+import RoomsList from '../RoomsList'
+import { CHAT_TAB_LABEL, CHAT_TAB_VALUES } from '../RoomsList/RoomsListComponent/constants'
+import { ChatTabValues } from '../RoomsList/RoomsListComponent/types'
+import { useRoomListSubscription } from '../graphql/subscriptions/useRoomListSubscription'
+import { createStyles } from './styles'
+
+const ChatRooms: FC = () => {
+  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 [selectedTab, setSelectedTab] = useState<string>(CHAT_TAB_VALUES.active)
+  const [, startTransition] = useTransition()
+  const { currentProfile } = useCurrentProfile()
+  const chatRoomQueryData = useLazyLoadQuery<ChatRoomsQueryType>(
+    ChatRoomsQuery,
+    { profileId: currentProfile?.id || '' },
+    { fetchPolicy: 'store-and-network' },
+  )
+  const { data, refetch } = useRoomsList(chatRoomQueryData?.profile as RoomsListFragment$key)
+
+  const handleSearchChange = (text: string) => {
+    startTransition(() => {
+      setValue(FORM_VALUES.search, text)
+    })
+  }
+
+  const resetInput = () => {
+    setValue(FORM_VALUES.search, DEFAULT_FORM_VALUES.search)
+    reset(DEFAULT_FORM_VALUES)
+  }
+
+  const environment = useRelayEnvironment()
+  useRoomListSubscription({ profileId: data?.id, connections: [], environment })
+
+  const handleChange = (newValue: string) => {
+    setSelectedTab(newValue as ChatTabValues)
+  }
+
+  useAppStateSubscription(() => {
+    refetch(
+      {
+        q: searchParam,
+        unreadMessages: selectedTab === CHAT_TAB_VALUES.unread,
+        archived: selectedTab === CHAT_TAB_VALUES.archived,
+      },
+      { fetchPolicy: 'store-and-network' },
+    )
+  })
+
+  return (
+    <PageViewWithHeader>
+      <View style={styles.container}>
+        <Text variant="h4">Messages</Text>
+        <SearchInput
+          placeholder="Search"
+          onChangeText={handleSearchChange}
+          control={control}
+          name={FORM_VALUES.search}
+          searchParam={searchParam}
+          resetInput={resetInput}
+          autoComplete="off"
+          autoCorrect={false}
+        />
+
+        <Tabs value={selectedTab} onChange={handleChange} style={styles.tabs}>
+          <Tab
+            label={CHAT_TAB_LABEL.active}
+            value={CHAT_TAB_VALUES.active}
+            aria-label="Active messages tab"
+          />
+          <Tab
+            label={CHAT_TAB_LABEL.unread}
+            value={CHAT_TAB_VALUES.unread}
+            aria-label="Unread messages tab"
+          />
+          <Tab
+            label={CHAT_TAB_LABEL.archived}
+            value={CHAT_TAB_VALUES.archived}
+            aria-label="Archived messages tab"
+          />
+        </Tabs>
+        {
+          // TODO: Handle groups tab separately will be implemented later
+          selectedTab === CHAT_TAB_VALUES.groups ? (
+            <Text>Groups tab is not implemented yet.</Text>
+          ) : (
+            <RoomsList
+              targetRef={chatRoomQueryData}
+              searchParam={searchParam}
+              selectedTab={selectedTab}
+            />
+          )
+        }
+        <NewChatButton />
+      </View>
+    </PageViewWithHeader>
+  )
+}
+
+const SuspendedChatRooms = () => (
+  <Suspense
+    fallback={
+      <View style={{ flex: 1 }}>
+        <LoadingScreen />
+      </View>
+    }
+  >
+    <ChatRooms />
+  </Suspense>
+)
+
+export default SuspendedChatRooms

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

@@ -0,0 +1,20 @@
+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,
+      flexGrow: 1,
+      flex: 1,
+      position: 'relative',
+    },
+    chatRoomsContainer: {
+      flexGrow: 1,
+    },
+    tabs: {
+      justifyContent: 'space-evenly',
+      gap: 0,
+    },
+  })

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

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { FabButton } from '@baseapp-frontend/design-system/components/native/buttons'
+import { useTheme } from '@baseapp-frontend/design-system/providers/native'
+
+import { useRouter } from 'expo-router'
+
+const NewChatButton = () => {
+  const theme = useTheme()
+  const router = useRouter()
+
+  const navigateToCreateRoom = () => router.push('/create-room')
+
+  return (
+    <FabButton
+      onPress={navigateToCreateRoom}
+      iconName="add"
+      iconSize={28}
+      iconColor={theme.colors.primary.contrast}
+    />
+  )
+}
+
+export { NewChatButton }