From f3a9e82020549b04834de6ac5a0ce1096f01e3f2 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Wed, 31 Mar 2021 14:33:40 -0700 Subject: tagg --> Tagg --- src/screens/profile/InviteFriendsScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/screens/profile') diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx index a9fa1404..ad9e382e 100644 --- a/src/screens/profile/InviteFriendsScreen.tsx +++ b/src/screens/profile/InviteFriendsScreen.tsx @@ -203,7 +203,7 @@ const InviteFriendsScreen: React.FC = ({route}) => { - Contacts on tagg + Contacts on Tagg -- cgit v1.2.3-70-g09d2 From f0d4f91c941c121c30438e4a8b2a621885bc7421 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 1 Apr 2021 19:32:33 -0400 Subject: to date after 3 days --- src/screens/profile/IndividualMoment.tsx | 14 +++++++------- src/utils/moments.ts | 20 +++++++++++++------- 2 files changed, 20 insertions(+), 14 deletions(-) (limited to 'src/screens/profile') diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index 8c1dc327..871d62bf 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -27,7 +27,7 @@ interface IndividualMomentProps { navigation: IndividualMomentNavigationProp; } -const ITEM_HEIGHT = SCREEN_HEIGHT * (9 / 10); +const ITEM_HEIGHT = SCREEN_HEIGHT * 0.9; const IndividualMoment: React.FC = ({ route, @@ -40,13 +40,13 @@ const IndividualMoment: React.FC = ({ ); const { user: {username}, - } = userXId - ? useSelector((state: RootState) => state.userX[screenType][userXId]) - : useSelector((state: RootState) => state.user); + } = useSelector((state: RootState) => + userXId ? state.userX[screenType][userXId] : state.user, + ); - const {moments} = userXId - ? useSelector((state: RootState) => state.userX[screenType][userXId]) - : useSelector((state: RootState) => state.moments); + const {moments} = useSelector((state: RootState) => + userXId ? state.userX[screenType][userXId] : state.moments, + ); const isOwnProfile = username === loggedInUsername; const momentData = moments.filter( diff --git a/src/utils/moments.ts b/src/utils/moments.ts index 7428b1ac..9b8e0075 100644 --- a/src/utils/moments.ts +++ b/src/utils/moments.ts @@ -1,15 +1,17 @@ import moment from 'moment'; -//A util that calculates the difference between a given time and current time -//Returns the difference in the largest possible unit of time (days > hours > minutes > seconds) - +/** + * Formats elapsed time from a given time. + * @param date_time given time + * @returns difference in the largest possible unit of time (days > hours > minutes > seconds) + */ export const getTimePosted = (date_time: string) => { const datePosted = moment(date_time); const now = moment(); var time = date_time; var difference = now.diff(datePosted, 'seconds'); - //Creating elapsedTime string to display to user + // Creating elapsedTime string to display to user // 0 to less than 1 minute if (difference < 60) { time = difference + ' seconds'; @@ -19,15 +21,19 @@ export const getTimePosted = (date_time: string) => { difference = now.diff(datePosted, 'minutes'); time = difference + (difference === 1 ? ' minute' : ' minutes'); } - //1 hour to less than 1 day + // 1 hour to less than 1 day else if (difference >= 60 * 60 && difference < 24 * 60 * 60) { difference = now.diff(datePosted, 'hours'); time = difference + (difference === 1 ? ' hour' : ' hours'); } - //Any number of days - else if (difference >= 24 * 60 * 60) { + // Any number of days + else if (difference >= 24 * 60 * 60 && difference < 24 * 60 * 60 * 3) { difference = now.diff(datePosted, 'days'); time = difference + (difference === 1 ? ' day' : ' days'); } + // More than 3 days + else if (difference >= 24 * 60 * 60 * 3) { + time = datePosted.format('YYYY/MM/DD'); + } return time; }; -- cgit v1.2.3-70-g09d2 From b6a31427f784c2e88ad6fe0178e5fd873b4a1099 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Thu, 1 Apr 2021 23:58:02 -0400 Subject: Improve position of overlaid tutorial --- src/components/profile/Content.tsx | 8 ++++++++ src/components/profile/PublicProfile.tsx | 3 +++ src/components/taggs/TaggsBar.tsx | 7 +++++-- src/routes/main/MainStackNavigator.tsx | 1 + src/screens/profile/MomentUploadPromptScreen.tsx | 20 ++++++++++++-------- src/screens/profile/ProfileScreen.tsx | 8 ++------ src/types/types.ts | 1 + 7 files changed, 32 insertions(+), 16 deletions(-) (limited to 'src/screens/profile') diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx index 9c33eabc..fef92dc1 100644 --- a/src/components/profile/Content.tsx +++ b/src/components/profile/Content.tsx @@ -66,6 +66,7 @@ const Content: React.FC = ({y, userXId, screenType}) => { */ const [isBlocked, setIsBlocked] = useState(false); const [profileBodyHeight, setProfileBodyHeight] = useState(0); + const [socialsBarHeight, setSocialsBarHeight] = useState(0); const [shouldBounce, setShouldBounce] = useState(true); const [refreshing, setRefreshing] = useState(false); @@ -88,6 +89,11 @@ const Content: React.FC = ({y, userXId, screenType}) => { setProfileBodyHeight(height); }; + const onSocialsBarLayout = (e: LayoutChangeEvent) => { + const {height} = e.nativeEvent.layout; + setSocialsBarHeight(height); + }; + useEffect(() => { const isActuallyBlocked = blockedUsers.some( (cur_user) => user.username === cur_user.username, @@ -166,6 +172,7 @@ const Content: React.FC = ({y, userXId, screenType}) => { {canViewProfile(state, userXId, screenType) ? ( = ({y, userXId, screenType}) => { screenType, setScrollEnabled, profileBodyHeight, + socialsBarHeight, scrollViewRef, }} /> diff --git a/src/components/profile/PublicProfile.tsx b/src/components/profile/PublicProfile.tsx index 88e0ecd1..eceb2fc3 100644 --- a/src/components/profile/PublicProfile.tsx +++ b/src/components/profile/PublicProfile.tsx @@ -35,6 +35,7 @@ const PublicProfile: React.FC = ({ screenType, setScrollEnabled, profileBodyHeight, + socialsBarHeight, scrollViewRef, }) => { const dispatch = useDispatch(); @@ -104,6 +105,7 @@ const PublicProfile: React.FC = ({ screenType, momentCategory: momentCategories[0], profileBodyHeight, + socialsBarHeight, }); setIsStageOnePromptClosed(true); } @@ -133,6 +135,7 @@ const PublicProfile: React.FC = ({ navigation, screenType, profileBodyHeight, + socialsBarHeight, scrollViewRef, ]), ); diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx index 567b58de..ec91b8e5 100644 --- a/src/components/taggs/TaggsBar.tsx +++ b/src/components/taggs/TaggsBar.tsx @@ -1,5 +1,5 @@ import React, {Fragment, useEffect, useState} from 'react'; -import {StyleSheet} from 'react-native'; +import {StyleSheet, LayoutChangeEvent} from 'react-native'; import Animated from 'react-native-reanimated'; import {useSafeAreaInsets} from 'react-native-safe-area-context'; import {useDispatch, useSelector, useStore} from 'react-redux'; @@ -23,6 +23,7 @@ interface TaggsBarProps { screenType: ScreenType; whiteRing: boolean | undefined; linkedSocials?: string[]; + onLayout: (event: LayoutChangeEvent) => void; } const TaggsBar: React.FC = ({ y, @@ -31,6 +32,7 @@ const TaggsBar: React.FC = ({ screenType, whiteRing, linkedSocials, + onLayout, }) => { let [taggs, setTaggs] = useState([]); let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true); @@ -138,7 +140,8 @@ const TaggsBar: React.FC = ({ whiteRing ? [styles.spContainer] : [styles.container, {shadowOpacity, paddingTop}] - }> + } + onLayout={onLayout}> = ({ route, navigation, }) => { - const {screenType, momentCategory, profileBodyHeight} = route.params; + const { + screenType, + momentCategory, + profileBodyHeight, + socialsBarHeight, + } = route.params; return ( = ({ externalStyles={{ container: { ...styles.momentContainer, - top: isIPhoneX() - ? profileBodyHeight + 615 - : profileBodyHeight + 500, + top: PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight + socialsBarHeight, }, titleText: styles.momentHeaderText, header: styles.momentHeader, @@ -103,20 +106,21 @@ const styles = StyleSheet.create({ //Styles to adjust moment container momentScrollContainer: { backgroundColor: 'transparent', + marginTop: 10, }, momentContainer: { ...StyleSheet.absoluteFillObject, backgroundColor: 'transparent', - height: 170, + height: 175, }, momentHeaderText: { ...StyleSheet.absoluteFillObject, marginLeft: 12, - marginTop: 10, + paddingVertical: 5, }, momentHeader: { + marginTop: 7, backgroundColor: 'transparent', - paddingVertical: 20, }, }); diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx index 313e2f2c..0d6af21e 100644 --- a/src/screens/profile/ProfileScreen.tsx +++ b/src/screens/profile/ProfileScreen.tsx @@ -1,12 +1,9 @@ import React from 'react'; import {StatusBar} from 'react-native'; import Animated from 'react-native-reanimated'; -import {Content, Cover, TabsGradient} from '../../components'; -import {RouteProp, useFocusEffect} from '@react-navigation/native'; +import {Content, TabsGradient} from '../../components'; +import {RouteProp} from '@react-navigation/native'; import {MainStackParams} from '../../routes/'; -import {resetScreenType} from '../../store/actions'; -import {useDispatch, useStore} from 'react-redux'; -import {DUMMY_USERID} from '../../store/initialStates'; /**r * Profile Screen for a user's profile @@ -23,7 +20,6 @@ const ProfileScreen: React.FC = ({route}) => { const {screenType} = route.params; let {userXId} = route.params; const y = Animated.useValue(0); - const dispatch = useDispatch(); /** * This is a double safety check to avoid app crash. diff --git a/src/types/types.ts b/src/types/types.ts index 766bf798..bb83e839 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -214,6 +214,7 @@ export interface ContentProps { screenType: ScreenType; setScrollEnabled: (enabled: boolean) => void; profileBodyHeight: number; + socialsBarHeight: number; scrollViewRef: React.MutableRefObject; } -- cgit v1.2.3-70-g09d2 From cce0f8510ac691618c69d76daacac4752800b8c1 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Sat, 3 Apr 2021 20:54:09 -0400 Subject: Fix profile socials bar animation --- src/components/profile/Content.tsx | 56 ++++----- src/components/profile/Cover.tsx | 2 +- src/components/suggestedPeople/SPTaggsBar.tsx | 133 +++++++++++++++++++++ src/components/suggestedPeople/index.ts | 1 + src/components/taggs/TaggPostFooter.tsx | 2 +- src/components/taggs/TaggsBar.tsx | 93 +++++++------- src/screens/profile/ProfileScreen.tsx | 12 +- src/screens/suggestedPeople/SPBody.tsx | 20 +--- .../suggestedPeople/SuggestedPeopleScreen.tsx | 2 +- src/types/types.ts | 9 -- yarn.lock | 28 ++--- 11 files changed, 221 insertions(+), 137 deletions(-) create mode 100644 src/components/suggestedPeople/SPTaggsBar.tsx (limited to 'src/screens/profile') diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx index 9c33eabc..dd68ab17 100644 --- a/src/components/profile/Content.tsx +++ b/src/components/profile/Content.tsx @@ -1,14 +1,10 @@ import React, {useCallback, useEffect, useRef, useState} from 'react'; -import { - LayoutChangeEvent, - NativeScrollEvent, - NativeSyntheticEvent, - RefreshControl, - StyleSheet, -} from 'react-native'; -import Animated from 'react-native-reanimated'; +import {LayoutChangeEvent, RefreshControl, StyleSheet} from 'react-native'; +import Animated, { + useSharedValue, + useAnimatedScrollHandler, +} from 'react-native-reanimated'; import {useDispatch, useSelector, useStore} from 'react-redux'; -import {COVER_HEIGHT} from '../../constants'; import { blockUnblockUser, loadFriendsData, @@ -20,12 +16,11 @@ import { NO_USER, } from '../../store/initialStates'; import {RootState} from '../../store/rootreducer'; -import {ContentProps} from '../../types'; +import {ScreenType} from '../../types'; import { canViewProfile, fetchUserX, getUserAsProfilePreviewType, - SCREEN_HEIGHT, userLogin, } from '../../utils'; import TaggsBar from '../taggs/TaggsBar'; @@ -35,8 +30,13 @@ import ProfileBody from './ProfileBody'; import ProfileCutout from './ProfileCutout'; import ProfileHeader from './ProfileHeader'; import PublicProfile from './PublicProfile'; +import {useScrollToTop} from '@react-navigation/native'; -const Content: React.FC = ({y, userXId, screenType}) => { +interface ContentProps { + userXId: string | undefined; + screenType: ScreenType; +} +const Content: React.FC = ({userXId, screenType}) => { const dispatch = useDispatch(); const { user = NO_USER, @@ -60,13 +60,13 @@ const Content: React.FC = ({y, userXId, screenType}) => { * If scrolling is enabled. Set to false before scrolling up for the tutorial. */ const [scrollEnabled, setScrollEnabled] = useState(true); + const y = useSharedValue(0); /** * States */ const [isBlocked, setIsBlocked] = useState(false); const [profileBodyHeight, setProfileBodyHeight] = useState(0); - const [shouldBounce, setShouldBounce] = useState(true); const [refreshing, setRefreshing] = useState(false); const onRefresh = useCallback(() => { @@ -103,45 +103,32 @@ const Content: React.FC = ({y, userXId, screenType}) => { * updateUserXFriends updates friends list for the user. */ const handleBlockUnblock = async (callback?: () => void) => { - await dispatch( + dispatch( blockUnblockUser( loggedInUser, getUserAsProfilePreviewType(user, profile), isBlocked, ), ); - await dispatch(loadFriendsData(loggedInUser.userId)); - await dispatch(updateUserXFriends(user.userId, state)); + dispatch(loadFriendsData(loggedInUser.userId)); + dispatch(updateUserXFriends(user.userId, state)); if (callback) { callback(); } }; - const handleScroll = (e: NativeSyntheticEvent) => { - /** - * Set the new y position - */ - const newY = e.nativeEvent.contentOffset.y; - y.setValue(newY); + const scrollHandler = useAnimatedScrollHandler((event) => { + y.value = event.contentOffset.y; + }); - /** - * Do not allow overflow of scroll on bottom of the screen - * SCREEN_HEIGHT - COVER_HEIGHT = Height of the scroll view - */ - if (newY >= SCREEN_HEIGHT - COVER_HEIGHT) { - setShouldBounce(false); - } else if (newY === 0) { - setShouldBounce(true); - } - }; + useScrollToTop(scrollViewRef); return ( handleScroll(e)} - bounces={shouldBounce} + onScroll={scrollHandler} showsVerticalScrollIndicator={false} scrollEventThrottle={1} stickyHeaderIndices={[4]} @@ -165,7 +152,6 @@ const Content: React.FC = ({y, userXId, screenType}) => { /> {canViewProfile(state, userXId, screenType) ? ( = ({userXId, screenType}) => { const styles = StyleSheet.create({ container: { - position: 'absolute', + ...StyleSheet.absoluteFillObject, }, image: { width: IMAGE_WIDTH, diff --git a/src/components/suggestedPeople/SPTaggsBar.tsx b/src/components/suggestedPeople/SPTaggsBar.tsx new file mode 100644 index 00000000..adac6dcf --- /dev/null +++ b/src/components/suggestedPeople/SPTaggsBar.tsx @@ -0,0 +1,133 @@ +import React, {useEffect, useState} from 'react'; +import {StyleSheet} from 'react-native'; +import Animated from 'react-native-reanimated'; +import {useDispatch, useSelector, useStore} from 'react-redux'; +import {INTEGRATED_SOCIAL_LIST, SOCIAL_LIST} from '../../constants'; +import {getLinkedSocials} from '../../services'; +import {loadIndividualSocial, updateSocial} from '../../store/actions'; +import {RootState} from '../../store/rootReducer'; +import {ScreenType} from '../../types'; +import {canViewProfile} from '../../utils'; +import Tagg from '../taggs/Tagg'; + +const {View, ScrollView} = Animated; +interface TaggsBarProps { + userXId: string | undefined; + screenType: ScreenType; + linkedSocials?: string[]; +} +const TaggsBar: React.FC = ({ + userXId, + screenType, + linkedSocials, +}) => { + let [taggs, setTaggs] = useState([]); + let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true); + const {user} = useSelector((state: RootState) => + userXId ? state.userX[screenType][userXId] : state.user, + ); + const state: RootState = useStore().getState(); + const allowTaggsNavigation = canViewProfile(state, userXId, screenType); + + const dispatch = useDispatch(); + + /** + * Updates the individual social that needs update + * If username is empty, update nonintegrated socials like Snapchat and TikTok + * @param socialType Type of the social that needs update + */ + const handleSocialUpdate = (socialType: string, username: string) => { + if (username !== '') { + dispatch(updateSocial(socialType, username)); + } else { + dispatch(loadIndividualSocial(user.userId, socialType)); + } + }; + + /** + * This useEffect should be called evey time the user being viewed is changed OR + * And update is triggered manually + */ + useEffect(() => { + const loadData = async () => { + const socials: string[] = linkedSocials + ? linkedSocials + : await getLinkedSocials(user.userId); + const unlinkedSocials = SOCIAL_LIST.filter( + (s) => socials.indexOf(s) === -1, + ); + let new_taggs = []; + let i = 0; + for (let social of socials) { + new_taggs.push( + , + ); + i++; + } + if (!userXId) { + for (let social of unlinkedSocials) { + new_taggs.push( + , + ); + i++; + } + } + setTaggs(new_taggs); + setTaggsNeedUpdate(false); + }; + if (user.userId) { + loadData(); + } + }, [taggsNeedUpdate, user]); + + return taggs.length > 0 ? ( + + + {taggs} + + + ) : ( + <> + ); +}; + +const styles = StyleSheet.create({ + spContainer: { + shadowColor: '#000', + shadowRadius: 10, + shadowOffset: {width: 0, height: 2}, + zIndex: 1, + marginBottom: 25, + }, + contentContainer: { + alignItems: 'center', + paddingBottom: 5, + }, +}); + +export default TaggsBar; diff --git a/src/components/suggestedPeople/index.ts b/src/components/suggestedPeople/index.ts index 515f6fb4..339c9ae0 100644 --- a/src/components/suggestedPeople/index.ts +++ b/src/components/suggestedPeople/index.ts @@ -1,2 +1,3 @@ export {default as MutualFriends} from './MutualFriends'; export {default as BadgesDropdown} from './BadgesDropdown'; +export {default as SPTaggsBar} from './SPTaggsBar'; diff --git a/src/components/taggs/TaggPostFooter.tsx b/src/components/taggs/TaggPostFooter.tsx index ae9d889d..750f1793 100644 --- a/src/components/taggs/TaggPostFooter.tsx +++ b/src/components/taggs/TaggPostFooter.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {Linking, StyleSheet, View} from 'react-native'; +import {StyleSheet, View} from 'react-native'; import {Text} from 'react-native-animatable'; import {handleOpenSocialUrlOnBrowser} from '../../utils'; import {DateLabel} from '../common'; diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx index a87da3e2..87dabc3d 100644 --- a/src/components/taggs/TaggsBar.tsx +++ b/src/components/taggs/TaggsBar.tsx @@ -1,12 +1,16 @@ -import React, {Fragment, useEffect, useState} from 'react'; +import React, {useEffect, useState} from 'react'; import {StyleSheet} from 'react-native'; -import Animated from 'react-native-reanimated'; -import {useSafeAreaInsets} from 'react-native-safe-area-context'; +import Animated, { + useDerivedValue, + interpolate, + Extrapolate, + useAnimatedStyle, +} from 'react-native-reanimated'; import {useDispatch, useSelector, useStore} from 'react-redux'; import { INTEGRATED_SOCIAL_LIST, - PROFILE_CUTOUT_BOTTOM_Y, SOCIAL_LIST, + PROFILE_CUTOUT_BOTTOM_Y, } from '../../constants'; import {getLinkedSocials} from '../../services'; import {loadIndividualSocial, updateSocial} from '../../store/actions'; @@ -14,14 +18,14 @@ import {RootState} from '../../store/rootReducer'; import {ScreenType} from '../../types'; import {canViewProfile} from '../../utils'; import Tagg from './Tagg'; +import {useSafeAreaInsets} from 'react-native-safe-area-context'; -const {View, ScrollView, interpolate, Extrapolate} = Animated; +const {View, ScrollView} = Animated; interface TaggsBarProps { - y: Animated.Value; + y: Animated.SharedValue; profileBodyHeight: number; userXId: string | undefined; screenType: ScreenType; - whiteRing: boolean | undefined; linkedSocials?: string[]; } const TaggsBar: React.FC = ({ @@ -29,7 +33,6 @@ const TaggsBar: React.FC = ({ profileBodyHeight, userXId, screenType, - whiteRing, linkedSocials, }) => { let [taggs, setTaggs] = useState([]); @@ -41,7 +44,7 @@ const TaggsBar: React.FC = ({ const allowTaggsNavigation = canViewProfile(state, userXId, screenType); const dispatch = useDispatch(); - + const insetTop = useSafeAreaInsets().top; /** * Updates the individual social that needs update * If username is empty, update nonintegrated socials like Snapchat and TikTok @@ -80,13 +83,13 @@ const TaggsBar: React.FC = ({ isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1} setTaggsNeedUpdate={setTaggsNeedUpdate} setSocialDataNeedUpdate={handleSocialUpdate} - whiteRing={whiteRing ? whiteRing : undefined} + whiteRing={false} allowNavigation={allowTaggsNavigation} />, ); i++; } - if (!userXId && !whiteRing) { + if (!userXId) { for (let social of unlinkedSocials) { new_taggs.push( = ({ setSocialDataNeedUpdate={handleSocialUpdate} userXId={userXId} user={user} - whiteRing={whiteRing ? whiteRing : undefined} + whiteRing={false} allowNavigation={allowTaggsNavigation} />, ); @@ -112,67 +115,55 @@ const TaggsBar: React.FC = ({ loadData(); } }, [taggsNeedUpdate, user]); -// TODO: (Leon) use reanimated v2 - const shadowOpacity = 0; - // const shadowOpacity: Animated.Node = interpolate(y, { - // inputRange: [ - // PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight, - // PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight + 20, - // ], - // outputRange: [0, 0.2], - // extrapolate: Extrapolate.CLAMP, - // }); - // TODO: (Leon) use reanimated v2 - const paddingTop = 0; - // const paddingTop: Animated.Node = interpolate(y, { - // inputRange: [ - // PROFILE_CUTOUT_BOTTOM_Y + - // profileBodyHeight - - // (useSafeAreaInsets().top + 10), - // PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight, - // ], - // outputRange: [10, useSafeAreaInsets().top], - // extrapolate: Extrapolate.CLAMP, - // }); + const paddingTopStylesProgress = useDerivedValue(() => + interpolate( + y.value, + [PROFILE_CUTOUT_BOTTOM_Y, PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight], + [0, 1], + Extrapolate.CLAMP, + ), + ); + const shadowOpacityStylesProgress = useDerivedValue(() => + interpolate( + y.value, + [ + PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight, + PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight + insetTop, + ], + [0, 1], + Extrapolate.CLAMP, + ), + ); + const animatedStyles = useAnimatedStyle(() => ({ + shadowOpacity: shadowOpacityStylesProgress.value / 5, + paddingTop: paddingTopStylesProgress.value * insetTop, + })); return taggs.length > 0 ? ( - + + contentContainerStyle={[styles.contentContainer]}> {taggs} ) : ( - + <> ); }; const styles = StyleSheet.create({ - spContainer: { - shadowColor: '#000', - shadowRadius: 10, - shadowOffset: {width: 0, height: 2}, - zIndex: 1, - marginBottom: 25, - }, container: { backgroundColor: 'white', shadowColor: '#000', shadowRadius: 10, shadowOffset: {width: 0, height: 2}, zIndex: 1, - paddingBottom: 5, }, contentContainer: { alignItems: 'center', - paddingBottom: 5, + paddingBottom: 15, }, }); diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx index 313e2f2c..a5d1e495 100644 --- a/src/screens/profile/ProfileScreen.tsx +++ b/src/screens/profile/ProfileScreen.tsx @@ -1,12 +1,8 @@ import React from 'react'; import {StatusBar} from 'react-native'; -import Animated from 'react-native-reanimated'; -import {Content, Cover, TabsGradient} from '../../components'; -import {RouteProp, useFocusEffect} from '@react-navigation/native'; +import {Content, TabsGradient} from '../../components'; +import {RouteProp} from '@react-navigation/native'; import {MainStackParams} from '../../routes/'; -import {resetScreenType} from '../../store/actions'; -import {useDispatch, useStore} from 'react-redux'; -import {DUMMY_USERID} from '../../store/initialStates'; /**r * Profile Screen for a user's profile @@ -22,8 +18,6 @@ interface ProfileOnboardingProps { const ProfileScreen: React.FC = ({route}) => { const {screenType} = route.params; let {userXId} = route.params; - const y = Animated.useValue(0); - const dispatch = useDispatch(); /** * This is a double safety check to avoid app crash. @@ -47,7 +41,7 @@ const ProfileScreen: React.FC = ({route}) => { return ( <> - + ); diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index 824f8b1c..fa69d812 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -3,26 +3,18 @@ import React, {Fragment, useEffect, useMemo, useState} from 'react'; import {StyleSheet, Text, View} from 'react-native'; import {Image} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; -import Animated from 'react-native-reanimated'; -import {useStore} from 'react-redux'; import RequestedButton from '../../assets/ionicons/requested-button.svg'; -import {TaggsBar} from '../../components'; +import {SPTaggsBar} from '../../components'; import {BadgesDropdown, MutualFriends} from '../../components/suggestedPeople'; import {BADGE_DATA} from '../../constants/badges'; -import {RootState} from '../../store/rootReducer'; import { ProfilePreviewType, ScreenType, SuggestedPeopleDataType, UniversityBadge, } from '../../types'; -import { - canViewProfile, - isIPhoneX, - normalize, - SCREEN_HEIGHT, - SCREEN_WIDTH, -} from '../../utils'; +import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import {useSharedValue} from 'react-native-reanimated'; interface SPBodyProps { item: SuggestedPeopleDataType; @@ -56,7 +48,6 @@ const SPBody: React.FC = ({ }[] >([]); const navigation = useNavigation(); - const state: RootState = useStore().getState(); useEffect(() => { const newBadges: {badge: UniversityBadge; img: any}[] = []; const findBadgeIcons = (badge: UniversityBadge) => { @@ -159,12 +150,9 @@ const SPBody: React.FC = ({ {user.id !== loggedInUserId && } - diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index a296351f..d6812f41 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -226,7 +226,7 @@ const SuggestedPeopleScreen: React.FC = () => { /> ); }} - keyExtractor={(item, index) => index.toString()} + keyExtractor={(_, index) => index.toString()} showsVerticalScrollIndicator={false} onViewableItemsChanged={onViewableItemsChanged} onEndReached={() => setPage(page + 1)} diff --git a/src/types/types.ts b/src/types/types.ts index b5dc6373..40f2a614 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -1,4 +1,3 @@ -import Animated from 'react-native-reanimated'; import {Channel as ChannelType, StreamChat} from 'stream-chat'; export interface UserType { @@ -210,14 +209,6 @@ export interface CommentNotificationType { export interface ThreadNotificationType extends CommentNotificationType { parent_comment: string; } -export interface ContentProps { - y: Animated.Value; - userXId: string | undefined; - screenType: ScreenType; - setScrollEnabled: (enabled: boolean) => void; - profileBodyHeight: number; - scrollViewRef: React.MutableRefObject; -} export type NotificationType = { actor: ProfilePreviewType; diff --git a/yarn.lock b/yarn.lock index 26b300f1..2e9f711a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1053,17 +1053,17 @@ integrity sha512-DVgibb4XERG+5TQQiHKJ1qF+5cbpfiKGRFze9WcbE+FxSYwNMIzyt6u3l7WMBLz6wXcqAq3zLRo6SBbSt37uDw== "@react-navigation/bottom-tabs@^5.7.2": - version "5.11.8" - resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-5.11.8.tgz#0af8d5859b1ad781bdd86e8236ceaed60dc355fe" - integrity sha512-/0AiP+QPGKe35NdGxSjq0XpZjYvURy8H2E4rZMRHJ+fUoq+cX0ze/XQeQ8IHMpoc568ZwOGRgdUToUGZEDMpvA== + version "5.11.9" + resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-5.11.9.tgz#380a97593290a8e278365c5e4d84813e19c8a9c9" + integrity sha512-RuSlULJrEiSCDLTi3OfmXqfmBm+Y0G4JnGiCUguMDet+x5AXdYhrsLdxJVyBsnoQz3lvlz9pWIcQ8p/hPiv2CA== dependencies: color "^3.1.3" react-native-iphone-x-helper "^1.3.0" -"@react-navigation/core@^5.15.2": - version "5.15.2" - resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.15.2.tgz#6aa374c7bcb6ffcaac8e2a7f8bdb2f9aba469b31" - integrity sha512-jNSP0FMu1N6Pa1Slsy8b/JbmlTAXcVeXVwnxrEMVGWeiNqUVYl+tx1FuQAqi3q1m4cg9ygXkGsgLgRmnXAEC8g== +"@react-navigation/core@^5.15.3": + version "5.15.3" + resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.15.3.tgz#dce7090bf3ea0d302993d742c706825e495b812e" + integrity sha512-3ZdyDInh8qg1kygCNkmh9lFgpDf29lTvPsaMe2mm/qvmxLKSgttWBz07P2fc181aV9jTdgQpzYfWZ5KWT036zw== dependencies: "@react-navigation/routers" "^5.7.2" escape-string-regexp "^4.0.0" @@ -1072,11 +1072,11 @@ react-is "^16.13.0" "@react-navigation/native@^5.6.1": - version "5.9.3" - resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.9.3.tgz#3859f439adc9a744b79a98fbc7606bdd459574d5" - integrity sha512-xaRlCDRVuFGxHsP/IetwLdNvLJwIJBYCUIx/ufWs6QkT9Q0EB0DtKzXCItuHydjMEVPd1Cy7lfjUlSM6hZ6Q3Q== + version "5.9.4" + resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.9.4.tgz#414c044423c58aa1cdde1b6494309e0b51da08b8" + integrity sha512-BUCrOXfZDdKWBqM8OhOKQhCX5we4HUo5XG6tCQtVqQAep+7UcApZmMUuemUXDxVe8NPESUpoUlB0RaEpyIdfTQ== dependencies: - "@react-navigation/core" "^5.15.2" + "@react-navigation/core" "^5.15.3" escape-string-regexp "^4.0.0" nanoid "^3.1.15" @@ -1088,9 +1088,9 @@ nanoid "^3.1.15" "@react-navigation/stack@^5.6.2": - version "5.14.3" - resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.14.3.tgz#3d15fcd2cf8d0d2a1248686565c6a85e2d8e1c55" - integrity sha512-7rHc13DHsYP7l7GcgBcLEyX2/IAuCcRZ1Iu3MtOZSayjvFXxBBYKFKw0OyY9NxOfZUdLl3Q3mLiUHVFZkHMcuA== + version "5.14.4" + resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.14.4.tgz#32f6717c03494f0ca6cf0dd43d8302af824de9e9" + integrity sha512-gQjWK8JHtVkD1p7wzjtSPuScJI0mSAk/N/gzgjQZo+rDUwgM8rOTDcVNRbtEOqCEgLQcZrZQHwhOjkrJirehjQ== dependencies: color "^3.1.3" react-native-iphone-x-helper "^1.3.0" -- cgit v1.2.3-70-g09d2 From bdccd7ae173c0342350c613b6247f2cfb0b9fe92 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 6 Apr 2021 14:58:25 -0400 Subject: disconnect user --- src/screens/profile/SettingsScreen.tsx | 6 ++++-- src/store/actions/user.ts | 16 ++++++++++------ 2 files changed, 14 insertions(+), 8 deletions(-) (limited to 'src/screens/profile') diff --git a/src/screens/profile/SettingsScreen.tsx b/src/screens/profile/SettingsScreen.tsx index 05e051b5..ecc3bafd 100644 --- a/src/screens/profile/SettingsScreen.tsx +++ b/src/screens/profile/SettingsScreen.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useContext} from 'react'; import { SafeAreaView, SectionList, @@ -17,6 +17,7 @@ import {BackgroundGradientType} from '../../types'; import {normalize, SCREEN_HEIGHT} from '../../utils/layouts'; import SettingsCell from './SettingsCell'; import {useNavigation} from '@react-navigation/core'; +import {ChatContext} from '../../App'; const SettingsScreen: React.FC = () => { const dispatch = useDispatch(); @@ -24,6 +25,7 @@ const SettingsScreen: React.FC = () => { const {suggested_people_linked} = useSelector( (state: RootState) => state.user.profile, ); + const {chatClient} = useContext(ChatContext); return ( <> @@ -49,7 +51,7 @@ const SettingsScreen: React.FC = () => { { - dispatch(logout()); + dispatch(logout(chatClient)); navigation.reset({ index: 0, routes: [{name: 'SuggestedPeople'}], diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts index e7d985ac..4faa2206 100644 --- a/src/store/actions/user.ts +++ b/src/store/actions/user.ts @@ -1,4 +1,5 @@ import AsyncStorage from '@react-native-community/async-storage'; +import {StreamChat} from 'stream-chat'; import {Action, ThunkAction} from '@reduxjs/toolkit'; import { getProfilePic, @@ -164,13 +165,16 @@ export const updateReplyPosted = ( } }; -export const logout = (): ThunkAction< - Promise, - RootState, - unknown, - Action -> => async (dispatch) => { +export const logout = ( + client?: StreamChat, +): ThunkAction, RootState, unknown, Action> => async ( + dispatch, +) => { try { + // do our best effort here to gracefully disconnect the user + if (client) { + await client.disconnectUser(); + } await AsyncStorage.clear(); dispatch({type: userLoggedIn.type, payload: {userId: '', username: ''}}); } catch (error) { -- cgit v1.2.3-70-g09d2