aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.tsx43
-rw-r--r--src/routes/main/MainStackNavigator.tsx2
-rw-r--r--src/screens/chat/ChatListScreen.tsx48
-rw-r--r--src/screens/chat/ChatScreen.tsx45
-rw-r--r--src/types/types.ts39
5 files changed, 123 insertions, 54 deletions
diff --git a/src/App.tsx b/src/App.tsx
index ea3617dc..d0276dd2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,18 +1,57 @@
import {NavigationContainer} from '@react-navigation/native';
-import React from 'react';
+import React, {useState} from 'react';
import {Provider} from 'react-redux';
+import {Channel as ChannelType, StreamChat} from 'stream-chat';
+import {OverlayProvider} from 'stream-chat-react-native';
import {navigationRef} from './RootNavigation';
import Routes from './routes';
import store from './store/configureStore';
+import {
+ ChatContextType,
+ LocalAttachmentType,
+ LocalChannelType,
+ LocalCommandType,
+ LocalEventType,
+ LocalMessageType,
+ LocalResponseType,
+ LocalUserType,
+} from './types';
+
+export const ChatContext = React.createContext({} as ChatContextType);
const App = () => {
+ const [channel, setChannel] = useState<
+ ChannelType<
+ LocalAttachmentType,
+ LocalChannelType,
+ LocalCommandType,
+ LocalEventType,
+ LocalMessageType,
+ LocalResponseType,
+ LocalUserType
+ >
+ >();
+ // TODO: (CHAT) change me
+ const chatClient = StreamChat.getInstance<
+ LocalAttachmentType,
+ LocalChannelType,
+ LocalCommandType,
+ LocalEventType,
+ LocalMessageType,
+ LocalResponseType,
+ LocalUserType
+ >('t823wwqn2wuk');
return (
/**
* This is the provider from the redux store, it acts as the root provider for our application
*/
<Provider store={store}>
<NavigationContainer ref={navigationRef}>
- <Routes />
+ <ChatContext.Provider value={{channel, setChannel, chatClient}}>
+ <OverlayProvider>
+ <Routes />
+ </OverlayProvider>
+ </ChatContext.Provider>
</NavigationContainer>
</Provider>
);
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 36c6fb57..021c0688 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -93,7 +93,7 @@ export type MainStackParams = {
};
SPWelcomeScreen: {};
ChatList: undefined;
- Chat: {channel: any; chatClient: any};
+ Chat: undefined;
};
export const MainStack = createStackNavigator<MainStackParams>();
diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index 106995e0..8bced236 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -1,8 +1,8 @@
import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useEffect, useMemo, useState} from 'react';
+import React, {useContext, useEffect, useMemo, useState} from 'react';
import {SafeAreaView, StatusBar, StyleSheet, View} from 'react-native';
-import {StreamChat} from 'stream-chat';
-import {ChannelList, Chat, Streami18n} from 'stream-chat-react-native';
+import {ChannelList, Chat} from 'stream-chat-react-native';
+import {ChatContext} from '../../App';
import {MessagesHeader} from '../../components/messages';
import {MainStackParams} from '../../routes';
@@ -17,24 +17,21 @@ interface ChatListScreenProps {
* Screen that displays all of the user's active conversations.
*/
const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
- const filters = {
- example: 'example-apps',
- members: {$in: ['john']},
- type: 'messaging',
- };
+ const {chatClient, setChannel} = useContext(ChatContext);
const [clientReady, setClientReady] = useState(false);
- const chatClient = StreamChat.getInstance('t823wwqn2wuk');
- // const chatClient = StreamChat.getInstance('q95x9hkbyd6p');
+ // TODO: (CHAT) change this filter to filter for user-ids, or usernames?!
+ const memoizedFilters = useMemo(
+ () => ({
+ members: {$in: ['john']},
+ type: 'messaging',
+ }),
+ [],
+ );
useEffect(() => {
const setupClient = async () => {
- // await chatClient.connectUser(
- // {
- // id: 'ron',
- // },
- // 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicm9uIn0.eRVjxLvd4aqCEHY_JRa97g6k7WpHEhxL7Z4K4yTot1c',
- // );
+ // TODO: (CHAT) change me
await chatClient.connectUser(
{
id: 'john',
@@ -43,7 +40,6 @@ const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
},
chatClient.devToken('john'),
);
-
return setClientReady(true);
};
@@ -52,37 +48,29 @@ const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
});
}, []);
- const streami18n = new Streami18n({
- language: 'en',
- });
-
- const memoizedFilters = useMemo(() => filters, []);
-
return (
<View style={styles.background}>
<SafeAreaView>
<StatusBar barStyle="dark-content" />
<MessagesHeader
createChannel={() => {
+ // TODO: (CHAT) change me
const channel = chatClient.channel('messaging', 'travel2', {
name: 'Awesome channel about traveling',
members: ['john'],
});
- // console.log(JSON.stringify(channel));
channel.create();
}}
/>
{clientReady && (
- <Chat client={chatClient} i18nInstance={streami18n}>
+ <Chat client={chatClient}>
<View style={styles.chatContainer}>
<ChannelList
filters={memoizedFilters}
onSelect={(channel) => {
- console.log('Navigate to chat screen here');
- navigation.navigate('Chat', {
- channel,
- chatClient,
- });
+ // TODO: (CHAT) fix type issue
+ setChannel(channel);
+ navigation.navigate('Chat');
}}
options={{
presence: true,
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 08145b89..eeb1a7d6 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,40 +1,43 @@
-import React from 'react';
-import {View, StyleSheet, Text} from 'react-native';
-import {StackNavigationProp} from '@react-navigation/stack';
-
+import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
+import {StackNavigationProp, useHeaderHeight} from '@react-navigation/stack';
+import React, {useContext} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {
+ Channel,
+ Chat,
+ MessageInput,
+ MessageList,
+} from 'stream-chat-react-native';
+import {ChatContext} from '../../App';
import {MainStackParams} from '../../routes';
-import {navigationRef} from '../../RootNavigation';
-import {RouteProp} from '@react-navigation/native';
type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
-type ChatScreenRouteProp = RouteProp<MainStackParams, 'Chat'>;
interface ChatScreenProps {
navigation: ChatScreenNavigationProp;
- route: ChatScreenRouteProp;
}
/*
* Screen that displays all of the user's active conversations.
*/
-const ChatScreen: React.FC<ChatScreenProps> = ({route}) => {
- const {channel, chatClient} = route.params;
- console.log(channel);
- console.log(chatClient);
+const ChatScreen: React.FC<ChatScreenProps> = () => {
+ const {channel, chatClient} = useContext(ChatContext);
+ const headerHeight = useHeaderHeight();
+ const tabbarHeight = useBottomTabBarHeight();
+
return (
- <View style={styles.container}>
- <Text style={styles.placeholder}>I am a chat!</Text>
+ <View style={[styles.container, {paddingBottom: tabbarHeight}]}>
+ <Chat client={chatClient}>
+ <Channel channel={channel} keyboardVerticalOffset={headerHeight}>
+ <MessageList onThreadSelect={() => {}} />
+ <MessageInput />
+ </Channel>
+ </Chat>
</View>
);
};
const styles = StyleSheet.create({
container: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- },
- placeholder: {
- fontSize: 14,
- fontWeight: 'bold',
+ backgroundColor: 'white',
},
});
diff --git a/src/types/types.ts b/src/types/types.ts
index e7acd6e0..b5dc6373 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -1,4 +1,5 @@
import Animated from 'react-native-reanimated';
+import {Channel as ChannelType, StreamChat} from 'stream-chat';
export interface UserType {
userId: string;
@@ -288,3 +289,41 @@ export type ContactType = {
export type UniversityBadgeType = 'Search' | 'Crest';
export type BadgeDataType = Record<UniversityType, any[]>;
+
+// Stream Chat Types
+export type LocalAttachmentType = Record<string, unknown>;
+export type LocalChannelType = Record<string, unknown>;
+export type LocalCommandType = string;
+export type LocalEventType = Record<string, unknown>;
+export type LocalMessageType = Record<string, unknown>;
+export type LocalResponseType = Record<string, unknown>;
+export type LocalUserType = Record<string, unknown>;
+
+export type ChatContextType = {
+ channel:
+ | ChannelType<
+ LocalAttachmentType,
+ LocalChannelType,
+ LocalCommandType,
+ LocalEventType,
+ LocalMessageType,
+ LocalResponseType,
+ LocalUserType
+ >
+ | undefined;
+ setChannel: React.Dispatch<
+ React.SetStateAction<
+ | ChannelType<
+ LocalAttachmentType,
+ LocalChannelType,
+ LocalCommandType,
+ LocalEventType,
+ LocalMessageType,
+ LocalResponseType,
+ LocalUserType
+ >
+ | undefined
+ >
+ >;
+ chatClient: StreamChat;
+};
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 15:50:42 +0000