feat(lib): add an example of leave()

pubnub · Sep 19, 2023 · 76defcd · 76defcd
1 parent f8fe4c3
commit 76defcd
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 5 deletions.
diff --git a/samples/react-native-group-chat/App.tsx b/samples/react-native-group-chat/App.tsx
@@ -42,8 +42,10 @@ function TabNavigator({ route }: StackScreenProps<RootStackParamList, "tabs">) {
   useEffect(() => {
     async function init() {
       const chat = await Chat.init({
-        publishKey: process.env.EXPO_PUBLIC_PUBNUB_PUB_KEY || "demo",
-        subscribeKey: process.env.EXPO_PUBLIC_PUBNUB_SUB_KEY || "demo",
+        publishKey:
+          process.env.EXPO_PUBLIC_PUBNUB_PUB_KEY || "pub-c-0457cb83-0786-43df-bc70-723b16a6e816",
+        subscribeKey:
+          process.env.EXPO_PUBLIC_PUBNUB_SUB_KEY || "sub-c-e654122d-85b5-49a6-a3dd-8ebc93c882de",
         userId: name || "test-user",
         typingTimeout: 2000,
         storeUserActivityTimestamps: true,

diff --git a/samples/react-native-group-chat/screens/tabs/home/HomeScreen.tsx b/samples/react-native-group-chat/screens/tabs/home/HomeScreen.tsx
@@ -1,11 +1,18 @@
 import React, { useCallback, useContext, useEffect, useState } from "react"
-import { StyleSheet, ScrollView, TouchableHighlight, TouchableOpacity } from "react-native"
+import { StyleSheet, ScrollView, TouchableHighlight, TouchableOpacity, View } from "react-native"
 import { useFocusEffect } from "@react-navigation/native"
 import { StackScreenProps } from "@react-navigation/stack"
 import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
 import { Channel, Membership } from "@pubnub/chat"
 
-import { Gap, Line, TextInput, colorPalette as colors, Accordion } from "../../../ui-components"
+import {
+  Gap,
+  Line,
+  TextInput,
+  colorPalette as colors,
+  Accordion,
+  Text,
+} from "../../../ui-components"
 import { DirectChannels, ListItem, Avatar } from "../../../components"
 import { HomeStackParamList } from "../../../types"
 import { ChatContext } from "../../../context"
@@ -16,6 +23,8 @@ export function HomeScreen({ navigation }: StackScreenProps<HomeStackParamList,
   const [unreadChannels, setUnreadChannels] = useState<
     { channel: Channel; count: number; membership: Membership }[]
   >([])
+  const [otherChannels, setOtherChannels] = useState<Channel[]>([])
+  const [connectedChannels, setConnectedChannels] = useState([])
 
   const channels = memberships.map((m) => m.channel)
   const currentUserGroupChannels = channels.filter((c) => c.type === "group")
@@ -38,14 +47,18 @@ export function HomeScreen({ navigation }: StackScreenProps<HomeStackParamList,
   useEffect(() => {
     async function init() {
       if (!chat) return
-      const [, { memberships }, { users }] = await Promise.all([
+      const [, { memberships }, { users }, channelsData] = await Promise.all([
         fetchUnreadMessagesCount(),
         chat.currentUser.getMemberships(),
         chat.getUsers({}),
+        chat.getChannels({}),
       ])
 
       setUsers(users)
       setMemberships(memberships)
+      setOtherChannels(
+        channelsData.channels.filter((ch) => !memberships.find((m) => m.channel.id === ch.id))
+      )
     }
 
     init()
@@ -149,6 +162,32 @@ export function HomeScreen({ navigation }: StackScreenProps<HomeStackParamList,
         <Line />
         <Gap value={20} />
 
+        <Accordion title="OTHER">
+          {getFilteredChannels(otherChannels).map((channel) => (
+            <ListItem
+              key={channel.id}
+              title={channel.id}
+              avatar={<Avatar source={channel} />}
+              onPress={async () => {
+                // response.disconnect()
+                if (chat?.currentUser.id === "test-user2") {
+                  navigateToChat(channel)
+                } else {
+                  const response = await channel.join((msg) => {
+                    console.log("msg: ", msg)
+                  })
+                  setConnectedChannels((curr) => [...curr, response])
+                  console.log("response", response)
+                }
+              }}
+            />
+          ))}
+        </Accordion>
+
+        <Gap value={8} />
+        <Line />
+        <Gap value={20} />
+
         <Accordion title="DIRECT MESSAGES">
           <DirectChannels searchText={searchText} sortByActive={false} />
         </Accordion>
@@ -163,6 +202,27 @@ export function HomeScreen({ navigation }: StackScreenProps<HomeStackParamList,
       >
         <MaterialIcons name="chat-bubble" size={32} color={colors.neutral0} />
       </TouchableHighlight>
+      <View>
+        <Text>Currently connected to channels:</Text>
+        {connectedChannels.map((connectedChannel) => (
+          <View style={{ flexDirection: "row" }} key={connectedChannel.membership.channel.id}>
+            <Text>{connectedChannel.membership.channel.id}</Text>
+            <Text> ----- </Text>
+            <Text
+              onPress={() => {
+                connectedChannel.disconnect()
+                setConnectedChannels((curr) =>
+                  curr.filter(
+                    (c) => c.membership.channel.id !== connectedChannel.membership.channel.id
+                  )
+                )
+              }}
+            >
+              Click here to disconnect
+            </Text>
+          </View>
+        ))}
+      </View>
     </>
   )
 }