API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 13th, 2017
66
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.  
  36. //Adds a bottle if there aren't already 3 on the beach and the user has available bottles
  37. addBottle = () => {
  38. if(this.state.pending_bottles < 3 && this.state.available_bottles > 0){
  39. this.state.pending_bottles = this.state.pending_bottles + 1;
  40. this.state.available_bottles = this.state.available_bottles - 1;
  41. if(!this.state.showbottle1){
  42. this.setState({showbottle1: true});
  43. }
  44. else if(!this.state.showbottle2){
  45. this.setState({showbottle2: true});
  46. }
  47. else if(!this.state.showbottle3){
  48. this.setState({showbottle3: true});
  49. }
  50. }
  51. }
  52. clickedBottle1 = () => {
  53. if(this.state.showbottle1){
  54. this.setState({showbottle1: false});
  55. this.state.pending_bottles = this.state.pending_bottles - 1;
  56. //var bottle_id = Math.floor(Math.random()*this.state.available_list.length);
  57. var bottle_id = 0;
  58. this.setState({modalMessage: this.state.available_list[bottle_id].content});
  59. this.setState({modalAuthor: this.state.available_list[bottle_id].author});
  60. this.state.owned_list_bottles.push(this.state.available_list[bottle_id]);
  61. //axios.push this new owned_list
  62. this.state.available_list.splice(bottle_id, 1);
  63. this.state.owned_bottles = this.state.owned_list_bottles.length;
  64. this.setState({showModal: true});
  65. }
  66. }
  67. clickedBottle2 = () => {
  68. if(this.state.showbottle2){
  69. this.setState({showbottle2: false});
  70. this.state.pending_bottles = this.state.pending_bottles - 1;
  71. //var bottle_id = Math.floor(Math.random()*this.state.available_list.length);
  72. var bottle_id = 0;
  73. this.setState({modalMessage: this.state.available_list[bottle_id].content});
  74. this.setState({modalAuthor: this.state.available_list[bottle_id].author});
  75. this.state.owned_list_bottles.push(this.state.available_list[bottle_id]);
  76. //axios.push this new owned_list
  77. this.state.available_list.splice(bottle_id, 1);
  78. this.state.owned_bottles = this.state.owned_list_bottles.length;
  79. this.setState({showModal: true});
  80. }
  81. }
  82. clickedBottle3 = () => {
  83. if(this.state.showbottle3){
  84. this.setState({showbottle3: false});
  85. this.state.pending_bottles = this.state.pending_bottles - 1;
  86. //var bottle_id = Math.floor(Math.random()*this.state.available_list.length);
  87. var bottle_id = 0;
  88. this.setState({modalMessage: this.state.available_list[bottle_id].content});
  89. this.setState({modalAuthor: this.state.available_list[bottle_id].author});
  90. this.state.owned_list_bottles.push(this.state.available_list[bottle_id]);
  91. //axios.push this new owned_list
  92. this.state.available_list.splice(bottle_id, 1);
  93. this.state.owned_bottles = this.state.owned_list_bottles.length;
  94. this.setState({showModal: true});
  95. }
  96. }
  97. closeModal = () => {
  98. this.setState({showModal: false});
  99. };
  100. //Get all the bottles into an array
  101. componentWillMount() {
  102. let hostname = "messageinarawr498.herokuapp.com"; //Alec's IP
  103. let bottleEndpt = "https://" + hostname + "/api/bottles";
  104. axios.get(bottleEndpt)
  105. .then((response) => {
  106. let available_list = reponse.data.data;
  107. let owned_list_id = this.state.owned_list;
  108. let owned_list_bottles = [];
  109. let found = 0;
  110. for(i=0;i<available_list.length;i++){
  111. current_bottle_id = available_list[i]._id
  112. found = 0;
  113. for(j=0;j<owned_list_id.length;j++){
  114. if(current_bottle_id===owned_list_id[j]){
  115. owned_list_bottles.push(available_list[i]);
  116. available_list.splice(i,1);
  117. found = 1;
  118. }
  119. if(found == 1){
  120. break;
  121. }
  122. }
  123. this.setState(available_list: available_list);
  124. this.setState(owned_list_bottles: owned_list_bottles);
  125. }
  126. //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
  127. //this.setState({available_list: available_list});
  128.  
  129. })
  130. .catch((error) => {
  131. console.log('Error', JSON.stringify(error));
  132. });
  133.  
  134. }
  135. //Currently have to put a render for each possible image which is awful because require() needs a string literal
  136. render() {
  137. const { navigate } = this.props.navigation;
  138. //if(this.state.beach_tier == 0) {
  139. return (
  140. <ImageBackground source={require('../assets/beachtier0.png')} style={styles.background}>
  141. <Modal visible={this.state.showModal}>
  142. <View style={[styles.container]}>
  143. <ImageBackground style={{flex: 1, justifyContent: 'center', alignSelf: 'center', width: '100%', height: '100%', marginTop: 30,}} source={require('../assets/lower-res-scroll2.png')}>
  144. <Text style={styles.content}>{this.state.modalMessage}</Text>
  145. <Text style={styles.author}>-{this.state.modalAuthor}</Text>
  146. </ImageBackground>
  147. <View style={styles.modalButtonContainer}>
  148. <TouchableOpacity style={[styles.modalButton, {backgroundColor: '#17c11a'}]} onPress={this.closeModal}>
  149. <Text style={[styles.buttonText, {color: '#fff'}]}>OK</Text>
  150. </TouchableOpacity>
  151. </View>
  152. </View>
  153. </Modal>
  154. {this.state.showbottle1 &&
  155. <TouchableOpacity style={styles.bottles} onPress={this.clickedBottle1} id = 'bottle1'>
  156. <Image source = {require('../assets/bottle1.png')} style={[styles.bottles,styles.bottle1]}/>
  157. </TouchableOpacity>
  158. }
  159. {this.state.showbottle2 &&
  160. <TouchableOpacity style={styles.bottles} onPress={this.clickedBottle2} id = 'bottle2'>
  161. <Image source = {require('../assets/bottle2.png')} style={[styles.bottles,styles.bottle2]}/>
  162. </TouchableOpacity>
  163. }
  164. {this.state.showbottle3 &&
  165. <TouchableOpacity style={styles.bottles} onPress={this.clickedBottle3} id = 'bottle3'>
  166. <Image source = {require('../assets/bottle3.png')} style={[styles.bottles,styles.bottle3]}/>
  167. </TouchableOpacity>
  168. }
  169. <View style={styles.buttonContainer}>
  170. <TouchableOpacity style={styles.button} onPress={this.addBottle}>
  171. <Text style={styles.buttonText}>Get New Bottle</Text>
  172. </TouchableOpacity>
  173. </View>
  174. </ImageBackground>
  175. );
  176. }
  177. //}
  178. }
  179.  
  180. const styles = StyleSheet.create({
  181. background: {
  182. width: '100%',
  183. height: '100%',
  184. },
  185. button: {
  186. backgroundColor: 'rgba(255, 255, 255, 0.7)',
  187. paddingVertical: 15,
  188. marginBottom: 20,
  189. width: 250,
  190. borderRadius: 10,
  191. },
  192. buttonContainer: {
  193. justifyContent: 'center',
  194. alignItems: 'center',
  195. marginTop: 525,
  196. },
  197. bottles: {
  198.  
  199. },
  200. bottle1: {
  201. position: 'absolute',
  202. top: 380, // 295
  203. left: 20,
  204. width: 65,
  205. height: 65
  206. },
  207. bottle2: {
  208. position: 'absolute',
  209. top: 345, // 260
  210. left: 75,
  211. width: 100,
  212. height: 100
  213. },
  214. bottle3: {
  215. position: 'absolute',
  216. top: 315, // 230
  217. left: 135,
  218. width: 70,
  219. height: 70
  220. },
  221. buttonText: {
  222. textAlign: 'center',
  223. fontWeight: '700',
  224. },
  225. modalButtonContainer: {
  226. justifyContent: 'center',
  227. alignItems: 'center',
  228.  
  229. },
  230. modalButton: {
  231. paddingVertical: 15,
  232. marginBottom: 20,
  233. width: 250,
  234. borderRadius: 10,
  235. },
  236. container: {
  237. flex: 1,
  238. backgroundColor: '#ADD8E6',
  239. },
  240. content: {
  241. alignItems: 'center',
  242. justifyContent: 'center',
  243. height: 360,
  244. backgroundColor: 'rgba(255, 255, 255, 0)',
  245. paddingHorizontal: 10,
  246. marginLeft: 20,
  247. fontFamily: 'Allura-Regular',
  248. fontSize: 24,
  249. marginBottom: 10,
  250. },
  251. author: {
  252. alignItems: 'center',
  253. justifyContent: 'center',
  254. backgroundColor: 'rgba(255, 255, 255, 0)',
  255. paddingHorizontal: 10,
  256. marginLeft: 20,
  257. fontFamily: 'Allura-Regular',
  258. fontSize: 24,
  259. marginBottom: 10,
  260. },
  261. });
  262.  
  263. 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!