day four - finish pages

christyanbrayan · Mar 30, 2020 · 002d70f · 002d70f
1 parent 1418e20
commit 002d70f
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 15 deletions.
diff --git a/backend/src/database/db.sqlite b/backend/src/database/db.sqlite
diff --git a/mobile/App.js b/mobile/App.js
@@ -1,4 +1,7 @@
-import React from 'react';
+import 'intl'
+import 'intl/locale-data/jsonp/pt-BR'
+
+import React from 'react'
 
 import Routes from './src/routes'
 

diff --git a/mobile/package-lock.json b/mobile/package-lock.json
diff --git a/mobile/package.json b/mobile/package.json
@@ -15,6 +15,7 @@
     "expo": "~36.0.0",
     "expo-constants": "~8.0.0",
     "expo-mail-composer": "~8.0.0",
+    "intl": "^1.2.5",
     "react": "~16.9.0",
     "react-dom": "~16.9.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",

diff --git a/mobile/src/pages/Detail/index.js b/mobile/src/pages/Detail/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Feather } from '@expo/vector-icons'
-import { useNavigation } from '@react-navigation/native'
+import { useNavigation, useRoute } from '@react-navigation/native'
 import { View, Text, Image, TouchableOpacity, Linking } from 'react-native'
 import * as MailComposer from 'expo-mail-composer'
 
@@ -10,22 +10,25 @@ import styles from './styles'
 
 export default function Detail() {
   const navigation = useNavigation()
-  const message = 'Olá APAD, estou  entrando em contato pois gostaria  de ajudar no caso "Cadelinha atropelada" com o valor de R$ 120,00'
+  const route = useRoute()
+
+  const incident = route.params.incident
+  const message = `Olá ${incident.name}, estou  entrando em contato pois gostaria  de ajudar no caso "${incident.title}" com o valor de "${Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(incident.value)}" `
 
   function navigateBack() {
     navigation.goBack()
   }
 
   function sendMail() {
     MailComposer.composeAsync({
-      subject: 'Herói do caso: Cadelinha atropelada',
-      recipients: ['diego@rocketseat.com.br'],
+      subject: `Herói do caso: ${incident.title}`,
+      recipients: [incident.email],
       body: message,
     })
   }
 
   function sendWhatsApp() {
-    Linking.openURL(`whatsapp://send?phone=556100000000&text=${message}`)
+    Linking.openURL(`whatsapp://send?phone=${incident.whatsapp}&text=${message}`)
   }
 
   return (
@@ -40,13 +43,13 @@ export default function Detail() {
       <View style={styles.incident}>
 
         <Text style={[styles.incidentProperty, { marginTop: 0 }]}> ONG: </Text>
-        <Text style={styles.incidentValue}> APAD </Text>
+        <Text style={styles.incidentValue}> {incident.name} de {incident.city}/{incident.uf} </Text>
 
         <Text style={styles.incidentProperty}> CASO: </Text>
-        <Text style={styles.incidentValue}> Cadelinha atropelada </Text>
+        <Text style={styles.incidentValue}> {incident.title} </Text>
 
         <Text style={styles.incidentProperty}> VALOR: </Text>
-        <Text style={styles.incidentValue}> 120,00 </Text>
+        <Text style={styles.incidentValue}> {Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(incident.value)} </Text>
 
       </View>
 

diff --git a/mobile/src/pages/Incidents/index.js b/mobile/src/pages/Incidents/index.js
@@ -11,16 +11,19 @@ import styles from './styles'
 
 export default function Incidents() {
   const [incidents, setIncidents] = useState([])
+  const [total, setTotal] = useState(0)
+
   const navigation = useNavigation()
 
-  function navigateToDetail() {
-    navigation.navigate('Detail')
+  function navigateToDetail(incident) {
+    navigation.navigate('Detail', { incident })
   }
 
   async function loadIncidents() {
     const response = await api.get('incidents')
 
     setIncidents(response.data)
+    setTotal(response.headers['x-total-count'])
   }
 
   useEffect(() => {
@@ -32,7 +35,7 @@ export default function Incidents() {
       <View style={styles.header}>
         <Image source={logoImg} />
         <Text style={styles.headerText}>
-          Total de <Text style={styles.headerTextBold}>0 casos</Text>.
+          Total de <Text style={styles.headerTextBold}>{total} casos</Text>.
         </Text>
       </View>
       <Text style={styles.title}> Bem-vindo! </Text>
@@ -47,11 +50,11 @@ export default function Incidents() {
           <Text style={styles.incidentValue}> {incident.title} </Text>
 
           <Text style={styles.incidentProperty}> VALOR: </Text>
-          <Text style={styles.incidentValue}> {incident.value} </Text>
+          <Text style={styles.incidentValue}> {Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(incident.value)} </Text>
 
-          <TouchableOpacity style={styles.detailsButton} onPress={() => navigateToDetail()}>
+          <TouchableOpacity style={styles.detailsButton} onPress={() => navigateToDetail(incident)}>
             <Text style={styles.detailsButtonText}> Ver mais detalhes </Text>
-            <Feather name="arrow-right" size={16} />
+            <Feather name="arrow-right" size={16} color='#e02041' />
           </TouchableOpacity>
         </View>
       )} />