On Press Tutorial

1 files changed, 51 insertions, 7 deletions

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<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();
+    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 (
-    <View style={styles.container}>
+    <View ref={containerRef} style={styles.container}>
       <ProfileMoreInfoDrawer
         isOpen={drawerVisible}
         isBlocked={isBlocked}
@@ -49,7 +79,13 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
         userXName={userXName}
         setIsOpen={setDrawerVisible}
       />
-
+      {measure && (
+        <BadgeTutorialScreen
+          university={university}
+          university_class={university_class}
+          layout={measure}
+        />
+      )}
       <View style={styles.row}>
         <Avatar
           style={styles.avatar}
@@ -65,12 +101,20 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
               <Text style={styles.name}>{lastName}</Text>
             </View>
           )}
+
           <View style={styles.friendsAndUniversity}>
             <FriendsCount screenType={screenType} userXId={userXId} />
+
             <TouchableOpacity onPress={() => setBadgeViewVisible(true)}>
-              <UniversityIcon
-                {...{university, university_class, needsShadow: true}}
-              />
+              <View ref={childRef}>
+                <UniversityIcon
+                  {...{
+                    university,
+                    university_class,
+                    needsShadow: true,
+                  }}
+                />
+              </View>
             </TouchableOpacity>
             {showBadgeView && (
               <BadgeDetailView