eletrotupi / tcc/ commit / 9c32546

frontend: make profile page a bit more connected with the rest of the UI

Also add avatar editing cap
Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago 9c325461c9a095ff81f4e5e2e53c8623c83aba91 Browse files
Parents 316a81f
Changed files
1
Additions
+86
Deletions
-48
frontend/app/profile.tsx modified+86 -48
frontend/app/profile.tsx
1 1 
import { useState, useEffect } from 'react';
2 2 
import {
3 3 
  View,
4 4 
  Text,
5 5 
  StyleSheet,
16 16 
import { SafeAreaView } from 'react-native-safe-area-context';
17 17 
import { useThemeColor } from '@/hooks/use-theme-color';
18 18 
import { Button, Input } from '@/components/ui';
19 19 
import { useAuth } from '@/context/AuthContext';
20 20 
import { apiClient } from '@/lib/api'
21 + 
import { Card } from '@/components/ui/Cards';
22 + 
import AvatarUpload  from '@/components/ui/AvatarUpload';
23 + 
import { Typography, Spacing, Colors } from '@/constants/theme';
21 24
22 25 
export default function Profile() {
23 26 
  const { user, updateAuthUser } = useAuth();
24 27 
  const [firstName, setFirstName] = useState(user.firstName);
25 28 
  const [lastName, setLastName] = useState(user.lastName);
35 38
36 39 
  useEffect(() => {
37 40 
    setFirstName(user.firstName)
38 41 
    setLastName(user.lastName)
39 42 
    setEmail(user.email)
43 +
44 + 
    console.log("User@profile", user);
40 45 
  }, [user])
41 46
42 47 
  const backgroundColor = useThemeColor({}, 'background');
43 48 
  const textColor = useThemeColor({}, 'text');
44 49
104 109 
      console.error("[PROFILE]", error)
105 110 
      Alert.alert('Erro: ', 'Falha ao tentar atualizar o usuário');
106 111 
    }
107 112 
  }
108 113
114 + 
  const onChangeAvatar = (userData) => {
115 + 
    const { id, avatarKey, avatarURL, firstName, lastName, email } = userData;
116 +
117 + 
    updateAuthUser({
118 + 
      id,
119 + 
      avatarKey,
120 + 
      avatarURL,
121 + 
      firstName,
122 + 
      lastName,
123 + 
      email
124 + 
    });
125 + 
  }
126 +
109 127 
  return (
110 128 
    <SafeAreaView style={[styles.container, { backgroundColor }]}>
111 129 
      <StatusBar style={'dark'} />
112 130 
      <KeyboardAvoidingView
113 131 
        behavior='height'
115 133 
      >
116 134 
        <ScrollView
117 135 
          contentContainerStyle={styles.scrollContainer}
118 136 
          showsVerticalScrollIndicator={false}
119 137 
        >
120 - 
          <View style={styles.header}>
121 - 
            <Text style={[styles.title, { color: textColor }]}>Edite o seu perfil</Text>
122 - 
            <Text style={[styles.subtitle, { color: textColor, opacity: 0.7 }]}>
123 - 
              Altere suas configurações
124 - 
            </Text>
125 - 
          </View>
138 + 
          <AvatarUpload
139 + 
            currentAvatar={user.avatarURL}
140 + 
            onUploadSuccess={onChangeAvatar}
141 + 
            onRemoveSuccess={onChangeAvatar} />
126 142
127 143 
          <View style={styles.form}>
128 - 
            <Input
129 - 
              label="Primeiro Nome"
130 - 
              type="text"
131 - 
              value={firstName}
132 - 
              onChangeText={setFirstName}
133 - 
              placeholder="Qual seu nome?"
134 - 
              error={errors.firstName}
135 - 
            />
144 + 
            <Card style={styles.cardBlock}>
145 + 
              <Input
146 + 
                label="Primeiro Nome"
147 + 
                type="text"
148 + 
                value={firstName}
149 + 
                onChangeText={setFirstName}
150 + 
                placeholder="Qual seu nome?"
151 + 
                variant="darkGhost"
152 + 
                error={errors.firstName}
153 + 
              />
136 154
137 - 
            <Input
138 - 
              label="Sobrenome"
139 - 
              type="text"
140 - 
              value={lastName}
141 - 
              onChangeText={setLastName}
142 - 
              placeholder="Qual seu sobrenome?"
143 - 
              error={errors.lastName}
144 - 
            />
155 + 
              <Input
156 + 
                label="Sobrenome"
157 + 
                type="text"
158 + 
                value={lastName}
159 + 
                variant="darkGhost"
160 + 
                onChangeText={setLastName}
161 + 
                placeholder="Qual seu sobrenome?"
162 + 
                error={errors.lastName}
163 + 
              />
164 + 
            </Card>
145 165
146 - 
            <Input
147 - 
              label="Email"
148 - 
              type="text"
149 - 
              value={email}
150 - 
              onChangeText={setEmail}
151 - 
              placeholder="Qual seu email?"
152 - 
              error={errors.email}
153 - 
            />
166 + 
            <Card style={styles.cardBlock}>
167 + 
              <Input
168 + 
                label="Email"
169 + 
                type="text"
170 + 
                value={email}
171 + 
                variant="darkGhost"
172 + 
                onChangeText={setEmail}
173 + 
                placeholder="Qual seu email?"
174 + 
                error={errors.email}
175 + 
              />
176 + 
            </Card>
154 177
155 - 
            <Input
156 - 
              label="Nova senha"
157 - 
              type="password"
158 - 
              value={password}
159 - 
              onChangeText={setPassword}
160 - 
              placeholder="Digite uma nova senha"
161 - 
              error={errors.password}
162 - 
              showPasswordToggle
163 - 
            />
178 + 
            <Card style={styles.cardBlock}>
179 + 
              <Input
180 + 
                label="Nova senha"
181 + 
                type="password"
182 + 
                value={password}
183 + 
                onChangeText={setPassword}
184 + 
                placeholder="Digite uma nova senha"
185 + 
                error={errors.password}
186 + 
                variant="darkGhost"
187 + 
                showPasswordToggle
188 + 
              />
164 189
165 - 
            <Input
166 - 
              label="Confirmar nova senha"
167 - 
              type="password"
168 - 
              value={confirmPassword}
169 - 
              onChangeText={setConfirmPassword}
170 - 
              placeholder="Confirme a nova senha"
171 - 
              error={errors.confirmPassword}
172 - 
              showPasswordToggle
173 - 
            />
190 + 
              <Input
191 + 
                label="Confirmar nova senha"
192 + 
                type="password"
193 + 
                value={confirmPassword}
194 + 
                onChangeText={setConfirmPassword}
195 + 
                placeholder="Confirme a nova senha"
196 + 
                error={errors.confirmPassword}
197 + 
                variant="darkGhost"
198 + 
                showPasswordToggle
199 + 
              />
200 +
201 + 
              <Text style={styles.cardBlockHint}>
202 + 
                Preencha apenas se quiser mudar a sua senha
203 + 
              </Text>
204 + 
            </Card>
174 205
175 206 
            <Button
176 207 
              title="Atualizar perfil"
177 208 
              onPress={handleUpdate}
178 209 
              loading={loading}
231 262 
    paddingBottom: 20,
232 263 
  },
233 264 
  footerText: {
234 265 
    fontSize: 14,
235 266 
  },
267 + 
  cardBlock: {
268 + 
    padding: Spacing.cardGap
269 + 
  },
270 + 
  cardBlockHint: {
271 + 
    ...Typography.cardHint,
272 + 
    color: Colors.light.textSecondary
273 + 
  }
236 274 
});