[Em andamento]Feature/#205 tela de visualizacao das metricas

src/app/__tests__/visualizarMetricas.spec.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { NavigationContainer } from '@react-navigation/native'; 
+import AsyncStorage, { AsyncStorageStatic } from '@react-native-async-storage/async-storage'; 
+import Registros from '../private/tabs/registros';
+
+// Mock AsyncStorage
+jest.mock('@react-native-async-storage/async-storage', () => ({
+  getItem: jest.fn(),
+}));
+
+describe('Visualizar registros', () => {
+  test('The component rendered', () => {
+    // Mock the response for AsyncStorage.getItem
+    (AsyncStorage.getItem as jest.Mock).mockImplementation((key) => {
+      if (key === 'usuario') {
+        return Promise.resolve(JSON.stringify({ id: 1 }));
+      } else if (key === 'token') {
+        return Promise.resolve('mockedToken');
+      }
+      return Promise.resolve(null);
+    });
+
+    render(
+      // Envolve o componente Registros com NavigationContainer durante o teste
+      <NavigationContainer>
+        <Registros />
+      </NavigationContainer>
+    );
+  });
+});

src/app/components/CardMetricas.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome'; // ou qualquer outro ícone disponível
+
+interface MetricCardProps {
+  title: string;
+  content: string;
+  unit: string;
+  time: string;
+}
+
+const MetricCard: React.FC<MetricCardProps> = ({ title, content, unit, time }) => {
+  let titleColor = '#000'; // Cor padrão
+
+  if (title.toLowerCase().includes('pressão sanguínea') || title.toLowerCase().includes('frequência cardíaca')) {
+    titleColor = '#FF7D7D'; // Vermelho
+  } else if (title.toLowerCase().includes('temperatura')) {
+    titleColor = '#FFAC7D'; // Laranja
+  } else if (title.toLowerCase().includes('hidratação')) {
+    titleColor = '#5ABCD8'; // Azul
+  }
+
+  const textColor = '#888'; // Cor do texto do horário e unidades
+
+  return (
+    <View style={[styles.card, { borderColor: '#ddd', backgroundColor: '#fff' }]}>
+      <Text style={[styles.title, { color: titleColor }]}>{title}</Text>
+      <Text style={styles.content}>
+        <Text style={[styles.number]}>{content}</Text>
+        <Text style={[styles.units, { color: textColor }]}>{unit}</Text>
+      </Text>
+      <Text style={[styles.time, { color: textColor }]}>{time}</Text>
+      <Icon name="chevron-right" size={16} color={textColor} style={styles.chevron} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 16,
+    margin: 8,
+    width: '45%', // Adjust width for two cards in a row
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 3, // For Android shadow
+  },
+  title: {
+    fontWeight: 'bold',
+    fontSize: 16,
+    marginBottom: 8,
+  },
+  content: {
+    fontSize: 14,
+    marginTop: 8,
+  },
+  number: {
+    fontWeight: 'bold',
+    fontSize: 24, // Adjust font size for the content (number)
+  },
+  units: {
+    fontSize: 18, // Adjust font size for units
+  },
+  time: {
+    color: '#888',
+    fontSize: 12,
+    marginTop: 8,
+  },
+  chevron: {
+    position: 'absolute',
+    top: 12,
+    right: 12,
+  },
+
+});
+
+export default MetricCard;
+

src/app/index.tsx

@@ -10,6 +10,7 @@ export default function Home() {
       <Text style={styles.titulo}> Seja um GEROcuidador! </Text>
       <LinkButton title="Acessar Fórum" href="/private/tabs/forum" />
       <LinkButton title="Login" href="/public/login" />
+
       <LinkButton
         title="Cadastre-se"
         backgroundColor="#B47B9D"

src/app/interfaces/metric.interface.ts

@@ -0,0 +1,3 @@
+export interface IMetric {
+    metricName: string;
+  }

src/app/private/tabs/registros.tsx

@@ -1,21 +1,14 @@
-import React, { useEffect, useState } from "react";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { IUser } from "../../interfaces/user.interface";
+import React, { useEffect, useState} from 'react';
+import { View, StyleSheet, ScrollView, Text, Image, TouchableOpacity} from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import MetricCard from '../../components/CardMetricas';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { IUser } from '../../interfaces/user.interface';
 import NaoAutenticado from "../../components/NaoAutenticado";
-import EmConstrucao from "../../components/EmConstrucao";
-import {
-  View,
-  StyleSheet,
-  Pressable,
-  Text,
-  Image, 
-  TouchableOpacity,
-  Platform,
-} from "react-native";
-import Icon from "react-native-vector-icons/FontAwesome";
 
 export default function Registros() {
-  const [user, setUser] = useState<IUser | undefined>(undefined);
+
+    const [user, setUser] = useState<IUser | undefined>(undefined);
 
   const handleUser = () => {
     AsyncStorage.getItem("usuario").then((response) => {
@@ -26,95 +19,108 @@
 
   useEffect(() => handleUser(), []);
 
-  const novaMetrica = () => {
-    // Adicione a lógica para criar uma nova métrica
-  };
-
-  return !user?.id ? <NaoAutenticado /> : (
-    <View>
-    <View style={styles.header}>
-
-          <Image
-          source={require("../../../assets/Idoso.png")}
+  return !user ? (
+    <NaoAutenticado />
+  ) : (
+    <ScrollView contentContainerStyle={styles.container}>
+      {
+      }
+      <View style={styles.header}>
+        <Image
+          source={require('../../../../assets/Idoso.png')}
           style={styles.imagem}
           resizeMode="contain"
-          />
-          <Text style={styles.name}>Nome do idoso</Text>
-
-          {/* <TouchableOpacity
-          style={[
-          styles.button,
-          Platform.OS === "ios" ? styles.buttonIOS : styles.button,
-          ]}
-      >
-          {/* Adicione o conteúdo desejado dentro do TouchableOpacity}
-      </TouchableOpacity> */}
-
-    </View>
-
-    <View>
-      <Pressable style={styles.botaoCriarMetricas} onPress={novaMetrica}>
-        <Icon name="plus" color={"white"} size={20} />
-        <Text style={styles.textoBotaoCriarMetricas}>Nova Métrica</Text>
-      </Pressable>
-    </View>
-    </View>
-
-);
+        />
+        <Text style={styles.name}>Nome do idoso</Text>
+      </View>
+
+      {
+      }
+      <View>
+        <TouchableOpacity style={styles.botaoCriarMetricas} onPress={() => console.log('Button pressed')}>
+          <Icon name="plus" color={'white'} size={20} />
+          <Text style={styles.textoBotaoCriarMetricas}>Nova Métrica</Text>
+        </TouchableOpacity>
+      </View>
+
+      {
+      }
+      <View style={styles.metricsContainer}>
+        <MetricCard
+          title="Frequência Cardíaca"
+          content="70"
+          unit="bpm"
+          time="há 3 horas"
+        />
+        <MetricCard
+          title="Pressão Sanguínea"
+          content="120/80"
+          unit="mmHg"
+          time="há 10 minutos"
+        />
+        <MetricCard
+          title="Temperatura"
+          content="36.7"
+          unit="°C"
+          time="agora mesmo"
+        />
+        <MetricCard
+          title="Hidratação"
+          content="1400/3500"
+          unit="ml"
+          time="dados de hoje"
+        />
+      </View>
+    </ScrollView>
+  );
 }
 
 const styles = StyleSheet.create({
-header: {
-  backgroundColor: "#2CCDB5",
-  width: "100%",
-  padding: 10,
-  height: 100,
-  flexDirection: "column",
-  alignItems: "center",
-  justifyContent: "center",
-},
-
-botaoCriarMetricas: {
-  flexDirection: "row",
-  alignItems: "center",
-  backgroundColor: "#B4026D",
-  paddingHorizontal: 10,
-  paddingVertical: 5,
-  borderRadius: 10,
-  marginLeft: "auto",
-  marginRight: 10,
-  marginVertical: 10,
-},
-
-textoBotaoCriarMetricas: {
-  color: "white",
-  fontWeight: "600",
-  fontSize: 14,
-  marginLeft: 5,
-},
-
-nameBar: {
-  // Estilo para nameBar
-},
-
-imagem: {
-  width: 45,
-  height: 45,
-  borderRadius: 30,
-},
-
-name: {
-  color: "white",
-  fontWeight: "bold",
-  fontSize: 16,
-  marginTop: 5,
-},
-
-button: {
-  // Estilo para button
-},
+  container: {
+    flexGrow: 1,
+  },
+  header: {
+    backgroundColor: '#2CCDB5',
+    width: '100%',
+    padding: 10,
+    height: 100,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  botaoCriarMetricas: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#B4026D',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 10,
+    marginLeft: 'auto',
+    marginRight: 10,
+    marginVertical: 10,
+  },
+  textoBotaoCriarMetricas: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 14,
+    marginLeft: 5,
+  },
+  imagem: {
+    width: 45,
+    height: 45,
+    borderRadius: 30,
+  },
+  name: {
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 16,
+    marginTop: 5,
+  },
+  metricsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+    padding: 10,
+  },
 
-buttonIOS: {
-  // Estilo específico para iOS, se necessário
-},
 });