frontend: wip user profile editing
Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago
6a9fe5b77720fa5162524137e887503e8f7fdc71 Browse filesParents
248e1c8Changed files
3
Additions
+88
Deletions
-12
frontend/app/auth/login.tsx
1 1
import React, { useState } from 'react';
2 2
import {
3 3
View,
4 4
Text,
5 5
StyleSheet,
11 11
import { Link, router } from 'expo-router';
12 12
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('');
19 20
const [password, setPassword] = useState('');
20 21
const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
168 169
},
169 170
footerText: {
170 171
fontSize: 14,
171 172
},
172 173
});
frontend/app/profile.tsx
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,
14 6
ScrollView,
15 7
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}
46 105
>
47 106
<ScrollView
70 129
type="text"
71 130
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
78 146
label="Nova senha"
79 147
type="password"
154 222
},
155 223
footerText: {
156 224
fontSize: 14,
157 225
},
158 226
});
frontend/lib/api.ts
1 1
import * as SecureStore from 'expo-secure-store';
2 2
3 3
const API_BASE_URL = process.env.EXPO_PUBLIC_API_BASE_URL;
4 4
const TOKEN_KEY = process.env.EXPO_PUBLIC_TOKEN_KEY; // Gary B.B Coleman fucking slaps
5 5
122 122
123 123
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();