From da533abd864eaab3d59556a56f830842e6622557 Mon Sep 17 00:00:00 2001
From: Vinicius Souza <dev@viniciussouza.me>
Date: Mon, 28 Oct 2024 11:24:14 -0300
Subject: [PATCH] feat: add state to sign up screen

---
 src/screens/SignUp.tsx | 122 +++++++++++++++++++++++------------------
 1 file changed, 69 insertions(+), 53 deletions(-)

diff --git a/src/screens/SignUp.tsx b/src/screens/SignUp.tsx
index dd06c55..9999d45 100644
--- a/src/screens/SignUp.tsx
+++ b/src/screens/SignUp.tsx
@@ -1,73 +1,89 @@
-import { Center, Heading, Image, ScrollView, Text, VStack } from "@gluestack-ui/themed";
-import { useNavigation } from "@react-navigation/native";
+import { useState } from 'react';
+import { Center, Heading, Image, ScrollView, Text, VStack } from '@gluestack-ui/themed';
+import { useNavigation } from '@react-navigation/native';
 
 import BackgroundImg from '@assets/background.png';
 import Logo from '@assets/logo.svg';
-import { Input } from "@components/Input";
-import { Button } from "@components/Button";
-import { AuthNavigatorRoutesProps } from "@routes/auth.routes";
+
+import { AuthNavigatorRoutesProps } from '@routes/auth.routes';
+
+import { Input } from '@components/Input';
+import { Button } from '@components/Button';
 
 export function SignUp() {
   const navigation = useNavigation<AuthNavigatorRoutesProps>();
 
-  const handleLogin = () => {
-    navigation.navigate('SignIn');
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+
+  function handleSignUp() {
+    console.debug({
+      name,
+      email,
+      password,
+      confirmPassword,
+    });
   }
 
+  const handleGoBack = () => {
+    navigation.navigate('SignIn');
+  };
+
   return (
-    <ScrollView
-      contentContainerStyle={{ flexGrow: 1 }}
-      showsVerticalScrollIndicator={false}
-    >
-    <VStack flex={1}>
-      <Image
-        source={BackgroundImg}
-        defaultSource={BackgroundImg}
-        alt="Pessoas treinando"
-        position="absolute"
-        w="$full"
-        h={624}
-      />
+    <ScrollView contentContainerStyle={{ flexGrow: 1 }} showsVerticalScrollIndicator={false}>
+      <VStack flex={1}>
+        <Image
+          source={BackgroundImg}
+          defaultSource={BackgroundImg}
+          alt="Pessoas treinando"
+          position="absolute"
+          w="$full"
+          h={624}
+        />
 
-      <VStack flex={1} px="$10" pb="$16">
-        <Center my="$24">
-          <Logo />
-          <Text fontSize="$sm" color="$gray100">
-            Treine a sua mente e o seu corpo
-          </Text>
-        </Center>
+        <VStack flex={1} px="$10" pb="$16">
+          <Center my="$24">
+            <Logo />
+            <Text fontSize="$sm" color="$gray100">
+              Treine a sua mente e o seu corpo
+            </Text>
+          </Center>
 
-        <Center gap="$2" flex={1}>
-          <Heading color="$gray100">
-            Crie sua a conta
-          </Heading>
+          <Center gap="$2" flex={1}>
+            <Heading color="$gray100">Crie sua a conta</Heading>
 
-          <Input
-            placeholder="Nome"
-            autoCorrect={false}
-          />
+            <Input placeholder="Nome" autoCorrect={false} onChangeText={setName} />
 
-          <Input
-            placeholder="E-mail"
-            keyboardType="email-address"
-            autoCapitalize="none"
-            autoCorrect={false}
-          />
+            <Input
+              placeholder="E-mail"
+              keyboardType="email-address"
+              autoCapitalize="none"
+              autoCorrect={false}
+              onChangeText={setEmail}
+            />
 
-          <Input
-            placeholder="Senha"
-            autoCapitalize="none"
-            secureTextEntry
-          />
+            <Input
+              placeholder="Senha"
+              autoCapitalize="none"
+              secureTextEntry
+              onChangeText={setPassword}
+            />
 
-          <Button
-            title="Criar e acessar"
-          />
-        </Center>
+            <Input
+              placeholder="Confirme a senha"
+              autoCapitalize="none"
+              secureTextEntry
+              onChangeText={setConfirmPassword}
+            />
 
-        <Button title="Voltar para o login" mt="$12" variant="outline" onPress={handleLogin} />
+            <Button title="Criar e acessar" onPress={handleSignUp} />
+          </Center>
+
+          <Button title="Voltar para o login" mt="$12" variant="outline" onPress={handleGoBack} />
+        </VStack>
       </VStack>
-    </VStack>
     </ScrollView>
-  )
+  );
 }