[TMA-382] Edit profile screen (#121)

* added more icon

* a less fat icon

* and the actual icon asset

* bottom drawer skeleton done

* removed warning, better code

* a more completed skeleton done

* bottom drawer done!

* Added content container,  sent birthday picker props, minor styling

* differenciating defined and undefined birthdate in birthdate, datepicker

* removed restricting width for TaggDropDown

* Added edit profile screen to navigator stack

* Add EditProfile view, refresh profile view on save

* Removes unnecessary import

* Stores gender and birthdate as part of ProfileType

* Added gender, birthdate, isEditProfile to AuthProv

* Conditional view applied for edit profile button

* Includes discarded changes in previous merge- BD

* removed unused icon

* resolved scary warnings

* added icon to drawer

* Small fix

* minor code improvement

* sc

* fixed birthday bug

* custom gender updation fixed

* small change to birthday default value

* missed something

* cleaned up types! Warnings gone!

* fixed another gender picker bug

* fixed gender bug and cleaned up logic

* removed warning, MUCH better code now

Co-authored-by: Ivan Chen <ivan@thetaggid.com>
Co-authored-by: Ashm Walia <ashmwalia@outlook.com>

1 files changed, 32 insertions, 7 deletions

diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 6f11e806..62949746 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -1,10 +1,12 @@
-import React from 'react';
-
+import React, {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
+import {TAGG_DARK_BLUE} from '../../constants';
+import {AuthContext, ProfileContext} from '../../routes/';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import Avatar from './Avatar';
+import MoreInfoDrawer from './MoreInfoDrawer';
 import FollowCount from './FollowCount';
-import {View, Text, StyleSheet} from 'react-native';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {AuthContext, ProfileContext} from '../../routes/';
 
 type ProfileHeaderProps = {
   isProfileView: boolean;
@@ -22,8 +24,26 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
   } = isProfileView
     ? React.useContext(ProfileContext)
     : React.useContext(AuthContext);
+  const [drawerVisible, setDrawerVisible] = useState(false);
+
   return (
     <View style={styles.container}>
+      {!isProfileView && (
+        <>
+          <TouchableOpacity
+            style={styles.more}
+            onPress={() => {
+              setDrawerVisible(true);
+            }}>
+            <MoreIcon height={30} width={30} color={TAGG_DARK_BLUE} />
+          </TouchableOpacity>
+          <MoreInfoDrawer
+            isOpen={drawerVisible}
+            setIsOpen={setDrawerVisible}
+            isProfileView={isProfileView}
+          />
+        </>
+      )}
       <View style={styles.row}>
         <Avatar style={styles.avatar} isProfileView={isProfileView} />
         <View style={styles.header}>
@@ -51,8 +71,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
 const styles = StyleSheet.create({
   container: {
     top: SCREEN_HEIGHT / 2.4,
-    paddingHorizontal: SCREEN_WIDTH / 20,
-    marginBottom: SCREEN_HEIGHT / 10,
+    width: '100%',
     position: 'absolute',
   },
   row: {
@@ -76,6 +95,12 @@ const styles = StyleSheet.create({
   follows: {
     marginHorizontal: SCREEN_HEIGHT / 50,
   },
+  more: {
+    position: 'absolute',
+    right: '5%',
+    marginTop: '4%',
+    zIndex: 1,
+  },
 });
 
 export default ProfileHeader;