From 24d34b4d3fcdab593aa8b47e1b8bed55941c00f4 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 11 Feb 2021 06:58:00 -0800 Subject: created and imported animated tutorial --- src/screens/suggestedPeople/AnimatedTutorial.tsx | 92 ++++++++++++++++++++++++ src/screens/suggestedPeople/index.ts | 1 + 2 files changed, 93 insertions(+) create mode 100644 src/screens/suggestedPeople/AnimatedTutorial.tsx (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/AnimatedTutorial.tsx b/src/screens/suggestedPeople/AnimatedTutorial.tsx new file mode 100644 index 00000000..9993875d --- /dev/null +++ b/src/screens/suggestedPeople/AnimatedTutorial.tsx @@ -0,0 +1,92 @@ +import * as React from 'react'; +import CloseIcon from '../../assets/ionicons/close-outline.svg'; +import {StyleSheet, Text, View} from 'react-native'; +import {Image} from 'react-native-animatable'; +import {SCREEN_WIDTH} from '../../utils'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {useNavigation} from '@react-navigation/native'; +import {useDispatch, useSelector} from 'react-redux'; +import {RootState} from '../../store/rootReducer'; +import {updateSPSwipeTutorial} from '../../store/actions/user'; + +const AnimatedTutorial: React.FC = () => { + const navigation = useNavigation(); + const dispatch = useDispatch(); + const {user} = useSelector((state: RootState) => state.user); + + const handleCloseAnimationTutorial = async () => { + /* In user's store, check if profile.sp_swipe_tutorial === 0 + * Make call to edit profile endpoint with suggested people === 1 + */ + const data = 1; + await dispatch(updateSPSwipeTutorial(user, data)); + navigation.pop(); + }; + return ( + + + + + {'Swipe up to discover more people!'} + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flexDirection: 'column', + }, + closeButton: { + top: '2.55%', + left: '5%', + }, + text: { + justifyContent: 'center', + color: '#fff', + fontWeight: 'bold', + fontSize: 20, + textAlign: 'center', + position: 'relative', + top: '100%', + }, + textContainer: { + width: SCREEN_WIDTH * 0.5, + alignSelf: 'center', + top: '65%', + }, + swipeGif: { + width: 333, + height: 250, + left: '22.5%', + top: '75%', + }, + + //Styles to adjust moment container + momentScrollContainer: { + backgroundColor: 'transparent', + }, + momentContainer: { + top: '62%', + backgroundColor: 'transparent', + }, + momentHeaderText: { + paddingBottom: '5%', + }, + momentHeader: { + backgroundColor: 'transparent', + }, +}); + +export default AnimatedTutorial; diff --git a/src/screens/suggestedPeople/index.ts b/src/screens/suggestedPeople/index.ts index a42d9c52..8c06d81e 100644 --- a/src/screens/suggestedPeople/index.ts +++ b/src/screens/suggestedPeople/index.ts @@ -1 +1,2 @@ export {default as SuggestedPeopleScreen} from './SuggestedPeopleScreen'; +export {default as AnimatedTutorial} from './AnimatedTutorial'; -- cgit v1.2.3-70-g09d2 From fb76f7ac90e60c9792ff857544489dd0fa4d0e2a Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 11 Feb 2021 06:59:27 -0800 Subject: navigating to the new screen conditionally --- .../suggestedPeople/SuggestedPeopleScreen.tsx | 40 +++++++++++++++------- 1 file changed, 28 insertions(+), 12 deletions(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index 13dc422b..80463b79 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, {useCallback} from 'react'; import { StatusBar, StyleSheet, @@ -7,20 +7,15 @@ import { View, } from 'react-native'; import {Image} from 'react-native-animatable'; -import { - fetchUserX, - isIPhoneX, - SCREEN_HEIGHT, - SCREEN_WIDTH, - userXInStore, -} from '../../utils'; +import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import {TabsGradient, TaggsBar} from '../../components'; import {SafeAreaView} from 'react-native-safe-area-context'; import {normalize} from '../../utils'; import Animated from 'react-native-reanimated'; import {ScreenType} from '../../types'; -import {useDispatch, useStore} from 'react-redux'; +import {useSelector} from 'react-redux'; import {RootState} from '../../store/rootReducer'; +import {useFocusEffect, useNavigation} from '@react-navigation/native'; /** * Bare bones for suggested people consisting of: @@ -33,6 +28,25 @@ const SuggestedPeopleScreen: React.FC = () => { // Adviced to maintain username as a variable here to append @ symbol for maintainability const username = '@' + 'sarahmiller'; + const navigation = useNavigation(); + const screenType = ScreenType.SuggestedPeople; + const { + profile: {sp_swipe_tutorial}, + } = useSelector((state: RootState) => state.user); + + useFocusEffect( + useCallback(() => { + const navigateToAnimatedTutorial = () => { + /* In user's store, check if profile.sp_swipe_tutorial === 0 + * If, true show tutorial. + */ + if (sp_swipe_tutorial === 0) { + navigation.navigate('AnimatedTutorial'); + } + }; + navigateToAnimatedTutorial(); + }, [sp_swipe_tutorial, navigation]), + ); return ( <> @@ -46,7 +60,7 @@ const SuggestedPeopleScreen: React.FC = () => { Suggested People - {/* Added first row contaning name, username, add button (w/o functionality) */} + {/* First row contaning name, username, add button (w/o functionality) */} {firstName} @@ -54,18 +68,20 @@ const SuggestedPeopleScreen: React.FC = () => { console.log('Call add friend function')}> {'Add Friend'} - {/* TODO: Add TaggsBar here */} + {/* Taggs Bar. Displays only linked profiles for user while viewing their own profile. */} {/* TODO: Add MutualFriends here */} -- cgit v1.2.3-70-g09d2 From 996c2b151772d17d910805bdb5bdfaf8e857d94d Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 11 Feb 2021 07:21:29 -0800 Subject: styled for iPhone 8 --- src/screens/suggestedPeople/AnimatedTutorial.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/AnimatedTutorial.tsx b/src/screens/suggestedPeople/AnimatedTutorial.tsx index 9993875d..9606eacb 100644 --- a/src/screens/suggestedPeople/AnimatedTutorial.tsx +++ b/src/screens/suggestedPeople/AnimatedTutorial.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; import {StyleSheet, Text, View} from 'react-native'; import {Image} from 'react-native-animatable'; -import {SCREEN_WIDTH} from '../../utils'; +import {isIPhoneX, SCREEN_WIDTH} from '../../utils'; import {SafeAreaView} from 'react-native-safe-area-context'; import {useNavigation} from '@react-navigation/native'; import {useDispatch, useSelector} from 'react-redux'; @@ -62,15 +62,15 @@ const styles = StyleSheet.create({ top: '100%', }, textContainer: { - width: SCREEN_WIDTH * 0.5, + width: isIPhoneX() ? SCREEN_WIDTH * 0.5 : SCREEN_WIDTH * 0.6, alignSelf: 'center', - top: '65%', + top: isIPhoneX() ? '65%' : '45%', }, swipeGif: { width: 333, height: 250, left: '22.5%', - top: '75%', + top: isIPhoneX() ? '75%' : '45%', }, //Styles to adjust moment container -- cgit v1.2.3-70-g09d2 From eeac3efd296656a0ef0a1e5797fec7c9955c7a12 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 11 Feb 2021 17:14:44 -0500 Subject: non-ui-blocking --- src/screens/suggestedPeople/AnimatedTutorial.tsx | 2 +- src/store/actions/user.ts | 15 +++++---------- 2 files changed, 6 insertions(+), 11 deletions(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/AnimatedTutorial.tsx b/src/screens/suggestedPeople/AnimatedTutorial.tsx index 9606eacb..8ebdaea6 100644 --- a/src/screens/suggestedPeople/AnimatedTutorial.tsx +++ b/src/screens/suggestedPeople/AnimatedTutorial.tsx @@ -19,7 +19,7 @@ const AnimatedTutorial: React.FC = () => { * Make call to edit profile endpoint with suggested people === 1 */ const data = 1; - await dispatch(updateSPSwipeTutorial(user, data)); + dispatch(updateSPSwipeTutorial(user, data)); navigation.pop(); }; return ( diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts index 9f1855ce..990f9260 100644 --- a/src/store/actions/user.ts +++ b/src/store/actions/user.ts @@ -1,14 +1,10 @@ -import {CommentThreadType} from './../../types/types'; -import {RootState} from '../rootReducer'; -import {UserType} from '../../types/types'; +import {Action, ThunkAction} from '@reduxjs/toolkit'; import { - loadProfileInfo, + editSPSwipeTutorial, loadAvatar, loadCover, - editSPSwipeTutorial, + loadProfileInfo, } from '../../services'; -import {Action, ThunkAction} from '@reduxjs/toolkit'; -import {loadAvatar, loadCover, loadProfileInfo} from '../../services'; import {UserType} from '../../types/types'; import {getTokenOrLogout} from '../../utils'; import { @@ -21,7 +17,6 @@ import { userDetailsFetched, userLoggedIn, } from '../reducers'; -import {getTokenOrLogout} from '../../utils'; import {spSwipeTutorialUpdated} from '../reducers/userReducer'; import {RootState} from '../rootReducer'; import {CommentThreadType} from './../../types/types'; @@ -178,12 +173,12 @@ export const updateSPSwipeTutorial = ( Action > => async (dispatch) => { try { - const success = await editSPSwipeTutorial(user); + // update store first, assume success dispatch({ type: spSwipeTutorialUpdated.type, payload: {sp_swipe_tutorial: data}, }); - return success; + return await editSPSwipeTutorial(user); } catch (error) { console.log('Error while updating suggested people linked state: ', error); } -- cgit v1.2.3-70-g09d2