Skip to content

Commit e41da31

Browse files
author
Younes Henni
committed
Added number of entries, styled like button, refresh button and scroll
1 parent 70f67af commit e41da31

File tree

4 files changed

+478
-243
lines changed

4 files changed

+478
-243
lines changed

‎App.js

Lines changed: 66 additions & 243 deletions
Original file line numberDiff line numberDiff line change
@@ -1,273 +1,96 @@
11
import React from 'react'
2-
import {
3-
View,
4-
TextInput,
5-
ScrollView,
6-
Alert,
7-
TouchableOpacity
8-
} from 'react-native'
2+
import { StyleSheet, Text, View } from 'react-native'
93

10-
// Amplify auth imports and config
114
import Amplify from '@aws-amplify/core'
12-
import { withAuthenticator } from 'aws-amplify-react-native'
13-
import config from './src/aws-exports'
14-
import Auth from '@aws-amplify/auth'
15-
16-
// Amplify api imports
175
import API, { graphqlOperation } from '@aws-amplify/api'
18-
import {
19-
createPost,
20-
listPosts,
21-
deletePost,
22-
createLike,
23-
deleteLike
24-
} from './src/components/GraphQL/GraphQL'
25-
26-
// Imports from native-base
27-
import { Form, Item, Button, Text, Card, Icon } from 'native-base'
6+
import { withAuthenticator } from 'aws-amplify-react-native'
287

29-
// Import style
30-
import styles from './src/components/Styles'
8+
import config from './src/aws-exports'
9+
import Posts from './src/components/Posts'
10+
import { listPosts } from './src/GraphQL/GraphQL'
3111

12+
// configure the app with Amplify
3213
Amplify.configure(config)
3314

3415
class App extends React.Component {
3516
state = {
36-
postContent: '',
37-
postOwnerId: '',
38-
postOwnerUsername: '',
39-
posts: [],
40-
likeOwnerUsername: '',
41-
likeOwnerId: '',
42-
numberLikes: 0,
17+
posts: '',
18+
refreshing: false,
4319
}
4420

4521
componentDidMount = async () => {
46-
// Get the current authenticated user
47-
await Auth.currentAuthenticatedUser()
48-
.then(user => {
49-
this.setState(
50-
{
51-
postOwnerUsername: user.username,
52-
postOwnerId: user.attributes.sub,
53-
likeOwnerUsername: user.username,
54-
likeOwnerId: user.attributes.sub
55-
}
56-
)
57-
})
58-
.catch(err => console.log(err))
59-
// Mount all published posts on app load
60-
this.listPosts()
22+
this.timerID = await setInterval(() => {
23+
this.countPosts()
24+
},
25+
1000)
6126
}
6227

63-
// Get the user input for the post
64-
onChangeText = (key, val) => {
65-
this.setState({ [key]: val })
28+
componentWillUnmount = async () => {
29+
await clearInterval(this.timerID)
6630
}
6731

68-
// Let the user create a new post
69-
createPost = async () => {
70-
const post = this.state
71-
if (post.postContent === '') {
72-
console.log('Write something!')
73-
return
74-
}
32+
// Get number of posts from the Upload Component
33+
countPosts = async () => {
7534
try {
76-
await API.graphql(graphqlOperation(createPost, post))
77-
await this.componentDidMount()
78-
console.log('Post successfully created.', post)
79-
} catch (err) {
80-
console.log('Error creating post.', err)
81-
}
82-
}
83-
84-
// List all posts
85-
listPosts = async () => {
86-
try {
87-
const graphqldata = await API.graphql(
88-
graphqlOperation(listPosts)
89-
)
90-
this.setState(
91-
{
92-
posts: graphqldata.data.listPosts.items,
93-
postContent: ''
94-
}
95-
)
35+
const graphqldata = await API.graphql(graphqlOperation(listPosts))
36+
this.setState({
37+
posts: graphqldata.data.listPosts.items, postContent: ''
38+
})
39+
// console.log(this.state.posts.length)
9640
}
9741
catch (err) {
9842
console.log('error: ', err)
9943
}
10044
}
10145

102-
// Alert users when they press the delete button
103-
deletePostAlert = async (post) => {
104-
await Alert.alert(
105-
'Delete Post',
106-
'Are you sure you wanna delete this post?',
107-
[
108-
{text: 'Cancel', onPress: () => console.log('Canceled'), style: 'cancel'},
109-
{text: 'OK', onPress: () => this.confirmDeletePost(post)},
110-
],
111-
{ cancelable: false }
112-
)
113-
}
114-
115-
// Delete a post instance
116-
confirmDeletePost = async (post) => {
117-
// Grab the post id
118-
const postId = await post['id']
119-
try {
120-
await API.graphql(graphqlOperation(deletePost, { id: postId }))
121-
await this.componentDidMount()
122-
console.log('Post successfully deleted.')
123-
} catch (err) {
124-
console.log('Error deleting post.', err)
125-
}
126-
}
127-
128-
toggleLikePost = async (post) => {
129-
const loggedInUser = await this.state.postOwnerId
130-
// Get the like instance of the logged in user
131-
const likeUserObject = await post.likes.items.filter(
132-
obj => obj.likeOwnerId === loggedInUser
133-
)
134-
// If there is a like instance fire a delete action
135-
if (likeUserObject.length !== 0) {
136-
await this.deleteLike(likeUserObject)
137-
return
138-
}
139-
// Otherwise create a like instance
140-
await this.createLike(post)
141-
}
142-
143-
createLike = async (post) => {
144-
const postId = await post['id']
145-
this.setState({numberLikes: 1})
146-
const like = {
147-
likeOwnerId: this.state.likeOwnerId,
148-
numberLikes: this.state.numberLikes,
149-
likeOwnerUsername: this.state.likeOwnerUsername,
150-
id: postId,
151-
}
152-
try {
153-
await API.graphql(graphqlOperation(createLike, like))
154-
console.log('Like successfully created.', like)
155-
await this.componentDidMount()
156-
} catch (err) {
157-
console.log('Error creating like.', err)
158-
}
159-
}
160-
161-
deleteLike = async (likeUserObject) => {
162-
const likeId = await likeUserObject[0]['id']
163-
try {
164-
await API.graphql(graphqlOperation(deleteLike, { id: likeId }))
165-
console.log('Like successfully deleted.')
166-
await this.componentDidMount()
167-
} catch (err) {
168-
console.log('Error deleting like.', err)
169-
}
170-
}
171-
17246
render() {
173-
// Grab the ID of the logged in user
174-
let loggedInUser = this.state.postOwnerId
17547
return (
176-
<View style={{flex: 1}}>
177-
<View style={styles.headerStyle}>
178-
<Form style={{padding: 13}}>
179-
<Item>
180-
<TextInput
181-
onChangeText={val => this.onChangeText('postContent', val)}
182-
placeholder="Type here ..."
183-
value={this.state.postContent}
184-
style={{fontSize:22, padding: 13}}
185-
/>
186-
</Item>
187-
</Form>
188-
<View style={{ flexDirection: 'row'}}>
189-
<Button
190-
style={styles.buttonStyle}
191-
onPress={this.createPost}>
192-
<Text>Add Post</Text>
193-
</Button>
194-
</View>
48+
<View style={{ flex: 1 }}>
49+
<View style={styles.container}>
50+
{/* Number of entries */}
51+
<View style={{ flex: 1, alignItems: 'center', marginRight: 20 }}>
52+
<Text style={styles.textStyle}>
53+
ENTRIES
54+
</Text>
55+
<Text style={styles.textTimerStyle}>
56+
{this.state.posts.length}
57+
</Text>
58+
</View>
19559
</View>
196-
<ScrollView contentContainerStyle={styles.container}>
197-
<View style={{flex: 1, alignItems: 'center'}}>
198-
{
199-
this.state.posts.map((post, index) => (
200-
<Card key={index} style={styles.cardStyle}>
201-
{/* Post body */}
202-
<Text style={styles.postBody}>
203-
{post.postContent}
204-
</Text>
205-
<Text style={styles.postUsername}>
206-
{post.postOwnerUsername}
207-
</Text>
208-
{/* Like button functionality */}
209-
<View style={styles.cardFooterStyle}>
210-
{/* Logged in user liked this post */}
211-
{
212-
post.likes.items.length !== 0 &&
213-
post.likes.items.filter(
214-
obj => obj.likeOwnerId === loggedInUser
215-
).length === 1 &&
216-
<View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
217-
<TouchableOpacity
218-
onPress={() => this.toggleLikePost(post)}>
219-
<Icon
220-
name='md-heart'
221-
style={{ fontSize: 55, color: '#fb7777' }}
222-
/>
223-
</TouchableOpacity>
224-
</View>
225-
}
226-
{/* Logged in user did not like this post */}
227-
{
228-
post.likes.items.length !== 0 &&
229-
post.likes.items.filter(
230-
obj => obj.likeOwnerId === loggedInUser
231-
).length === 0 &&
232-
<View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
233-
<TouchableOpacity
234-
onPress={() => this.toggleLikePost(post)}>
235-
<Icon
236-
name='md-heart'
237-
style={{ fontSize: 55, color: '#69ff' }}
238-
/>
239-
</TouchableOpacity>
240-
</View>
241-
}
242-
{/* Post has no likes yet */}
243-
{
244-
post.likes.items.length === 0 &&
245-
<View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
246-
<TouchableOpacity
247-
onPress={() => this.toggleLikePost(post)}>
248-
<Icon
249-
name='md-heart'
250-
style={{ fontSize: 55, color: '#69ff' }}
251-
/>
252-
</TouchableOpacity>
253-
</View>
254-
}
255-
{/* Show delete Icon if logged in user is the post owner */}
256-
{ post.postOwnerId === loggedInUser &&
257-
<Icon
258-
name='ios-trash'
259-
onPress={() => this.deletePostAlert(post)}
260-
/>
261-
}
262-
</View>
263-
</Card>
264-
))
265-
}
266-
</View>
267-
</ScrollView>
268-
</View>
269-
);
60+
<Posts countPosts={this.countPosts} />
61+
</View>
62+
)
27063
}
27164
}
27265

273-
export default withAuthenticator(App, {includeGreetings: true})
66+
export default withAuthenticator(
67+
App, {
68+
// Render a sign out button once logged in
69+
includeGreetings: true}
70+
)
71+
72+
const styles = StyleSheet.create({
73+
container: {
74+
flex: 0.10,
75+
flexDirection: 'row',
76+
alignItems: 'center',
77+
justifyContent: 'flex-start',
78+
borderBottomWidth: 1,
79+
borderBottomColor: '#a8abaf',
80+
},
81+
textStyle: {
82+
fontSize: 18,
83+
color: '#3d4147',
84+
},
85+
textTimerStyle: {
86+
fontSize: 18,
87+
color: '#5017ae',
88+
fontWeight: 'bold'
89+
},
90+
lockIconStyle: {
91+
color: '#5017ae',
92+
fontSize: 45,
93+
}
94+
})
95+
96+

‎src/components/GraphQL/GraphQL.js renamed to ‎src/GraphQL/GraphQL.js

File renamed without changes.

‎src/components/GraphQL/schema.graphql renamed to ‎src/GraphQL/schema.graphql

File renamed without changes.

0 commit comments

Comments
 (0)