diff options
Diffstat (limited to 'src')
21 files changed, 140 insertions, 17 deletions
diff --git a/src/assets/navigationIcons/chat-clicked.png b/src/assets/navigationIcons/chat-clicked.png Binary files differnew file mode 100644 index 00000000..f62b4cf5 --- /dev/null +++ b/src/assets/navigationIcons/chat-clicked.png diff --git a/src/assets/navigationIcons/chat-clicked@2x.png b/src/assets/navigationIcons/chat-clicked@2x.png Binary files differnew file mode 100644 index 00000000..4ce0f46a --- /dev/null +++ b/src/assets/navigationIcons/chat-clicked@2x.png diff --git a/src/assets/navigationIcons/chat-clicked@3x.png b/src/assets/navigationIcons/chat-clicked@3x.png Binary files differnew file mode 100644 index 00000000..bd3a1352 --- /dev/null +++ b/src/assets/navigationIcons/chat-clicked@3x.png diff --git a/src/assets/navigationIcons/chat-notifications.png b/src/assets/navigationIcons/chat-notifications.png Binary files differnew file mode 100644 index 00000000..cffb5751 --- /dev/null +++ b/src/assets/navigationIcons/chat-notifications.png diff --git a/src/assets/navigationIcons/chat-notifications@2x.png b/src/assets/navigationIcons/chat-notifications@2x.png Binary files differnew file mode 100644 index 00000000..22ae62db --- /dev/null +++ b/src/assets/navigationIcons/chat-notifications@2x.png diff --git a/src/assets/navigationIcons/chat-notifications@3x.png b/src/assets/navigationIcons/chat-notifications@3x.png Binary files differnew file mode 100644 index 00000000..98b1073d --- /dev/null +++ b/src/assets/navigationIcons/chat-notifications@3x.png diff --git a/src/assets/navigationIcons/chat.png b/src/assets/navigationIcons/chat.png Binary files differnew file mode 100644 index 00000000..cffb5751 --- /dev/null +++ b/src/assets/navigationIcons/chat.png diff --git a/src/assets/navigationIcons/chat@2x.png b/src/assets/navigationIcons/chat@2x.png Binary files differnew file mode 100644 index 00000000..22ae62db --- /dev/null +++ b/src/assets/navigationIcons/chat@2x.png diff --git a/src/assets/navigationIcons/chat@3x.png b/src/assets/navigationIcons/chat@3x.png Binary files differnew file mode 100644 index 00000000..98b1073d --- /dev/null +++ b/src/assets/navigationIcons/chat@3x.png diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx index 1a9934f2..5128f3da 100644 --- a/src/components/common/NavigationIcon.tsx +++ b/src/components/common/NavigationIcon.tsx @@ -14,7 +14,8 @@ interface NavigationIconProps extends TouchableOpacityProps { | 'Upload' | 'Notifications' | 'Profile' - | 'SuggestedPeople'; + | 'SuggestedPeople' + | 'Chat'; disabled?: boolean; newIcon?: boolean; } @@ -44,6 +45,13 @@ const NavigationIcon = (props: NavigationIconProps) => { : require('../../assets/navigationIcons/notifications.png') : require('../../assets/navigationIcons/notifications-clicked.png'); break; + case 'Chat': + imgSrc = props.disabled + ? props.newIcon + ? require('../../assets/navigationIcons/chat-notifications.png') + : require('../../assets/navigationIcons/chat.png') + : require('../../assets/navigationIcons/chat-clicked.png'); + break; case 'Profile': imgSrc = props.disabled ? require('../../assets/navigationIcons/profile.png') diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index c7b9aeee..819ca785 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -50,7 +50,7 @@ const Routes: React.FC = () => { fcmService.setUpPushNotifications(); fcmService.sendFcmTokenToServer(); } - }); + }, []); useEffect(() => { const checkVersion = async () => { @@ -61,7 +61,7 @@ const Routes: React.FC = () => { } }; checkVersion(); - }); + }, []); return userId && !newVersionAvailable ? <NavigationBar /> : <Onboarding />; }; diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 9b089634..021c0688 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -92,6 +92,8 @@ export type MainStackParams = { screenType: ScreenType; }; SPWelcomeScreen: {}; + ChatList: undefined; + Chat: undefined; }; export const MainStack = createStackNavigator<MainStackParams>(); diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index d855f0df..8068b893 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -29,6 +29,8 @@ import { SuggestedPeopleUploadPictureScreen, SuggestedPeopleWelcomeScreen, SettingsScreen, + ChatListScreen, + ChatScreen, } from '../../screens'; import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders'; import {ScreenType} from '../../types'; @@ -85,6 +87,8 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => { return 'Notifications'; case ScreenType.SuggestedPeople: return 'SuggestedPeople'; + case ScreenType.Chat: + return 'ChatList'; } })(); @@ -294,6 +298,16 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => { ...headerBarOptions('white', ''), }} /> + <MainStack.Screen + name="ChatList" + component={ChatListScreen} + options={{headerTitle: 'Chats'}} + /> + <MainStack.Screen + name="Chat" + component={ChatScreen} + options={{headerShown: true}} + /> </MainStack.Navigator> ); }; diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index e9208525..9b8427e7 100644 --- a/src/routes/tabs/NavigationBar.tsx +++ b/src/routes/tabs/NavigationBar.tsx @@ -54,6 +54,8 @@ const NavigationBar: React.FC = () => { disabled={!focused} /> ); + case 'Chat': + return <NavigationIcon tab="Chat" disabled={!focused} />; case 'Profile': return <NavigationIcon tab="Profile" disabled={!focused} />; case 'SuggestedPeople': @@ -93,6 +95,11 @@ const NavigationBar: React.FC = () => { initialParams={{screenType: ScreenType.Notifications}} /> <Tabs.Screen + name="Chat" + component={MainStackScreen} + initialParams={{screenType: ScreenType.Chat}} + /> + <Tabs.Screen name="Profile" component={MainStackScreen} initialParams={{screenType: ScreenType.Profile}} diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx new file mode 100644 index 00000000..c49c790d --- /dev/null +++ b/src/screens/chat/ChatListScreen.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import {View, StyleSheet, Text, TouchableOpacity} from 'react-native'; +import {StackNavigationProp} from '@react-navigation/stack'; + +import {MainStackParams} from '../../routes'; + +type ChatListScreenNavigationProp = StackNavigationProp< + MainStackParams, + 'ChatList' +>; +interface ChatListScreenProps { + navigation: ChatListScreenNavigationProp; +} +/* + * Screen that displays all of the user's active conversations. + */ +const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => { + return ( + <View style={styles.container}> + <Text style={styles.placeholder}>I am the chat list.</Text> + <TouchableOpacity + style={styles.button} + onPress={() => navigation.navigate('Chat')}> + <Text>Let's go to a conversation!</Text> + </TouchableOpacity> + </View> + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + placeholder: { + fontSize: 14, + fontWeight: 'bold', + marginBottom: 10, + }, + button: { + backgroundColor: '#CCE4FC', + padding: 15, + borderRadius: 5, + }, +}); + +export default ChatListScreen; diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx new file mode 100644 index 00000000..af83f504 --- /dev/null +++ b/src/screens/chat/ChatScreen.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import {View, StyleSheet, Text} from 'react-native'; +import {StackNavigationProp} from '@react-navigation/stack'; + +import {MainStackParams} from '../../routes'; + +type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>; +interface ChatScreenProps { + navigation: ChatScreenNavigationProp; +} +/* + * Screen that displays all of the user's active conversations. + */ +const ChatScreen: React.FC<ChatScreenProps> = () => { + return ( + <View style={styles.container}> + <Text style={styles.placeholder}>I am a chat!</Text> + </View> + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + placeholder: { + fontSize: 14, + fontWeight: 'bold', + }, +}); + +export default ChatScreen; diff --git a/src/screens/chat/index.ts b/src/screens/chat/index.ts new file mode 100644 index 00000000..d2ccb02b --- /dev/null +++ b/src/screens/chat/index.ts @@ -0,0 +1,2 @@ +export {default as ChatListScreen} from './ChatListScreen'; +export {default as ChatScreen} from './ChatScreen'; diff --git a/src/screens/index.ts b/src/screens/index.ts index 50ada3d1..44ae4b52 100644 --- a/src/screens/index.ts +++ b/src/screens/index.ts @@ -5,3 +5,4 @@ export * from './search'; export * from './suggestedPeople'; export * from './suggestedPeopleOnboarding'; export * from './badge'; +export * from './chat'; diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index 8c1dc327..871d62bf 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -27,7 +27,7 @@ interface IndividualMomentProps { navigation: IndividualMomentNavigationProp; } -const ITEM_HEIGHT = SCREEN_HEIGHT * (9 / 10); +const ITEM_HEIGHT = SCREEN_HEIGHT * 0.9; const IndividualMoment: React.FC<IndividualMomentProps> = ({ route, @@ -40,13 +40,13 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({ ); const { user: {username}, - } = userXId - ? useSelector((state: RootState) => state.userX[screenType][userXId]) - : useSelector((state: RootState) => state.user); + } = useSelector((state: RootState) => + userXId ? state.userX[screenType][userXId] : state.user, + ); - const {moments} = userXId - ? useSelector((state: RootState) => state.userX[screenType][userXId]) - : useSelector((state: RootState) => state.moments); + const {moments} = useSelector((state: RootState) => + userXId ? state.userX[screenType][userXId] : state.moments, + ); const isOwnProfile = username === loggedInUsername; const momentData = moments.filter( diff --git a/src/types/types.ts b/src/types/types.ts index 766bf798..e7acd6e0 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -142,6 +142,7 @@ export enum ScreenType { Search, Notifications, SuggestedPeople, + Chat, } /** diff --git a/src/utils/moments.ts b/src/utils/moments.ts index 7428b1ac..87f062af 100644 --- a/src/utils/moments.ts +++ b/src/utils/moments.ts @@ -1,15 +1,17 @@ import moment from 'moment'; -//A util that calculates the difference between a given time and current time -//Returns the difference in the largest possible unit of time (days > hours > minutes > seconds) - +/** + * Formats elapsed time from a given time. + * @param date_time given time + * @returns difference in the largest possible unit of time (days > hours > minutes > seconds) + */ export const getTimePosted = (date_time: string) => { const datePosted = moment(date_time); const now = moment(); var time = date_time; var difference = now.diff(datePosted, 'seconds'); - //Creating elapsedTime string to display to user + // Creating elapsedTime string to display to user // 0 to less than 1 minute if (difference < 60) { time = difference + ' seconds'; @@ -19,15 +21,19 @@ export const getTimePosted = (date_time: string) => { difference = now.diff(datePosted, 'minutes'); time = difference + (difference === 1 ? ' minute' : ' minutes'); } - //1 hour to less than 1 day + // 1 hour to less than 1 day else if (difference >= 60 * 60 && difference < 24 * 60 * 60) { difference = now.diff(datePosted, 'hours'); time = difference + (difference === 1 ? ' hour' : ' hours'); } - //Any number of days - else if (difference >= 24 * 60 * 60) { + // Any number of days + else if (difference >= 24 * 60 * 60 && difference < 24 * 60 * 60 * 3) { difference = now.diff(datePosted, 'days'); time = difference + (difference === 1 ? ' day' : ' days'); } + // More than 3 days + else if (difference >= 24 * 60 * 60 * 3) { + time = datePosted.format('MMMM D, YYYY'); + } return time; }; |
