From 840e144e48fe90b33ce9ab713ca02a696887b8ea Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Mon, 3 May 2021 10:18:00 -0700 Subject: tma-822-base changes --- src/assets/images/no_chats.png | Bin 0 -> 28760 bytes src/assets/images/no_chats@2x.png | Bin 0 -> 12709 bytes src/assets/images/no_chats@3x.png | Bin 0 -> 46139 bytes src/constants/strings.ts | 2 + src/screens/chat/ChatListScreen.tsx | 4 + src/screens/main/NotificationsScreen.tsx | 2 +- .../main/notification/EmptyNotificationView.tsx | 105 ++++++++++++++++++--- src/types/types.ts | 3 + 8 files changed, 103 insertions(+), 13 deletions(-) create mode 100644 src/assets/images/no_chats.png create mode 100644 src/assets/images/no_chats@2x.png create mode 100644 src/assets/images/no_chats@3x.png (limited to 'src') diff --git a/src/assets/images/no_chats.png b/src/assets/images/no_chats.png new file mode 100644 index 00000000..4e321f17 Binary files /dev/null and b/src/assets/images/no_chats.png differ diff --git a/src/assets/images/no_chats@2x.png b/src/assets/images/no_chats@2x.png new file mode 100644 index 00000000..d906df09 Binary files /dev/null and b/src/assets/images/no_chats@2x.png differ diff --git a/src/assets/images/no_chats@3x.png b/src/assets/images/no_chats@3x.png new file mode 100644 index 00000000..f0f05c7b Binary files /dev/null and b/src/assets/images/no_chats@3x.png differ diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 50e4518b..e8f2725d 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -56,6 +56,8 @@ export const ERROR_UPLOAD_MOMENT = 'Unable to upload moment. Please retry'; export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pic to represent you, please upload a small profile picture"; export const ERROR_UPLOAD_SP_PHOTO = 'Unable to update suggested people photo. Please retry!'; export const ERROR_VERIFICATION_FAILED_SHORT = 'Verification failed 😓'; +export const FIRST_MESSAGE = 'How about sending your first message to your friend'; +export const START_CHATTING = 'Let’s Start Chatting!'; export const MARKED_AS_MSG = (str: string) => `Marked as ${str}`; export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to create space for greater ones'; export const NO_NEW_NOTIFICATIONS = 'You have no new notifications'; diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index d2cfcb5d..810ebdb2 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -9,6 +9,7 @@ import {TabsGradient} from '../../components'; import {ChannelPreview, MessagesHeader} from '../../components/messages'; import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootReducer'; +import EmptyNotificationView from '../../screens/main/notification/EmptyNotificationView'; import { LocalAttachmentType, LocalChannelType, @@ -99,6 +100,9 @@ const ChatListScreen: React.FC = () => { sort={{last_message_at: -1}} maxUnreadCount={99} Preview={ChannelPreview} + EmptyStateIndicator={() => { + return ; + }} /> diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 3efd9af8..06a61f04 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -304,7 +304,7 @@ const NotificationsScreen: React.FC = () => { extraData={requestLimit} ListEmptyComponent={ - + } /> diff --git a/src/screens/main/notification/EmptyNotificationView.tsx b/src/screens/main/notification/EmptyNotificationView.tsx index f43cfb2a..b80bb203 100644 --- a/src/screens/main/notification/EmptyNotificationView.tsx +++ b/src/screens/main/notification/EmptyNotificationView.tsx @@ -1,12 +1,19 @@ import React from 'react'; import {Image, Text, StyleSheet, View} from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; -import {UP_TO_DATE, NO_NEW_NOTIFICATIONS} from '../../../constants/strings'; +import { + UP_TO_DATE, + NO_NEW_NOTIFICATIONS, + FIRST_MESSAGE, + START_CHATTING, +} from '../../../constants/strings'; import {NOTIFICATION_GRADIENT} from '../../../constants/constants'; -import {SCREEN_HEIGHT, normalize} from '../../../utils'; -const EmptyNotificationView: React.FC = () => { - return ( - +import {SCREEN_HEIGHT, normalize, SCREEN_WIDTH} from '../../../utils'; +import {EmptyViewProps} from '../../../types/index'; + +const EmptyNotificationView: React.FC = ({viewType}) => { + const _getNotificationImage = () => { + return ( { source={require('../../../assets/images/empty_notifications.png')} /> - - {UP_TO_DATE} - - - {NO_NEW_NOTIFICATIONS} + ); + }; + + const _getChatImage = () => { + return ( + + + + ); + }; + + const _getImageForType = () => { + switch (viewType) { + case 'Notification': + return _getNotificationImage(); + case 'ChatList': + return _getChatImage(); + } + }; + + const _getTextForNotification = () => { + return ( + <> + + {UP_TO_DATE} + + + {NO_NEW_NOTIFICATIONS} + + + ); + }; + + const _getTextForChat = () => { + return ( + + + {START_CHATTING} + + + {FIRST_MESSAGE} + + ); + }; + + const _getTextForType = () => { + switch (viewType) { + case 'Notification': + return _getTextForNotification(); + case 'ChatList': + return _getTextForChat(); + } + }; + + return ( + + {_getImageForType()} + {_getTextForType()} ); }; const styles = StyleSheet.create({ - container: {alignItems: 'center'}, + container: { + flex: 1, + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + }, topMargin: {marginTop: SCREEN_HEIGHT * 0.025}, upperTextStyle: { + textAlign: 'center', fontWeight: '700', fontSize: normalize(23), lineHeight: normalize(40), }, + chatTextStyles: { + width: '85%', + }, bottomTextStyle: { + textAlign: 'center', color: '#2D3B45', fontWeight: '600', fontSize: normalize(20), lineHeight: normalize(40), }, + imageStyles: { + width: SCREEN_WIDTH * 0.72, + height: SCREEN_WIDTH * 0.72, + }, backgroundLinearView: { - borderRadius: 135.5, + borderRadius: (SCREEN_WIDTH * 0.72) / 2, }, }); diff --git a/src/types/types.ts b/src/types/types.ts index e7f651dc..ce39947c 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -23,6 +23,9 @@ export interface CategoryPreviewType { } export type FriendshipStatusType = 'friends' | 'requested' | 'no_record'; +export interface EmptyViewProps { + viewType: 'Notification' | 'ChatList'; +} export enum UniversityType { Brown = 'Brown University', -- cgit v1.2.3-70-g09d2