|
@@ -1,128 +0,0 @@
|
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
|
|
-
|
11
|
|
-import { fetchUser } from "../redux/actions";
|
12
|
|
-import { styles } from "../config/styles";
|
13
|
|
-import { availability } from "../config/availability";
|
14
|
|
-
|
15
|
|
-export class AvailabilityScreen extends Component {
|
16
|
|
- constructor(props) {
|
17
|
|
- super(props);
|
18
|
|
- this.state = {
|
19
|
|
- english: false,
|
20
|
|
- spanish: false,
|
21
|
|
- virtual: false,
|
22
|
|
- face_to_face: false,
|
23
|
|
- personal: false,
|
24
|
|
- group: false,
|
25
|
|
- cities: [],
|
26
|
|
- selectedItems: [],
|
27
|
|
- markedDates: {}
|
28
|
|
- };
|
29
|
|
- this.onSelectedItemsChange = this.onSelectedItemsChange.bind(this);
|
30
|
|
- this.onDaySelect = this.onDaySelect.bind(this);
|
31
|
|
- this.onSave = this.onSave.bind(this);
|
32
|
|
- };
|
33
|
|
-
|
34
|
|
- componentDidMount(){
|
35
|
|
- this.props.fetchUser();
|
36
|
|
- const { currentUser } = this.props;
|
37
|
|
-
|
38
|
|
- if(currentUser.english !== undefined){
|
39
|
|
- this.setState(currentUser);
|
40
|
|
- }
|
41
|
|
- };
|
42
|
|
-
|
43
|
|
- onSave(){
|
44
|
|
- const { selectedItems } = this.state;
|
45
|
|
-
|
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
|
|
-
|
86
|
|
- onSelectedItemsChange = (selectedItems) => {
|
87
|
|
- this.setState({selectedItems});
|
88
|
|
- };
|
89
|
|
-
|
90
|
|
- onDaySelect = (day) => {
|
91
|
|
- const selectedDay = day.dateString;
|
92
|
|
- let selected = true;
|
93
|
|
-
|
94
|
|
- if (this.state.markedDates[selectedDay]) {
|
95
|
|
- selected = !this.state.markedDates[selectedDay].selected;
|
96
|
|
- }
|
97
|
|
- const updatedMarkedDates = {...this.state.markedDates, ...{ [selectedDay]: { selected } } }
|
98
|
|
- this.setState({ markedDates : updatedMarkedDates });
|
99
|
|
- }
|
100
|
|
-
|
101
|
|
- render() {
|
102
|
|
- return (
|
103
|
|
- <ScrollView contentContainerstyle={styles.stdcontainer}>
|
104
|
|
- <Calendar
|
105
|
|
- onDayPress={this.onDaySelect}
|
106
|
|
- style={styles.calendar}
|
107
|
|
- markedDates={this.state.markedDates}
|
108
|
|
- theme={{selectedDayBackgroundColor: 'green'}}
|
109
|
|
- />
|
110
|
|
- <SectionedMultiSelect
|
111
|
|
- items={availability}
|
112
|
|
- IconRenderer={Icon}
|
113
|
|
- readOnlyHeadings={true}
|
114
|
|
- uniqueKey='name'
|
115
|
|
- subKey='children'
|
116
|
|
- selectText='Choose your availability...'
|
117
|
|
- onSelectedItemsChange={this.onSelectedItemsChange}
|
118
|
|
- selectedItems={this.state.selectedItems}
|
119
|
|
- />
|
120
|
|
- <Button title='Save' onPress={() => {this.onSave()}}/>
|
121
|
|
- </ScrollView>
|
122
|
|
- );
|
123
|
|
- }
|
124
|
|
-}
|
125
|
|
-
|
126
|
|
-const mapStateProps = (store) => ({currentUser : store.userState.currentUser})
|
127
|
|
-const mapDispatchProps = (dispatch) => bindActionCreators({fetchUser}, dispatch)
|
128
|
|
-export default connect(mapStateProps, mapDispatchProps)(AvailabilityScreen)
|