diff options
Diffstat (limited to 'src')
29 files changed, 611 insertions, 215 deletions
diff --git a/src/assets/images/Group 479.jpg b/src/assets/images/Group 479.jpg Binary files differnew file mode 100644 index 00000000..74abad92 --- /dev/null +++ b/src/assets/images/Group 479.jpg diff --git a/src/assets/images/Group 479.svg b/src/assets/images/Group 479.svg new file mode 100644 index 00000000..4e1eee01 --- /dev/null +++ b/src/assets/images/Group 479.svg @@ -0,0 +1,5 @@ +<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg"> +<ellipse cx="7.75104" cy="5.91915" rx="2.00104" ry="1.93282" fill="white"/> +<path d="M7.75195 8.0791C5.67981 8.0791 4 9.6062 4 11.49H11.5039C11.5039 9.6062 9.8241 8.0791 7.75195 8.0791Z" fill="white"/> +<path d="M7.99349 1C4.13109 1 1 4.13109 1 7.99349C1 11.1633 3.10881 13.8405 6 14.6987L8 17L9.98697 14.6987C12.8782 13.8405 14.987 11.1633 14.987 7.99349C14.987 4.13109 11.8559 1 7.99349 1Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> +</svg> diff --git a/src/assets/images/Profile Icon.png b/src/assets/images/Profile Icon.png Binary files differnew file mode 100644 index 00000000..f8eae388 --- /dev/null +++ b/src/assets/images/Profile Icon.png diff --git a/src/assets/images/pill-icon-1.png b/src/assets/images/pill-icon-1.png Binary files differnew file mode 100644 index 00000000..06956c6a --- /dev/null +++ b/src/assets/images/pill-icon-1.png diff --git a/src/assets/images/pill-icon-2.png b/src/assets/images/pill-icon-2.png Binary files differnew file mode 100644 index 00000000..b2370b80 --- /dev/null +++ b/src/assets/images/pill-icon-2.png diff --git a/src/assets/images/pill-icon-3.png b/src/assets/images/pill-icon-3.png Binary files differnew file mode 100644 index 00000000..6cdf0b15 --- /dev/null +++ b/src/assets/images/pill-icon-3.png diff --git a/src/assets/images/pill-icon-4.png b/src/assets/images/pill-icon-4.png Binary files differnew file mode 100644 index 00000000..6e132647 --- /dev/null +++ b/src/assets/images/pill-icon-4.png diff --git a/src/assets/images/purple-tip.png b/src/assets/images/purple-tip.png Binary files differnew file mode 100644 index 00000000..27f5a89a --- /dev/null +++ b/src/assets/images/purple-tip.png diff --git a/src/components/common/GenericMoreInfoDrawer.tsx b/src/components/common/GenericMoreInfoDrawer.tsx index 0928ed44..cfc45131 100644 --- a/src/components/common/GenericMoreInfoDrawer.tsx +++ b/src/components/common/GenericMoreInfoDrawer.tsx @@ -3,15 +3,16 @@ import { GestureResponderEvent, StyleSheet, Text, + TextStyle, TouchableOpacity, View, ViewProps, ViewStyle, } from 'react-native'; import {useSafeAreaInsets} from 'react-native-safe-area-context'; -import BottomDrawer from './BottomDrawer'; import {TAGG_LIGHT_BLUE} from '../../constants'; import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import BottomDrawer from './BottomDrawer'; // conforms the JSX onPress attribute type type OnPressHandler = (event: GestureResponderEvent) => void; @@ -20,13 +21,12 @@ interface GenericMoreInfoDrawerProps extends ViewProps { isOpen: boolean; setIsOpen: (visible: boolean) => void; showIcons: boolean; - textColor: string; // An array of title, onPressHandler, and icon component - buttons: [string, OnPressHandler, JSX.Element?][]; + buttons: [string, OnPressHandler, JSX.Element?, TextStyle?][]; } const GenericMoreInfoDrawer: React.FC<GenericMoreInfoDrawerProps> = (props) => { - const {buttons, showIcons, textColor} = props; + const {buttons, showIcons} = props; // each button is 80px high, cancel button is always there const initialSnapPosition = (buttons.length + 1) * 80 + useSafeAreaInsets().bottom; @@ -44,13 +44,11 @@ const GenericMoreInfoDrawer: React.FC<GenericMoreInfoDrawerProps> = (props) => { showHeader={false} initialSnapPosition={initialSnapPosition}> <View style={styles.panel}> - {buttons.map(([title, action, icon], index) => ( + {buttons.map(([title, action, icon, textStyle], index) => ( <View key={index}> <TouchableOpacity style={panelButtonStyle} onPress={action}> {showIcons && <View style={styles.icon}>{icon}</View>} - <Text style={[styles.panelButtonTitle, {color: textColor}]}> - {title} - </Text> + <Text style={[styles.panelButtonTitle, textStyle]}>{title}</Text> </TouchableOpacity> <View style={styles.divider} /> </View> diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 7149a5b4..b659177d 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -40,7 +40,7 @@ const MomentPost: React.FC<MomentPostProps> = ({item, userXId, screenType}) => { */ useEffect(() => { loadTags(); - }, []); + }, [item]); /* * Check if loggedInUser has been tagged in the picture and set the id @@ -76,18 +76,16 @@ const MomentPost: React.FC<MomentPostProps> = ({item, userXId, screenType}) => { userXId={userXId} screenType={screenType} username={isOwnProfile ? loggedInUsername : username} - momentId={item.moment_id} style={styles.postHeader} momentTagId={momentTagId} removeTag={removeTag} + moment={item} + tags={tags} /> <MomentPostContent style={styles.postContent} - momentId={item.moment_id} - caption={item.caption} - pathHash={item.moment_url} - dateTime={item.date_created} screenType={screenType} + moment={item} momentTags={tags} /> </View> diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index 4a1f3894..d831d7ee 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -6,7 +6,7 @@ import Animated, {Easing} from 'react-native-reanimated'; import {useDispatch, useStore} from 'react-redux'; import {getCommentsCount} from '../../services'; import {RootState} from '../../store/rootReducer'; -import {MomentTagType, ScreenType, UserType} from '../../types'; +import {MomentTagType, MomentType, ScreenType, UserType} from '../../types'; import { getTimePosted, navigateToProfile, @@ -20,27 +20,21 @@ import {MomentTags} from '../common'; interface MomentPostContentProps extends ViewProps { screenType: ScreenType; - momentId: string; - caption: string; - pathHash: string; - dateTime: string; + moment: MomentType; momentTags: MomentTagType[]; } const MomentPostContent: React.FC<MomentPostContentProps> = ({ screenType, - momentId, - caption, - pathHash, - dateTime, style, + moment, momentTags, }) => { - const state: RootState = useStore().getState(); - const navigation = useNavigation(); - const dispatch = useDispatch(); const [elapsedTime, setElapsedTime] = useState(''); const [comments_count, setCommentsCount] = useState(''); const [tags, setTags] = useState<MomentTagType[]>(momentTags); + const state: RootState = useStore().getState(); + const navigation = useNavigation(); + const dispatch = useDispatch(); const imageRef = useRef(null); const [visible, setVisible] = useState(false); @@ -54,12 +48,12 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({ useEffect(() => { const fetchCommentsCount = async () => { - const count = await getCommentsCount(momentId, false); + const count = await getCommentsCount(moment.moment_id, false); setCommentsCount(count); }; - setElapsedTime(getTimePosted(dateTime)); + setElapsedTime(getTimePosted(moment.date_created)); fetchCommentsCount(); - }, [dateTime, momentId]); + }, [moment.date_created, moment.moment_id]); useEffect(() => { const fade = async () => { @@ -82,7 +76,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({ <Image ref={imageRef} style={styles.image} - source={{uri: pathHash}} + source={{uri: moment.moment_url}} resizeMode={'cover'} /> {tags.length > 0 && ( @@ -100,13 +94,13 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({ <View style={styles.footerContainer}> <CommentsCount commentsCount={comments_count} - momentId={momentId} + momentId={moment.moment_id} screenType={screenType} /> <Text style={styles.text}>{elapsedTime}</Text> </View> {renderTextWithMentions({ - value: caption, + value: moment.caption, styles: styles.captionText, partTypes: mentionPartTypes('white'), onPress: (user: UserType) => diff --git a/src/components/moments/MomentPostHeader.tsx b/src/components/moments/MomentPostHeader.tsx index dc6a3cd9..cde7639c 100644 --- a/src/components/moments/MomentPostHeader.tsx +++ b/src/components/moments/MomentPostHeader.tsx @@ -10,7 +10,7 @@ import { import {useDispatch, useSelector, useStore} from 'react-redux'; import {loadUserMoments} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; -import {ScreenType} from '../../types'; +import {MomentTagType, MomentType, ScreenType} from '../../types'; import {fetchUserX, userXInStore} from '../../utils'; import {MomentMoreInfoDrawer} from '../profile'; import TaggAvatar from '../profile/TaggAvatar'; @@ -19,19 +19,21 @@ interface MomentPostHeaderProps extends ViewProps { userXId?: string; screenType: ScreenType; username: string; - momentId: string; momentTagId: string; removeTag: () => Promise<void>; + moment: MomentType; + tags: MomentTagType[]; } const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({ userXId, screenType, username, - momentId, style, momentTagId, removeTag, + moment, + tags, }) => { const [drawerVisible, setDrawerVisible] = useState(false); const dispatch = useDispatch(); @@ -68,7 +70,6 @@ const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({ <MomentMoreInfoDrawer isOpen={drawerVisible} setIsOpen={setDrawerVisible} - momentId={momentId} isOwnProfile={isOwnProfile} momentTagId={momentTagId} removeTag={removeTag} @@ -76,6 +77,9 @@ const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({ dispatch(loadUserMoments(loggedInUserId)); navigation.pop(); }} + screenType={screenType} + moment={moment} + tags={tags} /> </View> ); diff --git a/src/components/notifications/NotificationPill.tsx b/src/components/notifications/NotificationPill.tsx new file mode 100644 index 00000000..01622a6f --- /dev/null +++ b/src/components/notifications/NotificationPill.tsx @@ -0,0 +1,209 @@ +import React, {useEffect, useState, useRef} from 'react'; +import {Image, StyleSheet, Text, View} from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; +import {SCREEN_WIDTH, isIPhoneX, numberWithCommas} from '../../utils'; +import { + NOTIFICATION_ICON_GRADIENT, + CHIN_HEIGHT, + NAV_BAR_HEIGHT, +} from '../../constants'; +import {getNotificationsUnreadCount} from '../../services'; +import {normalize} from 'react-native-elements'; +import PillIcon4 from '../../assets/images/Group 479.svg'; + +interface NotificationPillProps { + showIcon: boolean; +} + +export const NotificationPill: React.FC<NotificationPillProps> = ({ + showIcon, +}) => { + const [iconStart, setIconStart] = useState<number[]>([0, -100]); + const [tipStart, setTipStart] = useState<number[]>([0, -100]); + const [notificationSets, setNotificationSets] = useState<{ + CMT?: number; + FRD_REQ?: number; + P_VIEW?: number; + MOM_TAG?: number; + }>({}); + const [timeCount, setTimeCount] = useState<boolean>(false); + const [timeOut, setTimeOut] = useState<boolean>(false); + const iconRef = useRef(null); + const tipRef = useRef(null); + const pillTip = require('../../assets/images/purple-tip.png'); + + const navBarPos = 20; + + // If there are notifications, determines the size of the pill + // and sets points for correct placement + useEffect(() => { + setTimeout(() => { + if (iconRef.current) { + iconRef.current.measure( + ( + _fx: number, + _fy: number, + width: number, + height: number, + _px: number, + _py: number, + ) => { + if (tipRef.current) { + tipRef.current.measure( + ( + __fx: number, + __fy: number, + width2: number, + __height: number, + __px: number, + __py: number, + ) => { + const x = SCREEN_WIDTH / 2 - width / 2; + const y = isIPhoneX() + ? CHIN_HEIGHT + NAV_BAR_HEIGHT + navBarPos + : NAV_BAR_HEIGHT + navBarPos; + setIconStart([x, y]); + setTipStart([width / 2 - width2 / 2, height - 1]); + setTimeCount(true); + }, + ); + } + }, + ); + } else { + } + }, 100); + }, [notificationSets, iconRef, tipRef]); + + // Used so that pill disappears after 5 seconds + useEffect(() => { + if (timeCount) { + setTimeout(() => { + setTimeOut(true); + }, 5000); + } + }, [timeCount]); + + // Gets data from backend to check for unreads + useEffect(() => { + const getCount = async () => { + const data = await getNotificationsUnreadCount(); + setTimeout(() => { + if (data) { + setNotificationSets(data); + } + }, 100); + }; + + getCount(); + }, []); + + return ( + <> + {notificationSets && + Object.keys(notificationSets).length !== 0 && + showIcon && + !timeOut && ( + <View + style={[ + styles.purpleContainer, + {bottom: iconStart[1], left: iconStart[0]}, + ]} + ref={iconRef}> + <LinearGradient + colors={NOTIFICATION_ICON_GRADIENT} + style={styles.iconPurple}> + {notificationSets.CMT && ( + <> + <Image + source={require('../../assets/images/pill-icon-1.png')} + style={styles.indicationIcon} + /> + <Text style={styles.text}> + {numberWithCommas(notificationSets.CMT)} + </Text> + </> + )} + {notificationSets.FRD_REQ && ( + <> + <Image + source={require('../../assets/images/pill-icon-2.png')} + style={styles.indicationIcon} + /> + <Text style={styles.text}> + {numberWithCommas(notificationSets.FRD_REQ)} + </Text> + </> + )} + {notificationSets.P_VIEW && ( + <> + <Image + source={require('../../assets/images/pill-icon-3.png')} + style={styles.indicationIcon} + /> + <Text style={styles.text}> + {numberWithCommas(notificationSets.P_VIEW)} + </Text> + </> + )} + {notificationSets.MOM_TAG && ( + <> + <PillIcon4 style={styles.indicationIcon} /> + <Text style={styles.text}> + {numberWithCommas(notificationSets.MOM_TAG)} + </Text> + </> + )} + </LinearGradient> + <Image + style={[styles.tip, {top: tipStart[1], left: tipStart[0]}]} + source={pillTip} + ref={tipRef} + /> + </View> + )} + </> + ); +}; + +const styles = StyleSheet.create({ + purpleContainer: { + flex: 1, + justifyContent: 'center', + position: 'absolute', + zIndex: 999, + }, + iconPurple: { + padding: 5, + borderRadius: 15, + flex: 1, + flexDirection: 'row', + alignItems: 'center', + }, + text: { + margin: 2, + color: 'white', + fontSize: normalize(10), + justifyContent: 'center', + alignItems: 'center', + marginRight: 5, + }, + tip: { + position: 'absolute', + zIndex: 999, + height: 12, + flex: 1, + resizeMode: 'contain', + }, + indicationIcon: { + height: 14, + width: 14, + margin: 2, + marginLeft: 5, + }, + svgIndicationIcon: { + height: 14, + width: 14, + margin: 3, + }, +}); diff --git a/src/components/notifications/index.ts b/src/components/notifications/index.ts index 733b56f1..077c26a4 100644 --- a/src/components/notifications/index.ts +++ b/src/components/notifications/index.ts @@ -1,2 +1,3 @@ export {default as Notification} from './Notification'; export {InviteFriendsPrompt} from './NotificationPrompts'; +export {NotificationPill} from './NotificationPill'; diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx index 1265497e..a796ffd8 100644 --- a/src/components/profile/MomentMoreInfoDrawer.tsx +++ b/src/components/profile/MomentMoreInfoDrawer.tsx @@ -1,44 +1,58 @@ +import {useNavigation} from '@react-navigation/core'; import React, {useEffect, useState} from 'react'; import { Alert, GestureResponderEvent, StyleSheet, + TextStyle, TouchableOpacity, ViewProps, } from 'react-native'; import MoreIcon from '../../assets/icons/more_horiz-24px.svg'; import {ERROR_DELETE_MOMENT, MOMENT_DELETED_MSG} from '../../constants/strings'; import {deleteMoment, sendReport} from '../../services'; +import {MomentTagType, MomentType, ScreenType} from '../../types/types'; import {GenericMoreInfoDrawer} from '../common'; enum MomentDrawerOptions { DeleteMoment = 'Delete Moment', ReportIssue = 'Report an Issue', RemoveTag = 'Remove yourself from moment', + EditMoment = 'Edit Moment', } interface MomentMoreInfoDrawerProps extends ViewProps { isOpen: boolean; setIsOpen: (visible: boolean) => void; - momentId: string; isOwnProfile: boolean; momentTagId: string; removeTag: () => Promise<void>; dismissScreenAndUpdate: () => void; + screenType: ScreenType; + moment: MomentType; + tags: MomentTagType[]; } const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => { const { - momentId, setIsOpen, isOwnProfile, dismissScreenAndUpdate, momentTagId, removeTag, + screenType, + moment, + tags, } = props; + const navigation = useNavigation(); + + const [drawerButtons, setDrawerButtons] = useState< + [string, (event: GestureResponderEvent) => void, JSX.Element?, TextStyle?][] + >([]); + const handleDeleteMoment = async () => { setIsOpen(false); - deleteMoment(momentId).then((success) => { + deleteMoment(moment.moment_id).then((success) => { if (success) { // set time out for UI transitions setTimeout(() => { @@ -88,7 +102,8 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => { [ { text: 'Mark as inappropriate', - onPress: () => sendReport(momentId, 'Mark as inappropriate'), + onPress: () => + sendReport(moment.moment_id, 'Mark as inappropriate'), }, { text: 'Cancel', @@ -96,7 +111,7 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => { }, { text: 'Mark as abusive', - onPress: () => sendReport(momentId, 'Mark as abusive'), + onPress: () => sendReport(moment.moment_id, 'Mark as abusive'), }, ], {cancelable: false}, @@ -104,42 +119,52 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => { }, 500); }; - const [drawerButtons, setDrawerButtons] = useState< - [string, (event: GestureResponderEvent) => void, JSX.Element?][] - >([ - isOwnProfile - ? [MomentDrawerOptions.DeleteMoment, handleDeleteMoment] - : [MomentDrawerOptions.ReportIssue, handleReportMoment], - ]); + const handleEditMoment = async () => { + setIsOpen(false); + navigation.navigate('CaptionScreen', { + screenType: screenType, + selectedTags: tags, + moment: moment, + }); + }; /* * Update bottom drawer options to contain/not contain 'remove tag' option */ useEffect(() => { - const setupBottomDrawer = () => { - const present = drawerButtons.findIndex( - (button) => button[0] === MomentDrawerOptions.RemoveTag, - ); - /* - * If user is not tagged but button is present, remove button from bottom drawer - * If user is tagged but button is not present, add button to bottom drawer - */ - if (momentTagId !== '' && present === -1) { - const localDrawerButtons = drawerButtons; - localDrawerButtons.push([ + let newButtons: [ + string, + (event: GestureResponderEvent) => void, + JSX.Element?, + TextStyle?, + ][] = []; + if (!isOwnProfile) { + newButtons.push([ + MomentDrawerOptions.ReportIssue, + handleReportMoment, + undefined, + {color: 'red'}, + ]); + // should we have the "delete moment" option? + if (momentTagId !== '') { + newButtons.push([ MomentDrawerOptions.RemoveTag, handleRemoveTag, + undefined, + {color: 'red'}, ]); - setDrawerButtons(localDrawerButtons); - } else if (momentTagId === '' && present !== -1) { - const filteredButtons = drawerButtons.filter( - (button) => button[0] !== MomentDrawerOptions.RemoveTag, - ); - setDrawerButtons(filteredButtons); } - }; - setupBottomDrawer(); - }, [momentTagId]); + } else { + newButtons.push([ + MomentDrawerOptions.DeleteMoment, + handleDeleteMoment, + undefined, + {color: 'red'}, + ]); + newButtons.push([MomentDrawerOptions.EditMoment, handleEditMoment]); + } + setDrawerButtons(newButtons); + }, [tags, momentTagId]); return ( <> @@ -153,7 +178,6 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => { <GenericMoreInfoDrawer {...props} showIcons={false} - textColor={'red'} buttons={drawerButtons} /> </> diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx index ecc45211..656f81bb 100644 --- a/src/components/profile/ProfileMoreInfoDrawer.tsx +++ b/src/components/profile/ProfileMoreInfoDrawer.tsx @@ -55,12 +55,12 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => { <GenericMoreInfoDrawer {...props} showIcons={false} - textColor={'red'} buttons={[ [ (isBlocked ? 'Unblock' : 'Block') + ` ${userXName}`, onBlockUnblock, undefined, + {color: 'red'}, ], ]} /> @@ -68,7 +68,6 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => { <GenericMoreInfoDrawer {...props} showIcons={true} - textColor={'black'} buttons={[ [ 'Settings', @@ -77,6 +76,7 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => { source={require('../../assets/images/settings/settings.png')} style={styles.image} />, + {color: 'black'}, ], [ 'Edit Profile', @@ -85,6 +85,7 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => { source={require('../../assets/images/settings/edit-profile.png')} style={styles.image} />, + {color: 'black'}, ], ]} /> diff --git a/src/constants/api.ts b/src/constants/api.ts index f02ee407..b55489d9 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -45,6 +45,8 @@ export const BLOCK_USER_ENDPOINT: string = API_URL + 'block/'; export const PASSWORD_RESET_ENDPOINT: string = API_URL + 'password-reset/'; export const MOMENT_CATEGORY_ENDPOINT: string = API_URL + 'moment-category/'; export const NOTIFICATIONS_ENDPOINT: string = API_URL + 'notifications/'; +export const NOTIFICATIONS_COUNT_ENDPOINT: string = API_URL + 'notifications/unread_count/'; +export const NOTIFICATIONS_DATE: string = API_URL + 'notifications/seen/'; export const DISCOVER_ENDPOINT: string = API_URL + 'discover/'; export const SEARCH_BUTTONS_ENDPOPINT: string = DISCOVER_ENDPOINT + 'search_buttons/'; diff --git a/src/constants/constants.ts b/src/constants/constants.ts index a6d98883..f4ffd750 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -21,6 +21,8 @@ export const AVATAR_GRADIENT_DIM = 50; export const TAGG_ICON_DIM = 58; export const TAGG_RING_DIM = normalize(60); +// default height of the navigation bar, from react native library, unless on ipad +export const NAV_BAR_HEIGHT = 49; export const BADGE_LIMIT = 5; export const INTEGRATED_SOCIAL_LIST: string[] = [ @@ -91,6 +93,7 @@ export const BADGE_GRADIENT_REST = [ 'rgba(78, 54, 41, 1)', 'rgba(236, 32, 39, 1)', ]; +export const NOTIFICATION_ICON_GRADIENT = ['#8F01FF', '#7B02DA']; export const SOCIAL_FONT_COLORS = { INSTAGRAM: INSTAGRAM_FONT_COLOR, diff --git a/src/constants/regex.ts b/src/constants/regex.ts index 61523203..f934185d 100644 --- a/src/constants/regex.ts +++ b/src/constants/regex.ts @@ -36,7 +36,7 @@ export const nameRegex: RegExp = /^[A-Za-z'\-,. ]{2,20}$/; * - match alphanumerics, and special characters used in URLs */ export const websiteRegex: RegExp = - /^$|^(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,50}\.[a-zA-Z0-9()]{2,6}\b([-a-zA-Z0-9()@:%_+.~#?&/=]{0,35})$/; + /^$|^(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,50}\.[a-zA-Z0-9()]{2,6}\b([-a-zA-Z0-9()@:%_+.~#?&\/=]{0,35})$/; /** * The website regex has the following constraints diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index d22c1874..8fce5e2f 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -37,14 +37,14 @@ export type MainStackParams = { screenType: ScreenType; }; CaptionScreen: { - title: string; - image: Image; + title?: string; + image?: Image; screenType: ScreenType; selectedTags?: MomentTagType[]; + moment?: MomentType; }; TagFriendsScreen: { - image: Image; - screenType: ScreenType; + imagePath: string; selectedTags?: MomentTagType[]; }; TagSelectionScreen: { diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index 000ac614..c3a42739 100644 --- a/src/routes/tabs/NavigationBar.tsx +++ b/src/routes/tabs/NavigationBar.tsx @@ -4,9 +4,11 @@ import {useSelector} from 'react-redux'; import {NavigationIcon} from '../../components'; import {NO_NOTIFICATIONS} from '../../store/initialStates'; import {RootState} from '../../store/rootReducer'; +import {setNotificationsReadDate} from '../../services'; import {ScreenType} from '../../types'; import {haveUnreadNotifications} from '../../utils'; import MainStackScreen from '../main/MainStackScreen'; +import {NotificationPill} from '../../components/notifications'; const Tabs = createBottomTabNavigator(); @@ -18,10 +20,14 @@ const NavigationBar: React.FC = () => { const {notifications: {notifications} = NO_NOTIFICATIONS} = useSelector( (state: RootState) => state, ); + // Triggered if user clicks on Notifications page to close the pill + const [showIcon, setShowIcon] = useState<boolean>(true); const [unreadNotificationsPresent, setUnreadNotificationsPresent] = useState<boolean>(false); + // Prior to pill inclusion, determines if notification bell + // should have purple dot useEffect(() => { const determine = async () => { setUnreadNotificationsPresent( @@ -32,77 +38,88 @@ const NavigationBar: React.FC = () => { }, [notifications]); return ( - <Tabs.Navigator - screenOptions={({route}) => ({ - tabBarIcon: ({focused}) => { - switch (route.name) { - case 'Home': - return <NavigationIcon tab="Home" disabled={!focused} />; - case 'Search': - return <NavigationIcon tab="Search" disabled={!focused} />; - case 'Upload': - return <NavigationIcon tab="Upload" disabled={!focused} />; - case 'Notifications': - return ( - <NavigationIcon - newIcon={ - newNotificationReceived || unreadNotificationsPresent - } - tab="Notifications" - disabled={!focused} - /> - ); - case 'Chat': - return <NavigationIcon tab="Chat" disabled={!focused} />; - case 'Profile': - return <NavigationIcon tab="Profile" disabled={!focused} />; - case 'SuggestedPeople': - return ( - <NavigationIcon tab="SuggestedPeople" disabled={!focused} /> - ); - default: - return <Fragment />; - } - }, - })} - initialRouteName={isOnboardedUser ? 'Profile' : 'SuggestedPeople'} - tabBarOptions={{ - showLabel: false, - style: { - backgroundColor: 'transparent', - position: 'absolute', - borderTopWidth: 0, - left: 0, - right: 0, - bottom: '1%', - }, - }}> - <Tabs.Screen - name="SuggestedPeople" - component={MainStackScreen} - initialParams={{screenType: ScreenType.SuggestedPeople}} - /> - <Tabs.Screen - name="Search" - component={MainStackScreen} - initialParams={{screenType: ScreenType.Search}} - /> - <Tabs.Screen - name="Notifications" - component={MainStackScreen} - initialParams={{screenType: ScreenType.Notifications}} - /> - <Tabs.Screen - name="Chat" - component={MainStackScreen} - initialParams={{screenType: ScreenType.Chat}} - /> - <Tabs.Screen - name="Profile" - component={MainStackScreen} - initialParams={{screenType: ScreenType.Profile}} - /> - </Tabs.Navigator> + <> + <NotificationPill showIcon={showIcon} /> + <Tabs.Navigator + screenOptions={({route}) => ({ + tabBarIcon: ({focused}) => { + switch (route.name) { + case 'Home': + return <NavigationIcon tab="Home" disabled={!focused} />; + case 'Search': + return <NavigationIcon tab="Search" disabled={!focused} />; + case 'Upload': + return <NavigationIcon tab="Upload" disabled={!focused} />; + case 'Notifications': + return ( + <NavigationIcon + newIcon={ + newNotificationReceived || unreadNotificationsPresent + } + tab="Notifications" + disabled={!focused} + /> + ); + case 'Chat': + return <NavigationIcon tab="Chat" disabled={!focused} />; + case 'Profile': + return <NavigationIcon tab="Profile" disabled={!focused} />; + case 'SuggestedPeople': + return ( + <NavigationIcon tab="SuggestedPeople" disabled={!focused} /> + ); + default: + return <Fragment />; + } + }, + })} + initialRouteName={isOnboardedUser ? 'Profile' : 'SuggestedPeople'} + tabBarOptions={{ + showLabel: false, + style: { + backgroundColor: 'transparent', + position: 'absolute', + borderTopWidth: 0, + left: 0, + right: 0, + bottom: '1%', + }, + }}> + <Tabs.Screen + name="SuggestedPeople" + component={MainStackScreen} + initialParams={{screenType: ScreenType.SuggestedPeople}} + /> + <Tabs.Screen + name="Search" + component={MainStackScreen} + initialParams={{screenType: ScreenType.Search}} + /> + <Tabs.Screen + name="Notifications" + component={MainStackScreen} + initialParams={{screenType: ScreenType.Notifications}} + listeners={{ + tabPress: (_) => { + // Closes the pill once this screen has been opened + setShowIcon(false); + // Updates backend's date of reading notifications + setNotificationsReadDate(); + }, + }} + /> + <Tabs.Screen + name="Chat" + component={MainStackScreen} + initialParams={{screenType: ScreenType.Chat}} + /> + <Tabs.Screen + name="Profile" + component={MainStackScreen} + initialParams={{screenType: ScreenType.Profile}} + /> + </Tabs.Navigator> + </> ); }; diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index c8bca9f4..570c3776 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -30,7 +30,7 @@ interface TagFriendsScreenProps { route: TagFriendsScreenRouteProps; } const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { - const {image, selectedTags} = route.params; + const {imagePath, selectedTags} = route.params; const navigation = useNavigation(); const imageRef = useRef(null); const [tags, setTags] = useState<MomentTagType[]>([]); @@ -85,7 +85,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { <Image ref={imageRef} style={styles.image} - source={{uri: image.path}} + source={{uri: imagePath}} resizeMode={'cover'} /> </TouchableWithoutFeedback> diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 8bffd82b..9e1b4674 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -21,9 +21,13 @@ import {SearchBackground} from '../../components'; import {CaptionScreenHeader} from '../../components/'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; import {TAGG_LIGHT_BLUE_2} from '../../constants'; -import {ERROR_UPLOAD, SUCCESS_PIC_UPLOAD} from '../../constants/strings'; +import { + ERROR_SOMETHING_WENT_WRONG_REFRESH, + ERROR_UPLOAD, + SUCCESS_PIC_UPLOAD, +} from '../../constants/strings'; import {MainStackParams} from '../../routes'; -import {postMoment, postMomentTags} from '../../services'; +import {patchMoment, postMoment, postMomentTags} from '../../services'; import { loadUserMoments, updateProfileCompletionStage, @@ -47,14 +51,16 @@ interface CaptionScreenProps { } const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { - const {title, image, screenType, selectedTags} = route.params; + const {title, image, screenType, selectedTags, moment} = route.params; const { user: {userId}, } = useSelector((state: RootState) => state.user); const dispatch = useDispatch(); - const [caption, setCaption] = useState(''); + const [caption, setCaption] = useState(moment ? moment.caption : ''); const [loading, setLoading] = useState(false); - const [tags, setTags] = useState<MomentTagType[]>([]); + const [tags, setTags] = useState<MomentTagType[]>( + selectedTags ? selectedTags : [], + ); const [taggedList, setTaggedList] = useState<string>(''); useEffect(() => { @@ -84,22 +90,37 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { }); }; - const handleShare = async () => { - const handleFailed = () => { - setLoading(false); - setTimeout(() => { - Alert.alert(ERROR_UPLOAD); - }, 500); - }; - const handleSuccess = () => { + const handleFailed = () => { + setLoading(false); + setTimeout(() => { + Alert.alert(moment ? ERROR_SOMETHING_WENT_WRONG_REFRESH : ERROR_UPLOAD); + }, 500); + }; + const handleSuccess = () => { + setLoading(false); + if (moment) { setLoading(false); + navigation.goBack(); + } else { navigateToProfile(); setTimeout(() => { Alert.alert(SUCCESS_PIC_UPLOAD); }, 500); - }; + } + }; + + const formattedTags = () => { + return tags.map((tag) => ({ + x: Math.floor(tag.x), + y: Math.floor(tag.y), + z: Math.floor(tag.z), + user_id: tag.user.id, + })); + }; + + const handleShare = async () => { setLoading(true); - if (!image.filename) { + if (!image?.filename || !title) { return; } const momentResponse = await postMoment( @@ -115,12 +136,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { } const momentTagResponse = await postMomentTags( momentResponse.moment_id, - tags.map((tag) => ({ - x: Math.floor(tag.x), - y: Math.floor(tag.y), - z: Math.floor(tag.z), - user_id: tag.user.id, - })), + formattedTags(), ); if (!momentTagResponse) { handleFailed(); @@ -133,6 +149,23 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { handleSuccess(); }; + const handleDone = async () => { + setLoading(true); + if (moment?.moment_id) { + const success = await patchMoment( + moment.moment_id, + caption, + formattedTags(), + ); + if (success) { + dispatch(loadUserMoments(userId)); + handleSuccess(); + } else { + handleFailed(); + } + } + }; + return ( <SearchBackground> {loading ? <TaggLoadingIndicator fullscreen /> : <Fragment />} @@ -145,20 +178,25 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { <Button title="Cancel" buttonStyle={styles.button} - onPress={() => navigateToProfile()} + onPress={() => + moment ? navigation.goBack() : navigateToProfile() + } /> <Button - title="Share" + title={moment ? 'Done' : 'Share'} titleStyle={styles.shareButtonTitle} buttonStyle={styles.button} - onPress={handleShare} + onPress={moment ? handleDone : handleShare} /> </View> - <CaptionScreenHeader style={styles.header} {...{title: title}} /> + <CaptionScreenHeader + style={styles.header} + {...{title: moment ? moment.moment_category : title}} + /> {/* this is the image we want to center our tags' initial location within */} <Image style={styles.image} - source={{uri: image.path}} + source={{uri: moment ? moment.moment_url : image?.path}} resizeMode={'cover'} /> <MentionInput @@ -172,8 +210,11 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { <TouchableOpacity onPress={() => navigation.navigate('TagFriendsScreen', { - image: image, - screenType: screenType, + imagePath: moment + ? moment.moment_url + : image + ? image.path + : '', selectedTags: tags, }) } diff --git a/src/screens/profile/EditProfile.tsx b/src/screens/profile/EditProfile.tsx index 26802e45..20a62b19 100644 --- a/src/screens/profile/EditProfile.tsx +++ b/src/screens/profile/EditProfile.tsx @@ -305,14 +305,13 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => { type: 'image/jpg', }); } - if (form.website) { - if (form.isValidWebsite) { - request.append('website', form.website); - } else { - setForm({...form, attemptedSubmit: false}); - setTimeout(() => setForm({...form, attemptedSubmit: true})); - invalidFields = true; - } + + if (form.isValidWebsite) { + request.append('website', form.website); + } else { + setForm({...form, attemptedSubmit: false}); + setTimeout(() => setForm({...form, attemptedSubmit: true})); + invalidFields = true; } if (form.bio) { diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx index 89f2e62f..9ee6fb1c 100644 --- a/src/screens/profile/InviteFriendsScreen.tsx +++ b/src/screens/profile/InviteFriendsScreen.tsx @@ -21,7 +21,6 @@ import { getRemainingInviteCount, usersFromContactsService, } from '../../services/UserFriendsService'; -import {ProfilePreviewType} from '../../types'; import { extractContacts, HeaderHeight, @@ -45,11 +44,10 @@ export type SearchResultType = { const InviteFriendsScreen: React.FC = () => { const navigation = useNavigation(); - const [usersFromContacts, setUsersFromContacts] = useState< - ProfilePreviewType[] + const [nonUsersFromContacts, setNonUsersFromContacts] = useState< + InviteContactType[] >([]); - const [nonUsersFromContacts, setNonUsersFromContacts] = useState<[]>([]); - const [pendingUsers] = useState<[]>([]); + const [pendingUsers, setPendingUsers] = useState<InviteContactType[]>([]); const [results, setResults] = useState<SearchResultType>({ nonUsersFromContacts: nonUsersFromContacts, pendingUsers: pendingUsers, @@ -80,8 +78,8 @@ const InviteFriendsScreen: React.FC = () => { const permission = await checkPermission(); if (permission === 'authorized') { let response = await usersFromContactsService(retrievedContacts); - await setUsersFromContacts(response.existing_tagg_users); await setNonUsersFromContacts(response.invite_from_contacts); + await setPendingUsers(response.pending_users); setResults({ nonUsersFromContacts: response.invite_from_contacts, pendingUsers: response.pending_users, @@ -100,30 +98,32 @@ const InviteFriendsScreen: React.FC = () => { useEffect(() => { const search = async () => { if (query.length > 0) { - const searchResultsUsers = usersFromContacts.filter( - (item: ProfilePreviewType) => - (item.first_name + ' ' + item.last_name) - .toLowerCase() - .startsWith(query) || - item.username.toLowerCase().startsWith(query) || - item.last_name.toLowerCase().startsWith(query), - ); - const searchResultsNonUsers = nonUsersFromContacts.filter( - (item: InviteContactType) => - (item.firstName + ' ' + item.lastName) - .toLowerCase() - .startsWith(query) || - item.lastName.toLowerCase().startsWith(query), - ); - const sanitizedResult = { - usersFromContacts: searchResultsUsers, + const searchResultsPendingUsers = pendingUsers + ? pendingUsers.filter( + (item: InviteContactType) => + (item.firstName + ' ' + item.lastName) + .toLowerCase() + .startsWith(query) || + item.lastName.toLowerCase().startsWith(query), + ) + : []; + const searchResultsNonUsers = nonUsersFromContacts + ? nonUsersFromContacts.filter( + (item: InviteContactType) => + (item.firstName + ' ' + item.lastName) + .toLowerCase() + .startsWith(query) || + item.lastName.toLowerCase().startsWith(query), + ) + : []; + setResults({ nonUsersFromContacts: searchResultsNonUsers, - }; - setResults(sanitizedResult); + pendingUsers: searchResultsPendingUsers, + }); } else { setResults({ - nonUsersFromContacts: nonUsersFromContacts, - pendingUsers: pendingUsers, + nonUsersFromContacts: nonUsersFromContacts || [], + pendingUsers: pendingUsers || [], }); } }; @@ -203,7 +203,7 @@ const InviteFriendsScreen: React.FC = () => { styles.subheader, { height: - 72 * + 75 * (results.pendingUsers ? results.pendingUsers.length : 1), }, ]}> diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts index af602dc7..c66d2786 100644 --- a/src/services/MomentService.ts +++ b/src/services/MomentService.ts @@ -54,6 +54,38 @@ export const postMoment = async ( return undefined; }; +export const patchMoment = async ( + momentId: string, + caption: string, + tags: { + x: number; + y: number; + z: number; + user_id: string; + }[], +) => { + try { + const request = new FormData(); + request.append('moment_id', momentId); + request.append('captions', JSON.stringify({[momentId]: caption})); + request.append('tags', JSON.stringify(tags)); + const token = await AsyncStorage.getItem('token'); + let response = await fetch(MOMENTS_ENDPOINT, { + method: 'PATCH', + headers: { + 'Content-Type': 'multipart/form-data', + Authorization: 'Token ' + token, + }, + body: request, + }); + let statusCode = response.status; + return statusCode === 200 || statusCode === 201; + } catch (err) { + console.log(err); + } + return false; +}; + export const loadMoments: ( userId: string, token: string, diff --git a/src/services/NotificationService.ts b/src/services/NotificationService.ts index c5c843f5..ccaa9135 100644 --- a/src/services/NotificationService.ts +++ b/src/services/NotificationService.ts @@ -1,5 +1,9 @@ import AsyncStorage from '@react-native-community/async-storage'; -import {NOTIFICATIONS_ENDPOINT} from '../constants'; +import { + NOTIFICATIONS_ENDPOINT, + NOTIFICATIONS_COUNT_ENDPOINT, + NOTIFICATIONS_DATE, +} from '../constants'; import {NotificationType} from '../types'; export const getNotificationsData: () => Promise<NotificationType[]> = @@ -29,3 +33,60 @@ export const getNotificationsData: () => Promise<NotificationType[]> = return []; } }; + +export const getNotificationsUnreadCount = async () => { + try { + const token = await AsyncStorage.getItem('token'); + const response = await fetch(NOTIFICATIONS_COUNT_ENDPOINT, { + method: 'GET', + headers: { + Authorization: 'Token ' + token, + }, + }); + if (response.status === 200) { + const data: any = await response.json(); + const typedData: { + CMT?: number; + FRD_REQ?: number; + P_VIEW?: number; + MOM_TAG?: number; + } = {}; + if (data.CMT) { + typedData.CMT = data.CMT; + } + if (data.FRD_REQ && data.FRD_REQ > 0) { + typedData.FRD_REQ = data.FRD_REQ; + } + if (data.P_VIEW && data.P_VIEW > 0) { + typedData.P_VIEW = data.P_VIEW; + } + if (data.MOM_TAG && data.MOM_TAG > 0) { + typedData.MOM_TAG = data.MOM_TAG; + } + return typedData; + } + } catch (error) { + console.log('Unable to fetch notifications'); + } + return undefined; +}; + +export const setNotificationsReadDate: () => Promise<boolean> = async () => { + try { + const token = await AsyncStorage.getItem('token'); + const response = await fetch(NOTIFICATIONS_DATE, { + method: 'POST', + headers: { + Authorization: 'Token ' + token, + }, + }); + if (response.status === 204) { + return true; + } else { + return false; + } + } catch (error) { + console.log('Unable to fetch notifications'); + return false; + } +}; diff --git a/src/types/types.ts b/src/types/types.ts index e54c2201..fd75ab50 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -254,7 +254,9 @@ export type TypeOfNotification = // notification_object is MomentType | 'MOM_TAG' // notification_object is undefined - | 'SYSTEM_MSG'; + | 'SYSTEM_MSG' + // notification_object is undefined + | 'P_VIEW'; export type UniversityBadge = { id: number; diff --git a/src/utils/common.ts b/src/utils/common.ts index cfd9244a..1956e811 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -233,3 +233,8 @@ export const badgesToDisplayBadges = ( img: badgeToImgMap[b.category + b.name], })); }; + +// Documentation: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript +export const numberWithCommas = (digits: number) => { + return digits.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); +}; |
