From bf5f026af4e2081b8fe78fcbfba9e97c2134f3fa Mon Sep 17 00:00:00 2001
From: Wesley Nogueira <wesleysenan@gmail.com>
Date: Fri, 2 Apr 2021 18:45:47 -0300
Subject: [PATCH] Returning numbers to TextInput - component settings

---
 src/components/Body.js                  | 18 +++++++++++++-----
 src/components/buttons/ButtonsBody.js   | 25 ++++++++++---------------
 src/components/buttons/CommandButton.js |  8 ++++----
 3 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/components/Body.js b/src/components/Body.js
index 861bf4c..692ef5f 100644
--- a/src/components/Body.js
+++ b/src/components/Body.js
@@ -1,13 +1,19 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { StyleSheet, View, TextInput } from 'react-native';
 import CommandButtons from './buttons/ButtonsBody'
 
 export default function() {
+  const [numbers, setNumbers] = useState(0);
+
+  const updateSetNumbers = (value) => {
+    setNumbers(value)
+  }
+
   return (
     <View style={styles.container}>
       <View style={styles.areaContainer}>
-        <TextInput editable={false} style={styles.textArea}/>
-        <CommandButtons/>
+        <TextInput editable={false} style={styles.textArea} textAlign='right' value={numbers}/>
+        <CommandButtons updateState={updateSetNumbers}/>
       </View>
     </View>
   );
@@ -20,6 +26,7 @@ const styles = StyleSheet.create({
     height: '100%',
     alignItems: 'center',
     justifyContent: 'center',
+    flex: 1
   },
   areaContainer: {
     width: '90%',
@@ -29,6 +36,7 @@ const styles = StyleSheet.create({
     borderColor: '#b7b7b7',
     borderWidth: 1,
     width: '100%',
-    height: 200
-  },
+    height: 200,
+    fontSize: 45
+  }
 });
diff --git a/src/components/buttons/ButtonsBody.js b/src/components/buttons/ButtonsBody.js
index d1aae50..d3f68a8 100644
--- a/src/components/buttons/ButtonsBody.js
+++ b/src/components/buttons/ButtonsBody.js
@@ -2,40 +2,35 @@ import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import CommandButton from './CommandButton';
 
-export default function() {
+export default function(props) {
   const button_text = [
     {
-      line: ['C', '%', '*', '←'],
-      method: 'getButtonText()'
+      line: ['C', '%', '*', '←']
     },
     {
-      line: ['7', '8', '9', '/'],
-      method: 'getButtonText()'
+      line: ['7', '8', '9', '/']
     },
     {
-      line: ['4', '5', '6', '-'],
-      method: 'getButtonText()'
+      line: ['4', '5', '6', '-']
     },
     {
-      line: ['1', '2', '3', '+'],
-      method: 'getButtonText()'
+      line: ['1', '2', '3', '+']
     },
     {
-      line: ['≠', '0', '.', '='],
-      method: 'getButtonText()'
+      line: ['≠', '0', '.', '=']
     }
   ]
 
   return (
     <View style={styles.marginAreaButton}>
       {
-        button_text.map((titles) => {
+        button_text.map((titles, titles_index) => {
           return (
-            <View style={styles.buttonAreaContainer}>
+            <View style={styles.buttonAreaContainer} key={titles_index}>
               {
-                titles.line.map((text) => {
+                titles.line.map((text, text_index) => {
                   return (
-                    <CommandButton valueButton={text} method={titles.method}/>
+                    <CommandButton valueButton={text} key={text_index} updateNumber={props.updateState}/>
                   )
                 })
               }
diff --git a/src/components/buttons/CommandButton.js b/src/components/buttons/CommandButton.js
index 55527d6..c349219 100644
--- a/src/components/buttons/CommandButton.js
+++ b/src/components/buttons/CommandButton.js
@@ -18,16 +18,16 @@ export default function(props) {
   }
 
   const getNumber = (value) => {
-    console.log('Number')
+    props.updateNumber(value)
   }
 
   const getOperator = (value) => {
-    console.log('Operator')
+    props.updateNumber(value)
   }
 
   return (
-    <TouchableOpacity style={styles.buttonStyle} onPress={getButtonText(props.valueButton)}>
-      <Text style={styles.textButton}>{props.valueButton}</Text>
+    <TouchableOpacity style={styles.buttonStyle} onPress={() => getButtonText(props.valueButton)}>
+      <Text style={styles.textButton}> {props.valueButton} </Text>
     </TouchableOpacity>
   )
 }