aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-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/common/BadgeDetailView.tsx24
-rw-r--r--src/components/messages/ChatInput.tsx3
-rw-r--r--src/components/profile/BadgeTutorial.tsx83
-rw-r--r--src/components/profile/ProfileHeader.tsx88
-rw-r--r--src/components/profile/UniversityIcon.tsx3
-rw-r--r--src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx23
-rw-r--r--src/utils/common.ts7
10 files changed, 186 insertions, 45 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/common/BadgeDetailView.tsx b/src/components/common/BadgeDetailView.tsx
index f3e92bd4..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;
- userName?: string;
+ userFullName?: string;
}
const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
- userName,
+ 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<UniversityBadge[]>([]);
const [isLoading, setIsLoading] = useState(true);
@@ -42,8 +46,8 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
);
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<BadgeDetailModalProps> = ({
const removeBadgeCell = async (badge: string) => {
setIsLoading(true);
- await removeBadgesService([badge], userId);
+ await removeBadgesService([badge], user.userId);
fetchBadges();
};
@@ -146,7 +150,7 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
};
const modalHeader = () => {
- const heading = isEditable ? 'Edit your badges!' : userName;
+ 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/messages/ChatInput.tsx b/src/components/messages/ChatInput.tsx
index a4ed675b..a6e5c458 100644
--- a/src/components/messages/ChatInput.tsx
+++ b/src/components/messages/ChatInput.tsx
@@ -131,11 +131,10 @@ const styles = StyleSheet.create({
actionButtons: {
height: normalize(30) + 10,
flexDirection: 'row',
- justifyContent: 'space-evenly',
+ justifyContent: 'flex-end',
alignItems: 'center',
marginRight: 10,
width: 50,
- // width: 100,
alignSelf: 'flex-end',
},
});
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<BadgeTutorialProps> = ({
+ 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 (
+ <Modal
+ animationType="fade"
+ transparent
+ visible={showModal}
+ presentationStyle="overFullScreen">
+ <TouchableOpacity onPress={onTap} 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 BadgeTutorial;
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 9e11b8d5..35ec0ea9 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -1,13 +1,15 @@
-import React, {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} 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 BadgeTutorial from './BadgeTutorial';
import FriendsCount from './FriendsCount';
import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer';
import UniversityIcon from './UniversityIcon';
@@ -29,7 +31,7 @@ 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,
);
@@ -37,12 +39,55 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
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(' ')];
+ const containerRef = useRef(null);
+ 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(() => {
+ measureUniversityIcon();
+ }, 1000);
+ }, []);
+
+ const measureUniversityIcon = 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 +96,16 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
userXName={userXName}
setIsOpen={setDrawerVisible}
/>
-
+ {userId === loggedInUserId && measure && (
+ <BadgeTutorial
+ uniIconProps={{
+ university: university,
+ university_class: university_class,
+ layout: measure,
+ }}
+ setShowBadgeTutorial={setShowBadgeTutorial}
+ />
+ )}
<View style={styles.row}>
<Avatar
style={styles.avatar}
@@ -67,6 +121,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
<Text style={styles.name}>{lastName}</Text>
</View>
)}
+
<View style={styles.friendsAndUniversity}>
<FriendsCount screenType={screenType} userXId={userXId} />
<TouchableOpacity
@@ -75,14 +130,26 @@ 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
+ userXId={userXId}
+ screenType={screenType}
isEditable={userXName === username}
- userName={name}
+ userFullName={name}
setBadgeViewVisible={setBadgeViewVisible}
/>
)}
@@ -126,6 +193,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..af5fd579 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';
@@ -14,9 +13,7 @@ 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 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 +49,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 +156,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..ce4ab7d1 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -138,6 +138,13 @@ export const extractContacts = async () => {
return retrievedContacts;
};
+export const hasSeenBadgeTutorial = async () => {
+ if ((await AsyncStorage.getItem('hasSeenBadgeTutorial')) === 'true') {
+ return true;
+ }
+ return false;
+};
+
export const getUniversityBadge = (
university: UniversityType,
type: UniversityBadgeType,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 20:21:24 +0000