-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
52 lines (47 loc) · 1.65 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import React, {useState, useEffect} from 'react';
import {ScrollView} from 'react-native';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {PostData} from './types/PostData';
import {CommentData} from './types/CommentData';
import {PostCard} from './components/PostCard';
import {CommentCard} from './components/CommentCard';
import {Text, Appbar} from 'react-native-paper';
function App() {
const [posts, setPosts] = useState<PostData[]>([]);
const [currPost, setCurrPost] = useState(1);
const [comments, setComments] = useState<CommentData[]>([]);
// Fetch the first 10 posts on render
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(res => res.json())
.then(data => setPosts(data.slice(0, 10)));
}, []);
// Fetch comments on comment update
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/comments?postId=' + currPost)
.then(res => res.json())
.then(data => setComments(data));
}, [currPost]);
return (
<SafeAreaProvider>
<Appbar.Header>
<Appbar.Content title="Feed" />
</Appbar.Header>
<ScrollView>
<Text variant="headlineLarge" style={{paddingLeft: 10}}>
Posts
</Text>
{posts.map(post => {
return <PostCard data={post} onClick={() => setCurrPost(post.id)} key={post.id} />;
})}
<Text variant="headlineMedium" style={{paddingLeft: 10}}>
Comments for post {currPost}
</Text>
{comments.map(comment => {
return <CommentCard data={comment} key={comment.id} />;
})}
</ScrollView>
</SafeAreaProvider>
);
}
export default App;