@planningcenter/chat-react-native 3.4.1-rc.2 → 3.4.1-rc.4

package/src/screens/conversation_screen.tsx

@@ -22,6 +22,7 @@ import { useConversation } from '../hooks/use_conversation'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { MessageResource } from '../types'
 import { getRelativeDateStatus } from '../utils/date'
+import { EmptyConversationBlankState } from '../components/conversation/empty_conversation_blank_state'
 
 type ConversationRouteProps = {
   conversation_id: number
@@ -42,6 +43,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   })
   useEnsureConversationsRouteExists()
   const messagesWithSeparators = groupMessages(messages)
+  const noMessages = messagesWithSeparators.length === 0
 
   // Seems to be necessary to define this way so we get the route picked up
   const headerTitle = useCallback(
@@ -56,22 +58,26 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   return (
     <View style={styles.container}>
       <KeyboardView style={styles.keyboardView}>
-        <FlatList
-          inverted
-          contentContainerStyle={styles.listContainer}
-          refreshing={isRefetching}
-          onRefresh={refetch}
-          data={messagesWithSeparators}
-          keyExtractor={item => item.id}
-          renderItem={({ item }) => {
-            if (item.type === 'DateSeparator') {
-              return <InlineDateSeparator {...item} />
-            }
+        {noMessages ? (
+          <EmptyConversationBlankState />
+        ) : (
+          <FlatList
+            inverted
+            contentContainerStyle={styles.listContainer}
+            refreshing={isRefetching}
+            onRefresh={refetch}
+            data={messagesWithSeparators}
+            keyExtractor={item => item.id}
+            renderItem={({ item }) => {
+              if (item.type === 'DateSeparator') {
+                return <InlineDateSeparator {...item} />
+              }
 
-            return <Message {...item} conversation_id={conversation_id} />
-          }}
-          onEndReached={() => fetchNextPage()}
-        />
+              return <Message {...item} conversation_id={conversation_id} />
+            }}
+            onEndReached={() => fetchNextPage()}
+          />
+        )}
         <MessageForm.Root conversation={conversation}>
           <MessageForm.AttachmentPicker />
           <MessageForm.Commands />

package/src/screens/design_system_screen.tsx

@@ -28,6 +28,7 @@ import {
   platformFontWeightMedium,
 } from '../utils'
 import BannerPrimitive from '../components/primitive/banner_primitive'
+import { BlankState } from '../components/display/blank_state'
 
 // =================================
 // ====== Docs Utils ===============
@@ -915,6 +916,24 @@ function MiscComponentsSection({ isLast }: SectionProps) {
           <Person person={personChild} />
         </Column>
       </Group>
+      <Group
+        title="BlankState"
+        description="Displays a title and an optional icon, subtitle, and button. Button can be customized via `buttonProps`."
+      >
+        <Column>
+          <BlankState
+            iconName="general.outlinedTextMessage"
+            title="No messages"
+            subtitle="Conversation is hidden from everyone until you send a message."
+            buttonProps={{
+              onPress: buttonPress,
+              title: 'Go back',
+              accessibilityHint: 'Navigates back to the conversations list',
+              accessibilityRole: 'link',
+            }}
+          />
+        </Column>
+      </Group>
     </CollapsableSection>
   )
 }