day four - config infinite scroll and finish mobile

christyanbrayan · Mar 30, 2020 · 6bf845b · 6bf845b
1 parent 002d70f
commit 6bf845b
Showing 1 changed file with 19 additions and 3 deletions.
diff --git a/mobile/src/pages/Incidents/index.js b/mobile/src/pages/Incidents/index.js
@@ -12,6 +12,8 @@ import styles from './styles'
 export default function Incidents() {
   const [incidents, setIncidents] = useState([])
   const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [loading, setLoading] = useState(false)
 
   const navigation = useNavigation()
 
@@ -20,10 +22,24 @@ export default function Incidents() {
   }
 
   async function loadIncidents() {
-    const response = await api.get('incidents')
+    if (loading) {
+      return
+    }
 
-    setIncidents(response.data)
+    if (total > 0 && incidents.length == total) {
+      return
+    }
+
+    setLoading(true)
+
+    const response = await api.get('incidents', {
+      params: { page }
+    })
+
+    setIncidents([... incidents, ... response.data])
     setTotal(response.headers['x-total-count'])
+    setPage(page + 1)
+    setLoading(false)
   }
 
   useEffect(() => {
@@ -41,7 +57,7 @@ export default function Incidents() {
       <Text style={styles.title}> Bem-vindo! </Text>
       <Text style={styles.description}> Escolha um dos casos abaixo e salve o dia. </Text>
 
-      <FlatList data={incidents} style={styles.incidentList} keyExtractor={incident => String(incident.id)} showsVerticalScrollIndicator={false} renderItem={({ item: incident }) => (
+      <FlatList data={incidents} style={styles.incidentList} keyExtractor={incident => String(incident.id)}  onEndReached={loadIncidents} onEndReachedThreshold={0.2} renderItem={({ item: incident }) => (
         <View style={styles.incident}>
           <Text style={styles.incidentProperty}> ONG: </Text>
           <Text style={styles.incidentValue}> {incident.name} </Text>