diff options
| author | Ivan Chen <ivan@tagg.id> | 2021-04-20 17:49:38 -0400 |
|---|---|---|
| committer | Ivan Chen <ivan@tagg.id> | 2021-04-20 17:49:38 -0400 |
| commit | c4e76811cae6cf14d5cc8daed9317f808087ed77 (patch) | |
| tree | c162da11dcf70f565d20a9d69071f0cbb5b077b3 /src/screens/profile | |
| parent | bae0136cb1939302b758249a1978251bd37aaee8 (diff) | |
linted
Diffstat (limited to 'src/screens/profile')
| -rw-r--r-- | src/screens/profile/EditProfile.tsx | 78 | ||||
| -rw-r--r-- | src/screens/profile/SocialMediaTaggs.tsx | 38 |
2 files changed, 52 insertions, 64 deletions
diff --git a/src/screens/profile/EditProfile.tsx b/src/screens/profile/EditProfile.tsx index 8b658043..36abb146 100644 --- a/src/screens/profile/EditProfile.tsx +++ b/src/screens/profile/EditProfile.tsx @@ -199,12 +199,12 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => { /* * Handles changes to the website field value and verifies the input by updating state and running a validation function. */ - const handleWebsiteUpdate = (website: string) => { - website = website.trim(); - let isValidWebsite: boolean = websiteRegex.test(website); + const handleWebsiteUpdate = (newWebsite: string) => { + newWebsite = newWebsite.trim(); + let isValidWebsite: boolean = websiteRegex.test(newWebsite); setForm({ ...form, - website, + website: newWebsite, isValidWebsite, }); }; @@ -212,27 +212,27 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => { /* * Handles changes to the bio field value and verifies the input by updating state and running a validation function. */ - const handleBioUpdate = (bio: string) => { - let isValidBio: boolean = bioRegex.test(bio); + const handleBioUpdate = (newBio: string) => { + let isValidBio: boolean = bioRegex.test(newBio); setForm({ ...form, - bio, + bio: newBio, isValidBio, }); }; - const handleGenderUpdate = (gender: string) => { - if (gender === 'custom') { - setForm({...form, gender}); + const handleGenderUpdate = (newGender: string) => { + if (newGender === 'custom') { + setForm({...form, gender: newGender}); setIsCustomGender(true); - } else if (gender === null) { + } else if (newGender === null) { // not doing anything will make the picker "bounce back" } else { setIsCustomGender(false); let isValidGender: boolean = true; setForm({ ...form, - gender, + gender: newGender, isValidGender, }); } @@ -383,8 +383,8 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => { headerRight: () => ( <Button title={'Save'} - buttonStyle={{backgroundColor: 'transparent', marginRight: 15}} - titleStyle={{fontWeight: 'bold'}} + buttonStyle={styles.headerRightButton} + titleStyle={styles.boldFont} onPress={() => { setLoading(true); handleSubmit().then(() => setLoading(false)); @@ -409,22 +409,13 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => { alwaysBounceVertical contentContainerStyle={{paddingBottom: SCREEN_HEIGHT / 15}}> <StatusBar barStyle="light-content" translucent={false} /> - <View - style={{ - position: 'relative', - alignSelf: 'center', - }}> + <View style={styles.relativeCenter}> <View> <View style={styles.profile}> <LargeProfilePic /> <SmallProfilePic /> </View> - <View - style={{ - position: 'relative', - width: 280, - alignSelf: 'center', - }}> + <View style={styles.relativeCenterWithWidth}> <TaggInput accessibilityHint="Enter a website." accessibilityLabel="Website input field." @@ -540,7 +531,7 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => { <SocialIcon social={'TikTok'} style={styles.icon} - screenType={ScreenType.Profile} + whiteRing={undefined} /> <View style={styles.taggInput}> <TaggInput @@ -631,20 +622,6 @@ const styles = StyleSheet.create({ width: 110, borderRadius: 55, }, - submitBtn: { - backgroundColor: '#8F01FF', - justifyContent: 'center', - alignItems: 'center', - width: 150, - height: 40, - borderRadius: 5, - marginTop: '5%', - }, - submitBtnLabel: { - fontSize: 16, - fontWeight: '500', - color: '#fff', - }, customGenderInput: { width: '100%', height: 40, @@ -666,7 +643,26 @@ const styles = StyleSheet.create({ aspectRatio: 1, flex: 1, }, - taggInput: {flex: 6.5, marginLeft: '3%'}, + taggInput: { + flex: 6.5, + marginLeft: '3%', + }, + headerRightButton: { + backgroundColor: 'transparent', + marginRight: 15, + }, + boldFont: { + fontWeight: 'bold', + }, + relativeCenter: { + position: 'relative', + alignSelf: 'center', + }, + relativeCenterWithWidth: { + position: 'relative', + width: 280, + alignSelf: 'center', + }, }); export default EditProfile; diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx index 466ba509..9186f187 100644 --- a/src/screens/profile/SocialMediaTaggs.tsx +++ b/src/screens/profile/SocialMediaTaggs.tsx @@ -3,6 +3,7 @@ import {StackNavigationProp} from '@react-navigation/stack'; import React, {useEffect, useState} from 'react'; import {ScrollView, StatusBar, StyleSheet, View} from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; +import {useSelector} from 'react-redux'; import { AvatarTitle, SocialMediaInfo, @@ -10,26 +11,17 @@ import { TaggPost, TwitterTaggPost, } from '../../components'; +import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; import {AVATAR_GRADIENT} from '../../constants'; -import {ProfileStackParams} from '../../routes'; -import { - SimplePostType, - TwitterPostType, - SocialAccountType, - ScreenType, -} from '../../types'; -import {AvatarHeaderHeight, SCREEN_HEIGHT} from '../../utils'; -import {useSelector} from 'react-redux'; +import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootReducer'; -import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; +import {SimplePostType, SocialAccountType, TwitterPostType} from '../../types'; +import {AvatarHeaderHeight, SCREEN_HEIGHT} from '../../utils'; -type SocialMediaTaggsRouteProp = RouteProp< - ProfileStackParams, - 'SocialMediaTaggs' ->; +type SocialMediaTaggsRouteProp = RouteProp<MainStackParams, 'SocialMediaTaggs'>; type SocialMediaTaggsNavigationProp = StackNavigationProp< - ProfileStackParams, + MainStackParams, 'SocialMediaTaggs' >; @@ -49,13 +41,13 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({ const { avatar, profile: {name}, - } = userXId - ? useSelector((state: RootState) => state.userX[screenType][userXId]) - : useSelector((state: RootState) => state.user); + } = useSelector((state: RootState) => + userXId ? state.userX[screenType][userXId] : state.user, + ); - const {socialAccounts} = userXId - ? useSelector((state: RootState) => state.userX[screenType][userXId]) - : useSelector((state: RootState) => state.socialAccounts); + const {socialAccounts} = useSelector((state: RootState) => + userXId ? state.userX[screenType][userXId] : state.socialAccounts, + ); useEffect(() => { const currentSocialData = {...socialAccounts[socialMediaType]}; @@ -67,7 +59,7 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({ useEffect(() => { navigation.setOptions({ headerTitle: () => { - return <AvatarTitle avatar={avatar} />; + return <AvatarTitle avatar={avatar ?? null} />; }, }); }, [avatar, navigation]); @@ -114,7 +106,7 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({ <TabsGradient /> </View> ) : ( - <TaggLoadingIndicator color="white" /> + <TaggLoadingIndicator /> )} </LinearGradient> ); |
