1 files changed, 78 insertions, 10 deletions

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;