aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/App.tsx15
-rw-r--r--src/assets/icons/compose.svg1
-rw-r--r--src/components/messages/ChannelPreview.tsx131
-rw-r--r--src/components/messages/ChatHeader.tsx84
-rw-r--r--src/components/messages/MessagesHeader.tsx20
-rw-r--r--src/components/messages/index.ts1
-rw-r--r--src/routes/main/MainStackScreen.tsx7
-rw-r--r--src/screens/chat/ChatListScreen.tsx33
-rw-r--r--src/screens/chat/ChatScreen.tsx21
-rw-r--r--src/screens/main/NotificationsScreen.tsx2
-rw-r--r--src/types/types.ts22
-rw-r--r--src/utils/layouts.ts1
-rw-r--r--src/utils/messages.ts83
13 files changed, 375 insertions, 46 deletions
diff --git a/src/App.tsx b/src/App.tsx
index 9510c193..b8d64461 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,14 @@
import {NavigationContainer} from '@react-navigation/native';
import React, {useState} from 'react';
import {Provider} from 'react-redux';
-import {Channel as ChannelType, StreamChat} from 'stream-chat';
+import {StreamChat} from 'stream-chat';
import {OverlayProvider} from 'stream-chat-react-native';
import {STREAM_CHAT_API} from './constants';
import {navigationRef} from './RootNavigation';
import Routes from './routes';
import store from './store/configureStore';
import {
+ ChannelGroupedType,
ChatContextType,
LocalAttachmentType,
LocalChannelType,
@@ -21,17 +22,7 @@ import {
export const ChatContext = React.createContext({} as ChatContextType);
const App = () => {
- const [channel, setChannel] = useState<
- ChannelType<
- LocalAttachmentType,
- LocalChannelType,
- LocalCommandType,
- LocalEventType,
- LocalMessageType,
- LocalResponseType,
- LocalUserType
- >
- >();
+ const [channel, setChannel] = useState<ChannelGroupedType>();
const chatClient = StreamChat.getInstance<
LocalAttachmentType,
LocalChannelType,
diff --git a/src/assets/icons/compose.svg b/src/assets/icons/compose.svg
new file mode 100644
index 00000000..062e08cf
--- /dev/null
+++ b/src/assets/icons/compose.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 720"><defs><style>.cls-1,.cls-2,.cls-3{fill:none;}.cls-1,.cls-2{stroke:#828282;stroke-linecap:round;stroke-width:48px;}.cls-1,.cls-3{stroke-miterlimit:10;}.cls-2{stroke-linejoin:round;}.cls-3{stroke:#5c5b5e;stroke-width:0.91px;}</style></defs><path class="cls-1" d="M607.16,358.14V584.69c0,41.63-38,75.36-85,75.36H122.42c-46.91,0-84.93-33.73-84.93-75.36V168c0-41.62,38-75.4,84.93-75.4H412.23"/><path class="cls-2" d="M672.13,165.09l-289,290.8-52.62,19.66-81.11,30.28,27.77-83.35,17.06-51.26a2,2,0,0,1,.28-.32L585.59,78a60.89,60.89,0,0,1,86.54,0A61.87,61.87,0,0,1,672.13,165.09Z"/><line class="cls-3" x1="280.02" y1="283.62" x2="279.34" y2="283.87"/></svg> \ No newline at end of file
diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx
new file mode 100644
index 00000000..312f879a
--- /dev/null
+++ b/src/components/messages/ChannelPreview.tsx
@@ -0,0 +1,131 @@
+import {useNavigation} from '@react-navigation/core';
+import React, {useContext} from 'react';
+import {Image, StyleSheet, Text, View} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {useStore} from 'react-redux';
+import {usernameRegex} from 'src/constants';
+import {ChannelPreviewMessengerProps} from 'stream-chat-react-native';
+import {ChatContext} from '../../App';
+import {
+ LocalAttachmentType,
+ LocalChannelType,
+ LocalCommandType,
+ LocalEventType,
+ LocalMessageType,
+ LocalReactionType,
+ LocalUserType,
+} from '../../types';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {getMember, isOnline} from '../../utils/messages';
+
+const ChannelPreview: React.FC<ChannelPreviewMessengerProps<
+ LocalAttachmentType,
+ LocalChannelType,
+ LocalCommandType,
+ LocalEventType,
+ LocalMessageType,
+ LocalReactionType,
+ LocalUserType
+>> = (props) => {
+ const {setChannel} = useContext(ChatContext);
+ const state = useStore().getState();
+ const navigation = useNavigation();
+ const {channel} = props;
+ const member = getMember(channel, state);
+ const online = isOnline(member?.user?.last_active);
+ const unread = channel.state.unreadCount > 0;
+
+ return (
+ <TouchableOpacity
+ style={styles.container}
+ onPress={() => {
+ setChannel(channel);
+ navigation.navigate('Chat');
+ }}>
+ <View>
+ <Image
+ style={styles.avatar}
+ source={
+ member
+ ? {uri: member.user?.thumbnail_url}
+ : require('../../assets/images/avatar-placeholder.png')
+ }
+ />
+ {online && <View style={styles.online} />}
+ </View>
+ <View style={styles.content}>
+ <Text
+ style={[styles.name, unread ? styles.unread : {}]}
+ numberOfLines={1}>
+ {member?.user?.first_name} {member?.user?.last_name}
+ </Text>
+ <Text
+ style={[styles.lastMessage, unread ? styles.unread : {}]}
+ numberOfLines={1}>
+ {channel.state.messages.length > 0
+ ? channel.state.messages[channel.state.messages.length - 1].text
+ : ''}
+ </Text>
+ </View>
+ {unread && <View style={styles.purpleDot} />}
+ </TouchableOpacity>
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ flexDirection: 'row',
+ height: Math.round(SCREEN_HEIGHT / 9),
+ width: Math.round(SCREEN_WIDTH * 0.85),
+ alignSelf: 'center',
+ alignItems: 'center',
+ },
+ avatar: {
+ width: normalize(60),
+ height: normalize(60),
+ borderRadius: normalize(62) / 2,
+ },
+ online: {
+ position: 'absolute',
+ backgroundColor: '#6EE7E7',
+ width: normalize(18),
+ height: normalize(18),
+ borderRadius: normalize(18) / 2,
+ borderColor: 'white',
+ borderWidth: 2,
+ bottom: 0,
+ right: 0,
+ },
+ content: {
+ flex: 1,
+ height: '60%',
+ flexDirection: 'column',
+ marginLeft: '5%',
+ },
+ name: {
+ fontWeight: '500',
+ fontSize: normalize(14),
+ lineHeight: normalize(17),
+ },
+ lastMessage: {
+ color: '#828282',
+ fontWeight: '500',
+ fontSize: normalize(12),
+ lineHeight: normalize(14),
+ paddingTop: '5%',
+ },
+ unread: {
+ fontWeight: '700',
+ color: 'black',
+ },
+ purpleDot: {
+ backgroundColor: '#8F01FF',
+ width: normalize(10),
+ height: normalize(10),
+ borderRadius: normalize(10) / 2,
+ marginLeft: '5%',
+ },
+});
+
+export default ChannelPreview;
diff --git a/src/components/messages/ChatHeader.tsx b/src/components/messages/ChatHeader.tsx
new file mode 100644
index 00000000..2bc096ec
--- /dev/null
+++ b/src/components/messages/ChatHeader.tsx
@@ -0,0 +1,84 @@
+import React, {useContext} from 'react';
+import {Image, StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {useStore} from 'react-redux';
+import {ChatContext} from '../../App';
+import {ChatHeaderHeight, normalize, StatusBarHeight} from '../../utils';
+import {formatLastSeenText, getMember, isOnline} from '../../utils/messages';
+
+type ChatHeaderProps = {};
+
+const ChatHeader: React.FC<ChatHeaderProps> = () => {
+ const {channel} = useContext(ChatContext);
+ const state = useStore().getState();
+ const member = getMember(channel, state);
+ const online = isOnline(member?.user?.last_active);
+ const lastSeen = formatLastSeenText(member?.user?.last_active);
+
+ return (
+ <View style={styles.container}>
+ <View>
+ <Image
+ style={styles.avatar}
+ source={
+ member
+ ? {uri: member.user?.thumbnail_url}
+ : require('../../assets/images/avatar-placeholder.png')
+ }
+ />
+ {online && <View style={styles.online} />}
+ </View>
+ <View style={styles.content}>
+ <Text style={styles.name} numberOfLines={1}>
+ {member?.user?.first_name} {member?.user?.last_name}
+ </Text>
+ <Text style={styles.lastSeen}>{lastSeen}</Text>
+ </View>
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ height: ChatHeaderHeight - StatusBarHeight,
+ flexDirection: 'row',
+ alignItems: 'center',
+ paddingLeft: '15%',
+ },
+ avatar: {
+ width: normalize(40),
+ height: normalize(40),
+ borderRadius: normalize(40) / 2,
+ },
+ online: {
+ position: 'absolute',
+ backgroundColor: '#6EE7E7',
+ width: normalize(16),
+ height: normalize(16),
+ borderRadius: normalize(16) / 2,
+ borderColor: 'white',
+ borderWidth: 3,
+ top: 0,
+ right: 0,
+ },
+ content: {
+ flex: 1,
+ height: '80%',
+ justifyContent: 'space-between',
+ flexDirection: 'column',
+ marginLeft: '5%',
+ },
+ name: {
+ fontWeight: '700',
+ fontSize: normalize(15),
+ lineHeight: normalize(18),
+ },
+ lastSeen: {
+ color: '#828282',
+ fontWeight: '500',
+ fontSize: normalize(12),
+ lineHeight: normalize(14),
+ },
+});
+
+export default ChatHeader;
diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx
index d8445580..660da97d 100644
--- a/src/components/messages/MessagesHeader.tsx
+++ b/src/components/messages/MessagesHeader.tsx
@@ -1,23 +1,31 @@
-import * as React from 'react';
+import React, {Fragment, useContext} from 'react';
import {StyleSheet, View} from 'react-native';
import {Text} from 'react-native-animatable';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {normalize} from '../../utils';
+import ComposeIcon from '../../assets/icons/compose.svg';
+import {ChatContext} from '../../App';
type MessagesHeaderProps = {
createChannel: () => void;
};
const MessagesHeader: React.FC<MessagesHeaderProps> = ({createChannel}) => {
+ const {chatClient} = useContext(ChatContext);
+ const unread = chatClient.user?.total_unread_count as number;
return (
<View style={styles.header}>
<Text style={styles.headerText}>Messages</Text>
- <Text style={styles.unreadText}>2 unread</Text>
+ {unread && unread !== 0 ? (
+ <Text style={styles.unreadText}>
+ {unread > 99 ? '99+' : unread} unread
+ </Text>
+ ) : (
+ <Fragment />
+ )}
<View style={styles.flex} />
- <TouchableOpacity
- style={styles.compose}
- onPress={createChannel}>
- <Text>Compose</Text>
+ <TouchableOpacity style={styles.compose} onPress={createChannel}>
+ <ComposeIcon width={normalize(20)} height={normalize(20)} />
</TouchableOpacity>
</View>
);
diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts
index 2d6bb581..e194093c 100644
--- a/src/components/messages/index.ts
+++ b/src/components/messages/index.ts
@@ -1 +1,2 @@
export {default as MessagesHeader} from './MessagesHeader';
+export {default as ChannelPreview} from './ChannelPreview';
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 8068b893..48c57920 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -34,7 +34,7 @@ import {
} from '../../screens';
import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
import {ScreenType} from '../../types';
-import {AvatarHeaderHeight, SCREEN_WIDTH} from '../../utils';
+import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils';
import {MainStack, MainStackParams} from './MainStackNavigator';
/**
@@ -306,7 +306,10 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
<MainStack.Screen
name="Chat"
component={ChatScreen}
- options={{headerShown: true}}
+ options={{
+ ...headerBarOptions('black', ''),
+ headerStyle: {height: ChatHeaderHeight},
+ }}
/>
</MainStack.Navigator>
);
diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index 9011ed4a..3290116b 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -5,9 +5,19 @@ import {SafeAreaView, StatusBar, StyleSheet, View} from 'react-native';
import {useStore} from 'react-redux';
import {ChannelList, Chat} from 'stream-chat-react-native';
import {ChatContext} from '../../App';
-import {MessagesHeader} from '../../components/messages';
+import {TabsGradient} from '../../components';
+import {ChannelPreview, MessagesHeader} from '../../components/messages';
import {MainStackParams} from '../../routes';
import {RootState} from '../../store/rootReducer';
+import {
+ LocalAttachmentType,
+ LocalChannelType,
+ LocalCommandType,
+ LocalEventType,
+ LocalMessageType,
+ LocalReactionType,
+ LocalUserType,
+} from '../../types';
type ChatListScreenNavigationProp = StackNavigationProp<
MainStackParams,
@@ -19,8 +29,8 @@ interface ChatListScreenProps {
/*
* Screen that displays all of the user's active conversations.
*/
-const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
- const {chatClient, setChannel} = useContext(ChatContext);
+const ChatListScreen: React.FC<ChatListScreenProps> = () => {
+ const {chatClient} = useContext(ChatContext);
const [clientReady, setClientReady] = useState(false);
const state: RootState = useStore().getState();
const loggedInUserId = state.user.user.userId;
@@ -68,23 +78,30 @@ const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
{clientReady && (
<Chat client={chatClient}>
<View style={styles.chatContainer}>
- <ChannelList
+ <ChannelList<
+ LocalAttachmentType,
+ LocalChannelType,
+ LocalCommandType,
+ LocalEventType,
+ LocalMessageType,
+ LocalReactionType,
+ LocalUserType
+ >
filters={memoizedFilters}
- onSelect={(channel) => {
- setChannel(channel);
- navigation.navigate('Chat');
- }}
options={{
presence: true,
state: true,
watch: true,
}}
sort={{last_message_at: -1}}
+ maxUnreadCount={99}
+ Preview={ChannelPreview}
/>
</View>
</Chat>
)}
</SafeAreaView>
+ <TabsGradient />
</View>
);
};
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index eeb1a7d6..59c53c99 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,7 +1,8 @@
import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
-import {StackNavigationProp, useHeaderHeight} from '@react-navigation/stack';
+import {StackNavigationProp} from '@react-navigation/stack';
import React, {useContext} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
import {
Channel,
Chat,
@@ -9,7 +10,9 @@ import {
MessageList,
} from 'stream-chat-react-native';
import {ChatContext} from '../../App';
+import ChatHeader from '../../components/messages/ChatHeader';
import {MainStackParams} from '../../routes';
+import {isIPhoneX} from '../../utils';
type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
interface ChatScreenProps {
@@ -20,24 +23,30 @@ interface ChatScreenProps {
*/
const ChatScreen: React.FC<ChatScreenProps> = () => {
const {channel, chatClient} = useContext(ChatContext);
- const headerHeight = useHeaderHeight();
const tabbarHeight = useBottomTabBarHeight();
return (
- <View style={[styles.container, {paddingBottom: tabbarHeight}]}>
+ <SafeAreaView
+ style={[
+ styles.container,
+ // unable to figure out the padding issue, a hacky solution
+ {paddingBottom: isIPhoneX() ? tabbarHeight + 20 : tabbarHeight + 50},
+ ]}>
+ <ChatHeader />
<Chat client={chatClient}>
- <Channel channel={channel} keyboardVerticalOffset={headerHeight}>
+ <Channel channel={channel} keyboardVerticalOffset={0}>
<MessageList onThreadSelect={() => {}} />
<MessageInput />
</Channel>
</Chat>
- </View>
+ </SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
+ flex: 1,
},
});
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 48e89f7a..71199c9b 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -330,7 +330,7 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'stretch',
justifyContent: 'space-between',
- width: SCREEN_WIDTH * 0.85,
+ width: SCREEN_WIDTH * 0.9,
},
headerText: {
fontWeight: '700',
diff --git a/src/types/types.ts b/src/types/types.ts
index 1a352808..376c4be0 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -298,20 +298,20 @@ export type LocalCommandType = string;
export type LocalEventType = Record<string, unknown>;
export type LocalMessageType = Record<string, unknown>;
export type LocalResponseType = Record<string, unknown>;
+export type LocalReactionType = Record<string, unknown>;
export type LocalUserType = Record<string, unknown>;
+export type ChannelGroupedType = ChannelType<
+ LocalAttachmentType,
+ LocalChannelType,
+ LocalCommandType,
+ LocalEventType,
+ LocalMessageType,
+ LocalResponseType,
+ LocalUserType
+>;
export type ChatContextType = {
- channel:
- | ChannelType<
- LocalAttachmentType,
- LocalChannelType,
- LocalCommandType,
- LocalEventType,
- LocalMessageType,
- LocalResponseType,
- LocalUserType
- >
- | undefined;
+ channel: ChannelGroupedType | undefined;
setChannel: React.Dispatch<
React.SetStateAction<
| ChannelType<
diff --git a/src/utils/layouts.ts b/src/utils/layouts.ts
index e2f1f0b1..4d0d557d 100644
--- a/src/utils/layouts.ts
+++ b/src/utils/layouts.ts
@@ -31,6 +31,7 @@ export const StatusBarHeight = Platform.select({
});
export const AvatarHeaderHeight = (HeaderHeight + StatusBarHeight) * 1.3;
+export const ChatHeaderHeight = (HeaderHeight + StatusBarHeight) * 1.1;
/**
* This is a function for normalizing the font size for different devices, based on iphone 8.
diff --git a/src/utils/messages.ts b/src/utils/messages.ts
new file mode 100644
index 00000000..d63f2b7a
--- /dev/null
+++ b/src/utils/messages.ts
@@ -0,0 +1,83 @@
+import moment from 'moment';
+import {RootState} from '../store/rootReducer';
+import {ChannelGroupedType} from '../types';
+
+/**
+ * Finds the difference in time in minutes
+ * @param lastActive given time e.g. "2021-04-08T19:07:09.361300983Z"
+ * @returns diff in minutes
+ */
+const _diffInMinutes = (lastActive: string | undefined) => {
+ if (!lastActive) {
+ return undefined;
+ }
+ return moment().diff(moment(lastActive), 'minutes');
+};
+
+/**
+ * Formats the last activity status.
+ * - "Active now" (≤ 5 minutes)
+ * - "Seen X minutes ago" (5 > x ≥ 59 minutes)
+ * - "Seen X hours ago" (x = [1, 2])
+ * - "Offline"
+ * @param lastActive given time e.g. "2021-04-08T19:07:09.361300983Z"
+ * @returns
+ */
+export const formatLastSeenText = (lastActive: string | undefined) => {
+ const diff = _diffInMinutes(lastActive);
+ if (!diff) {
+ return 'Offline';
+ }
+ if (diff <= 5) {
+ return 'Active now';
+ }
+ if (diff <= 59) {
+ return `Seen ${diff} minutes ago`;
+ }
+ if (diff <= 180) {
+ const hours = Math.floor(diff / 60);
+ return `Seen ${hours} hours ago`;
+ }
+ return 'Offline';
+};
+
+/**
+ * Checks if a lastActive timestamp is considered Online or not.
+ *
+ * A user is online if last active is ≤ 15 minutes.
+ *
+ * @param lastActive given time e.g. "2021-04-08T19:07:09.361300983Z"
+ * @returns True if active
+ */
+export const isOnline = (lastActive: string | undefined) => {
+ if (!lastActive) {
+ return false;
+ }
+ const diff = _diffInMinutes(lastActive);
+ if (!diff) {
+ return false;
+ }
+ return diff <= 15;
+};
+
+/**
+ * Gets the other member in the channel.
+ * @param channel the current chat channel
+ * @param state the current redux state
+ * @returns other member or undefined
+ */
+export const getMember = (
+ channel: ChannelGroupedType | undefined,
+ state: RootState,
+) => {
+ if (!channel) {
+ return undefined;
+ }
+ const loggedInUserId = state.user.user.userId;
+ const otherMembers = channel
+ ? Object.values(channel.state.members).filter(
+ (member) => member.user?.id !== loggedInUserId,
+ )
+ : [];
+ return otherMembers.length === 1 ? otherMembers[0] : undefined;
+};
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 11:45:28 +0000