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