API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 13th, 2017
194
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.72 KB | None | 0 0
raw download clone embed print report
  1. import React from 'react';
  2. import { StyleSheet, Text, View, AppRegistry, TouchableOpacity, Alert, TextInput, KeyboardAvoidingView, Image, ImageBackground, Modal } from 'react-native';
  3. import axios from 'axios';
  4. import { AppLoading, Asset, Font } from 'expo';
  5.  
  6. export default class Home extends React.Component {
  7. static navigationOptions = {
  8. title: 'Home',
  9. header: null,
  10. };
  11. //TO-DO:
  12. //Style a "get bottle" button and display # of available bottles to user
  13. //Add # to available bottles each day @ midnight
  14. constructor(props) {
  15. super(props);
  16. this.state = {
  17. available_list: [],
  18. owned_list_id: this.props.navigation.state.params.data.owned,
  19. owned_list_bottles: [],
  20. pending_bottles: 0,
  21. available_bottles: 100,
  22. owned_bottles: this.props.navigation.state.params.data.owned_bottles,
  23. beach_tier: this.props.navigation.state.params.data.completedTasks,
  24. showbottle1: false,
  25. showbottle2: false,
  26. showbottle3: false,
  27. showModal: false,
  28. modalMessage: '',
  29. modalAuthor: '',
  30. profilePicture: this.props.navigation.state.params.data.profilepicture,
  31. tasks: this.props.navigation.state.params.data.tasks,
  32. }
  33. }
  34.  
  35. //Adds a bottle if there aren't already 3 on the beach and the user has available bottles
  36. addBottle = () => {
  37. if(this.state.pending_bottles < 3 && this.state.available_bottles > 0){
  38. this.state.pending_bottles = this.state.pending_bottles + 1;
  39. this.state.available_bottles = this.state.available_bottles - 1;
  40. if(!this.state.showbottle1){
  41. this.setState({showbottle1: true});
  42. }
  43. else if(!this.state.showbottle2){
  44. this.setState({showbottle2: true});
  45. }
  46. else if(!this.state.showbottle3){
  47. this.setState({showbottle3: true});
  48. }
  49. }
  50. }
  51. clickedBottle1 = () => {
  52. if(this.state.showbottle1){
  53. this.setState({showbottle1: false});
  54. this.state.pending_bottles = this.state.pending_bottles - 1;
  55. //var bottle_id = Math.floor(Math.random()*this.state.available_list.length);
  56. var bottle_id = 0;
  57. this.setState({modalMessage: this.state.available_list[bottle_id].content});
  58. this.setState({modalAuthor: this.state.available_list[bottle_id].author});
  59. this.state.owned_list_bottles.push(this.state.available_list[bottle_id]);
  60. //axios.push this new owned_list
  61. this.state.available_list.splice(bottle_id, 1);
  62. this.state.owned_bottles = this.state.owned_list_bottles.length;
  63. this.setState({showModal: true});
  64. }
  65. }
  66. clickedBottle2 = () => {
  67. if(this.state.showbottle2){
  68. this.setState({showbottle2: false});
  69. this.state.pending_bottles = this.state.pending_bottles - 1;
  70. //var bottle_id = Math.floor(Math.random()*this.state.available_list.length);
  71. var bottle_id = 0;
  72. this.setState({modalMessage: this.state.available_list[bottle_id].content});
  73. this.setState({modalAuthor: this.state.available_list[bottle_id].author});
  74. this.state.owned_list_bottles.push(this.state.available_list[bottle_id]);
  75. //axios.push this new owned_list
  76. this.state.available_list.splice(bottle_id, 1);
  77. this.state.owned_bottles = this.state.owned_list_bottles.length;
  78. this.setState({showModal: true});
  79. }
  80. }
  81. clickedBottle3 = () => {
  82. if(this.state.showbottle3){
  83. this.setState({showbottle3: false});
  84. this.state.pending_bottles = this.state.pending_bottles - 1;
  85. //var bottle_id = Math.floor(Math.random()*this.state.available_list.length);
  86. var bottle_id = 0;
  87. this.setState({modalMessage: this.state.available_list[bottle_id].content});
  88. this.setState({modalAuthor: this.state.available_list[bottle_id].author});
  89. this.state.owned_list_bottles.push(this.state.available_list[bottle_id]);
  90. //axios.push this new owned_list
  91. this.state.available_list.splice(bottle_id, 1);
  92. this.state.owned_bottles = this.state.owned_list_bottles.length;
  93. this.setState({showModal: true});
  94. }
  95. }
  96. closeModal = () => {
  97. this.setState({showModal: false});
  98. };
  99. //Get all the bottles into an array
  100. componentWillMount() {
  101. let hostname = "messageinarawr498.herokuapp.com"; //Alec's IP
  102. let bottleEndpt = "https://" + hostname + "/api/bottles";
  103. axios.get(bottleEndpt)
  104. .then((response) => {
  105. let available_list = reponse.data.data;
  106. let owned_list_id = this.state.owned_list;
  107. let owned_list_bottles = [];
  108. let found = 0;
  109. for(i=0;i<available_list.length;i++){
  110. current_bottle_id = available_list[i]._id
  111. found = 0;
  112. for(j=0;j<owned_list_id.length;j++){
  113. if(current_bottle_id===owned_list_id[j]){
  114. owned_list_bottles.push(available_list[i]);
  115. available_list.splice(i,1);
  116. found = 1;
  117. }
  118. if(found == 1){
  119. break;
  120. }
  121. }
  122. this.setState(available_list: available_list);
  123. this.setState(owned_list_bottles: owned_list_bottles);
  124. }
  125. //loop thru available_list nested loop for each item that looks thru owned_list, remove current element from available_list if it is owned_list
  126. //this.setState({available_list: available_list});
  127.  
  128. })
  129. .catch((error) => {
  130. console.log('Error', JSON.stringify(error));
  131. });
  132.  
  133. }
  134. //Currently have to put a render for each possible image which is awful because require() needs a string literal
  135. render() {
  136. const { navigate } = this.props.navigation;
  137. //if(this.state.beach_tier == 0) {
  138. return (
  139. <ImageBackground source={require('../assets/beachtier0.png')} style={styles.background}>
  140. <Modal visible={this.state.showModal}>
  141. <View style={[styles.container]}>
  142. <ImageBackground style={{flex: 1, justifyContent: 'center', alignSelf: 'center', width: '100%', height: '100%', marginTop: 30,}} source={require('../assets/lower-res-scroll2.png')}>
  143. <Text style={styles.content}>{this.state.modalMessage}</Text>
  144. <Text style={styles.author}>-{this.state.modalAuthor}</Text>
  145. </ImageBackground>
  146. <View style={styles.modalButtonContainer}>
  147. <TouchableOpacity style={[styles.modalButton, {backgroundColor: '#17c11a'}]} onPress={this.closeModal}>
  148. <Text style={[styles.buttonText, {color: '#fff'}]}>OK</Text>
  149. </TouchableOpacity>
  150. </View>
  151. </View>
  152. </Modal>
  153. {this.state.showbottle1 &&
  154. <TouchableOpacity style={styles.bottles} onPress={this.clickedBottle1} id = 'bottle1'>
  155. <Image source = {require('../assets/bottle1.png')} style={[styles.bottles,styles.bottle1]}/>
  156. </TouchableOpacity>
  157. }
  158. {this.state.showbottle2 &&
  159. <TouchableOpacity style={styles.bottles} onPress={this.clickedBottle2} id = 'bottle2'>
  160. <Image source = {require('../assets/bottle2.png')} style={[styles.bottles,styles.bottle2]}/>
  161. </TouchableOpacity>
  162. }
  163. {this.state.showbottle3 &&
  164. <TouchableOpacity style={styles.bottles} onPress={this.clickedBottle3} id = 'bottle3'>
  165. <Image source = {require('../assets/bottle3.png')} style={[styles.bottles,styles.bottle3]}/>
  166. </TouchableOpacity>
  167. }
  168. <View style={styles.buttonContainer}>
  169. <TouchableOpacity style={styles.button} onPress={this.addBottle}>
  170. <Text style={styles.buttonText}>Get New Bottle</Text>
  171. </TouchableOpacity>
  172. </View>
  173. </ImageBackground>
  174. );
  175. }
  176. //}
  177. }
  178.  
  179. const styles = StyleSheet.create({
  180. background: {
  181. width: '100%',
  182. height: '100%',
  183. },
  184. button: {
  185. backgroundColor: 'rgba(255, 255, 255, 0.7)',
  186. paddingVertical: 15,
  187. marginBottom: 20,
  188. width: 250,
  189. borderRadius: 10,
  190. },
  191. buttonContainer: {
  192. justifyContent: 'center',
  193. alignItems: 'center',
  194. marginTop: 525,
  195. },
  196. bottles: {
  197.  
  198. },
  199. bottle1: {
  200. position: 'absolute',
  201. top: 380, // 295
  202. left: 20,
  203. width: 65,
  204. height: 65
  205. },
  206. bottle2: {
  207. position: 'absolute',
  208. top: 345, // 260
  209. left: 75,
  210. width: 100,
  211. height: 100
  212. },
  213. bottle3: {
  214. position: 'absolute',
  215. top: 315, // 230
  216. left: 135,
  217. width: 70,
  218. height: 70
  219. },
  220. buttonText: {
  221. textAlign: 'center',
  222. fontWeight: '700',
  223. },
  224. modalButtonContainer: {
  225. justifyContent: 'center',
  226. alignItems: 'center',
  227.  
  228. },
  229. modalButton: {
  230. paddingVertical: 15,
  231. marginBottom: 20,
  232. width: 250,
  233. borderRadius: 10,
  234. },
  235. container: {
  236. flex: 1,
  237. backgroundColor: '#ADD8E6',
  238. },
  239. content: {
  240. alignItems: 'center',
  241. justifyContent: 'center',
  242. height: 360,
  243. backgroundColor: 'rgba(255, 255, 255, 0)',
  244. paddingHorizontal: 10,
  245. marginLeft: 20,
  246. fontFamily: 'Allura-Regular',
  247. fontSize: 24,
  248. marginBottom: 10,
  249. },
  250. author: {
  251. alignItems: 'center',
  252. justifyContent: 'center',
  253. backgroundColor: 'rgba(255, 255, 255, 0)',
  254. paddingHorizontal: 10,
  255. marginLeft: 20,
  256. fontFamily: 'Allura-Regular',
  257. fontSize: 24,
  258. marginBottom: 10,
  259. },
  260. });
  261.  
  262. AppRegistry.registerComponent('Home', () => Home);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!