Feature/ selecionando grupo nos detalhes #9

mobile/DiarioSaude/App.tsx

@@ -4,6 +4,7 @@ import { StyleSheet, Text, View } from "react-native";
 import Routes from "./src/routes";
 import { NavigationContainer } from "@react-navigation/native";
 import { AuthProvider } from "./src/contexts/auth";
+import "react-native-gesture-handler";
 
 export default function App() {
   return (

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

@@ -2,10 +2,14 @@ import React from "react";
 import { View, Image, Text } from "react-native";
 import styles from "./styles";
 import { RectButton } from "react-native-gesture-handler";
+import { useNavigation } from "@react-navigation/core";
+import { NavigationContainer } from "@react-navigation/native";
+import "react-native-gesture-handler";
+import AsyncStorage from "@react-native-community/async-storage";
 
 export interface Group {
   users: [];
-  _id: String;
+  _id: string;
   groupName: String;
   idUBS: Number;
   __v: Number;
@@ -16,6 +20,14 @@ interface GroupProp {
 }
 
 const GroupItem: React.FC<GroupProp> = ({ group }) => {
+  const { navigate } = useNavigation();
+
+  async function handleNavigation() {
+    AsyncStorage.setItem("@DiarioSaude:Id", group._id).then(
+      navigate("groupDetails", { id: group._id })
+    );
+  }
+
   return (
     <View style={styles.container}>
       <View style={styles.profile}>
@@ -28,7 +40,12 @@ const GroupItem: React.FC<GroupProp> = ({ group }) => {
 
       <View style={styles.footer}>
         <View style={styles.buttonsContainer}>
-          <RectButton style={styles.contactButton}>
+          <RectButton
+            style={styles.contactButton}
+            onPress={() => {
+              handleNavigation();
+            }}
+          >
             <Text style={styles.contactButtonText}>Detalhe do Grupo</Text>
           </RectButton>
         </View>

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { View, Text } from "react-native";
+import styles from "./styles";
+import { RectButton } from "react-native-gesture-handler";
+
+function UserItem() {
+  return (
+    <View style={styles.container}>
+      <View style={styles.profile}>
+        <View style={styles.profileInfo}>
+          <Text style={styles.name}>Nome</Text>
+        </View>
+        <View style={styles.buttonsContainer}>
+          <RectButton style={styles.favoriteButton}>
+            <Text style={styles.contactButtonText}>Del</Text>
+          </RectButton>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export default UserItem;

mobile/DiarioSaude/src/components/userItem/styles.ts

@@ -0,0 +1,102 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "#fff",
+    borderWidth: 1,
+    borderColor: "#e6e6f0",
+    borderRadius: 8,
+    marginBottom: 16,
+    overflow: "hidden"
+  },
+
+  profile: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 24,
+    justifyContent: "space-between"
+  },
+
+  avatar: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: "#eee"
+  },
+
+  profileInfo: {
+    marginLeft: 16
+  },
+
+  name: {
+    color: "#32264d",
+    fontSize: 20
+  },
+
+  subject: {
+    color: "#6a6180",
+    fontSize: 12,
+    marginTop: 4
+  },
+
+  bio: {
+    marginHorizontal: 24,
+
+    fontSize: 14,
+    lineHeight: 24,
+    color: "#6a6180"
+  },
+
+  footer: {
+    backgroundColor: "#fafafc",
+    padding: 24,
+    alignItems: "center",
+    marginTop: 24
+  },
+
+  price: {
+    color: "#6a6180",
+    fontSize: 14
+  },
+
+  priceValue: {
+    color: "#8257e5",
+    fontSize: 16
+  },
+
+  buttonsContainer: {
+    flexDirection: "row"
+  },
+
+  favoriteButton: {
+    backgroundColor: "#e33d3d",
+    width: 56,
+    height: 56,
+    borderRadius: 16,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 0
+  },
+
+  favorited: {
+    backgroundColor: "#e33d3d"
+  },
+
+  contactButton: {
+    backgroundColor: "#04d361",
+    flex: 1,
+    height: 56,
+    borderRadius: 8,
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 8
+  },
+
+  contactButtonText: {
+    color: "#fff",
+    fontSize: 16
+  }
+});
+
+export default styles;

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

@@ -0,0 +1,58 @@
+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 { useNavigation, useFocusEffect } from "@react-navigation/core";
+import AsyncStorage from "@react-native-community/async-storage";
+import api from "../../services/api";
+
+function GroupDeatils() {
+  const [id, setId] = useState();
+  const [group, setGroup] = useState();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    async function loadStorageData() {
+      const storagedId = await AsyncStorage.getItem("@DiarioSaude:Id");
+
+      setId(storagedId);
+    }
+
+    api
+      .get(`/group/${id}`)
+      .then(response => {
+        console.log(response.data);
+        setGroup(response.data);
+      })
+      .catch(error => {
+        console.log("errrrrrrrrrrrr");
+      });
+
+    loadStorageData();
+  }, [id]);
+
+  function handleTest() {
+    console.log(group);
+  }
+  if (!group) {
+    return <Text>carregando</Text>;
+  } else {
+    return (
+      <View>
+        <Text>{group.groupName}</Text>
+        <UserItem />
+        <UserItem />
+        <UserItem />
+        <RectButton
+          onPress={() => {
+            handleTest();
+          }}
+        >
+          <Text>tatatata</Text>
+        </RectButton>
+      </View>
+    );
+  }
+}
+
+export default GroupDeatils;

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

@@ -1,12 +1,9 @@
-import React, { useContext, useEffect, useState } from "react";
-import { Text, View, Image, ScrollView } from "react-native";
+import React, { useEffect, useState } from "react";
+import { Text, View, ScrollView } from "react-native";
 import styles from "./styles";
 import { RectButton } from "react-native-gesture-handler";
-import AuthContext from "../../contexts/auth";
-import AsyncStorage from "@react-native-community/async-storage";
 import GroupItem, { Group } from "../../components/groupItem";
 import { useNavigation, useFocusEffect } from "@react-navigation/native";
-import Axios from "axios";
 import api from "../../services/api";
 
 function Medico() {

mobile/DiarioSaude/src/routes/medic.routes.tsx

@@ -1,11 +1,13 @@
 import React, { useContext } from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import Medico from "../pages/Medico";
+import GroupDeatils from "../pages/GroupDetails";
 import CreateGroup from "../pages/CreateGroup";
 import { RectButton } from "react-native-gesture-handler";
 import { Button, Text, Image } from "react-native";
 import logoB from "../assets/logoB.png";
 import AuthContext from "../contexts/auth";
+import UserItem from "../components/userItem";
 
 const medicStack = createStackNavigator();
 
@@ -16,6 +18,10 @@ const MedicRoutes: React.FC = () => {
     singOut();
   }
 
+  type RootStackParamList = {
+    GroupDetails: { groupId: string };
+  };
+
   return (
     <medicStack.Navigator>
       <medicStack.Screen
@@ -64,6 +70,30 @@ const MedicRoutes: React.FC = () => {
           )
         }}
       />
+      <medicStack.Screen
+        name="groupDetails"
+        component={GroupDeatils}
+        initialParams={{ id: "000" }}
+        options={{
+          headerTitle: "DiarioSaude",
+          headerTitleStyle: { alignSelf: "center" },
+          headerStyle: {
+            backgroundColor: "#0124A2"
+          },
+          headerTintColor: "#fff",
+          headerLeft: () => (
+            <RectButton style={{ marginLeft: 20 }} onPress={handleSingOut}>
+              <Text style={{ color: "#fff" }}>Sair</Text>
+            </RectButton>
+          ),
+          headerRight: () => (
+            <Image
+              source={logoB}
+              style={{ width: 44, height: 52, marginRight: 5 }}
+            />
+          )
+        }}
+      />
     </medicStack.Navigator>
   );
 };