Brak opisu

AvailabilityScreen.js 5.3KB

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