Feature/ cadastrando usuário #9

mobile/DiarioSaude/src/components/userItem/index.tsx

@@ -3,12 +3,16 @@ import { View, Text } from "react-native";
 import styles from "./styles";
 import { RectButton } from "react-native-gesture-handler";
 
-function UserItem() {
+export interface User {
+  Name: string;
+}
+
+const UserItem: React.FC<User> = ({ Name }) => {
   return (
     <View style={styles.container}>
       <View style={styles.profile}>
         <View style={styles.profileInfo}>
-          <Text style={styles.name}>Nome</Text>
+          <Text style={styles.name}>André Goretti</Text>
         </View>
         <View style={styles.buttonsContainer}>
           <RectButton style={styles.favoriteButton}>
@@ -18,6 +22,6 @@ function UserItem() {
       </View>
     </View>
   );
-}
+};
 
 export default UserItem;

mobile/DiarioSaude/src/pages/GroupDetails/index.tsx

@@ -1,15 +1,22 @@
 import React, { useEffect, useState } from "react";
-import { View, Text } from "react-native";
-import UserItem from "../../components/userItem";
-import { RectButton } from "react-native-gesture-handler";
+import { View, Text, TouchableHighlight, Modal, TextInput } from "react-native";
+import UserItem, { User } from "../../components/userItem";
+import {
+  RectButton,
+  TouchableWithoutFeedback
+} from "react-native-gesture-handler";
 import { useNavigation, useFocusEffect } from "@react-navigation/core";
 import AsyncStorage from "@react-native-community/async-storage";
 import api from "../../services/api";
+import styles from "./styles";
 
 function GroupDeatils() {
   const [id, setId] = useState();
   const [group, setGroup] = useState();
-  const [isLoading, setIsLoading] = useState(true);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [CuserID, setCuserid] = useState();
+
+  const { goBack } = useNavigation();
 
   useEffect(() => {
     async function loadStorageData() {
@@ -24,31 +31,88 @@ function GroupDeatils() {
         console.log(response.data);
         setGroup(response.data);
       })
-      .catch(error => {
-        console.log("errrrrrrrrrrrr");
-      });
+      .catch(error => {});
 
     loadStorageData();
   }, [id]);
 
   function handleTest() {
     console.log(group);
+    setModalVisible(true);
+  }
+
+  function handleCadastrar() {
+    api
+      .post("/group/member", {
+        member_id: CuserID,
+        group_id: id
+      })
+      .then(res => {
+        console.log(res);
+      });
+
+    setModalVisible(!modalVisible);
+    goBack();
   }
   if (!group) {
     return <Text>carregando</Text>;
   } else {
     return (
       <View>
+        <Modal
+          animationType="fade"
+          transparent={true}
+          visible={modalVisible}
+          onRequestClose={() => {
+            setModalVisible(false);
+          }}
+        >
+          <TouchableHighlight
+            style={styles.centeredView}
+            underlayColor="none"
+            onPressOut={() => {
+              setModalVisible(!modalVisible);
+            }}
+          >
+            <TouchableWithoutFeedback>
+              <View style={styles.modalView}>
+                <TextInput
+                  style={styles.textInputUsuario}
+                  placeholder="Id usuário"
+                  value={CuserID}
+                  onChangeText={nome => setCuserid(nome)}
+                ></TextInput>
+                <TouchableHighlight
+                  style={styles.openButton}
+                  onPress={() => {
+                    handleCadastrar();
+                  }}
+                >
+                  <Text style={styles.textStyle}>Cadastrar</Text>
+                </TouchableHighlight>
+                <TouchableHighlight
+                  style={styles.openButton}
+                  onPress={() => {
+                    setModalVisible(!modalVisible);
+                  }}
+                >
+                  <Text style={styles.textStyle}>Retornar</Text>
+                </TouchableHighlight>
+              </View>
+            </TouchableWithoutFeedback>
+          </TouchableHighlight>
+        </Modal>
         <Text>{group.groupName}</Text>
-        <UserItem />
-        <UserItem />
-        <UserItem />
+        {group.users.map((name: string, index: number) => {
+          return <UserItem name={name} key={index} />;
+        })}
         <RectButton
           onPress={() => {
             handleTest();
           }}
+          style={styles.buttonCadastrar}
         >
-          <Text>tatatata</Text>
+          <Text style={styles.textButton}>Cadastrar usuário</Text>
         </RectButton>
       </View>
     );

mobile/DiarioSaude/src/pages/GroupDetails/styles.ts

@@ -0,0 +1,105 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+
+  buttonsContainer: {
+    justifyContent: "space-between"
+  },
+
+  buttonCadastrar: {
+    backgroundColor: "#0124A2",
+    marginTop: 0,
+    height: 50,
+
+    borderRadius: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    textAlignVertical: "center"
+  },
+
+  textButton: {
+    color: "#fff",
+    fontSize: 20
+  },
+
+  logo: {
+    marginBottom: 30,
+    width: 260,
+    height: 245
+  },
+
+  textContainer: {
+    marginBottom: 40
+  },
+
+  textInputUsuario: {
+    backgroundColor: "#e8e8e8",
+    marginBottom: 15,
+    width: 300,
+    height: 40,
+    borderRadius: 8
+  },
+  upperDivision: {
+    backgroundColor: "#0124A2",
+    marginBottom: 60,
+    width: 400,
+    height: 200
+  },
+  picture: {
+    marginLeft: 110,
+    marginTop: 50,
+    borderRadius: 100,
+    backgroundColor: "#FFFFFF",
+    width: 180,
+    height: 180
+  },
+  centeredView: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  modalView: {
+    marginTop: 0,
+    margin: 20,
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 35,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: "center",
+    fontSize: 20
+  },
+  textStyle: {
+    color: "white",
+    fontWeight: "bold",
+    textAlign: "center"
+  },
+  openButton: {
+    backgroundColor: "#0124A2",
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+    marginBottom: 10,
+    width: 200
+  },
+  darkBackground: {
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  }
+});
+
+export default styles;