From 713d169915a82edfcfe4b44622e3dce8c6adaf0c Mon Sep 17 00:00:00 2001 From: Shravya Ramesh <37447613+shravyaramesh@users.noreply.github.com> Date: Tue, 17 Nov 2020 18:06:14 -0800 Subject: [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 Co-authored-by: Ashm Walia --- src/components/profile/MoreInfoDrawer.tsx | 88 +++++++++++++++++++++++++++++++ src/components/profile/ProfileBody.tsx | 4 +- src/components/profile/ProfileHeader.tsx | 39 +++++++++++--- src/components/profile/ToggleButton.tsx | 5 +- src/components/profile/index.ts | 5 +- 5 files changed, 128 insertions(+), 13 deletions(-) create mode 100644 src/components/profile/MoreInfoDrawer.tsx (limited to 'src/components/profile') diff --git a/src/components/profile/MoreInfoDrawer.tsx b/src/components/profile/MoreInfoDrawer.tsx new file mode 100644 index 00000000..719c1894 --- /dev/null +++ b/src/components/profile/MoreInfoDrawer.tsx @@ -0,0 +1,88 @@ +import {useNavigation} from '@react-navigation/native'; +import React, {useContext} from 'react'; +import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'; +import {useSafeAreaInsets} from 'react-native-safe-area-context'; +import {TAGG_TEXT_LIGHT_BLUE} from '../../constants'; +import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import {AuthContext} from '../../routes'; +import {BottomDrawer} from '../common'; +import PersonOutline from '../../assets/ionicons/person-outline.svg'; + +interface MoreInfoDrawerProps { + isOpen: boolean; + setIsOpen: (visible: boolean) => void; + isProfileView: boolean; +} + +const MoreInfoDrawer: React.FC = (props) => { + const insets = useSafeAreaInsets(); + const initialSnapPosition = 160 + insets.bottom; + const navigation = useNavigation(); + const { + user: {userId, username}, + } = useContext(AuthContext); + + const goToEditProfile = () => { + navigation.push('EditProfile', { + userId: userId, + username: username, + }); + props.setIsOpen(false); + }; + + return ( + + + + + Edit Profile + + + props.setIsOpen(false)}> + {/* Just a placeholder "icon" for easier alignment */} + + Cancel + + + + ); +}; + +const styles = StyleSheet.create({ + panel: { + height: SCREEN_HEIGHT, + backgroundColor: 'white', + borderTopLeftRadius: 20, + borderTopRightRadius: 20, + }, + panelButton: { + height: 80, + flexDirection: 'row', + alignItems: 'center', + }, + panelButtonTitle: { + fontSize: 18, + fontWeight: 'bold', + color: 'black', + }, + icon: { + height: 25, + width: 25, + color: 'black', + marginLeft: SCREEN_WIDTH * 0.3, + marginRight: 25, + }, + panelButtonTitleCancel: { + fontSize: 18, + fontWeight: 'bold', + color: TAGG_TEXT_LIGHT_BLUE, + }, + divider: {height: 1, borderWidth: 1, borderColor: '#e7e7e7'}, +}); + +export default MoreInfoDrawer; diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx index db8c6e0b..c0253533 100644 --- a/src/components/profile/ProfileBody.tsx +++ b/src/components/profile/ProfileBody.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {StyleSheet, View, Text, LayoutChangeEvent} from 'react-native'; -import {TOGGLE_BUTTON_TYPE} from '../../constants'; +import {TAGG_DARK_BLUE, TOGGLE_BUTTON_TYPE} from '../../constants'; import {AuthContext, ProfileContext} from '../../routes/'; import ToggleButton from './ToggleButton'; @@ -80,7 +80,7 @@ const styles = StyleSheet.create({ }, website: { fontSize: 16, - color: '#4E699C', + color: TAGG_DARK_BLUE, marginBottom: 5, }, }); 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 = ({ } = isProfileView ? React.useContext(ProfileContext) : React.useContext(AuthContext); + const [drawerVisible, setDrawerVisible] = useState(false); + return ( + {!isProfileView && ( + <> + { + setDrawerVisible(true); + }}> + + + + + )} @@ -51,8 +71,7 @@ const ProfileHeader: React.FC = ({ 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; diff --git a/src/components/profile/ToggleButton.tsx b/src/components/profile/ToggleButton.tsx index ff14cdde..4c8cb5b9 100644 --- a/src/components/profile/ToggleButton.tsx +++ b/src/components/profile/ToggleButton.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import {StyleSheet, Text} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; +import { TAGG_TEXT_LIGHT_BLUE } from '../../constants'; import {getToggleButtonText, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; type ToggleButtonProps = { @@ -31,14 +32,14 @@ const styles = StyleSheet.create({ height: SCREEN_WIDTH * 0.1, borderRadius: 8, marginTop: '3%', - borderColor: '#698dd3', + borderColor: TAGG_TEXT_LIGHT_BLUE, backgroundColor: 'white', borderWidth: 3, marginHorizontal: '1%', }, text: { fontWeight: 'bold', - color: '#698dd3', + color: TAGG_TEXT_LIGHT_BLUE, }, }); export default ToggleButton; diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts index 2e9c23ea..0f57347b 100644 --- a/src/components/profile/index.ts +++ b/src/components/profile/index.ts @@ -3,5 +3,6 @@ export {default as Content} from './Content'; export {default as ProfileCutout} from './ProfileCutout'; export {default as ProfileBody} from './ProfileBody'; export {default as ProfileHeader} from './ProfileHeader'; -export {default as ProfilePreview} from '../profile/ProfilePreview'; -export {default as Followers} from '../profile/Followers'; +export {default as ProfilePreview} from './ProfilePreview'; +export {default as Followers} from './Followers'; +export {default as MoreInfoDrawer} from './MoreInfoDrawer'; -- cgit v1.2.3-70-g09d2