diff --git a/src/App.tsx b/src/App.tsx index 0ff5859..e970986 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,4 @@ import React, {useEffect, Fragment} from 'react'; - -import {View, Text} from 'react-native'; import {NavigationContainer} from '@react-navigation/native'; import {Provider, useSelector} from 'react-redux'; @@ -78,6 +76,7 @@ const MainComponent = () => { const currentAppStatus = useSelector( (state: RootState) => state.nonSaveVariables.appStatus, ); + return ( diff --git a/src/components/MyInput.tsx b/src/components/MyInput.tsx index a56077f..6c12d2d 100644 --- a/src/components/MyInput.tsx +++ b/src/components/MyInput.tsx @@ -5,7 +5,7 @@ interface MyIconInputProps { text: string; iconName: string; keyboardType?: KeyboardTypeOptions; - secureTextEntry?: boolean | undefined; + secureTextEntry?: boolean; value?: string; onChangeText?: (text: string) => void; disableContainer?: boolean; @@ -29,13 +29,12 @@ export function MyIconInput({text, iconName, keyboardType, secureTextEntry, valu backgroundColor: '#212137', height: 40, borderRadius: 10, - paddingLeft: 10, + paddingLeft: 10 }} keyboardType={keyboardType} secureTextEntry={secureTextEntry} value={value} onChangeText={onChangeText} - /> diff --git a/src/components/MyScreenContainer.tsx b/src/components/MyScreenContainer.tsx index 5214c88..d891c53 100644 --- a/src/components/MyScreenContainer.tsx +++ b/src/components/MyScreenContainer.tsx @@ -17,25 +17,15 @@ export function MyScreenContainer({ flex: 1, paddingLeft: 20, paddingRight: 20, - } - - const ScreenView = () => ( - - {children} - - ); + }; if (scrollView) { return ( - + {children} ); } - return ; + return {children}; } diff --git a/src/navigation/registration/registration.tsx b/src/navigation/registration/registration.tsx index 95fe79d..4ae4453 100644 --- a/src/navigation/registration/registration.tsx +++ b/src/navigation/registration/registration.tsx @@ -20,7 +20,7 @@ import AppleLogo from '@assets/apple-logo.png'; import Logo from '@assets/logo.png'; import {MyDividerWithText} from '@components/MyDivider'; -import {MyButton, MyImageButton} from '@components/MyButton'; +import {MyButton, MyIconButton, MyImageButton} from '@components/MyButton'; import {MyClickableText} from '@components/MyClickableText'; import {OpenURL} from '@helper/linking'; import {Constants} from '@utils/utils'; diff --git a/src/navigation/tabs/main/ProfileTab.tsx b/src/navigation/tabs/main/ProfileTab.tsx index 17b1385..d722d92 100644 --- a/src/navigation/tabs/main/ProfileTab.tsx +++ b/src/navigation/tabs/main/ProfileTab.tsx @@ -74,7 +74,7 @@ export default function ProfileTab() { name="UpdateUsername" options={{ animation: 'slide_from_right', - title: 'Update Account Name', + title: 'Update Username', headerShown: true, headerStyle: {backgroundColor: '#212137'}, headerTitleAlign: 'center', diff --git a/src/pages/profile/profile.tsx b/src/pages/profile/profile.tsx index ac42909..ff3177f 100644 --- a/src/pages/profile/profile.tsx +++ b/src/pages/profile/profile.tsx @@ -1,5 +1,5 @@ import {MyScreenContainer} from '@components/MyScreenContainer'; -import {Image, ScrollView, TouchableOpacity} from 'react-native'; +import {Image, ScrollView, TextInput, TouchableOpacity} from 'react-native'; import {Text, View} from 'react-native'; import Avatar from '@assets/profile.png'; @@ -10,7 +10,10 @@ import {useNavigation} from '@react-navigation/native'; import {ProfileScreenNavigationProp} from '@navigation/tabs/main/ProfileTab'; import {MyIconInput} from '@components/MyInput'; import {useEffect, useState} from 'react'; -import {RootScreenNavigationProp} from '@navigation/navigation'; +import { + RootScreenNavigationProp, + RootStackNavigatorParamList, +} from '@navigation/navigation'; function UserAvatar() { return ( @@ -80,6 +83,8 @@ function Statistic({value, title}: StatisticProps) { export function ProfileSettings() { const navigation = useNavigation(); + const rootNavigation = useNavigation(); + return ( navigation.navigate('About')} /> - + + rootNavigation.navigate('Registration', {screen: 'LoginPreview'}) + } + /> @@ -208,16 +219,17 @@ export function UpdateUsername() { const [newUsername, setNewUsername] = useState(username); useEffect(() => { - const changed = username === newUsername; + const changed = username !== newUsername; navigation.setOptions({ - headerRight: () => ( - navigation.goBack()} - disabled={changed}> - - - ), + headerRight: () => + changed ? ( + navigation.goBack()}> + + + ) : ( + <> + ), }); }, [navigation, newUsername]); @@ -227,7 +239,9 @@ export function UpdateUsername() { iconName="person" text="USERNAME" value={newUsername} - onChangeText={text => setNewUsername(text)} + onChangeText={text => { + setNewUsername(text); + }} /> You can use a-z, 0-9 and underscores. Minimum length is 5 characters. @@ -238,18 +252,31 @@ export function UpdateUsername() { export function UpdatePassword() { const navigation = useNavigation(); + const [currentPassword, setCurrentPassword] = useState(''); + const [newPassword, setNewPassword] = useState(''); + const [repeatNewPassword, setRepeatNewPassword] = useState(''); + useEffect(() => { + const passwordChanged = + currentPassword.length > 0 && + newPassword.length > 0 && + repeatNewPassword.length > 0 && + newPassword === repeatNewPassword; + navigation.setOptions({ - headerRight: () => ( - - navigation.navigate('Registration', {screen: 'LoginPreview'}) - }> - - - ), + headerRight: () => + passwordChanged ? ( + + navigation.navigate('Registration', {screen: 'LoginPreview'}) + }> + + + ) : ( + <> + ), }); - }, [navigation]); + }, [navigation, currentPassword, newPassword, repeatNewPassword]); return ( @@ -263,21 +290,24 @@ export function UpdatePassword() { iconName="lock" text="CURRENT PASSWORD" secureTextEntry={true} - value="123456" + value={currentPassword} + onChangeText={text => setCurrentPassword(text)} disableContainer /> setNewPassword(text)} disableContainer /> setRepeatNewPassword(text)} disableContainer />