frontend: wip user profile editing
Parents:
248e1c83 file(s) changed
- frontend/app/auth/login.tsx +1 -0
- frontend/app/profile.tsx +80 -12
- frontend/lib/api.ts +7 -0
frontend/app/auth/login.tsx
@@ -13,6 +13,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
13 13 import { useThemeColor } from '@/hooks/use-theme-color';
14 14 import { Button, Input } from '@/components/ui';
15 15 import { useAuth } from '@/context/AuthContext';
16 + import { apiClient, User } from '@/lib/api';
16 17
17 18 export default function LoginScreen() {
18 19 const [email, setEmail] = useState('');
frontend/app/profile.tsx
@@ -1,13 +1,5 @@
1 1 import { useState, useEffect } from 'react';
2 2 import {
3 - ThemedView
4 - } from '@/components/ui/themed-view'
5 -
6 - import {
7 - ThemedText
8 - } from '@/components/ui/themed-text'
9 -
10 - import {
11 3 View,
12 4 Text,
13 5 StyleSheet,
@@ -16,30 +8,97 @@ KeyboardAvoidingView,
16 8 Platform,
17 9 Alert,
18 10 } from 'react-native';
11 +
12 + import { ThemedView } from '@/components/ui/themed-view'
13 + import { ThemedText } from '@/components/ui/themed-text'
19 14 import { Link, useLocalSearchParams, router } from 'expo-router';
15 + import { StatusBar } from 'expo-status-bar';
20 16 import { SafeAreaView } from 'react-native-safe-area-context';
21 17 import { useThemeColor } from '@/hooks/use-theme-color';
22 18 import { Button, Input } from '@/components/ui';
19 + import { useAuth } from '@/context/AuthContext';
23 20
24 21 export default function Profile() {
25 - const [firstName, setFirstName] = useState();
26 - const [lastName, setLastName] = useState();
22 + const { user } = useAuth();
23 + const [firstName, setFirstName] = useState(user.firstName);
24 + const [lastName, setLastName] = useState(user.lastName);
25 + const [email, setEmail] = useState(user.email);
27 26 const [password, setPassword] = useState();
28 27 const [confirmPassword, setConfirmPassword] = useState();
29 - const [email, setEmail] = useState();
30 28 const [loading, setLoading] = useState(false);
31 29 const [errors, setErrors] = useState<{
30 + firstName?: string;
32 31 password?: string;
33 32 confirmPassword?: string;
34 33 }>({});
35 34
35 + useEffect(() => {
36 + setFirstName(user.firstName)
37 + setLastName(user.lastName)
38 + setEmail(user.email)
39 +
40 + console.log(user);
41 + }, [user])
42 +
36 43 const backgroundColor = useThemeColor({}, 'background');
37 44 const textColor = useThemeColor({}, 'text');
38 45
39 - const handleUpdate = () => {}
46 + const validateForm = () => {
47 + const newErrors: {
48 + firstName?: string;
49 + email?: string;
50 + password?: string;
51 + confirmPassword?: string
52 + } = {};
53 +
54 + if (password) {
55 + if (!confirmPassword) {
56 + newErrors.confirmPassword = 'Precisa confirmar a senha';
57 + } else {
58 + if (password == confirmPassword) {
59 + newErrors.confirmPassword = "Senhas não conferem";
60 + }
61 + }
62 + } else if (!/\S+@\S+\.\S+/.test(email)) {
63 + newErrors.email = 'Por favor, use um email válido';
64 + }
65 +
66 + if (!firstName) {
67 + newErrors.firstName = 'É necessário ter um nome';
68 + }
69 +
70 + setErrors(newErrors);
71 +
72 + return Object.keys(newErrors).length === 0;
73 + }
74 +
75 + const handleUpdate = async () => {
76 + if (!validateForm()) return;
77 +
78 + const data = {
79 + };
80 +
81 + data.firstName = firstName
82 + data.lastName = lastName
83 + data.email = email
84 +
85 + if (password) {
86 + data.password = password
87 + }
88 +
89 + console.log("sending the update")
90 +
91 + try {
92 + await updateUser({ firstName, lastName, email, password });
93 + router.replace('/(tabs)');
94 + } catch (error: any) {
95 + Alert.alert('Erro: ', 'Falha ao fazer login');
96 + }
97 + }
40 98
41 99 return (
42 100 <SafeAreaView style={[styles.container, { backgroundColor }]}>
101 + <StatusBar style={'dark'} />
43 102 <KeyboardAvoidingView
44 103 behavior='height'
45 104 style={styles.keyboardView}
@@ -72,6 +131,15 @@ value={lastName}
72 131 onChangeText={setLastName}
73 132 placeholder="Qual seu sobrenome?"
74 133 error={errors.lastName}
134 + />
135 +
136 + <Input
137 + label="Email"
138 + type="text"
139 + value={email}
140 + onChangeText={setEmail}
141 + placeholder="Qual seu email?"
142 + error={errors.email}
75 143 />
76 144
77 145 <Input
frontend/lib/api.ts
@@ -124,6 +124,13 @@ async getStoredAuthData(): Promise<{ token: string | null }> {
124 124 const token = await this.getStoredToken();
125 125 return { token };
126 126 }
127 +
128 + async updateUser(user): Promise<void> {
129 + return await this.request(`/users/${user.id}`, {
130 + method: 'PUT',
131 + body: JSON.stringify({ user })
132 + })
133 + }
127 134 }
128 135
129 136 export const apiClient = new ApiClient();