1 year ago
#68173
Shubham Sonar
Polling in React-Native using class components
- Periodically (every 10seconds) poll for new posts from this API https://hn.algolia.com/api/v1/search_by_date?tags=story&page=0 via a GET request.
- New posts fetched after 10 seconds will be added to old posts.
- Increase page count in each subsequent request.
- Implement pagination when the list is scrolled.
- The pagination and periodic request both should work manually exclusive i.e for each request page number will be increased. Requests with the same page number should never be made.
- Display the title, URL, created_at, and author of each post in a table.
- Upon selecting a row in the table, a model should appear containing the raw JSON data of the post.
- Support the ability to filter by created_at and title.
- Support the ability to search the table by title, URL, and author name.
What I have Done for that
class MainPostPoll extends Component<any, any> { constructor(props: any) { super(props) this.state = { loading: false, fromFetch: false, fromAxios: false, axiosData: [], } }
goForAxios = () => { this.setState({ loading: true, }) axios .get('https://hn.algolia.com/api/v1/search_by_date?tags=story&page=0') .then((response) => { console.log('getting data from axios', response.data)
this.setState({
loading: false,
axiosData: response.data.hits,
})
})
.catch((error) => {
console.log(error)
})
}
renderItem = (item: any) => { return ( {item.item.title} {item.item.url} {item.item.created_at} {item.item.author} ) }
render() { return (
<View>
<View style={{ margin: 18 }}>
<TouchableOpacity style={{}} onPress={this.goForAxios}>
<Text>PostPoll</Text>
</TouchableOpacity>
</View>
<FlatList
data={this.state.axiosData}
renderItem={(item) => this.renderItem(item)}
keyExtractor={(item) => item.id}
/>
</View>
)
} }
javascript
arrays
reactjs
react-native
polling
0 Answers
Your Answer