Keine Beschreibung

AvailabilityScreen.js 5.3KB

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