feat(samples): mentions screen (#116)

samples/react-native-group-chat/components/list-item/ListItem.tsx

@@ -35,7 +35,7 @@ export function ListItem({ title, avatar, badge, onPress, showCheckbox, checked
         {badge ? (
           <View style={styles.badge}>
             <Text variant="body" color="neutral0">
-              5
+              {badge}
             </Text>
           </View>
         ) : null}
@@ -59,6 +59,7 @@ const styles = StyleSheet.create({
   },
   title: {
     paddingHorizontal: 16,
+    flexGrow: 1,
   },
   badge: {
     backgroundColor: colors.badge,

samples/react-native-group-chat/components/user-suggestion-box/UserSuggestionBox.tsx

@@ -13,7 +13,7 @@ export function UserSuggestionBox({ users, onUserSelect }: UserSuggestionBoxProp
   return (
     <View style={styles.container}>
       {users.map((user) => (
-        <ListItem title={user.name} key={user.id} onPress={() => onUserSelect(user)} />
+        <ListItem title={user.name || user.id} key={user.id} onPress={() => onUserSelect(user)} />
       ))}
     </View>
   )

samples/react-native-group-chat/hooks/useCommonChatRenderers.tsx

@@ -71,7 +71,7 @@ export function useCommonChatRenderers({
   )
 
   const renderChatFooter = useCallback(() => {
-    if (!messageDraft || !messageDraft.quotedMessage) {
+    if (!messageDraft) {
       return null
     }
 
@@ -83,7 +83,7 @@ export function useCommonChatRenderers({
       quotedMessageComponent = (
         <View style={styles.footerContainer}>
           <Quote
-            message={messageDraft.quotedMessage}
+            message={quotedMessage}
             charactersLimit={100}
             onGoToMessage={() => scrollToMessage(quotedMessage)}
           />
@@ -102,7 +102,7 @@ export function useCommonChatRenderers({
         {userSuggestionComponent}
       </>
     )
-  }, [messageDraft, showSuggestedUsers, scrollToMessage])
+  }, [messageDraft, showSuggestedUsers, scrollToMessage, handleUserToMention, suggestedUsers])
 
   const renderMessagePart = useCallback(
     (messagePart: MixedTextTypedElement, index: number, userId: string | number) => {

samples/react-native-group-chat/screens/tabs/mentions/MentionsScreen.tsx

@@ -1,10 +1,108 @@
-import React from "react";
-import { View, Text } from "react-native";
+import React, { useContext, useState } from "react"
+import { View, StyleSheet, ScrollView, TouchableHighlight, ActivityIndicator } from "react-native"
+import { useFocusEffect } from "@react-navigation/native"
+import { UserMentionData, TimetokenUtils } from "@pubnub/chat"
+import { BottomTabScreenProps } from "@react-navigation/bottom-tabs"
+
+import { colorPalette as colors, Line, Text } from "../../../ui-components"
+import { ChatContext } from "../../../context"
+import { Avatar } from "../../../components"
+import { BottomTabsParamList } from "../../../types"
+
+export function MentionsScreen({
+  navigation,
+}: BottomTabScreenProps<BottomTabsParamList, "Mentions">) {
+  const { chat, setCurrentChannel } = useContext(ChatContext)
+  const [mentions, setMentions] = useState<UserMentionData[]>([])
+  const [loading, setLoading] = useState(true)
+
+  async function openChannel(channelId: string) {
+    if (!chat) return
+    const channel = await chat.getChannel(channelId)
+    if (!channel) {
+      alert("This channel no longer exists.")
+      return
+    }
+    setCurrentChannel(channel)
+    navigation.navigate("Chat")
+  }
+
+  useFocusEffect(() => {
+    const init = async () => {
+      if (!chat) return
+      const { enhancedMentionsData } = await chat.getCurrentUserMentions()
+      setMentions(enhancedMentionsData.reverse())
+      setLoading(false)
+    }
+    if (chat) init()
+  })
+
+  if (loading || !mentions.length) {
+    return (
+      <View style={styles.loading}>
+        {loading ? (
+          <ActivityIndicator size="large" color={colors.navy700} />
+        ) : (
+          <Text textAlign="center">No mentions found.</Text>
+        )}
+      </View>
+    )
+  }
 
-export function MentionsScreen() {
   return (
-    <View>
-      <Text>Mentions screen</Text>
-    </View>
+    <ScrollView style={styles.container}>
+      {mentions.map((mention, index) => (
+        <View key={mention.event.timetoken}>
+          <TouchableHighlight
+            onPress={() => openChannel(mention.message.channelId)}
+            underlayColor={colors.neutral50}
+          >
+            <View>
+              <Text variant="smallBody" color="neutral600">
+                {TimetokenUtils.timetokenToDate(mention.message.timetoken).toLocaleString([], {
+                  weekday: "short",
+                  month: "short",
+                  day: "numeric",
+                  hour: "numeric",
+                  minute: "numeric",
+                })}
+              </Text>
+              <View style={styles.message}>
+                <Avatar source={mention.user} style={{ marginTop: 10 }} />
+                <View style={styles.bubble}>
+                  <Text>{mention.message.text}</Text>
+                </View>
+              </View>
+            </View>
+          </TouchableHighlight>
+          {index !== mentions.length - 1 && <Line style={{ marginVertical: 16 }} />}
+        </View>
+      ))}
+    </ScrollView>
   )
 }
+
+const styles = StyleSheet.create({
+  loading: {
+    backgroundColor: colors.neutral0,
+    flex: 1,
+    justifyContent: "center",
+  },
+  container: {
+    backgroundColor: colors.neutral0,
+    flex: 1,
+    padding: 16,
+  },
+  message: {
+    flexDirection: "row",
+    marginTop: 10,
+    marginLeft: 10,
+  },
+  bubble: {
+    backgroundColor: colors.neutral50,
+    borderRadius: 6,
+    borderTopLeftRadius: 0,
+    marginLeft: 10,
+    padding: 10,
+  },
+})

samples/react-native-group-chat/ui-components/line/Line.tsx

@@ -1,6 +1,9 @@
 import React from "react"
-import { View } from "react-native"
+import { View, ViewProps } from "react-native"
 
-export function Line() {
-  return <View style={{ width: "100%", height: 1, backgroundColor: "#E2E8F0" }} />
+export function Line(props: ViewProps) {
+  const { style, ...rest } = props
+  return (
+    <View style={[{ width: "100%", height: 1, backgroundColor: "#E2E8F0" }, style]} {...rest} />
+  )
 }