No Description

AvailabilityScreen.js 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. import React, { Component } from "react";
  2. import { TextInput, TouchableWithoutFeedback, Keyboard, ImageBackground, Image, View, Text, Button } from "react-native";
  3. import firebase from "firebase";
  4. import { Calendar } from "react-native-calendars";
  5. import { ScrollView } from "react-native-gesture-handler";
  6. import SectionedMultiSelect from 'react-native-sectioned-multi-select';
  7. import Icon from 'react-native-vector-icons/MaterialIcons';
  8. import { connect } from 'react-redux';
  9. import { bindActionCreators } from 'redux';
  10. import { Picker } from "@react-native-picker/picker";
  11. import { fetchUser } from "../../redux/actions";
  12. import { styles } from "../../config/styles";
  13. import { availability } from "../../config/availability";
  14. export class AvailabilityScreen extends Component {
  15. constructor(props) {
  16. super(props);
  17. this.state = {
  18. //x : this.route.params.availabilityData.selectedItems,
  19. //y : this.route.params.availabilityData.markedDates,
  20. english: false,
  21. spanish: false,
  22. virtual: false,
  23. face_to_face: false,
  24. personal: false,
  25. group: false,
  26. city: 'San Juan',
  27. //cities: [],
  28. selectedItems: [],
  29. markedDates: {}
  30. };
  31. this.onSelectedItemsChange = this.onSelectedItemsChange.bind(this);
  32. this.onDaySelect = this.onDaySelect.bind(this);
  33. this.onSave = this.onSave.bind(this);
  34. this.handleUpdate = this.handleUpdate.bind(this);
  35. };
  36. componentDidMount(){
  37. /*if (x != undefined){
  38. this.setState({selectedItems : x});
  39. };
  40. if (y != undefined){
  41. this.setState({markedDates : y});
  42. }*/
  43. this.props.fetchUser();
  44. this.forceUpdate(() => {this.handleUpdate()})
  45. };
  46. handleUpdate(){
  47. const { currentUser } = this.props;
  48. if (currentUser != undefined){
  49. if (currentUser.hasOwnProperty('selectedItems') && currentUser.hasOwnProperty('markedDates') && currentUser.hasOwnProperty('city'))
  50. this.setState( {selectedItems: currentUser.selectedItems});
  51. this.setState( {markedDates: currentUser.markedDates});
  52. this.setState({city: currentUser.city})
  53. }
  54. };
  55. onSave(){
  56. const { selectedItems } = this.state;
  57. selectedItems.forEach((value) => {
  58. if(value === 'English'){
  59. this.setState({english : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({english : true}, {merge : true}));
  60. }
  61. else if(value === 'Spanish'){
  62. this.setState({spanish : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({spanish : true}, {merge : true}));
  63. }
  64. else if(value === 'Virtual'){
  65. this.setState({virtual : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({virtual : true}, {merge : true}));
  66. }
  67. else if(value === 'Face-to-Face'){
  68. this.setState({face_to_face : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({face_to_face : true}, {merge : true}));
  69. }
  70. else if(value === 'Personal Session'){
  71. this.setState({personal : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({personal : true}, {merge : true}));
  72. }
  73. else if(value === 'Group Session'){
  74. this.setState({group : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({group : true}, {merge : true}));
  75. }
  76. else if(!isNaN(value.charAt(0))){
  77. for (let key in this.state.markedDates) {
  78. if(this.state.markedDates[key].hasOwnProperty('timeSlot')){
  79. this.state.markedDates[key].timeSlot.push(value);
  80. }
  81. else{
  82. this.state.markedDates[key].timeSlot = [];
  83. this.state.markedDates[key].timeSlot.push(value);
  84. }
  85. }
  86. }
  87. /*else{
  88. this.state.cities.push(value);
  89. }*/
  90. })
  91. firebase.firestore().collection('Interpreters')
  92. .doc(firebase.auth().currentUser.uid)
  93. .set(this.state, {merge : true})
  94. .then(() => {this.props.navigation.goBack()});
  95. };
  96. onSelectedItemsChange = (selectedItems) => {
  97. this.setState({selectedItems});
  98. };
  99. onDaySelect = (day) => {
  100. const selectedDay = day.dateString;
  101. let selected = true;
  102. if (this.state.markedDates[selectedDay]) {
  103. selected = !this.state.markedDates[selectedDay].selected;
  104. }
  105. const updatedMarkedDates = {...this.state.markedDates, ...{ [selectedDay]: { selected } } }
  106. this.setState({ markedDates : updatedMarkedDates });
  107. };
  108. render() {
  109. return (
  110. <ScrollView contentContainerstyle={styles.stdcontainer}>
  111. <Calendar
  112. onDayPress={this.onDaySelect}
  113. style={styles.calendar}
  114. markedDates={this.state.markedDates}
  115. theme={{selectedDayBackgroundColor: 'green'}}
  116. />
  117. <SectionedMultiSelect
  118. items={availability}
  119. IconRenderer={Icon}
  120. readOnlyHeadings={true}
  121. uniqueKey='name'
  122. subKey='children'
  123. selectText='Choose your availability...'
  124. onSelectedItemsChange={this.onSelectedItemsChange}
  125. selectedItems={this.state.selectedItems}
  126. />
  127. <Picker selectedValue={this.state.city} onValueChange={(itemValue, itemIndex) => this.setState({city : itemValue})}>
  128. <Picker.Item label='Adjuntas' value={'Adjuntas'}/>
  129. <Picker.Item label='Aguada' value={'Aguada'}/>
  130. <Picker.Item label='Adjuntas' value={'Adjuntas'}/>
  131. <Picker.Item label='Aguadilla' value={'Aguadilla'}/>
  132. <Picker.Item label='Aguas Buenas' value={'Aguas Buenas'}/>
  133. <Picker.Item label='Aibonito' value={'Aibonito'}/>
  134. <Picker.Item label='Arecibo' value={'Arecibo'}/>
  135. <Picker.Item label='Arroyo' value={'Arroyo'}/>
  136. <Picker.Item label='Añasco' value={'Añasco'}/>
  137. <Picker.Item label='Barceloneta' value={'Barceloneta'}/>
  138. <Picker.Item label='Barranquitas' value={'Barranquitas'}/>
  139. <Picker.Item label='Bayamón' value={'Bayamón'}/>
  140. <Picker.Item label='Cabo Rojo' value={'Cabo Rojo'}/>
  141. <Picker.Item label='Caguas' value={'Caguas'}/>
  142. <Picker.Item label='Camuy' value={'Camuy'}/>
  143. <Picker.Item label='Canóvanas' value={'Canóvanas'}/>
  144. <Picker.Item label='Carolina' value={'Carolina'}/>
  145. <Picker.Item label='Cataño' value={'Cataño'}/>
  146. <Picker.Item label='Cayey' value={'Cayey'}/>
  147. <Picker.Item label='Ceiba' value={'Ceiba'}/>
  148. <Picker.Item label='Ciales' value={'Ciales'}/>
  149. <Picker.Item label='Cidra' value={'Cidra'}/>
  150. <Picker.Item label='Coamo' value={'Coamo'}/>
  151. <Picker.Item label='Comerío' value={'Comerío'}/>
  152. <Picker.Item label='Corozal' value={'Corozal'}/>
  153. <Picker.Item label='Culebra' value={'Culebra'}/>
  154. <Picker.Item label='Dorado' value={'Dorado'}/>
  155. <Picker.Item label='Fajardo' value={'Fajardo'}/>
  156. <Picker.Item label='Florida' value={'Florida'}/>
  157. <Picker.Item label='Guayama' value={'Guayama'}/>
  158. <Picker.Item label='Guayanilla' value={'Guayanilla'}/>
  159. <Picker.Item label='Guaynabo' value={'Guaynabo'}/>
  160. <Picker.Item label='Gurabo' value={'Gurabo'}/>
  161. <Picker.Item label='Guánica' value={'Guánica'}/>
  162. <Picker.Item label='Hatillo' value={'Hatillo'}/>
  163. <Picker.Item label='Hormigueros' value={'Hormigueros'}/>
  164. <Picker.Item label='Humacao' value={'Humacao'}/>
  165. <Picker.Item label='Isabela' value={'Isabela'}/>
  166. <Picker.Item label='Jayuya' value={'Jayuya'}/>
  167. <Picker.Item label='Juana Díaz' value={'Juana Díaz'}/>
  168. <Picker.Item label='Juncos' value={'Juncos'}/>
  169. <Picker.Item label='Lajas' value={'Lajas'}/>
  170. <Picker.Item label='Lares' value={'Lares'}/>
  171. <Picker.Item label='Las Marías' value={'Las Marías'}/>
  172. <Picker.Item label='Las Piedras' value={'Las Piedras'}/>
  173. <Picker.Item label='Loíza' value={'Loíza'}/>
  174. <Picker.Item label='Luquillo' value={'Luquillo'}/>
  175. <Picker.Item label='Manatí' value={'Manatí'}/>
  176. <Picker.Item label='Maricao' value={'Maricao'}/>
  177. <Picker.Item label='Maunabo' value={'Maunabo'}/>
  178. <Picker.Item label='Mayagüez' value={'Mayagüez'}/>
  179. <Picker.Item label='Moca' value={'Moca'}/>
  180. <Picker.Item label='Morovis' value={'Morovis'}/>
  181. <Picker.Item label='Naguabo' value={'Naguabo'}/>
  182. <Picker.Item label='Naranjito' value={'Naranjito'}/>
  183. <Picker.Item label='Orocovis' value={'Orocovis'}/>
  184. <Picker.Item label='Patillas' value={'Patillas'}/>
  185. <Picker.Item label='Peñuelas' value={'Peñuelas'}/>
  186. <Picker.Item label='Ponce' value={'Ponce'}/>
  187. <Picker.Item label='Quebradillas' value={'Quebradillas'}/>
  188. <Picker.Item label='Rincón' value={'Rincón'}/>
  189. <Picker.Item label='Rio Grande' value={'Rio Grande'}/>
  190. <Picker.Item label='Sabana Grande' value={'Sabana Grande'}/>
  191. <Picker.Item label='Salinas' value={'Salinas'}/>
  192. <Picker.Item label='San Germán' value={'San Germán'}/>
  193. <Picker.Item label='San Juan' value={'San Juan'}/>
  194. <Picker.Item label='San Lorenzo' value={'San Lorenzo'}/>
  195. <Picker.Item label='San Sebastián' value={'San Sebastián'}/>
  196. <Picker.Item label='Santa Isabel' value={'Santa Isabel'}/>
  197. <Picker.Item label='Toa Alta' value={'Toa Alta'}/>
  198. <Picker.Item label='Toa Baja' value={'Toa Baja'}/>
  199. <Picker.Item label='Trujillo Alto' value={'Trujillo Alto'}/>
  200. <Picker.Item label='Utuado' value={'Utuado'}/>
  201. <Picker.Item label='Vega Alta' value={'Vega Alta'}/>
  202. <Picker.Item label='Vega Baja' value={'Vega Baja'}/>
  203. <Picker.Item label='Vieques' value={'Vieques'}/>
  204. <Picker.Item label='Villalba' value={'Villalba'}/>
  205. <Picker.Item label='Yabucoa' value={'Yabucoa'}/>
  206. <Picker.Item label='Yauco' value={'Yauco'}/>
  207. </Picker>
  208. <Button title='Save' onPress={() => {this.onSave()}}/>
  209. </ScrollView>
  210. );
  211. }
  212. }
  213. const mapStateProps = (store) => ({currentUser : store.userState.currentUser})
  214. const mapDispatchProps = (dispatch) => bindActionCreators({fetchUser}, dispatch)
  215. export default connect(mapStateProps, mapDispatchProps)(AvailabilityScreen)