From 4a832f8bc78e9d0c7d83edd2e7777919a5e685ad Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Thu, 22 Apr 2021 19:03:46 -0700 Subject: On Press Tutorial --- src/assets/images/badgeTutorial.png | Bin 0 -> 6000 bytes src/assets/images/badgeTutorial@2x.png | Bin 0 -> 10370 bytes src/assets/images/badgeTutorial@3x.png | Bin 0 -> 16766 bytes src/components/profile/BadgeTutorialScreen.tsx | 74 +++++++++++++++++++++++++ src/components/profile/ProfileHeader.tsx | 58 ++++++++++++++++--- src/components/profile/UniversityIcon.tsx | 2 +- src/utils/common.ts | 11 ++++ 7 files changed, 137 insertions(+), 8 deletions(-) create mode 100644 src/assets/images/badgeTutorial.png create mode 100644 src/assets/images/badgeTutorial@2x.png create mode 100644 src/assets/images/badgeTutorial@3x.png create mode 100644 src/components/profile/BadgeTutorialScreen.tsx (limited to 'src') diff --git a/src/assets/images/badgeTutorial.png b/src/assets/images/badgeTutorial.png new file mode 100644 index 00000000..0e900c3b Binary files /dev/null and b/src/assets/images/badgeTutorial.png differ diff --git a/src/assets/images/badgeTutorial@2x.png b/src/assets/images/badgeTutorial@2x.png new file mode 100644 index 00000000..dfdc946a Binary files /dev/null and b/src/assets/images/badgeTutorial@2x.png differ diff --git a/src/assets/images/badgeTutorial@3x.png b/src/assets/images/badgeTutorial@3x.png new file mode 100644 index 00000000..10b92360 Binary files /dev/null and b/src/assets/images/badgeTutorial@3x.png differ diff --git a/src/components/profile/BadgeTutorialScreen.tsx b/src/components/profile/BadgeTutorialScreen.tsx new file mode 100644 index 00000000..360162f8 --- /dev/null +++ b/src/components/profile/BadgeTutorialScreen.tsx @@ -0,0 +1,74 @@ +import React, {useState} from 'react'; +import { + Image, + Modal, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; +import {PROFILE_CUTOUT_TOP_Y} from '../../constants'; +import {normalize} from '../../utils'; +import {UniversityIcon} from './'; +import {UniversityIconProps} from './UniversityIcon'; + +const BadgeTutorialScreen: React.FC = ({ + layout, + university, + university_class, +}) => { + const [showModal, setShowModal] = useState(true); + + return ( + + setShowModal(false)} + style={styles.viewWrapper}> + + + Tap on the univeristy icon to edit your badges! + + + + + + + + + ); +}; +const styles = StyleSheet.create({ + viewWrapper: { + flex: 1, + backgroundColor: 'rgba(0, 0, 0, 0.5)', + }, + modalView: { + backgroundColor: '#fff', + }, + textContainerStyles: {top: '30%', width: '60%', alignSelf: 'center'}, + textStyles: { + color: 'white', + fontWeight: '700', + fontSize: normalize(20), + lineHeight: normalize(25), + textAlign: 'center', + }, +}); + +export default BadgeTutorialScreen; diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx index 9dc58501..2eb5121f 100644 --- a/src/components/profile/ProfileHeader.tsx +++ b/src/components/profile/ProfileHeader.tsx @@ -1,13 +1,14 @@ -import React, {useState} from 'react'; +import React, {useLayoutEffect, useRef, useState} from 'react'; import {StyleSheet, Text, View} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {useSelector} from 'react-redux'; import {PROFILE_CUTOUT_TOP_Y} from '../../constants'; import {RootState} from '../../store/rootreducer'; import {ScreenType} from '../../types'; -import {normalize} from '../../utils'; +import {hasSeenBadgeTutorial, normalize} from '../../utils'; import BadgeDetailView from '../common/BadgeDetailView'; import Avatar from './Avatar'; +import BadgeTutorialScreen from './BadgeTutorialScreen'; import FriendsCount from './FriendsCount'; import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer'; import UniversityIcon from './UniversityIcon'; @@ -39,8 +40,37 @@ const ProfileHeader: React.FC = ({ const [showBadgeView, setBadgeViewVisible] = useState(false); const [firstName, lastName] = [...name.split(' ')]; + const containerRef = useRef(null); + const childRef = useRef(null); + const [measure, setMeasure] = useState(null); + const [showBadgeTutorial, setShowBadgeTutorial] = useState(false); + useLayoutEffect(() => { + setTimeout(() => { + measureStuff(); + }, 1000); + }, []); + + const measureStuff = async () => { + const badgeSeen = await hasSeenBadgeTutorial(); + console.log('BADGE SEEN', badgeSeen); + if (!badgeSeen && containerRef.current && childRef.current) { + childRef?.current?.measureLayout( + containerRef.current, + (left, top, width, height) => { + console.log(left, top, width, height); + setMeasure({left, top, width, height}); + setShowBadgeTutorial(true); + }, + (error) => { + setShowBadgeTutorial(false); + console.log(error); + }, + ); + } + }; + return ( - + = ({ userXName={userXName} setIsOpen={setDrawerVisible} /> - + {measure && ( + + )} = ({ {lastName} )} + + setBadgeViewVisible(true)}> - + + + {showBadgeView && ( { return retrievedContacts; }; +export const hasSeenBadgeTutorial = async () => { + if ((await AsyncStorage.getItem('hasSeenBadgeTutorial')) === 'true') { + return true; + } + return false; +}; + +export const setHasSeenBadgeTutorial = async () => { + await AsyncStorage.setItem('hasSeenBadgeTutorial', 'true'); +}; + export const getUniversityBadge = ( university: UniversityType, type: UniversityBadgeType, -- cgit v1.2.3-70-g09d2 From 08ba9f4d7bef85b223d2cf6772804e3c9190cad7 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 23 Apr 2021 14:09:18 -0700 Subject: fixed alignment issue --- src/components/profile/BadgeTutorialScreen.tsx | 6 +++++- src/components/profile/ProfileHeader.tsx | 22 ++++++++++++++-------- 2 files changed, 19 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/components/profile/BadgeTutorialScreen.tsx b/src/components/profile/BadgeTutorialScreen.tsx index 360162f8..e2dab00d 100644 --- a/src/components/profile/BadgeTutorialScreen.tsx +++ b/src/components/profile/BadgeTutorialScreen.tsx @@ -16,6 +16,7 @@ const BadgeTutorialScreen: React.FC = ({ layout, university, university_class, + setShowBadgeTutorial, }) => { const [showModal, setShowModal] = useState(true); @@ -26,7 +27,10 @@ const BadgeTutorialScreen: React.FC = ({ visible={showModal} presentationStyle="overFullScreen"> setShowModal(false)} + onPress={() => { + setShowBadgeTutorial(false); + setShowModal(false); + }} style={styles.viewWrapper}> diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx index 2eb5121f..8411d2cc 100644 --- a/src/components/profile/ProfileHeader.tsx +++ b/src/components/profile/ProfileHeader.tsx @@ -52,7 +52,6 @@ const ProfileHeader: React.FC = ({ const measureStuff = async () => { const badgeSeen = await hasSeenBadgeTutorial(); - console.log('BADGE SEEN', badgeSeen); if (!badgeSeen && containerRef.current && childRef.current) { childRef?.current?.measureLayout( containerRef.current, @@ -84,6 +83,7 @@ const ProfileHeader: React.FC = ({ university={university} university_class={university_class} layout={measure} + setShowBadgeTutorial={setShowBadgeTutorial} /> )} @@ -107,13 +107,18 @@ const ProfileHeader: React.FC = ({ setBadgeViewVisible(true)}> - + {showBadgeTutorial === true ? ( + + ) : ( + + )} {showBadgeView && ( @@ -163,6 +168,7 @@ const styles = StyleSheet.create({ width: '100%', height: 50, }, + emptyContainer: {backgroundColor: 'white', width: 50, height: 50}, }); export default ProfileHeader; -- cgit v1.2.3-70-g09d2 From b79807a75043695cd88224dfaea708cfd542fd98 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 23 Apr 2021 14:11:49 -0700 Subject: removed edit badges from sp edit page --- .../SuggestedPeopleUploadPictureScreen.tsx | 17 ----------------- 1 file changed, 17 deletions(-) (limited to 'src') diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index 92a7e6c5..b96e279d 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -160,23 +160,6 @@ const SuggestedPeopleUploadPictureScreen: React.FC )} - {editing && ( - { - navigation.navigate('BadgeSelection', {editing: true}); - }}> - - - - Edit Badges - - - - - )} {image && ( Date: Fri, 23 Apr 2021 14:12:45 -0700 Subject: unused imports --- .../suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'src') diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index b96e279d..50e53367 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -6,7 +6,6 @@ import { ImageBackground, StatusBar, StyleSheet, - View, } from 'react-native'; import {Text} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; @@ -15,8 +14,7 @@ import {SafeAreaView} from 'react-native-safe-area-context'; import {useDispatch, useSelector} from 'react-redux'; import {MainStackParams} from '../../routes'; import {UniversityType} from '../../types'; -import FrontArrow from '../../assets/icons/front-arrow.svg'; -import {TaggSquareButton, UniversityIcon} from '../../components'; +import {TaggSquareButton} from '../../components'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; import {SP_HEIGHT, SP_WIDTH} from '../../constants'; import { @@ -52,7 +50,6 @@ const SuggestedPeopleUploadPictureScreen: React.FC state.user); useEffect(() => { -- cgit v1.2.3-70-g09d2 From 70ff4dc0c8d8fa7b05087c6dbc08f2def895b922 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 23 Apr 2021 14:16:52 -0700 Subject: Added interface --- src/components/profile/BadgeTutorialScreen.tsx | 13 ++++++++----- src/components/profile/ProfileHeader.tsx | 8 +++++--- src/components/profile/UniversityIcon.tsx | 1 + 3 files changed, 14 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/components/profile/BadgeTutorialScreen.tsx b/src/components/profile/BadgeTutorialScreen.tsx index e2dab00d..45831fc6 100644 --- a/src/components/profile/BadgeTutorialScreen.tsx +++ b/src/components/profile/BadgeTutorialScreen.tsx @@ -12,14 +12,17 @@ import {normalize} from '../../utils'; import {UniversityIcon} from './'; import {UniversityIconProps} from './UniversityIcon'; -const BadgeTutorialScreen: React.FC = ({ - layout, - university, - university_class, +interface BadgeTutorialScreenProps { + uniIconProps: UniversityIconProps; + setShowBadgeTutorial: Function; +} + +const BadgeTutorialScreen: React.FC = ({ + uniIconProps, setShowBadgeTutorial, }) => { const [showModal, setShowModal] = useState(true); - + const {layout, university, university_class} = uniIconProps; return ( = ({ /> {measure && ( )} diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx index 6e1c7d4e..560a771e 100644 --- a/src/components/profile/UniversityIcon.tsx +++ b/src/components/profile/UniversityIcon.tsx @@ -9,6 +9,7 @@ export interface UniversityIconProps extends ViewProps { university_class?: number; imageStyle?: StyleProp; needsShadow?: boolean; + layout?: object | null; } /** -- cgit v1.2.3-70-g09d2 From ce5bf93fef3f5108e0dca35bf24accb4d9d654bb Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 23 Apr 2021 14:39:46 -0700 Subject: selective visibility, disabled gifs --- src/components/messages/ChatInput.tsx | 6 +++--- src/components/profile/ProfileHeader.tsx | 19 ++++++++++++++----- 2 files changed, 17 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/components/messages/ChatInput.tsx b/src/components/messages/ChatInput.tsx index bde5fc12..2ae220c6 100644 --- a/src/components/messages/ChatInput.tsx +++ b/src/components/messages/ChatInput.tsx @@ -84,12 +84,12 @@ const ChatInput: React.FC< source={require('../../assets/images/camera.png')} /> */} - setText('/')}> + {/* setText('/')}> - + */} @@ -132,7 +132,7 @@ const styles = StyleSheet.create({ actionButtons: { height: normalize(30) + 10, flexDirection: 'row', - justifyContent: 'space-evenly', + justifyContent: 'flex-end', alignItems: 'center', marginRight: 10, width: 100, diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx index 89d41d57..90206f8d 100644 --- a/src/components/profile/ProfileHeader.tsx +++ b/src/components/profile/ProfileHeader.tsx @@ -1,7 +1,7 @@ import React, {useLayoutEffect, useRef, useState} from 'react'; import {StyleSheet, Text, View} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; -import {useSelector} from 'react-redux'; +import {useSelector, useStore} from 'react-redux'; import {PROFILE_CUTOUT_TOP_Y} from '../../constants'; import {RootState} from '../../store/rootreducer'; import {ScreenType} from '../../types'; @@ -28,11 +28,14 @@ const ProfileHeader: React.FC = ({ }) => { const { profile: {name = '', university_class = 2021, university}, - user: {username: userXName = ''}, + user: {username: userXName = '', userId}, } = useSelector((state: RootState) => userXId ? state.userX[screenType][userXId] : state.user, ); + const state: RootState = useStore().getState(); + const loggedInUserId = state.user.user.userId; + const { user: {username = ''}, } = useSelector((state: RootState) => state.user); @@ -78,7 +81,7 @@ const ProfileHeader: React.FC = ({ userXName={userXName} setIsOpen={setDrawerVisible} /> - {measure && ( + {userId === loggedInUserId && measure && ( = ({ - setBadgeViewVisible(true)}> + { + if (userId === loggedInUserId) { + setBadgeViewVisible(true); + } + }}> - {showBadgeTutorial === true ? ( + {userId === loggedInUserId && showBadgeTutorial === true ? ( ) : ( Date: Fri, 23 Apr 2021 15:28:44 -0700 Subject: circle ci errors --- src/components/common/BadgeDetailView.tsx | 4 ++-- src/components/messages/ChatInput.tsx | 3 +-- src/components/profile/ProfileHeader.tsx | 7 ++++--- .../SuggestedPeopleUploadPictureScreen.tsx | 1 - 4 files changed, 7 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/components/common/BadgeDetailView.tsx b/src/components/common/BadgeDetailView.tsx index 437b1914..1309fad5 100644 --- a/src/components/common/BadgeDetailView.tsx +++ b/src/components/common/BadgeDetailView.tsx @@ -87,7 +87,7 @@ const BadgeDetailView: React.FC = ({ fetchBadges(); }; - const badgeEditCell = ({item: {id, name, badgeImage}}) => { + const badgeEditCell = ({item: {id, nameLocal, badgeImage}}) => { return ( = ({ setBadgeViewVisible(false); navigation.navigate('MutualBadgeHolders', { badge_id: id, - badge_title: name, + badge_title: nameLocal, badge_img: badgeImage, }); }}> diff --git a/src/components/messages/ChatInput.tsx b/src/components/messages/ChatInput.tsx index 2ae220c6..78c7529a 100644 --- a/src/components/messages/ChatInput.tsx +++ b/src/components/messages/ChatInput.tsx @@ -1,6 +1,5 @@ import React from 'react'; import {Image, StyleSheet, View} from 'react-native'; -import {TouchableOpacity} from 'react-native-gesture-handler'; import {useStore} from 'react-redux'; import { AutoCompleteInput, @@ -33,7 +32,7 @@ const ChatInput: React.FC< > = () => { const state: RootState = useStore().getState(); const avatar = state.user.avatar; - const {sendMessage, text, setText} = useMessageInputContext(); + const {sendMessage, text} = useMessageInputContext(); // const { // setSelectedImages, // selectedImages, diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx index 82eda258..3e83d991 100644 --- a/src/components/profile/ProfileHeader.tsx +++ b/src/components/profile/ProfileHeader.tsx @@ -35,12 +35,13 @@ const ProfileHeader: React.FC = ({ userXId ? state.userX[screenType][userXId] : state.user, ); - const state: RootState = useStore().getState(); - const loggedInUserId = state.user.user.userId; - const { user: {username = ''}, } = useSelector((state: RootState) => state.user); + + const state: RootState = useStore().getState(); + const loggedInUserId = state.user.user.userId; + const [drawerVisible, setDrawerVisible] = useState(false); const [showBadgeView, setBadgeViewVisible] = useState(false); const [firstName, lastName] = [...name.split(' ')]; diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index 50e53367..af5fd579 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -13,7 +13,6 @@ import ImagePicker from 'react-native-image-crop-picker'; import {SafeAreaView} from 'react-native-safe-area-context'; import {useDispatch, useSelector} from 'react-redux'; import {MainStackParams} from '../../routes'; -import {UniversityType} from '../../types'; import {TaggSquareButton} from '../../components'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; import {SP_HEIGHT, SP_WIDTH} from '../../constants'; -- cgit v1.2.3-70-g09d2 From 08af552d55c3a2ef2ab3d2456c600981517253b8 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 23 Apr 2021 15:35:57 -0700 Subject: name issue fixed --- src/components/common/BadgeDetailView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/components/common/BadgeDetailView.tsx b/src/components/common/BadgeDetailView.tsx index 1309fad5..c6c1619b 100644 --- a/src/components/common/BadgeDetailView.tsx +++ b/src/components/common/BadgeDetailView.tsx @@ -119,14 +119,14 @@ const BadgeDetailView: React.FC = ({ {isEditable && ( { - removeBadgeCell(name); + removeBadgeCell(nameLocal); }}> )} - {name} + {nameLocal} ); -- cgit v1.2.3-70-g09d2 From e676ec0c9124613507b2064cb139522a2568c26e Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 23 Apr 2021 15:38:50 -0700 Subject: name issue --- src/components/common/BadgeDetailView.tsx | 14 +++++++------- src/components/profile/ProfileHeader.tsx | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/components/common/BadgeDetailView.tsx b/src/components/common/BadgeDetailView.tsx index c6c1619b..13613287 100644 --- a/src/components/common/BadgeDetailView.tsx +++ b/src/components/common/BadgeDetailView.tsx @@ -23,11 +23,11 @@ import {getUniversityBadge, normalize} from '../../utils'; interface BadgeDetailModalProps { isEditable: boolean; setBadgeViewVisible: Function; - name?: string; + userFullName?: string; } const BadgeDetailView: React.FC = ({ - name, + userFullName, isEditable = true, setBadgeViewVisible, }) => { @@ -87,7 +87,7 @@ const BadgeDetailView: React.FC = ({ fetchBadges(); }; - const badgeEditCell = ({item: {id, nameLocal, badgeImage}}) => { + const badgeEditCell = ({item: {id, name, badgeImage}}) => { return ( = ({ setBadgeViewVisible(false); navigation.navigate('MutualBadgeHolders', { badge_id: id, - badge_title: nameLocal, + badge_title: name, badge_img: badgeImage, }); }}> @@ -119,14 +119,14 @@ const BadgeDetailView: React.FC = ({ {isEditable && ( { - removeBadgeCell(nameLocal); + removeBadgeCell(name); }}> )} - {nameLocal} + {name} ); @@ -146,7 +146,7 @@ const BadgeDetailView: React.FC = ({ }; const modalHeader = () => { - const heading = isEditable ? 'Edit your badges!' : name; + const heading = isEditable ? 'Edit your badges!' : userFullName; const subheading = isEditable ? 'Add or delete your badges' : 'View badges to discover groups!'; diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx index 3e83d991..5d5b695e 100644 --- a/src/components/profile/ProfileHeader.tsx +++ b/src/components/profile/ProfileHeader.tsx @@ -135,7 +135,7 @@ const ProfileHeader: React.FC = ({ {showBadgeView && ( )} -- cgit v1.2.3-70-g09d2 From 45d0a3aeb97c71cd73a198fc7f1aea67e0996009 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 23 Apr 2021 15:49:15 -0700 Subject: value from and to async for tutorial --- src/components/profile/BadgeTutorialScreen.tsx | 3 ++- src/components/profile/ProfileHeader.tsx | 14 +++++++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/components/profile/BadgeTutorialScreen.tsx b/src/components/profile/BadgeTutorialScreen.tsx index 45831fc6..30aced42 100644 --- a/src/components/profile/BadgeTutorialScreen.tsx +++ b/src/components/profile/BadgeTutorialScreen.tsx @@ -8,7 +8,7 @@ import { View, } from 'react-native'; import {PROFILE_CUTOUT_TOP_Y} from '../../constants'; -import {normalize} from '../../utils'; +import {normalize, setHasSeenBadgeTutorial} from '../../utils'; import {UniversityIcon} from './'; import {UniversityIconProps} from './UniversityIcon'; @@ -31,6 +31,7 @@ const BadgeTutorialScreen: React.FC = ({ presentationStyle="overFullScreen"> { + setHasSeenBadgeTutorial(); setShowBadgeTutorial(false); setShowModal(false); }} diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx index 5d5b695e..665ce0a0 100644 --- a/src/components/profile/ProfileHeader.tsx +++ b/src/components/profile/ProfileHeader.tsx @@ -1,4 +1,5 @@ -import React, {useLayoutEffect, useRef, useState} from 'react'; +import AsyncStorage from '@react-native-community/async-storage'; +import React, {useEffect, useLayoutEffect, useRef, useState} from 'react'; import {StyleSheet, Text, View} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {useSelector, useStore} from 'react-redux'; @@ -50,6 +51,17 @@ const ProfileHeader: React.FC = ({ const childRef = useRef(null); const [measure, setMeasure] = useState(null); const [showBadgeTutorial, setShowBadgeTutorial] = useState(false); + + useEffect(() => { + const getBadgeTutorialAsync = async () => { + const res = await AsyncStorage.getItem('hasSeenBadgeTutorial'); + if (res === 'true') { + setShowBadgeTutorial(false); + } + }; + getBadgeTutorialAsync(); + }); + useLayoutEffect(() => { setTimeout(() => { measureStuff(); -- cgit v1.2.3-70-g09d2 From 82d4c3d8d2c6eb6ab71b543933866bb4a8ed4ec3 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 23 Apr 2021 15:55:36 -0700 Subject: comments --- src/components/profile/BadgeTutorial.tsx | 83 ++++++++++++++++++++++++++ src/components/profile/BadgeTutorialScreen.tsx | 82 ------------------------- src/components/profile/ProfileHeader.tsx | 8 +-- src/utils/common.ts | 4 -- 4 files changed, 87 insertions(+), 90 deletions(-) create mode 100644 src/components/profile/BadgeTutorial.tsx delete mode 100644 src/components/profile/BadgeTutorialScreen.tsx (limited to 'src') diff --git a/src/components/profile/BadgeTutorial.tsx b/src/components/profile/BadgeTutorial.tsx new file mode 100644 index 00000000..a6cdc4dc --- /dev/null +++ b/src/components/profile/BadgeTutorial.tsx @@ -0,0 +1,83 @@ +import AsyncStorage from '@react-native-community/async-storage'; +import React, {useState} from 'react'; +import { + Image, + Modal, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; +import {PROFILE_CUTOUT_TOP_Y} from '../../constants'; +import {normalize} from '../../utils'; +import {UniversityIcon} from './'; +import {UniversityIconProps} from './UniversityIcon'; + +interface BadgeTutorialProps { + uniIconProps: UniversityIconProps; + setShowBadgeTutorial: Function; +} + +const BadgeTutorial: React.FC = ({ + uniIconProps, + setShowBadgeTutorial, +}) => { + const [showModal, setShowModal] = useState(true); + const {layout, university, university_class} = uniIconProps; + + const onTap = async () => { + await AsyncStorage.setItem('hasSeenBadgeTutorial', 'true'); + setShowBadgeTutorial(false); + setShowModal(false); + }; + return ( + + + + + Tap on the univeristy icon to edit your badges! + + + + + + + + + ); +}; +const styles = StyleSheet.create({ + viewWrapper: { + flex: 1, + backgroundColor: 'rgba(0, 0, 0, 0.5)', + }, + modalView: { + backgroundColor: '#fff', + }, + textContainerStyles: {top: '30%', width: '60%', alignSelf: 'center'}, + textStyles: { + color: 'white', + fontWeight: '700', + fontSize: normalize(20), + lineHeight: normalize(25), + textAlign: 'center', + }, +}); + +export default BadgeTutorial; diff --git a/src/components/profile/BadgeTutorialScreen.tsx b/src/components/profile/BadgeTutorialScreen.tsx deleted file mode 100644 index 30aced42..00000000 --- a/src/components/profile/BadgeTutorialScreen.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import React, {useState} from 'react'; -import { - Image, - Modal, - StyleSheet, - Text, - TouchableOpacity, - View, -} from 'react-native'; -import {PROFILE_CUTOUT_TOP_Y} from '../../constants'; -import {normalize, setHasSeenBadgeTutorial} from '../../utils'; -import {UniversityIcon} from './'; -import {UniversityIconProps} from './UniversityIcon'; - -interface BadgeTutorialScreenProps { - uniIconProps: UniversityIconProps; - setShowBadgeTutorial: Function; -} - -const BadgeTutorialScreen: React.FC = ({ - uniIconProps, - setShowBadgeTutorial, -}) => { - const [showModal, setShowModal] = useState(true); - const {layout, university, university_class} = uniIconProps; - return ( - - { - setHasSeenBadgeTutorial(); - setShowBadgeTutorial(false); - setShowModal(false); - }} - style={styles.viewWrapper}> - - - Tap on the univeristy icon to edit your badges! - - - - - - - - - ); -}; -const styles = StyleSheet.create({ - viewWrapper: { - flex: 1, - backgroundColor: 'rgba(0, 0, 0, 0.5)', - }, - modalView: { - backgroundColor: '#fff', - }, - textContainerStyles: {top: '30%', width: '60%', alignSelf: 'center'}, - textStyles: { - color: 'white', - fontWeight: '700', - fontSize: normalize(20), - lineHeight: normalize(25), - textAlign: 'center', - }, -}); - -export default BadgeTutorialScreen; diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx index 665ce0a0..e4f864f2 100644 --- a/src/components/profile/ProfileHeader.tsx +++ b/src/components/profile/ProfileHeader.tsx @@ -9,7 +9,7 @@ import {ScreenType} from '../../types'; import {hasSeenBadgeTutorial, normalize} from '../../utils'; import BadgeDetailView from '../common/BadgeDetailView'; import Avatar from './Avatar'; -import BadgeTutorialScreen from './BadgeTutorialScreen'; +import BadgeTutorial from './BadgeTutorial'; import FriendsCount from './FriendsCount'; import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer'; import UniversityIcon from './UniversityIcon'; @@ -64,11 +64,11 @@ const ProfileHeader: React.FC = ({ useLayoutEffect(() => { setTimeout(() => { - measureStuff(); + measureUniversityIcon(); }, 1000); }, []); - const measureStuff = async () => { + const measureUniversityIcon = async () => { const badgeSeen = await hasSeenBadgeTutorial(); if (!badgeSeen && containerRef.current && childRef.current) { childRef?.current?.measureLayout( @@ -97,7 +97,7 @@ const ProfileHeader: React.FC = ({ setIsOpen={setDrawerVisible} /> {userId === loggedInUserId && measure && ( - { return false; }; -export const setHasSeenBadgeTutorial = async () => { - await AsyncStorage.setItem('hasSeenBadgeTutorial', 'true'); -}; - export const getUniversityBadge = ( university: UniversityType, type: UniversityBadgeType, -- cgit v1.2.3-70-g09d2 From c43281c29c8454c0e7f43e5a19434a2d9f01ea8b Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 23 Apr 2021 16:07:17 -0700 Subject: incorrect data issue fixed --- src/components/common/BadgeDetailView.tsx | 18 +++++++++++------- src/components/profile/ProfileHeader.tsx | 2 ++ 2 files changed, 13 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/components/common/BadgeDetailView.tsx b/src/components/common/BadgeDetailView.tsx index 13613287..9dd64bfa 100644 --- a/src/components/common/BadgeDetailView.tsx +++ b/src/components/common/BadgeDetailView.tsx @@ -17,23 +17,27 @@ import {BADGE_GRADIENT_FIRST} from '../../constants'; import {BADGE_DATA} from '../../constants/badges'; import {getSuggestedPeopleProfile, removeBadgesService} from '../../services'; import {RootState} from '../../store/rootreducer'; -import {UniversityBadge, UniversityType} from '../../types'; +import {ScreenType, UniversityBadge, UniversityType} from '../../types'; import {getUniversityBadge, normalize} from '../../utils'; interface BadgeDetailModalProps { + userXId: string | undefined; + screenType: ScreenType; isEditable: boolean; setBadgeViewVisible: Function; userFullName?: string; } const BadgeDetailView: React.FC = ({ + userXId, + screenType, userFullName, isEditable = true, setBadgeViewVisible, }) => { - const { - user: {userId = ''}, - } = useSelector((state: RootState) => state.user); + const {user} = useSelector((state: RootState) => + userXId ? state.userX[screenType][userXId] : state.user, + ); const navigation = useNavigation(); const [selectedBadges, setSelectedBadges] = useState([]); const [isLoading, setIsLoading] = useState(true); @@ -42,8 +46,8 @@ const BadgeDetailView: React.FC = ({ ); const fetchBadges = async () => { - if (userId) { - const response = await getSuggestedPeopleProfile(userId); + if (user.userId) { + const response = await getSuggestedPeopleProfile(user.userId); if (response) { const data = response.badges; let extractedBadgeNames: UniversityBadge[] = []; @@ -83,7 +87,7 @@ const BadgeDetailView: React.FC = ({ const removeBadgeCell = async (badge: string) => { setIsLoading(true); - await removeBadgesService([badge], userId); + await removeBadgesService([badge], user.userId); fetchBadges(); }; diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx index e4f864f2..35ec0ea9 100644 --- a/src/components/profile/ProfileHeader.tsx +++ b/src/components/profile/ProfileHeader.tsx @@ -146,6 +146,8 @@ const ProfileHeader: React.FC = ({ {showBadgeView && (