1 import React, {FC, ReactElement, useState} from 'react';
2 import {
3 Alert,
4 Image,
5 View,
6 Platform,
7 ScrollView,
8 StyleSheet,
9 } from 'react-native';
10 import Parse from 'parse/react-native';
11 import {
12 List,
13 Title,
14 TextInput as PaperTextInput,
15 Button as PaperButton,
16 Text as PaperText,
17 } from 'react-native-paper';
18
19 export const MovieRatings: FC<{}> = ({}): ReactElement => {
20
21 const [queryResults, setQueryResults] = useState(null);
22 const [ratingsAverage, setRatingsAverage] = useState('');
23 const [reviewText, setReviewText] = useState('');
24 const [reviewRate, setReviewRate] = useState('');
25
26 const runGetMovieAverageRating = async function (): Promise<boolean> {
27 try {
28 const params: {movie: string} = {
29 movie: 'Mission Very Possible',
30 };
31 let resultObject: {result: number} = await Parse.Cloud.run(
32 'getMovieAverageRating',
33 params,
34 );
35
36 setRatingsAverage(resultObject.result.toFixed(1));
37 return true;
38 } catch (error) {
39
40
41 Alert.alert(
42 'Error!',
43 'Make sure that the cloud function is deployed and that the Review class table is created',
44 );
45 return false;
46 }
47 };
48
49 const doReviewQuery = async function (): Promise<boolean> {
50
51 let parseQuery: Parse.Query = new Parse.Query('Review');
52 try {
53 let results: [Parse.Object] = await parseQuery.find();
54
55 setQueryResults(results);
56 return true;
57 } catch (error) {
58
59 Alert.alert('Error!', error.message);
60 return false;
61 }
62 };
63
64 const createReview = async function (): Promise<boolean> {
65 try {
66
67
68 const reviewTextValue: string = reviewText;
69 const reviewRateValue: number = Number(reviewRate);
70
71
72 let Review: Parse.Object = new Parse.Object('Review');
73
74
75
76 Review.set('text', reviewTextValue);
77
78
79 Review.set('rate', reviewRateValue);
80
81
82 Review.set('movie', 'Mission Very Possible');
83
84
85 try {
86 await Review.save();
87
88 Alert.alert('Success!');
89
90 doReviewQuery();
91 runGetMovieAverageRating();
92 return true;
93 } catch (error) {
94
95 Alert.alert('Error!', error.message);
96 return false;
97 }
98 } catch (error) {
99
100 Alert.alert('Error!', error.message);
101 return false;
102 }
103 };
104
105 return (
106 <>
107 <View style={Styles.header}>
108 <Image
109 style={Styles.header_logo}
110 source={ {
111 uri:
112 'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png',
113 } }
114 />
115 <PaperText style={Styles.header_text}>
116 <PaperText style={Styles.header_text_bold}>
117 {'React Native on Back4App - '}
118 </PaperText>
119 {' Cloud Code Movie Ratings'}
120 </PaperText>
121 </View>
122 <ScrollView style={Styles.wrapper}>
123 <View>
124 <Title>{'Mission Very Possible Reviews'}</Title>
125 <PaperText>{`Ratings Average: ${ratingsAverage}`}</PaperText>
126 {}
127 {queryResults !== null &&
128 queryResults !== undefined &&
129 queryResults.map((result: Parse.Object) => (
130 <List.Item
131 key={result.id}
132 title={`Review text: ${result.get('text')}`}
133 description={`Rate: ${result.get('rate')}`}
134 titleStyle={Styles.list_text}
135 style={Styles.list_item}
136 />
137 ))}
138 {queryResults === null ||
139 queryResults === undefined ||
140 (queryResults !== null &&
141 queryResults !== undefined &&
142 queryResults.length <= 0) ? (
143 <PaperText>{'No results here!'}</PaperText>
144 ) : null}
145 </View>
146 <View>
147 <Title>Action Buttons</Title>
148 <PaperButton
149 onPress={() => runGetMovieAverageRating()}
150 mode="contained"
151 icon="search-web"
152 color={'#208AEC'}
153 style={Styles.list_button}>
154 {'Calculate Review Average'}
155 </PaperButton>
156 <PaperButton
157 onPress={() => doReviewQuery()}
158 mode="contained"
159 icon="search-web"
160 color={'#208AEC'}
161 style={Styles.list_button}>
162 {'Query Reviews'}
163 </PaperButton>
164 </View>
165 <View>
166 <Title>Add new review</Title>
167 <PaperTextInput
168 value={reviewText}
169 onChangeText={text => setReviewText(text)}
170 label="Text"
171 mode="outlined"
172 style={Styles.form_input}
173 />
174 <PaperTextInput
175 value={reviewRate}
176 onChangeText={text => setReviewRate(text)}
177 keyboardType={'number-pad'}
178 label="Rate (1-5)"
179 mode="outlined"
180 style={Styles.form_input}
181 />
182 <PaperButton
183 onPress={() => createReview()}
184 mode="contained"
185 icon="plus"
186 style={Styles.submit_button}>
187 {'Add'}
188 </PaperButton>
189 </View>
190 </ScrollView>
191 </>
192 );
193 };
194
195
196 const Styles = StyleSheet.create({
197 header: {
198 alignItems: 'center',
199 paddingTop: 30,
200 paddingBottom: 50,
201 backgroundColor: '#208AEC',
202 },
203 header_logo: {
204 height: 50,
205 width: 220,
206 resizeMode: 'contain',
207 },
208 header_text: {
209 marginTop: 15,
210 color: '#f0f0f0',
211 fontSize: 16,
212 },
213 header_text_bold: {
214 color: '#fff',
215 fontWeight: 'bold',
216 },
217 wrapper: {
218 width: '90%',
219 alignSelf: 'center',
220 },
221 list_button: {
222 marginTop: 6,
223 marginLeft: 15,
224 height: 40,
225 },
226 list_item: {
227 borderBottomWidth: 1,
228 borderBottomColor: 'rgba(0, 0, 0, 0.12)',
229 },
230 list_text: {
231 fontSize: 15,
232 },
233 form_input: {
234 height: 44,
235 marginBottom: 16,
236 backgroundColor: '#FFF',
237 fontSize: 14,
238 },
239 submit_button: {
240 width: '100%',
241 maxHeight: 50,
242 alignSelf: 'center',
243 backgroundColor: '#208AEC',
244 },
245 });