47 lines
No EOL
1.6 KiB
JavaScript
47 lines
No EOL
1.6 KiB
JavaScript
import { View, Text, ScrollView, ActivityIndicator} from 'react-native';
|
|
import React, { useEffect, useState } from 'react';
|
|
import HomeCategory from "../Components/HomeCategory";
|
|
import HomeTopHeadline from "../Components/HomeTopHeadline";
|
|
import HomeHeadlineList from "../Components/HomeHeadlineList";
|
|
import {useFonts} from 'expo-font'
|
|
import globalAPI from '../Service/globalAPI';
|
|
|
|
const Home = () => {
|
|
useFonts({
|
|
'playFairBold': require('../../assets/fonts/PlayfairDisplay-Bold.ttf')
|
|
})
|
|
|
|
const [newsList, setNewsList] = useState([]);
|
|
const [loading, setLoading] = useState(true)
|
|
useEffect(() => {
|
|
getTopHeadline();
|
|
getByCategory('latest');
|
|
}, [])
|
|
//get all
|
|
const getTopHeadline = async() => {
|
|
const result = (await globalAPI.getTopHeadline).data;
|
|
setNewsList(result.articles)
|
|
}
|
|
//get by category
|
|
const getByCategory = async(category) => {
|
|
setLoading(true);
|
|
const result = (await globalAPI.getByCategory(category)).data;
|
|
setNewsList(result.articles)
|
|
setLoading(false);
|
|
}
|
|
|
|
return (
|
|
<ScrollView style={{backgroundColor: "white"}}>
|
|
{loading? < ActivityIndicator size={'large'} style={{color: "gray"}}/> :
|
|
<View>
|
|
<Text style={{marginTop: 10, fontSize: 32, fontFamily: 'playFairBold', color: "#000000", textAlign: "center", marginBottom: 20}}>The Quick News</Text>
|
|
<HomeCategory selectCategory={(category) => getByCategory(category)}/>
|
|
<HomeTopHeadline newsList={newsList}/>
|
|
<HomeHeadlineList newsList={newsList}/>
|
|
</View>
|
|
}
|
|
</ScrollView>
|
|
)
|
|
}
|
|
|
|
export default Home |