aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/assets/images/badgeTutorial.pngbin0 -> 6000 bytes
-rw-r--r--src/assets/images/badgeTutorial@2x.pngbin0 -> 10370 bytes
-rw-r--r--src/assets/images/badgeTutorial@3x.pngbin0 -> 16766 bytes
-rw-r--r--src/components/messages/ChatInput.tsx6
-rw-r--r--src/components/profile/BadgeTutorialScreen.tsx81
-rw-r--r--src/components/profile/ProfileHeader.tsx71
-rw-r--r--src/components/profile/UniversityIcon.tsx3
-rw-r--r--src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx22
-rw-r--r--src/utils/common.ts11
9 files changed, 160 insertions, 34 deletions
diff --git a/src/assets/images/badgeTutorial.png b/src/assets/images/badgeTutorial.png
new file mode 100644
index 00000000..0e900c3b
--- /dev/null
+++ b/src/assets/images/badgeTutorial.png
Binary files differ
diff --git a/src/assets/images/badgeTutorial@2x.png b/src/assets/images/badgeTutorial@2x.png
new file mode 100644
index 00000000..dfdc946a
--- /dev/null
+++ b/src/assets/images/badgeTutorial@2x.png
Binary files differ
diff --git a/src/assets/images/badgeTutorial@3x.png b/src/assets/images/badgeTutorial@3x.png
new file mode 100644
index 00000000..10b92360
--- /dev/null
+++ b/src/assets/images/badgeTutorial@3x.png
Binary files differ
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')}
/>
</TouchableOpacity> */}
- <TouchableOpacity onPress={() => setText('/')}>
+ {/* <TouchableOpacity onPress={() => setText('/')}>
<Image
style={{width: normalize(23), height: normalize(23)}}
source={require('../../assets/images/gif.png')}
/>
- </TouchableOpacity>
+ </TouchableOpacity> */}
<ChatInputSubmit onPress={sendMessage} outlined={text.length === 0} />
</View>
</View>
@@ -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/BadgeTutorialScreen.tsx b/src/components/profile/BadgeTutorialScreen.tsx
new file mode 100644
index 00000000..45831fc6
--- /dev/null
+++ b/src/components/profile/BadgeTutorialScreen.tsx
@@ -0,0 +1,81 @@
+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 BadgeTutorialScreenProps {
+ uniIconProps: UniversityIconProps;
+ setShowBadgeTutorial: Function;
+}
+
+const BadgeTutorialScreen: React.FC<BadgeTutorialScreenProps> = ({
+ uniIconProps,
+ setShowBadgeTutorial,
+}) => {
+ const [showModal, setShowModal] = useState(true);
+ const {layout, university, university_class} = uniIconProps;
+ return (
+ <Modal
+ animationType="fade"
+ transparent
+ visible={showModal}
+ presentationStyle="overFullScreen">
+ <TouchableOpacity
+ onPress={() => {
+ setShowBadgeTutorial(false);
+ setShowModal(false);
+ }}
+ style={styles.viewWrapper}>
+ <View style={styles.textContainerStyles}>
+ <Text style={styles.textStyles}>
+ Tap on the univeristy icon to edit your badges!
+ </Text>
+ </View>
+ <View
+ style={{
+ left: layout.left,
+ top: PROFILE_CUTOUT_TOP_Y * 1.02 - layout.top,
+ width: layout.width,
+ height: layout.height,
+ }}>
+ <UniversityIcon
+ {...{
+ university,
+ university_class,
+ needsShadow: true,
+ }}
+ />
+ <Image source={require('../../assets/images/badgeTutorial.png')} />
+ </View>
+ </TouchableOpacity>
+ </Modal>
+ );
+};
+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 494b33bd..82eda258 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 {useSelector, useStore} 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';
@@ -29,11 +30,14 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
}) => {
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);
@@ -41,8 +45,36 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
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();
+ 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 (
- <View style={styles.container}>
+ <View ref={containerRef} style={styles.container}>
<ProfileMoreInfoDrawer
isOpen={drawerVisible}
isBlocked={isBlocked}
@@ -51,7 +83,16 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
userXName={userXName}
setIsOpen={setDrawerVisible}
/>
-
+ {userId === loggedInUserId && measure && (
+ <BadgeTutorialScreen
+ uniIconProps={{
+ university: university,
+ university_class: university_class,
+ layout: measure,
+ }}
+ setShowBadgeTutorial={setShowBadgeTutorial}
+ />
+ )}
<View style={styles.row}>
<Avatar
style={styles.avatar}
@@ -67,6 +108,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
<Text style={styles.name}>{lastName}</Text>
</View>
)}
+
<View style={styles.friendsAndUniversity}>
<FriendsCount screenType={screenType} userXId={userXId} />
<TouchableOpacity
@@ -75,9 +117,19 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
setBadgeViewVisible(true);
}
}}>
- <UniversityIcon
- {...{university, university_class, needsShadow: true}}
- />
+ <View ref={childRef}>
+ {userId === loggedInUserId && showBadgeTutorial === true ? (
+ <View style={styles.emptyContainer} />
+ ) : (
+ <UniversityIcon
+ {...{
+ university,
+ university_class,
+ needsShadow: true,
+ }}
+ />
+ )}
+ </View>
</TouchableOpacity>
{showBadgeView && (
<BadgeDetailView
@@ -126,6 +178,7 @@ const styles = StyleSheet.create({
width: '100%',
height: 50,
},
+ emptyContainer: {backgroundColor: 'white', width: 50, height: 50},
});
export default ProfileHeader;
diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx
index cfe1366d..560a771e 100644
--- a/src/components/profile/UniversityIcon.tsx
+++ b/src/components/profile/UniversityIcon.tsx
@@ -1,14 +1,15 @@
import React from 'react';
import {ImageStyle, StyleProp, StyleSheet, ViewProps} from 'react-native';
import {Image, Text, View} from 'react-native-animatable';
-import {getUniversityBadge, getUniversityClass, normalize} from '../../utils';
import {UniversityType} from '../../types';
+import {getUniversityBadge, getUniversityClass, normalize} from '../../utils';
export interface UniversityIconProps extends ViewProps {
university: UniversityType;
university_class?: number;
imageStyle?: StyleProp<ImageStyle>;
needsShadow?: boolean;
+ layout?: object | null;
}
/**
diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
index 92a7e6c5..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<SuggestedPeopleUploadPictureS
const navigation = useNavigation();
const {
user: {userId: loggedInUserId},
- profile: {university = UniversityType.Empty},
} = useSelector((state: RootState) => state.user);
useEffect(() => {
@@ -160,23 +157,6 @@ const SuggestedPeopleUploadPictureScreen: React.FC<SuggestedPeopleUploadPictureS
</ImageBackground>
</TouchableOpacity>
)}
- {editing && (
- <TouchableOpacity
- onPress={() => {
- navigation.navigate('BadgeSelection', {editing: true});
- }}>
- <View style={styles.editBadgesMainContainer}>
- <View style={styles.editBadgesSubContainer}>
- <UniversityIcon
- university={university}
- imageStyle={{width: normalize(16), height: normalize(20)}}
- />
- <Text style={styles.editBadgesText}>Edit Badges</Text>
- </View>
- <FrontArrow style={styles.rightArrow} />
- </View>
- </TouchableOpacity>
- )}
{image && (
<TaggSquareButton
onPress={uploadImage}
diff --git a/src/utils/common.ts b/src/utils/common.ts
index cec0e1b5..868d7b8e 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -138,6 +138,17 @@ export const extractContacts = async () => {
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,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 11:51:15 +0000