aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/common/PostCarousel.tsx3
-rw-r--r--src/components/common/TaggPopup.tsx143
-rw-r--r--src/components/common/index.ts1
-rw-r--r--src/components/friends/InviteFriendTile.tsx22
-rw-r--r--src/components/messages/ChannelPreview.tsx3
-rw-r--r--src/components/messages/ChatHeader.tsx3
-rw-r--r--src/components/messages/DateHeader.tsx28
-rw-r--r--src/components/messages/MessageFooter.tsx75
-rw-r--r--src/components/messages/index.ts2
-rw-r--r--src/components/notifications/Notification.tsx68
-rw-r--r--src/components/onboarding/UpdateRequired.tsx84
-rw-r--r--src/components/onboarding/index.ts1
-rw-r--r--src/components/profile/PublicProfile.tsx7
-rw-r--r--src/components/taggs/TwitterTaggPost.tsx14
14 files changed, 263 insertions, 191 deletions
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<PostCarouselProps> = ({
activeDotIndex={currentPage}
dotsLength={data.length}
containerStyle={{marginBottom: marginBottom}}
- dotColor={'#6ee7e7'}
+ dotColor={TAGG_LIGHT_BLUE_2}
inactiveDotColor={'#e0e0e0'}
/>
</>
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<OnboardingStackParams, 'TaggPopup'>;
-type TaggPopupNavigationProps = StackNavigationProp<
- OnboardingStackParams,
- 'TaggPopup'
->;
-
-interface TaggPopupProps {
- route: TaggPopupRouteProps;
- navigation: TaggPopupNavigationProps;
-}
-
-const TaggPopup: React.FC<TaggPopupProps> = ({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 (
- <BlurView blurType="light" blurAmount={2} style={styles.container}>
- <TouchableOpacity
- style={styles.container}
- onPressOut={() => {
- navigation.goBack();
- }}>
- <View style={styles.popup}>
- <Image
- style={styles.icon}
- source={require('../../assets/icons/notificationPrompts/plus-logo.png')}
- />
- <View style={styles.textContainer}>
- <Text style={styles.header}>{messageHeader}</Text>
- <Text style={styles.subtext}>{messageBody}</Text>
- </View>
- {!next && (
- <TouchableOpacity
- style={styles.closeButton}
- onPress={() => {
- navigation.goBack();
- }}>
- <CloseIcon height={'50%'} width={'50%'} color={'white'} />
- </TouchableOpacity>
- )}
- </View>
- {next && (
- <View style={styles.footer}>
- <ArrowButton
- direction="forward"
- onPress={() => {
- navigation.navigate('TaggPopup', {popupProps: next});
- }}
- />
- </View>
- )}
- </TouchableOpacity>
- </BlurView>
- );
-};
-
-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';
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<InviteFriendTileProps> = ({item}) => {
const [invited, setInvited] = useState<boolean>(false);
const [formatedPhoneNumber, setFormattedPhoneNumber] = useState<string>('');
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/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/messages/DateHeader.tsx b/src/components/messages/DateHeader.tsx
new file mode 100644
index 00000000..cc7dce2c
--- /dev/null
+++ b/src/components/messages/DateHeader.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+import {getFormatedDate, normalize} from '../../utils';
+
+interface DateHeaderProps {
+ date: object;
+}
+
+const DateHeader: React.FC<DateHeaderProps> = ({date}) => {
+ return (
+ <View style={styles.dateContainer}>
+ <Text style={styles.dateHeader}>{getFormatedDate(date)}</Text>
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ dateHeader: {
+ color: '#7A7A7A',
+ fontWeight: '600',
+ fontSize: normalize(11),
+ textAlign: 'center',
+ marginVertical: '5%',
+ },
+ dateContainer: {backgroundColor: 'transparent'},
+});
+
+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 (
+ <View
+ style={[
+ message.isMyMessage ? styles.userMessage : styles.userXMessage,
+ styles.generalMessage,
+ ]}>
+ {readReceipts(message)}
+ <Text style={styles.time}>{printTime}</Text>
+ </View>
+ );
+ } else {
+ return <></>;
+ }
+ }
+};
+
+const readReceipts = (message) => {
+ const readByLocal = message.message.readBy;
+ if (message.isMyMessage) {
+ if (readByLocal) {
+ return (
+ <Image
+ source={require('../../assets/icons/messages/read_icon.png')}
+ style={styles.icon}
+ />
+ );
+ } else if (message.message.status === 'received') {
+ return (
+ <Image
+ source={require('../../assets/icons/messages/delivered_icon.png')}
+ style={styles.icon}
+ />
+ );
+ } else if (message.message.status === 'sending') {
+ return (
+ <Image
+ source={require('../../assets/icons/messages/sent_icon.png')}
+ style={styles.icon}
+ />
+ );
+ } 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';
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 87309c53..3cc1c7f1 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -208,6 +208,9 @@ const Notification: React.FC<NotificationProps> = (props) => {
const isOwnProfile = id === loggedInUser.userId;
const navigateToProfile = async () => {
+ if (notification_type === 'SYSTEM_MSG') {
+ return;
+ }
if (!userXInStore(state, screenType, id)) {
await fetchUserX(dispatch, {userId: id, username: username}, screenType);
}
@@ -231,34 +234,47 @@ const Notification: React.FC<NotificationProps> = (props) => {
}
/>
</TouchableWithoutFeedback>
- <View style={styles.contentContainer}>
- <TouchableWithoutFeedback onPress={navigateToProfile}>
- <Text style={styles.actorName}>
- {first_name} {last_name}
- </Text>
- </TouchableWithoutFeedback>
- <TouchableWithoutFeedback onPress={onNotificationTap}>
- <Text>{verbage}</Text>
- </TouchableWithoutFeedback>
- </View>
- {notification_type === 'FRD_REQ' && (
- <View style={styles.buttonsContainer}>
- <AcceptDeclineButtons
- onAccept={handleAcceptRequest}
- onReject={handleDeclineFriendRequest}
- />
+ {notification_type === 'SYSTEM_MSG' ? (
+ // Only verbage
+ <View style={styles.contentContainer}>
+ <Text style={styles.actorName}>{verbage}</Text>
</View>
+ ) : (
+ <>
+ {/* Text content: Actor name and verbage*/}
+ <View style={styles.contentContainer}>
+ <TouchableWithoutFeedback onPress={navigateToProfile}>
+ <Text style={styles.actorName}>
+ {first_name} {last_name}
+ </Text>
+ </TouchableWithoutFeedback>
+ <TouchableWithoutFeedback onPress={onNotificationTap}>
+ <Text>{verbage}</Text>
+ </TouchableWithoutFeedback>
+ </View>
+ {/* Friend request accept/decline button */}
+ {notification_type === 'FRD_REQ' && (
+ <View style={styles.buttonsContainer}>
+ <AcceptDeclineButtons
+ requester={{id, username, first_name, last_name}}
+ onAccept={handleAcceptRequest}
+ onReject={handleDeclineFriendRequest}
+ />
+ </View>
+ )}
+ {/* Moment Image Preview */}
+ {(notification_type === 'CMT' ||
+ notification_type === 'MOM_3+' ||
+ notification_type === 'MOM_FRIEND') &&
+ notification_object && (
+ <TouchableWithoutFeedback
+ style={styles.moment}
+ onPress={onNotificationTap}>
+ <Image style={styles.imageFlex} source={{uri: momentURI}} />
+ </TouchableWithoutFeedback>
+ )}
+ </>
)}
- {(notification_type === 'CMT' ||
- notification_type === 'MOM_3+' ||
- notification_type === 'MOM_FRIEND') &&
- notification_object && (
- <TouchableWithoutFeedback
- style={styles.moment}
- onPress={onNotificationTap}>
- <Image style={styles.imageFlex} source={{uri: momentURI}} />
- </TouchableWithoutFeedback>
- )}
</View>
);
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<UpdateRequiredProps> = ({visible}) => {
+ return (
+ <Modal animationType={'slide'} transparent={true} visible={visible}>
+ <CenteredView>
+ <View style={styles.contentContainer}>
+ <Image
+ style={styles.logo}
+ source={require('../../assets/images/logo-purple.png')}
+ />
+ <Text style={styles.header}>Update Required</Text>
+ <Text style={styles.body}>
+ You have to update your app to continue using Tagg, please download
+ the latest version from the app store
+ </Text>
+ <TaggSquareButton
+ title={'Update'}
+ onPress={() => {
+ Linking.openURL(
+ 'https://apps.apple.com/us/app/tagg-discover-your-community/id1537853613',
+ );
+ }}
+ buttonStyle={'normal'}
+ buttonColor={'purple'}
+ labelColor={'white'}
+ labelStyle={styles.button}
+ />
+ </View>
+ </CenteredView>
+ </Modal>
+ );
+};
+
+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/components/profile/PublicProfile.tsx b/src/components/profile/PublicProfile.tsx
index 1c49bff5..d2ee8626 100644
--- a/src/components/profile/PublicProfile.tsx
+++ b/src/components/profile/PublicProfile.tsx
@@ -243,8 +243,7 @@ const PublicProfile: React.FC<ContentProps> = ({
<TouchableOpacity
onPress={() =>
navigation.navigate('CategorySelection', {
- screenType: CategorySelectionScreenType.Profile,
- user: loggedInUser,
+ newCustomCategory: undefined,
})
}
style={styles.createCategoryButton}>
@@ -258,10 +257,6 @@ const PublicProfile: React.FC<ContentProps> = ({
};
const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- },
momentsContainer: {
backgroundColor: '#f2f2f2',
paddingBottom: SCREEN_HEIGHT * 0.15,
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: {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-18 00:23:44 +0000