From bf85e56a4f8e0f16a446ec7df8d7f4eba624c213 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 15 Apr 2021 16:53:28 -0400 Subject: moved TaggPopup to legacy --- src/components/common/TaggPopup.tsx | 143 ------------------------------------ src/components/common/index.ts | 1 - 2 files changed, 144 deletions(-) delete mode 100644 src/components/common/TaggPopup.tsx (limited to 'src/components') diff --git a/src/components/common/TaggPopup.tsx b/src/components/common/TaggPopup.tsx deleted file mode 100644 index f9929580..00000000 --- a/src/components/common/TaggPopup.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import {RouteProp} from '@react-navigation/native'; -import {StackNavigationProp} from '@react-navigation/stack'; -import * as React from 'react'; -import {Platform, Text, StyleSheet, TouchableOpacity} from 'react-native'; -import {Image, View} from 'react-native-animatable'; -import {ArrowButton} from '../onboarding'; -import {OnboardingStackParams} from '../../routes'; -import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; -import CloseIcon from '../../assets/ionicons/close-outline.svg'; -import {BlurView} from '@react-native-community/blur'; - -type TaggPopupRouteProps = RouteProp; -type TaggPopupNavigationProps = StackNavigationProp< - OnboardingStackParams, - 'TaggPopup' ->; - -interface TaggPopupProps { - route: TaggPopupRouteProps; - navigation: TaggPopupNavigationProps; -} - -const TaggPopup: React.FC = ({route, navigation}) => { - /** - * Custom popup / Tutorial screen for Tagg - * Just like a Singly Linked List, we have a next node - * if (next !== undefined) - * Display the next button and navigate to next popup node on click - * else - * Display close button, navigate back on close - */ - const {messageHeader, messageBody, next} = route.params.popupProps; - - return ( - - { - navigation.goBack(); - }}> - - - - {messageHeader} - {messageBody} - - {!next && ( - { - navigation.goBack(); - }}> - - - )} - - {next && ( - - { - navigation.navigate('TaggPopup', {popupProps: next}); - }} - /> - - )} - - - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - width: '100%', - height: '100%', - }, - whiteColor: { - color: 'white', - }, - closeButton: { - position: 'relative', - height: '50%', - aspectRatio: 1, - left: '20%', - }, - textContainer: { - flex: 1, - flexDirection: 'column', - }, - icon: { - width: 40, - height: 40, - marginVertical: '1%', - }, - header: { - color: '#fff', - fontSize: SCREEN_WIDTH / 25, - fontWeight: '600', - textAlign: 'justify', - marginBottom: '2%', - marginLeft: '4%', - }, - subtext: { - color: '#fff', - fontSize: SCREEN_WIDTH / 30, - fontWeight: '600', - textAlign: 'justify', - marginBottom: '15%', - marginLeft: '3%', - }, - popup: { - width: SCREEN_WIDTH * 0.8, - height: SCREEN_WIDTH * 0.24, - backgroundColor: 'black', - borderRadius: 8, - flexDirection: 'row', - alignSelf: 'auto', - flexWrap: 'wrap', - position: 'absolute', - bottom: SCREEN_HEIGHT * 0.7, - padding: SCREEN_WIDTH / 40, - }, - footer: { - marginLeft: '50%', - flexDirection: 'column-reverse', - ...Platform.select({ - ios: { - bottom: '20%', - }, - android: { - bottom: '10%', - }, - }), - }, -}); -export default TaggPopup; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index b5fd0542..5a601f1d 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -17,7 +17,6 @@ export {default as TaggDatePicker} from './TaggDatePicker'; export {default as BottomDrawer} from './BottomDrawer'; export {default as TaggLoadingIndicator} from './TaggLoadingIndicator'; export {default as GenericMoreInfoDrawer} from './GenericMoreInfoDrawer'; -export {default as TaggPopUp} from './TaggPopup'; export {default as TaggPrompt} from './TaggPrompt'; export {default as AcceptDeclineButtons} from './AcceptDeclineButtons'; export {default as FriendsButton} from './FriendsButton'; -- cgit v1.2.3-70-g09d2 From 658bf732e05c183d311b62a52be3729c942c9eb9 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 15 Apr 2021 16:54:01 -0400 Subject: moved update required to component/onboarding --- src/components/onboarding/UpdateRequired.tsx | 84 ++++++++++++++++++++++++++++ src/components/onboarding/index.ts | 1 + src/screens/onboarding/UpdateRequired.tsx | 84 ---------------------------- 3 files changed, 85 insertions(+), 84 deletions(-) create mode 100644 src/components/onboarding/UpdateRequired.tsx delete mode 100644 src/screens/onboarding/UpdateRequired.tsx (limited to 'src/components') diff --git a/src/components/onboarding/UpdateRequired.tsx b/src/components/onboarding/UpdateRequired.tsx new file mode 100644 index 00000000..93e4e36d --- /dev/null +++ b/src/components/onboarding/UpdateRequired.tsx @@ -0,0 +1,84 @@ +import React from 'react'; +import {Image, Linking, Modal, StyleSheet, View} from 'react-native'; +import {Text} from 'react-native-animatable'; +import {CenteredView, TaggSquareButton} from '..'; +import {normalize, SCREEN_WIDTH} from '../../utils'; + +interface UpdateRequiredProps { + visible: boolean; +} + +const UpdateRequired: React.FC = ({visible}) => { + return ( + + + + + Update Required + + You have to update your app to continue using Tagg, please download + the latest version from the app store + + { + Linking.openURL( + 'https://apps.apple.com/us/app/tagg-discover-your-community/id1537853613', + ); + }} + buttonStyle={'normal'} + buttonColor={'purple'} + labelColor={'white'} + labelStyle={styles.button} + /> + + + + ); +}; + +const styles = StyleSheet.create({ + contentContainer: { + marginTop: '20%', + width: SCREEN_WIDTH * 0.9, + backgroundColor: 'white', + borderRadius: 5, + padding: '10%', + alignItems: 'center', + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.25, + shadowRadius: 3.84, + elevation: 5, + }, + logo: { + width: normalize(60), + height: normalize(60), + marginBottom: '10%', + }, + header: { + fontSize: normalize(17), + fontWeight: '700', + lineHeight: 20, + marginBottom: '5%', + }, + body: { + fontSize: normalize(13), + color: 'grey', + lineHeight: 20, + textAlign: 'center', + width: SCREEN_WIDTH * 0.8, + marginBottom: '10%', + }, + button: { + fontWeight: '700', + }, +}); + +export default UpdateRequired; diff --git a/src/components/onboarding/index.ts b/src/components/onboarding/index.ts index fdb85090..aad77f96 100644 --- a/src/components/onboarding/index.ts +++ b/src/components/onboarding/index.ts @@ -11,3 +11,4 @@ export {default as SocialMediaLinker} from './SocialMediaLinker'; export {default as LinkSocialMedia} from './LinkSocialMedia'; export {default as MomentCategory} from './MomentCategory'; export {default as UniversitySelection} from './UniversitySelection'; +export {default as UpdateRequired} from './UpdateRequired'; diff --git a/src/screens/onboarding/UpdateRequired.tsx b/src/screens/onboarding/UpdateRequired.tsx deleted file mode 100644 index adf7ba71..00000000 --- a/src/screens/onboarding/UpdateRequired.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import React from 'react'; -import {Image, Linking, Modal, StyleSheet, View} from 'react-native'; -import {Text} from 'react-native-animatable'; -import {CenteredView, TaggSquareButton} from '../../components'; -import {normalize, SCREEN_WIDTH} from '../../utils'; - -interface UpdateRequiredProps { - visible: boolean; -} - -const UpdateRequired: React.FC = ({visible}) => { - return ( - - - - - Update Required - - You have to update your app to continue using Tagg, please download - the latest version from the app store - - { - Linking.openURL( - 'https://apps.apple.com/us/app/tagg-discover-your-community/id1537853613', - ); - }} - buttonStyle={'normal'} - buttonColor={'purple'} - labelColor={'white'} - labelStyle={styles.button} - /> - - - - ); -}; - -const styles = StyleSheet.create({ - contentContainer: { - marginTop: '20%', - width: SCREEN_WIDTH * 0.9, - backgroundColor: 'white', - borderRadius: 5, - padding: '10%', - alignItems: 'center', - shadowColor: '#000', - shadowOffset: { - width: 0, - height: 2, - }, - shadowOpacity: 0.25, - shadowRadius: 3.84, - elevation: 5, - }, - logo: { - width: normalize(60), - height: normalize(60), - marginBottom: '10%', - }, - header: { - fontSize: normalize(17), - fontWeight: '700', - lineHeight: 20, - marginBottom: '5%', - }, - body: { - fontSize: normalize(13), - color: 'grey', - lineHeight: 20, - textAlign: 'center', - width: SCREEN_WIDTH * 0.8, - marginBottom: '10%', - }, - button: { - fontWeight: '700', - }, -}); - -export default UpdateRequired; -- cgit v1.2.3-70-g09d2 From f9fdbaca591c0e87234b6a5d14f376fe52d26322 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 15 Apr 2021 16:57:21 -0400 Subject: cleaned up category route params --- src/components/profile/PublicProfile.tsx | 7 +------ src/types/types.ts | 8 -------- 2 files changed, 1 insertion(+), 14 deletions(-) (limited to 'src/components') diff --git a/src/components/profile/PublicProfile.tsx b/src/components/profile/PublicProfile.tsx index 1c49bff5..f2d52a3d 100644 --- a/src/components/profile/PublicProfile.tsx +++ b/src/components/profile/PublicProfile.tsx @@ -241,12 +241,7 @@ const PublicProfile: React.FC = ({ )} {!userXId && ( - navigation.navigate('CategorySelection', { - screenType: CategorySelectionScreenType.Profile, - user: loggedInUser, - }) - } + onPress={() => navigation.navigate('CategorySelection')} style={styles.createCategoryButton}> Create a new category diff --git a/src/types/types.ts b/src/types/types.ts index 376c4be0..72fd7d04 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -172,14 +172,6 @@ export enum VerificationScreenType { Password, } -/** - * Two types for category selection screen - */ -export enum CategorySelectionScreenType { - Onboarding, - Profile, -} - /** * Gradient type to accomodate new g background gradients for Tagg */ -- cgit v1.2.3-70-g09d2 From c477ebfd00e3898814721b8316a47cf14f1740c4 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 19 Apr 2021 16:08:32 -0400 Subject: fixed route bug --- src/components/profile/PublicProfile.tsx | 10 +++++----- src/screens/profile/CategorySelection.tsx | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) (limited to 'src/components') diff --git a/src/components/profile/PublicProfile.tsx b/src/components/profile/PublicProfile.tsx index f2d52a3d..d2ee8626 100644 --- a/src/components/profile/PublicProfile.tsx +++ b/src/components/profile/PublicProfile.tsx @@ -241,7 +241,11 @@ const PublicProfile: React.FC = ({ )} {!userXId && ( navigation.navigate('CategorySelection')} + onPress={() => + navigation.navigate('CategorySelection', { + newCustomCategory: undefined, + }) + } style={styles.createCategoryButton}> Create a new category @@ -253,10 +257,6 @@ const PublicProfile: React.FC = ({ }; const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#fff', - }, momentsContainer: { backgroundColor: '#f2f2f2', paddingBottom: SCREEN_HEIGHT * 0.15, diff --git a/src/screens/profile/CategorySelection.tsx b/src/screens/profile/CategorySelection.tsx index d3958025..c3e45e98 100644 --- a/src/screens/profile/CategorySelection.tsx +++ b/src/screens/profile/CategorySelection.tsx @@ -37,7 +37,7 @@ interface CategorySelectionProps { navigation: CategorySelectionNavigationProps; } -const CategorySelection: React.FC = ({ +const CategorySelection: React.FC = ({ route, navigation, }) => { -- cgit v1.2.3-70-g09d2 From 9458d888cc03fc61c13db69492682ac268991887 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 19 Apr 2021 16:18:44 -0400 Subject: cleaned up TAGG_LIGHT_BLUE_2 color constant --- src/components/common/PostCarousel.tsx | 3 ++- src/components/messages/ChannelPreview.tsx | 3 ++- src/components/messages/ChatHeader.tsx | 3 ++- src/components/taggs/TwitterTaggPost.tsx | 14 +++++++------- src/screens/profile/AccountType.tsx | 3 ++- src/screens/profile/CaptionScreen.tsx | 5 +++-- src/screens/profile/IndividualMoment.tsx | 4 ---- 7 files changed, 18 insertions(+), 17 deletions(-) (limited to 'src/components') diff --git a/src/components/common/PostCarousel.tsx b/src/components/common/PostCarousel.tsx index cda9d8db..be3dcb16 100644 --- a/src/components/common/PostCarousel.tsx +++ b/src/components/common/PostCarousel.tsx @@ -1,6 +1,7 @@ import React, {Fragment, useRef, useState} from 'react'; import {Image} from 'react-native'; import Carousel, {Pagination} from 'react-native-snap-carousel'; +import {TAGG_LIGHT_BLUE_2} from '../../constants'; import {SCREEN_WIDTH} from '../../utils'; interface PostCarouselProps { @@ -39,7 +40,7 @@ const PostCarousel: React.FC = ({ activeDotIndex={currentPage} dotsLength={data.length} containerStyle={{marginBottom: marginBottom}} - dotColor={'#6ee7e7'} + dotColor={TAGG_LIGHT_BLUE_2} inactiveDotColor={'#e0e0e0'} /> diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx index a7a7268a..8bd3a745 100644 --- a/src/components/messages/ChannelPreview.tsx +++ b/src/components/messages/ChannelPreview.tsx @@ -5,6 +5,7 @@ import {TouchableOpacity} from 'react-native-gesture-handler'; import {useStore} from 'react-redux'; import {ChannelPreviewMessengerProps} from 'stream-chat-react-native'; import {ChatContext} from '../../App'; +import {TAGG_LIGHT_BLUE_2} from '../../constants'; import { LocalAttachmentType, LocalChannelType, @@ -89,7 +90,7 @@ const styles = StyleSheet.create({ }, online: { position: 'absolute', - backgroundColor: '#6EE7E7', + backgroundColor: TAGG_LIGHT_BLUE_2, width: normalize(18), height: normalize(18), borderRadius: normalize(18) / 2, diff --git a/src/components/messages/ChatHeader.tsx b/src/components/messages/ChatHeader.tsx index 67a7f1fe..7ddaa7e6 100644 --- a/src/components/messages/ChatHeader.tsx +++ b/src/components/messages/ChatHeader.tsx @@ -5,6 +5,7 @@ import {Text} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {useDispatch, useStore} from 'react-redux'; import {ChatContext} from '../../App'; +import {TAGG_LIGHT_BLUE_2} from '../../constants'; import {ScreenType} from '../../types'; import { ChatHeaderHeight, @@ -87,7 +88,7 @@ const styles = StyleSheet.create({ }, online: { position: 'absolute', - backgroundColor: '#6EE7E7', + backgroundColor: TAGG_LIGHT_BLUE_2, width: normalize(16), height: normalize(16), borderRadius: normalize(16) / 2, diff --git a/src/components/taggs/TwitterTaggPost.tsx b/src/components/taggs/TwitterTaggPost.tsx index 834e32ef..b2889e3e 100644 --- a/src/components/taggs/TwitterTaggPost.tsx +++ b/src/components/taggs/TwitterTaggPost.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import {Image, Linking, StyleSheet, View} from 'react-native'; -import {Text} from 'react-native-animatable'; +import { Image, Linking, StyleSheet, View } from 'react-native'; +import { Text } from 'react-native-animatable'; import Hyperlink from 'react-native-hyperlink'; import LinearGradient from 'react-native-linear-gradient'; -import {AVATAR_DIM, TAGGS_GRADIENT, TAGG_LIGHT_BLUE} from '../../constants'; -import {TwitterPostType} from '../../types'; -import {handleOpenSocialUrlOnBrowser, SCREEN_WIDTH} from '../../utils'; -import {DateLabel, PostCarousel} from '../common'; +import { AVATAR_DIM, TAGGS_GRADIENT, TAGG_LIGHT_BLUE, TAGG_LIGHT_BLUE_2 } from '../../constants'; +import { TwitterPostType } from '../../types'; +import { handleOpenSocialUrlOnBrowser, SCREEN_WIDTH } from '../../utils'; +import { DateLabel, PostCarousel } from '../common'; interface TwitterTaggPostProps { ownerHandle: string; @@ -194,7 +194,7 @@ const styles = StyleSheet.create({ }, viewOnTwitterText: { fontSize: 12, - color: '#6ee7e7', + color: TAGG_LIGHT_BLUE_2, }, // reply post replyPostContainer: { diff --git a/src/screens/profile/AccountType.tsx b/src/screens/profile/AccountType.tsx index 60ed0668..8a3f7775 100644 --- a/src/screens/profile/AccountType.tsx +++ b/src/screens/profile/AccountType.tsx @@ -10,6 +10,7 @@ import { import {SafeAreaView} from 'react-native-safe-area-context'; import {useDispatch, useSelector} from 'react-redux'; import {Background} from '../../components'; +import {TAGG_LIGHT_BLUE_2} from '../../constants'; import {updateProfileVisibility} from '../../services'; import {NO_PROFILE} from '../../store/initialStates'; import {RootState} from '../../store/rootReducer'; @@ -60,7 +61,7 @@ const AccountType: React.FC = () => { /> {!isLoading && ( Date: Tue, 20 Apr 2021 14:34:10 -0400 Subject: modified style to match figma --- src/components/notifications/Notification.tsx | 71 +++++++++++++++++---------- src/types/types.ts | 4 +- 2 files changed, 47 insertions(+), 28 deletions(-) (limited to 'src/components') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index 8e008cf9..d66ca45e 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -57,6 +57,8 @@ const Notification: React.FC = (props) => { const [avatar, setAvatar] = useState(undefined); const [momentURI, setMomentURI] = useState(undefined); + const isSystemNotification = + username === 'Tagg' && notification_type === 'PROF_VIST'; useEffect(() => { (async () => { @@ -208,6 +210,9 @@ const Notification: React.FC = (props) => { const isOwnProfile = id === loggedInUser.userId; const navigateToProfile = async () => { + if (isSystemNotification) { + return; + } if (!userXInStore(state, screenType, id)) { await fetchUserX(dispatch, {userId: id, username: username}, screenType); } @@ -231,35 +236,47 @@ const Notification: React.FC = (props) => { } /> - - - - {first_name} {last_name} - - - - {verbage} - - - {notification_type === 'FRD_REQ' && ( - - + {isSystemNotification ? ( + // Only verbage + + {verbage} + ) : ( + <> + {/* Text content: Actor name and verbage*/} + + + + {first_name} {last_name} + + + + {verbage} + + + {/* Friend request accept/decline button */} + {notification_type === 'FRD_REQ' && ( + + + + )} + {/* Moment Image Preview */} + {(notification_type === 'CMT' || + notification_type === 'MOM_3+' || + notification_type === 'MOM_FRIEND') && + notification_object && ( + + + + )} + )} - {(notification_type === 'CMT' || - notification_type === 'MOM_3+' || - notification_type === 'MOM_FRIEND') && - notification_object && ( - - - - )} ); diff --git a/src/types/types.ts b/src/types/types.ts index 376c4be0..b8746eea 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -251,7 +251,9 @@ export type TypeOfNotification = // notification_object is MomentType | 'MOM_FRIEND' // notification_object is undefined - | 'INVT_ONBRD'; + | 'INVT_ONBRD' + // notification_object is undefined + | 'PROF_VIST'; export type UniversityBadge = { id: number; -- cgit v1.2.3-70-g09d2 From 419681ad0d832808caec5252fb65aa154b0e4ae2 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 20 Apr 2021 14:40:18 -0400 Subject: created SYSTEM_MSG --- src/components/notifications/Notification.tsx | 6 ++---- src/types/types.ts | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) (limited to 'src/components') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index d66ca45e..3cc1c7f1 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -57,8 +57,6 @@ const Notification: React.FC = (props) => { const [avatar, setAvatar] = useState(undefined); const [momentURI, setMomentURI] = useState(undefined); - const isSystemNotification = - username === 'Tagg' && notification_type === 'PROF_VIST'; useEffect(() => { (async () => { @@ -210,7 +208,7 @@ const Notification: React.FC = (props) => { const isOwnProfile = id === loggedInUser.userId; const navigateToProfile = async () => { - if (isSystemNotification) { + if (notification_type === 'SYSTEM_MSG') { return; } if (!userXInStore(state, screenType, id)) { @@ -236,7 +234,7 @@ const Notification: React.FC = (props) => { } /> - {isSystemNotification ? ( + {notification_type === 'SYSTEM_MSG' ? ( // Only verbage {verbage} diff --git a/src/types/types.ts b/src/types/types.ts index b8746eea..8d7f4aed 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -253,7 +253,7 @@ export type TypeOfNotification = // notification_object is undefined | 'INVT_ONBRD' // notification_object is undefined - | 'PROF_VIST'; + | 'SYSTEM_MSG'; export type UniversityBadge = { id: number; -- cgit v1.2.3-70-g09d2 From 2ee4ffc4c99f794941e9d3e2c7e47a145d89d83d Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 20 Apr 2021 16:44:12 -0400 Subject: added 5 invite limits --- src/components/friends/InviteFriendTile.tsx | 22 +++++++++++++++++----- src/constants/strings.ts | 3 +++ src/screens/profile/InviteFriendsScreen.tsx | 17 ++++++++++++----- src/services/UserFriendsService.ts | 5 ++++- 4 files changed, 36 insertions(+), 11 deletions(-) (limited to 'src/components') diff --git a/src/components/friends/InviteFriendTile.tsx b/src/components/friends/InviteFriendTile.tsx index 95ebf16a..5237389a 100644 --- a/src/components/friends/InviteFriendTile.tsx +++ b/src/components/friends/InviteFriendTile.tsx @@ -8,25 +8,37 @@ import { View, } from 'react-native'; import {TAGG_LIGHT_BLUE} from '../../constants'; -import {ERROR_SOMETHING_WENT_WRONG} from '../../constants/strings'; +import { + ERROR_NO_CONTACT_INVITE_LEFT, + ERROR_SOMETHING_WENT_WRONG, + SUCCESS_INVITE_CONTACT, + SUCCESS_LAST_CONTACT_INVITE, +} from '../../constants/strings'; +import {InviteContactType} from '../../screens/profile/InviteFriendsScreen'; import {inviteFriendService} from '../../services'; import {normalize} from '../../utils'; interface InviteFriendTileProps { - item: Object; + item: InviteContactType; } const InviteFriendTile: React.FC = ({item}) => { const [invited, setInvited] = useState(false); const [formatedPhoneNumber, setFormattedPhoneNumber] = useState(''); const handleInviteFriend = async () => { - const response = await inviteFriendService( + const invites_left = await inviteFriendService( item.phoneNumber, item.firstName, item.lastName, ); - if (response) { - setInvited(response); + if (invites_left > 0) { + setInvited(true); + Alert.alert(SUCCESS_INVITE_CONTACT(invites_left)); + } else if (invites_left === 0) { + setInvited(true); + Alert.alert(SUCCESS_LAST_CONTACT_INVITE); + } else if (invites_left === -1) { + Alert.alert(ERROR_NO_CONTACT_INVITE_LEFT); } else { Alert.alert(ERROR_SOMETHING_WENT_WRONG); } diff --git a/src/constants/strings.ts b/src/constants/strings.ts index bdb94fba..50e4518b 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -30,6 +30,7 @@ export const ERROR_LINK = (str: string) => `Unable to link with ${str}, Please c export const ERROR_LOGIN = 'There was a problem logging you in, please refresh and try again'; export const ERROR_LOGIN_FAILED = 'Login failed. Check your username and password, and try again'; export const ERROR_NEXT_PAGE = 'There was a problem while loading the next page 😓, try again in a couple minutes'; +export const ERROR_NO_CONTACT_INVITE_LEFT = 'You have no more invites left!' export const ERROR_NOT_ONBOARDED = 'You are now on waitlist, please enter your invitation code if you have one'; export const ERROR_PHONE_IN_USE = 'Phone already in use, please try another one'; export const ERROR_PROFILE_CREATION_SHORT = 'Profile creation failed 😓'; @@ -62,7 +63,9 @@ export const NO_RESULTS_FOUND = 'No Results Found!'; export const PRIVATE_ACCOUNT = 'This account is private'; export const SUCCESS_BADGES_UPDATE = 'Badges updated successfully!' export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its memory will live on'; +export const SUCCESS_LAST_CONTACT_INVITE = 'Done! That was your last invite, hope you used it wisely!'; export const SUCCESS_INVITATION_CODE = 'Welcome to Tagg!'; +export const SUCCESS_INVITE_CONTACT = (str: string) => `Success! You now have ${str} invites left!`; export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} 🎉`; export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!'; export const SUCCESS_PWD_RESET = 'Your password was reset successfully!'; diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx index ad9e382e..e1f739c5 100644 --- a/src/screens/profile/InviteFriendsScreen.tsx +++ b/src/screens/profile/InviteFriendsScreen.tsx @@ -36,6 +36,17 @@ import {MainStackParams} from '../../routes'; import {RouteProp} from '@react-navigation/native'; const AnimatedIcon = Animated.createAnimatedComponent(Icon); +export type InviteContactType = { + firstName: string; + lastName: string; + phoneNumber: string; +}; + +type SearchResultType = { + usersFromContacts: ProfilePreviewType[]; + nonUsersFromContacts: InviteContactType[]; +}; + type InviteFriendsScreenRouteProp = RouteProp< MainStackParams, 'InviteFriendsScreen' @@ -53,10 +64,6 @@ const InviteFriendsScreen: React.FC = ({route}) => { ProfilePreviewType[] >([]); const [nonUsersFromContacts, setNonUsersFromContacts] = useState<[]>([]); - type SearchResultType = { - usersFromContacts: ProfilePreviewType[]; - nonUsersFromContacts: []; - }; const [results, setResults] = useState({ usersFromContacts: usersFromContacts, nonUsersFromContacts: nonUsersFromContacts, @@ -98,7 +105,7 @@ const InviteFriendsScreen: React.FC = ({route}) => { item.last_name.toLowerCase().startsWith(query), ); const searchResultsNonUsers = nonUsersFromContacts.filter( - (item) => + (item: InviteContactType) => (item.firstName + ' ' + item.lastName) .toLowerCase() .startsWith(query) || diff --git a/src/services/UserFriendsService.ts b/src/services/UserFriendsService.ts index 5c41e988..deb3ec6d 100644 --- a/src/services/UserFriendsService.ts +++ b/src/services/UserFriendsService.ts @@ -233,7 +233,10 @@ export const inviteFriendService = async ( }), }); if (response.status === 201 || response.status === 200) { - return await response.json(); + const data = await response.json(); + return data.invites_left; + } else if (response.status === 400) { + return -1; } return false; }; -- cgit v1.2.3-70-g09d2 From bde4b74acc1e211a5f887a56d0ba5010385b8dbf Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 20 Apr 2021 15:35:17 -0700 Subject: Moved code to components --- src/components/messages/DateHeader.tsx | 48 ++++++++++++++++++++ src/components/messages/MessageFooter.tsx | 75 +++++++++++++++++++++++++++++++ src/components/messages/index.ts | 2 + 3 files changed, 125 insertions(+) create mode 100644 src/components/messages/DateHeader.tsx create mode 100644 src/components/messages/MessageFooter.tsx (limited to 'src/components') diff --git a/src/components/messages/DateHeader.tsx b/src/components/messages/DateHeader.tsx new file mode 100644 index 00000000..34cc2d01 --- /dev/null +++ b/src/components/messages/DateHeader.tsx @@ -0,0 +1,48 @@ +import moment from 'moment'; +import React from 'react'; +import {View, Text, StyleSheet} from 'react-native'; +import {normalize} from '../../utils'; + +const DateHeader: React.FC = ({date}) => { + if (!date) { + return null; + } + + var dateMoment = moment(date).startOf('day'); + var printDate = ''; + + const TODAY = moment().startOf('day'); + const YESTERDAY = moment().subtract(1, 'day').startOf('day'); + const LAST_7_DAYS = moment().subtract(7, 'day').startOf('day'); + + if (TODAY.isSame(dateMoment)) { + printDate = 'Today'; + } else if (YESTERDAY.isSame(dateMoment)) { + printDate = 'Yesterday'; + } else if (dateMoment.isBetween(LAST_7_DAYS, YESTERDAY)) { + printDate = dateMoment.format('dddd'); + } else { + if (dateMoment.get('year') === TODAY.get('year')) { + printDate = dateMoment.format('MMMM D') + 'th'; + } else { + printDate = dateMoment.format('MMMM D ') + 'th' + dateMoment.get('year'); + } + } + return ( + + {printDate} + + ); +}; + +const styles = StyleSheet.create({ + dateHeader: { + color: '#7A7A7A', + fontWeight: '600', + fontSize: normalize(11), + textAlign: 'center', + marginVertical: '5%', + }, +}); + +export default DateHeader; diff --git a/src/components/messages/MessageFooter.tsx b/src/components/messages/MessageFooter.tsx new file mode 100644 index 00000000..2ed8c6ed --- /dev/null +++ b/src/components/messages/MessageFooter.tsx @@ -0,0 +1,75 @@ +import moment from 'moment'; +import React from 'react'; +import {normalize} from '../../utils'; +import {useMessageContext} from 'stream-chat-react-native-core'; +import {View, Text, Image, StyleSheet} from 'react-native'; + +const MessageFooter: React.FC = () => { + const message = useMessageContext(); + + if (message.message.type === 'deleted') { + return <>; + } else { + const printTime = moment(message.message.created_at).format('h:mmA'); + if (message.lastGroupMessage) { + return ( + + {readReceipts(message)} + {printTime} + + ); + } else { + return <>; + } + } +}; + +const readReceipts = (message) => { + const readByLocal = message.message.readBy; + if (message.isMyMessage) { + if (readByLocal) { + return ( + + ); + } else if (message.message.status === 'received') { + return ( + + ); + } else if (message.message.status === 'sending') { + return ( + + ); + } else { + return <>; + } + } +}; + +export const styles = StyleSheet.create({ + time: { + fontSize: normalize(11), + color: '#7A7A7A', + lineHeight: normalize(13), + }, + userMessage: { + marginRight: 5, + }, + userXMessage: {marginLeft: 5}, + generalMessage: {marginTop: 4, flexDirection: 'row'}, + icon: {width: 15, height: 15}, +}); + +export default MessageFooter; diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts index d08e9454..b19067ca 100644 --- a/src/components/messages/index.ts +++ b/src/components/messages/index.ts @@ -5,3 +5,5 @@ export {default as ChatHeader} from './ChatHeader'; export {default as ChatInputSubmit} from './ChatInputSubmit'; export {default as MessageAvatar} from './MessageAvatar'; export {default as TypingIndicator} from './TypingIndicator'; +export {default as MessageFooter} from './MessageFooter'; +export {default as DateHeader} from './DateHeader'; -- cgit v1.2.3-70-g09d2 From 59d90f15809890da05ede6a04e532da6a7af8d0b Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 21 Apr 2021 10:47:27 -0700 Subject: Moved date string manipulation code to utils --- src/components/messages/DateHeader.tsx | 36 ++++++++-------------------------- src/utils/messages.ts | 25 +++++++++++++++++++++++ 2 files changed, 33 insertions(+), 28 deletions(-) (limited to 'src/components') diff --git a/src/components/messages/DateHeader.tsx b/src/components/messages/DateHeader.tsx index 34cc2d01..cc7dce2c 100644 --- a/src/components/messages/DateHeader.tsx +++ b/src/components/messages/DateHeader.tsx @@ -1,36 +1,15 @@ -import moment from 'moment'; import React from 'react'; import {View, Text, StyleSheet} from 'react-native'; -import {normalize} from '../../utils'; +import {getFormatedDate, normalize} from '../../utils'; -const DateHeader: React.FC = ({date}) => { - if (!date) { - return null; - } +interface DateHeaderProps { + date: object; +} - var dateMoment = moment(date).startOf('day'); - var printDate = ''; - - const TODAY = moment().startOf('day'); - const YESTERDAY = moment().subtract(1, 'day').startOf('day'); - const LAST_7_DAYS = moment().subtract(7, 'day').startOf('day'); - - if (TODAY.isSame(dateMoment)) { - printDate = 'Today'; - } else if (YESTERDAY.isSame(dateMoment)) { - printDate = 'Yesterday'; - } else if (dateMoment.isBetween(LAST_7_DAYS, YESTERDAY)) { - printDate = dateMoment.format('dddd'); - } else { - if (dateMoment.get('year') === TODAY.get('year')) { - printDate = dateMoment.format('MMMM D') + 'th'; - } else { - printDate = dateMoment.format('MMMM D ') + 'th' + dateMoment.get('year'); - } - } +const DateHeader: React.FC = ({date}) => { return ( - - {printDate} + + {getFormatedDate(date)} ); }; @@ -43,6 +22,7 @@ const styles = StyleSheet.create({ textAlign: 'center', marginVertical: '5%', }, + dateContainer: {backgroundColor: 'transparent'}, }); export default DateHeader; diff --git a/src/utils/messages.ts b/src/utils/messages.ts index f4215bf0..0e73f639 100644 --- a/src/utils/messages.ts +++ b/src/utils/messages.ts @@ -137,3 +137,28 @@ export const createChannel = async ( throw error; } }; + +export const getFormatedDate = (date: object) => { + const dateMoment = moment(date).startOf('day'); + let dateToRender = ''; + + const TODAY = moment().startOf('day'); + const YESTERDAY = moment().subtract(1, 'day').startOf('day'); + const LAST_7_DAYS = moment().subtract(7, 'day').startOf('day'); + + if (TODAY.isSame(dateMoment)) { + dateToRender = 'Today'; + } else if (YESTERDAY.isSame(dateMoment)) { + dateToRender = 'Yesterday'; + } else if (dateMoment.isBetween(LAST_7_DAYS, YESTERDAY)) { + dateToRender = dateMoment.format('dddd'); + } else { + if (dateMoment.get('year') === TODAY.get('year')) { + dateToRender = dateMoment.format('MMMM D') + 'th'; + } else { + dateToRender = + dateMoment.format('MMMM D ') + 'th' + dateMoment.get('year'); + } + } + return dateToRender; +}; -- cgit v1.2.3-70-g09d2