No Description

AvailabilityScreen.js 5.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  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 { fetchUser } from "../../redux/actions";
  11. import { styles } from "../../config/styles";
  12. import { availability } from "../../config/availability";
  13. export class AvailabilityScreen extends Component {
  14. constructor(props) {
  15. super(props);
  16. this.state = {
  17. english: false,
  18. spanish: false,
  19. virtual: false,
  20. face_to_face: false,
  21. personal: false,
  22. group: false,
  23. cities: [],
  24. selectedItems: [],
  25. markedDates: {}
  26. };
  27. this.onSelectedItemsChange = this.onSelectedItemsChange.bind(this);
  28. this.onDaySelect = this.onDaySelect.bind(this);
  29. this.onSave = this.onSave.bind(this);
  30. this.handleUpdate = this.handleUpdate.bind(this);
  31. };
  32. componentDidMount(){
  33. this.props.fetchUser();
  34. this.forceUpdate(() => {this.handleUpdate()})
  35. };
  36. handleUpdate(){
  37. const { currentUser } = this.props;
  38. if (currentUser != undefined){
  39. if (currentUser.hasOwnProperty('selectedItems') && currentUser.hasOwnProperty('markedDates'))
  40. this.setState( {selectedItems: currentUser.selectedItems});
  41. this.setState( {markedDates: currentUser.markedDates});
  42. }
  43. };
  44. onSave(){
  45. const { selectedItems } = this.state;
  46. selectedItems.forEach((value) => {
  47. if(value === 'English'){
  48. this.setState({english : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({english : true}, {merge : true}));
  49. }
  50. else if(value === 'Spanish'){
  51. this.setState({spanish : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({spanish : true}, {merge : true}));
  52. }
  53. else if(value === 'Virtual'){
  54. this.setState({virtual : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({virtual : true}, {merge : true}));
  55. }
  56. else if(value === 'Face-to-Face'){
  57. this.setState({face_to_face : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({face_to_face : true}, {merge : true}));
  58. }
  59. else if(value === 'Personal Session'){
  60. this.setState({personal : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({personal : true}, {merge : true}));
  61. }
  62. else if(value === 'Group Session'){
  63. this.setState({group : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({group : true}, {merge : true}));
  64. }
  65. else if(!isNaN(value.charAt(0))){
  66. for (let key in this.state.markedDates) {
  67. if(this.state.markedDates[key].hasOwnProperty('timeSlot')){
  68. this.state.markedDates[key].timeSlot.push(value);
  69. }
  70. else{
  71. this.state.markedDates[key].timeSlot = [];
  72. this.state.markedDates[key].timeSlot.push(value);
  73. }
  74. }
  75. }
  76. else{
  77. this.state.cities.push(value);
  78. }
  79. })
  80. firebase.firestore().collection('Interpreters')
  81. .doc(firebase.auth().currentUser.uid)
  82. .set(this.state, {merge : true})
  83. .then(() => {this.props.navigation.goBack()});
  84. };
  85. onSelectedItemsChange = (selectedItems) => {
  86. this.setState({selectedItems});
  87. };
  88. onDaySelect = (day) => {
  89. const selectedDay = day.dateString;
  90. let selected = true;
  91. if (this.state.markedDates[selectedDay]) {
  92. selected = !this.state.markedDates[selectedDay].selected;
  93. }
  94. const updatedMarkedDates = {...this.state.markedDates, ...{ [selectedDay]: { selected } } }
  95. this.setState({ markedDates : updatedMarkedDates });
  96. };
  97. render() {
  98. return (
  99. <ScrollView contentContainerstyle={styles.stdcontainer}>
  100. <Calendar
  101. onDayPress={this.onDaySelect}
  102. style={styles.calendar}
  103. markedDates={this.state.markedDates}
  104. theme={{selectedDayBackgroundColor: 'green'}}
  105. />
  106. <SectionedMultiSelect
  107. items={availability}
  108. IconRenderer={Icon}
  109. readOnlyHeadings={true}
  110. uniqueKey='name'
  111. subKey='children'
  112. selectText='Choose your availability...'
  113. onSelectedItemsChange={this.onSelectedItemsChange}
  114. selectedItems={this.state.selectedItems}
  115. />
  116. <Button title='Save' onPress={() => {this.onSave()}}/>
  117. </ScrollView>
  118. );
  119. }
  120. }
  121. const mapStateProps = (store) => ({currentUser : store.userState.currentUser})
  122. const mapDispatchProps = (dispatch) => bindActionCreators({fetchUser}, dispatch)
  123. export default connect(mapStateProps, mapDispatchProps)(AvailabilityScreen)