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/assets/gifs/swipe-animation.gif | Bin 0 -> 160536 bytes src/screens/suggestedPeople/AnimatedTutorial.tsx | 92 +++++++++++++++++++++++ src/screens/suggestedPeople/index.ts | 1 + 3 files changed, 93 insertions(+) create mode 100644 src/assets/gifs/swipe-animation.gif create mode 100644 src/screens/suggestedPeople/AnimatedTutorial.tsx (limited to 'src') diff --git a/src/assets/gifs/swipe-animation.gif b/src/assets/gifs/swipe-animation.gif new file mode 100644 index 00000000..b3b203d0 Binary files /dev/null and b/src/assets/gifs/swipe-animation.gif differ 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 9dfc53872b05ee84b659c0a2207c7782447d2bc4 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 11 Feb 2021 06:58:31 -0800 Subject: Added new screen to navigator --- src/routes/main/MainStackNavigator.tsx | 3 +++ src/routes/main/MainStackScreen.tsx | 24 +++++++++++++++++++++++- 2 files changed, 26 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index f3aa7fc6..9771c1e6 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -66,6 +66,9 @@ export type MainStackParams = { screenType: ScreenType; momentCategory: string; }; + AnimatedTutorial: { + screenType: ScreenType; + }; }; export const MainStack = createStackNavigator(); diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 37f9bef8..2531eec7 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -3,6 +3,7 @@ import {RouteProp} from '@react-navigation/native'; import {StackNavigationOptions} from '@react-navigation/stack'; import React, {useState} from 'react'; import { + AnimatedTutorial, CaptionScreen, CategorySelection, CreateCustomCategory, @@ -81,7 +82,20 @@ const MainStackScreen: React.FC = ({route}) => { }), }; - console.log('screenType: ', screenType); + const tutorialModalStyle: StackNavigationOptions = { + cardStyle: {backgroundColor: 'rgba(0, 0, 0, 0.5)'}, + gestureDirection: 'vertical', + cardOverlayEnabled: true, + cardStyleInterpolator: ({current: {progress}}) => ({ + cardStyle: { + opacity: progress.interpolate({ + inputRange: [0, 0.5, 0.9, 1], + outputRange: [0, 0.25, 0.7, 1], + }), + }, + }), + }; + return ( = ({route}) => { initialParams={{screenType}} /> )} + 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') 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 84c88301710de2a2500e89191bdef49846b34f12 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 11 Feb 2021 07:00:17 -0800 Subject: added async function to services for backend call --- src/services/UserProfileService.ts | 35 ++++++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/services/UserProfileService.ts b/src/services/UserProfileService.ts index d0610714..39c99f33 100644 --- a/src/services/UserProfileService.ts +++ b/src/services/UserProfileService.ts @@ -2,7 +2,7 @@ import AsyncStorage from '@react-native-community/async-storage'; import moment from 'moment'; import {Alert} from 'react-native'; import RNFetchBlob from 'rn-fetch-blob'; -import {SocialAccountType} from '../types'; +import {SocialAccountType, UserType} from '../types'; import { PROFILE_PHOTO_ENDPOINT, HEADER_PHOTO_ENDPOINT, @@ -15,6 +15,7 @@ import { VERIFY_OTP_ENDPOINT, SEND_OTP_ENDPOINT, PROFILE_PHOTO_THUMBNAIL_ENDPOINT, + EDIT_PROFILE_ENDPOINT, } from '../constants'; import { ERROR_DOUBLE_CHECK_CONNECTION, @@ -49,10 +50,15 @@ export const loadProfileInfo = async (token: string, userId: string) => { tiktok, university_class, profile_completion_stage, + sp_swipe_tutorial, friendship_status, friendship_requester_id, } = info; birthday = birthday && moment(birthday).format('YYYY-MM-DD'); + console.log( + 'Suggested People loaded from backend for logged in user: ', + sp_swipe_tutorial, + ); return { name, biography, @@ -63,6 +69,7 @@ export const loadProfileInfo = async (token: string, userId: string) => { tiktok, university_class, profile_completion_stage, + sp_swipe_tutorial, friendship_status, friendship_requester_id, }; @@ -313,3 +320,29 @@ export const sendOtp = async (phone: string) => { return false; } }; + +export const editSPSwipeTutorial = async (user: UserType) => { + try { + const request = new FormData(); + request.append('sp_swipe_tutorial', 1); + const endpoint = EDIT_PROFILE_ENDPOINT + `${user.userId}/`; + const token = await AsyncStorage.getItem('token'); + console.log('token: ', token); + let response = await fetch(endpoint, { + method: 'PATCH', + headers: { + 'Content-Type': 'multipart/form-data', + Authorization: 'Token ' + token, + }, + body: request, + }); + if (response.status === 200) { + console.log('updatedbackend'); + return true; + } else { + return false; + } + } catch (error) { + console.log('Error updating animated tutorial close button press'); + } +}; -- cgit v1.2.3-70-g09d2 From 88433cda2938a2fa4f6bf3e4b2282fe0095dfe71 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 11 Feb 2021 07:01:41 -0800 Subject: Add sp_swipe_tutorial to ProfileType: --- src/store/initialStates.ts | 1 + src/types/types.ts | 1 + 2 files changed, 2 insertions(+) (limited to 'src') diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts index 8d137a5d..aa391713 100644 --- a/src/store/initialStates.ts +++ b/src/store/initialStates.ts @@ -21,6 +21,7 @@ export const NO_PROFILE: ProfileType = { //Default to an invalid value and ignore it gracefully while showing tutorials / popups. profile_completion_stage: -1, + sp_swipe_tutorial: 0, snapchat: '', tiktok: '', friendship_status: 'no_record', diff --git a/src/types/types.ts b/src/types/types.ts index 7fccaa44..fe16fb8e 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -23,6 +23,7 @@ export interface ProfileType { gender: string; university_class: number; profile_completion_stage: number; + sp_swipe_tutorial: number; birthday: Date | undefined; snapchat: string; tiktok: string; -- cgit v1.2.3-70-g09d2 From e95ff2d483903b4d390c8dd0edf4ab60561b8334 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 11 Feb 2021 07:03:02 -0800 Subject: Create thunk action + reducer to set new variable --- src/store/actions/user.ts | 33 +++++++++++++++++++++++++++++++-- src/store/reducers/userReducer.ts | 7 ++++++- 2 files changed, 37 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts index 5f49a103..98e1727b 100644 --- a/src/store/actions/user.ts +++ b/src/store/actions/user.ts @@ -1,7 +1,12 @@ -import { CommentThreadType } from './../../types/types'; +import {CommentThreadType} from './../../types/types'; import {RootState} from '../rootReducer'; import {UserType} from '../../types/types'; -import {loadProfileInfo, loadAvatar, loadCover} from '../../services'; +import { + loadProfileInfo, + loadAvatar, + loadCover, + editSPSwipeTutorial, +} from '../../services'; import {Action, ThunkAction} from '@reduxjs/toolkit'; import { userLoggedIn, @@ -13,6 +18,7 @@ import { setReplyPosted, } from '../reducers'; import {getTokenOrLogout} from '../../utils'; +import {spSwipeTutorialUpdated} from '../reducers/userReducer'; /** * Entry point to our store. @@ -140,3 +146,26 @@ export const logout = (): ThunkAction< console.log(error); } }; + +export const updateSPSwipeTutorial = ( + user: UserType, + data: number, +): ThunkAction< + Promise, + RootState, + unknown, + Action +> => async (dispatch) => { + try { + const success = await editSPSwipeTutorial(user); + if (success) { + dispatch({ + type: spSwipeTutorialUpdated.type, + payload: {sp_swipe_tutorial: data}, + }); + } + return success; + } catch (error) { + console.log('Error while updating suggested people linked state: ', error); + } +}; diff --git a/src/store/reducers/userReducer.ts b/src/store/reducers/userReducer.ts index 1e575339..b353cc60 100644 --- a/src/store/reducers/userReducer.ts +++ b/src/store/reducers/userReducer.ts @@ -1,4 +1,4 @@ -import {createSlice, Action} from '@reduxjs/toolkit'; +import {createSlice} from '@reduxjs/toolkit'; import {NO_USER_DATA} from '../initialStates'; /** @@ -46,6 +46,10 @@ const userDataSlice = createSlice({ state.profile.profile_completion_stage = action.payload.stage; }, + spSwipeTutorialUpdated: (state, action) => { + state.profile.sp_swipe_tutorial = action.payload.sp_swipe_tutorial; + }, + setIsOnboardedUser: (state, action) => { state.isOnboardedUser = action.payload.isOnboardedUser; }, @@ -68,5 +72,6 @@ export const { setIsOnboardedUser, setNewNotificationReceived, setReplyPosted, + spSwipeTutorialUpdated, } = userDataSlice.actions; export const userDataReducer = userDataSlice.reducer; -- 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') 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 ebc1b4dd9a39a1d82cb81f070bcae1f9f2146832 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 11 Feb 2021 13:56:40 -0800 Subject: removed console log for token --- src/services/UserProfileService.ts | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/services/UserProfileService.ts b/src/services/UserProfileService.ts index 39c99f33..9061dd5e 100644 --- a/src/services/UserProfileService.ts +++ b/src/services/UserProfileService.ts @@ -327,7 +327,6 @@ export const editSPSwipeTutorial = async (user: UserType) => { request.append('sp_swipe_tutorial', 1); const endpoint = EDIT_PROFILE_ENDPOINT + `${user.userId}/`; const token = await AsyncStorage.getItem('token'); - console.log('token: ', token); let response = await fetch(endpoint, { method: 'PATCH', headers: { -- cgit v1.2.3-70-g09d2 From da61f04d037d92fce7cf9852a3be79eb41158d5a Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 11 Feb 2021 14:04:04 -0800 Subject: dispatching reducer while updating backend --- src/services/UserProfileService.ts | 1 - src/store/actions/user.ts | 10 ++++------ 2 files changed, 4 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/services/UserProfileService.ts b/src/services/UserProfileService.ts index 9061dd5e..3bca66f3 100644 --- a/src/services/UserProfileService.ts +++ b/src/services/UserProfileService.ts @@ -336,7 +336,6 @@ export const editSPSwipeTutorial = async (user: UserType) => { body: request, }); if (response.status === 200) { - console.log('updatedbackend'); return true; } else { return false; diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts index 98e1727b..50f810e4 100644 --- a/src/store/actions/user.ts +++ b/src/store/actions/user.ts @@ -158,12 +158,10 @@ export const updateSPSwipeTutorial = ( > => async (dispatch) => { try { const success = await editSPSwipeTutorial(user); - if (success) { - dispatch({ - type: spSwipeTutorialUpdated.type, - payload: {sp_swipe_tutorial: data}, - }); - } + dispatch({ + type: spSwipeTutorialUpdated.type, + payload: {sp_swipe_tutorial: data}, + }); return success; } catch (error) { console.log('Error while updating suggested people linked state: ', error); -- 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') 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