Fetch Posts from API

src/components/organisms/Sections/RecentPostsSection.js

@@ -2,44 +2,33 @@ import { ScrollView, StyleSheet, Text, View } from 'react-native'
 import React, { useContext } from 'react'
 import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'
 import VerticalNewsCard from '../../molecules/Cards/VerticalNewsCard'
-import { useConstructor } from '../../../constants/functions'
+import { navigateToArticle, useConstructor } from '../../../constants/functions'
 import SectionHeader from '../../molecules/Header/SectionHeader'
 import { ThemeContext } from '../../../context/theme.context'
 import colors from '../../../constants/colors'
+import { getArticlesByCategory } from '../../../api/data'
 
-const RecentPostsSection = () => {
+const RecentPostsSection = props => {
+
+  const { 
+    navigation,
+    route
+  } = props
 
   const theme = useContext(ThemeContext)
   const currentTheme = theme.state.theme
 
-  const [posts, setPosts] = React.useState([{}, {}, {}, {}, {}])
+  const [posts, setPosts] = React.useState([])
 
-  const fetchPosts = () => {
-    fetch("http://www.newscout.in/api/v1/article/search/?domain=newscout&category=Sector%20Updates")
-      .then((res) => res.json())
-      .then((json) => {
-        const postsFetched = json.body.results
-        const finalPosts = postsFetched.map((item, index) => ({
-          key: index,
-          id: item.id,
-          image: { uri: item.cover_image },
-          author: item.author,
-          headline: item.title
-        }))
-        setPosts(finalPosts)
-        return postsFetched
-      })
-      .then((data) => {
-        console.log(data[0].keys())
-        return data
-      })
+  const fetchPosts = (category) => {
+      getArticlesByCategory(category)
+      .then(res => setPosts(res.data.body.results))
       .catch((err) => console.log(err))
       .finally(() => console.log("Fetch Posts Executed"))
   }
 
   useConstructor(function () {
-    const fetchPost = fetchPosts();
-    console.log(fetchPost)
+    fetchPosts('Sector Updates');
   })
 
   const styles = StyleSheet.create({
@@ -60,11 +49,12 @@ const RecentPostsSection = () => {
         <View style={styles.recentPostsContainer}>
 
           {posts.map((item) => <VerticalNewsCard
-            key={item.key}
+            key={item.id}
             id={item.id}
-            image={item.image}
+            image={{uri :item.cover_image}}
             author={item.author}
-            headline={item.headline}
+            headline={item.title}
+            onPress={() => navigateToArticle(navigation,item.id,item.slug)}
           />)}
 
         </View>