From 013dfb29a603fcd51105e0fa28e8b6adc0f49b86 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Thu, 27 May 2021 15:06:14 -0400 Subject: Bug fix duplicate variables --- src/components/moments/MomentPostContent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/components') diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index f485396f..c00433e7 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -38,12 +38,12 @@ const MomentPostContent: React.FC = ({ const [elapsedTime, setElapsedTime] = useState(''); const [comments_count, setCommentsCount] = useState(''); const [tags, setTags] = useState(momentTags); - const [visible, setVisible] = useState(false); + // const [visible, setVisible] = useState(false); const state: RootState = useStore().getState(); const navigation = useNavigation(); const dispatch = useDispatch(); const imageRef = useRef(null); - const [fadeValue, setFadeValue] = useState(new Animated.Value(0)); + // const [fadeValue, setFadeValue] = useState(new Animated.Value(0)); const [visible, setVisible] = useState(false); const [fadeValue, setFadeValue] = useState>( -- cgit v1.2.3-70-g09d2 From 7316bc3b11d84224ae91a12ec07c97915b0d6c60 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 8 Jun 2021 11:19:31 -0700 Subject: Add edit option to bottom drawer, Style --- src/components/common/GenericMoreInfoDrawer.tsx | 14 +++++------ src/components/profile/MomentMoreInfoDrawer.tsx | 32 +++++++++++++++++++----- src/components/profile/ProfileMoreInfoDrawer.tsx | 5 ++-- 3 files changed, 35 insertions(+), 16 deletions(-) (limited to 'src/components') 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 = (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 = (props) => { showHeader={false} initialSnapPosition={initialSnapPosition}> - {buttons.map(([title, action, icon], index) => ( + {buttons.map(([title, action, icon, textStyle], index) => ( {showIcons && {icon}} - - {title} - + {title} diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx index 1265497e..a5411935 100644 --- a/src/components/profile/MomentMoreInfoDrawer.tsx +++ b/src/components/profile/MomentMoreInfoDrawer.tsx @@ -1,20 +1,24 @@ +import {useNavigation} from '@react-navigation/native'; 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 {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; @@ -105,12 +109,27 @@ const MomentMoreInfoDrawer: React.FC = (props) => { }; const [drawerButtons, setDrawerButtons] = useState< - [string, (event: GestureResponderEvent) => void, JSX.Element?][] - >([ + [string, (event: GestureResponderEvent) => void, JSX.Element?, TextStyle?][] + >( isOwnProfile - ? [MomentDrawerOptions.DeleteMoment, handleDeleteMoment] - : [MomentDrawerOptions.ReportIssue, handleReportMoment], - ]); + ? [ + [ + MomentDrawerOptions.DeleteMoment, + handleDeleteMoment, + undefined, + {color: 'red'}, + ], + [MomentDrawerOptions.EditMoment, handleEditMoment], + ] + : [ + [ + MomentDrawerOptions.ReportIssue, + handleReportMoment, + undefined, + {color: 'red'}, + ], + ], + ); /* * Update bottom drawer options to contain/not contain 'remove tag' option @@ -129,6 +148,8 @@ const MomentMoreInfoDrawer: React.FC = (props) => { localDrawerButtons.push([ MomentDrawerOptions.RemoveTag, handleRemoveTag, + undefined, + {color: 'red'}, ]); setDrawerButtons(localDrawerButtons); } else if (momentTagId === '' && present !== -1) { @@ -153,7 +174,6 @@ const MomentMoreInfoDrawer: React.FC = (props) => { 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 = (props) => { @@ -68,7 +68,6 @@ const ProfileMoreInfoDrawer: React.FC = (props) => { = (props) => { source={require('../../assets/images/settings/settings.png')} style={styles.image} />, + {color: 'black'}, ], [ 'Edit Profile', @@ -85,6 +85,7 @@ const ProfileMoreInfoDrawer: React.FC = (props) => { source={require('../../assets/images/settings/edit-profile.png')} style={styles.image} />, + {color: 'black'}, ], ]} /> -- cgit v1.2.3-70-g09d2 From 2ddd29120980ebced560dac09bbe270dc4aee0d1 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Wed, 9 Jun 2021 09:24:00 +0900 Subject: Create separate pill component --- src/components/notifications/NotificationPill.tsx | 202 ++++++++++++++++++++ src/components/notifications/index.ts | 1 + src/routes/tabs/NavigationBar.tsx | 221 +--------------------- src/utils/common.ts | 1 + 4 files changed, 211 insertions(+), 214 deletions(-) create mode 100644 src/components/notifications/NotificationPill.tsx (limited to 'src/components') diff --git a/src/components/notifications/NotificationPill.tsx b/src/components/notifications/NotificationPill.tsx new file mode 100644 index 00000000..7017d2e7 --- /dev/null +++ b/src/components/notifications/NotificationPill.tsx @@ -0,0 +1,202 @@ +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 = ({ + showIcon, +}) => { + const [iconStart, setIconStart] = useState([0, -100]); + const [tipStart, setTipStart] = useState([0, -100]); + const [notificationSets, setNotificationSets] = useState({}); + const [timeCount, setTimeCount] = useState(false); + const [timeOut, setTimeOut] = useState(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(() => { + setNotificationSets(data); + }, 100); + }; + + getCount(); + }, []); + + return ( + <> + {notificationSets && + Object.keys(notificationSets).length !== 0 && + showIcon && + !timeOut && ( + + + {notificationSets.CMT && ( + <> + + + {numberWithCommas(notificationSets.CMT)} + + + )} + {notificationSets.FR_REQ && ( + <> + + + {numberWithCommas(notificationSets.FR_REQ)} + + + )} + {notificationSets.P_VIEW && ( + <> + + + {numberWithCommas(notificationSets.P_VIEW)} + + + )} + {notificationSets.MOM_TAG && ( + <> + + + {numberWithCommas(notificationSets.MOM_TAG)} + + + )} + + + + )} + + ); +}; + +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/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index e962c8da..c3a42739 100644 --- a/src/routes/tabs/NavigationBar.tsx +++ b/src/routes/tabs/NavigationBar.tsx @@ -1,26 +1,14 @@ import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; -import React, {Fragment, useEffect, useState, useRef} from 'react'; -import {Image, StyleSheet, Text, View} from 'react-native'; -import LinearGradient from 'react-native-linear-gradient'; +import React, {Fragment, useEffect, useState} from 'react'; import {useSelector} from 'react-redux'; import {NavigationIcon} from '../../components'; import {NO_NOTIFICATIONS} from '../../store/initialStates'; import {RootState} from '../../store/rootReducer'; -import { - getNotificationsUnreadCount, - setNotificationsReadDate, -} from '../../services'; +import {setNotificationsReadDate} from '../../services'; import {ScreenType} from '../../types'; -import {haveUnreadNotifications, SCREEN_WIDTH, isIPhoneX} from '../../utils'; +import {haveUnreadNotifications} from '../../utils'; import MainStackScreen from '../main/MainStackScreen'; -import { - NOTIFICATION_ICON_GRADIENT, - CHIN_HEIGHT, - NAV_BAR_HEIGHT, -} from '../../constants'; -import {normalize} from 'react-native-elements'; -import {numberWithCommas} from '../../utils'; -import PillIcon4 from '../../assets/images/Group 479.svg'; +import {NotificationPill} from '../../components/notifications'; const Tabs = createBottomTabNavigator(); @@ -32,17 +20,8 @@ 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(true); - const [iconStart, setIconStart] = useState([0, -100]); - const [tipStart, setTipStart] = useState([0, -100]); - const [notificationSets, setNotificationSets] = useState({}); - const [timeCount, setTimeCount] = useState(false); - const [timeOut, setTimeOut] = useState(false); - const iconRef = useRef(null); - const tipRef = useRef(null); - const pillTip = require('../../assets/images/purple-tip.png'); - - const navBarPos = 20; const [unreadNotificationsPresent, setUnreadNotificationsPresent] = useState(false); @@ -58,132 +37,9 @@ const NavigationBar: React.FC = () => { determine(); }, [notifications]); - // 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(() => { - setNotificationSets(data); - }, 100); - }; - - getCount(); - }, []); - return ( <> - {notificationSets && - Object.keys(notificationSets).length !== 0 && - showIcon && - !timeOut && ( - - - {notificationSets.CMT && ( - <> - - - {numberWithCommas(notificationSets.CMT)} - - - )} - {notificationSets.FR_REQ && ( - <> - - - {numberWithCommas(notificationSets.FR_REQ)} - - - )} - {notificationSets.P_VIEW && ( - <> - - - {numberWithCommas(notificationSets.P_VIEW)} - - - )} - {notificationSets.MOM_TAG && ( - <> - - - {numberWithCommas(notificationSets.MOM_TAG)} - - - )} - - - - )} + ({ tabBarIcon: ({focused}) => { @@ -233,23 +89,11 @@ const NavigationBar: React.FC = () => { name="SuggestedPeople" component={MainStackScreen} initialParams={{screenType: ScreenType.SuggestedPeople}} - // Added these to as a way to close pill when on - // notification page - listeners={{ - tabPress: (_) => { - setShowIcon(true); - }, - }} /> { - setShowIcon(true); - }, - }} /> { 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(); @@ -267,67 +112,15 @@ const NavigationBar: React.FC = () => { name="Chat" component={MainStackScreen} initialParams={{screenType: ScreenType.Chat}} - listeners={{ - tabPress: (_) => { - setShowIcon(true); - }, - }} /> { - setShowIcon(true); - }, - }} /> ); }; -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, - }, -}); - export default NavigationBar; diff --git a/src/utils/common.ts b/src/utils/common.ts index 049dae90..cb0bd62d 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -198,6 +198,7 @@ export const validateImageLink = async (url: string | undefined) => { }); }; +// 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, ','); }; -- cgit v1.2.3-70-g09d2 From 9d7e900a89f343f7752457956f8e1d205774b910 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Wed, 9 Jun 2021 09:28:38 +0900 Subject: Clean up MomentPostContent --- src/components/moments/MomentPostContent.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'src/components') diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index c00433e7..ecbfb3a2 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -38,12 +38,10 @@ const MomentPostContent: React.FC = ({ const [elapsedTime, setElapsedTime] = useState(''); const [comments_count, setCommentsCount] = useState(''); const [tags, setTags] = useState(momentTags); - // const [visible, setVisible] = useState(false); const state: RootState = useStore().getState(); const navigation = useNavigation(); const dispatch = useDispatch(); const imageRef = useRef(null); - // const [fadeValue, setFadeValue] = useState(new Animated.Value(0)); const [visible, setVisible] = useState(false); const [fadeValue, setFadeValue] = useState>( -- cgit v1.2.3-70-g09d2 From 93796732be3f5070c0a124d29533396f79736c83 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 9 Jun 2021 17:37:40 -0400 Subject: Cleanup code --- src/components/notifications/NotificationPill.tsx | 15 +++++++++++---- src/services/NotificationService.ts | 10 ++-------- src/types/types.ts | 4 +++- 3 files changed, 16 insertions(+), 13 deletions(-) (limited to 'src/components') diff --git a/src/components/notifications/NotificationPill.tsx b/src/components/notifications/NotificationPill.tsx index 7017d2e7..01622a6f 100644 --- a/src/components/notifications/NotificationPill.tsx +++ b/src/components/notifications/NotificationPill.tsx @@ -20,7 +20,12 @@ export const NotificationPill: React.FC = ({ }) => { const [iconStart, setIconStart] = useState([0, -100]); const [tipStart, setTipStart] = useState([0, -100]); - const [notificationSets, setNotificationSets] = useState({}); + const [notificationSets, setNotificationSets] = useState<{ + CMT?: number; + FRD_REQ?: number; + P_VIEW?: number; + MOM_TAG?: number; + }>({}); const [timeCount, setTimeCount] = useState(false); const [timeOut, setTimeOut] = useState(false); const iconRef = useRef(null); @@ -84,7 +89,9 @@ export const NotificationPill: React.FC = ({ const getCount = async () => { const data = await getNotificationsUnreadCount(); setTimeout(() => { - setNotificationSets(data); + if (data) { + setNotificationSets(data); + } }, 100); }; @@ -117,14 +124,14 @@ export const NotificationPill: React.FC = ({ )} - {notificationSets.FR_REQ && ( + {notificationSets.FRD_REQ && ( <> - {numberWithCommas(notificationSets.FR_REQ)} + {numberWithCommas(notificationSets.FRD_REQ)} )} diff --git a/src/services/NotificationService.ts b/src/services/NotificationService.ts index 2ffc85b2..ccaa9135 100644 --- a/src/services/NotificationService.ts +++ b/src/services/NotificationService.ts @@ -34,12 +34,7 @@ export const getNotificationsData: () => Promise = } }; -export const getNotificationsUnreadCount: () => Promise<{ - CMT?: number; - FRD_REQ?: number; - P_VIEW?: number; - MOM_TAG?: number; -}> = async () => { +export const getNotificationsUnreadCount = async () => { try { const token = await AsyncStorage.getItem('token'); const response = await fetch(NOTIFICATIONS_COUNT_ENDPOINT, { @@ -70,11 +65,10 @@ export const getNotificationsUnreadCount: () => Promise<{ } return typedData; } - return []; } catch (error) { console.log('Unable to fetch notifications'); - return []; } + return undefined; }; export const setNotificationsReadDate: () => Promise = async () => { 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; -- cgit v1.2.3-70-g09d2 From 189e0cb9f298ff956fc722fdcd4dcd9acd982985 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 9 Jun 2021 16:03:30 -0700 Subject: Pass moment instead of sub fields --- src/components/moments/MomentPost.tsx | 8 +++----- src/components/moments/MomentPostContent.tsx | 24 +++++++++--------------- src/components/moments/MomentPostHeader.tsx | 12 ++++++++---- 3 files changed, 20 insertions(+), 24 deletions(-) (limited to 'src/components') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 7149a5b4..e744fcd9 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -76,18 +76,16 @@ const MomentPost: React.FC = ({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} /> diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index 4a1f3894..153833d7 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,19 +20,13 @@ 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 = ({ screenType, - momentId, - caption, - pathHash, - dateTime, style, + moment, momentTags, }) => { const state: RootState = useStore().getState(); @@ -54,12 +48,12 @@ const MomentPostContent: React.FC = ({ 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 = ({ {tags.length > 0 && ( @@ -100,13 +94,13 @@ const MomentPostContent: React.FC = ({ {elapsedTime} {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; + moment: MomentType; + tags: MomentTagType[]; } const MomentPostHeader: React.FC = ({ 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 = ({ = ({ dispatch(loadUserMoments(loggedInUserId)); navigation.pop(); }} + screenType={screenType} + moment={moment} + tags={tags} /> ); -- cgit v1.2.3-70-g09d2 From 7932c7358944912c5bd961ed1361c998fffd1b5f Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 9 Jun 2021 16:09:24 -0700 Subject: Add edit moment option to drawer --- src/components/profile/MomentMoreInfoDrawer.tsx | 102 ++++++++++++------------ 1 file changed, 53 insertions(+), 49 deletions(-) (limited to 'src/components') diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx index a5411935..a796ffd8 100644 --- a/src/components/profile/MomentMoreInfoDrawer.tsx +++ b/src/components/profile/MomentMoreInfoDrawer.tsx @@ -1,4 +1,4 @@ -import {useNavigation} from '@react-navigation/native'; +import {useNavigation} from '@react-navigation/core'; import React, {useEffect, useState} from 'react'; import { Alert, @@ -11,7 +11,7 @@ import { 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 {ScreenType} from '../../types/types'; +import {MomentTagType, MomentType, ScreenType} from '../../types/types'; import {GenericMoreInfoDrawer} from '../common'; enum MomentDrawerOptions { @@ -23,26 +23,36 @@ enum MomentDrawerOptions { interface MomentMoreInfoDrawerProps extends ViewProps { isOpen: boolean; setIsOpen: (visible: boolean) => void; - momentId: string; isOwnProfile: boolean; momentTagId: string; removeTag: () => Promise; dismissScreenAndUpdate: () => void; + screenType: ScreenType; + moment: MomentType; + tags: MomentTagType[]; } const MomentMoreInfoDrawer: React.FC = (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(() => { @@ -92,7 +102,8 @@ const MomentMoreInfoDrawer: React.FC = (props) => { [ { text: 'Mark as inappropriate', - onPress: () => sendReport(momentId, 'Mark as inappropriate'), + onPress: () => + sendReport(moment.moment_id, 'Mark as inappropriate'), }, { text: 'Cancel', @@ -100,7 +111,7 @@ const MomentMoreInfoDrawer: React.FC = (props) => { }, { text: 'Mark as abusive', - onPress: () => sendReport(momentId, 'Mark as abusive'), + onPress: () => sendReport(moment.moment_id, 'Mark as abusive'), }, ], {cancelable: false}, @@ -108,59 +119,52 @@ const MomentMoreInfoDrawer: React.FC = (props) => { }, 500); }; - const [drawerButtons, setDrawerButtons] = useState< - [string, (event: GestureResponderEvent) => void, JSX.Element?, TextStyle?][] - >( - isOwnProfile - ? [ - [ - MomentDrawerOptions.DeleteMoment, - handleDeleteMoment, - undefined, - {color: 'red'}, - ], - [MomentDrawerOptions.EditMoment, handleEditMoment], - ] - : [ - [ - MomentDrawerOptions.ReportIssue, - handleReportMoment, - undefined, - {color: 'red'}, - ], - ], - ); + 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 ( <> -- cgit v1.2.3-70-g09d2 From d1d6556d02f56ca03350e04de7f466fa13c7d96c Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 9 Jun 2021 17:00:26 -0700 Subject: Load tags when item is changed --- src/components/moments/MomentPost.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index e744fcd9..b659177d 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -40,7 +40,7 @@ const MomentPost: React.FC = ({item, userXId, screenType}) => { */ useEffect(() => { loadTags(); - }, []); + }, [item]); /* * Check if loggedInUser has been tagged in the picture and set the id -- cgit v1.2.3-70-g09d2 From 3680329b9cdee900e72666d3c3644b3bb13f27ba Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 11 Jun 2021 11:49:32 -0400 Subject: Change timing to 10 seconds --- src/components/notifications/NotificationPill.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/components') diff --git a/src/components/notifications/NotificationPill.tsx b/src/components/notifications/NotificationPill.tsx index 01622a6f..525cd7fa 100644 --- a/src/components/notifications/NotificationPill.tsx +++ b/src/components/notifications/NotificationPill.tsx @@ -75,12 +75,12 @@ export const NotificationPill: React.FC = ({ }, 100); }, [notificationSets, iconRef, tipRef]); - // Used so that pill disappears after 5 seconds + // Used so that pill disappears after 10 seconds useEffect(() => { if (timeCount) { setTimeout(() => { setTimeOut(true); - }, 5000); + }, 10000); } }, [timeCount]); -- cgit v1.2.3-70-g09d2 From 4024bf5c7ec0e01f2bae9f65030359c8da69b8f3 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 27 May 2021 11:35:02 -0700 Subject: Remove linear gradient --- src/components/notifications/Notification.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) (limited to 'src/components') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index 3f9cc56a..dff65255 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -323,13 +323,7 @@ const Notification: React.FC = (props) => { ); - return unread ? ( - - {renderContent()} - - ) : ( - renderContent() - ); + return renderContent(); }; const styles = StyleSheet.create({ -- cgit v1.2.3-70-g09d2 From fddb06e43c395f331b67222a0ca86625261875bb Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 27 May 2021 11:40:47 -0700 Subject: Remove unused imports --- src/components/notifications/Notification.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'src/components') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index dff65255..0f22599e 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -2,9 +2,7 @@ import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; import {Alert, Image, StyleSheet, Text, View} from 'react-native'; import {TouchableWithoutFeedback} from 'react-native-gesture-handler'; -import LinearGradient from 'react-native-linear-gradient'; import {useDispatch, useStore} from 'react-redux'; -import {BACKGROUND_GRADIENT_MAP} from '../../constants'; import {ERROR_DELETED_OBJECT} from '../../constants/strings'; import {loadImageFromURL} from '../../services'; import { -- cgit v1.2.3-70-g09d2 From 20b0ed121d60fdf034917397cb1ce75038b1cdba Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 27 May 2021 11:41:48 -0700 Subject: Remove unused variable --- src/components/notifications/Notification.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src/components') diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index 0f22599e..fd1b11ac 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -47,7 +47,6 @@ const Notification: React.FC = (props) => { verbage, notification_type, notification_object, - unread, timestamp, }, screenType, -- cgit v1.2.3-70-g09d2