Browse Source

Added config/AvailabilityScreen.js

ErnestoOrtiz2 2 years ago
parent
commit
87fbdc3681
1 changed files with 127 additions and 0 deletions
  1. 127
    0
      config/AvailabilityScreen.js

+ 127
- 0
config/AvailabilityScreen.js View File

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