Zander Cuz 2 years ago
parent
commit
065d381560
1 changed files with 113 additions and 30 deletions
  1. 113
    30
      screens/AvailabilityScreen.js

+ 113
- 30
screens/AvailabilityScreen.js View File

@@ -1,45 +1,128 @@
1 1
 import React, { Component } from "react";
2
-import { TextInput, TouchableWithoutFeedback, Keyboard, ImageBackground, Image, View } from "react-native";
2
+import { TextInput, TouchableWithoutFeedback, Keyboard, ImageBackground, Image, View, Text, Button } from "react-native";
3 3
 import firebase from "firebase";
4
-import { Picker } from "@react-native-picker/picker";
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';
5 10
 
6
-import { styles } from "../config/styles";
7
-import CustomButton from "../components/CustomButton";
11
+import { fetchUser } from "../../redux/actions";
12
+import { styles } from "../../config/styles";
13
+import { availability } from "../../config/availability";
8 14
 
9
-
10
-export default class AvailabilityScreen extends Component {
15
+export class AvailabilityScreen extends Component {
11 16
     constructor(props) {
12 17
         super(props);
13 18
         this.state = {
14
-            face_to_face: false,
15
-            online: false,
16
-            multiple: false,
17
-            one_on_one: false,
18
-            spanish: false,
19 19
             english: false,
20
-            language: 0,
20
+            spanish: false,
21
+            virtual: false,
22
+            face_to_face: false,
23
+            personal: false,
24
+            group: false,
25
+            cities: [],
26
+            selectedItems: [],
27
+            markedDates: {}
21 28
         };
29
+        this.onSelectedItemsChange = this.onSelectedItemsChange.bind(this);
30
+        this.onDaySelect = this.onDaySelect.bind(this);
31
+        this.onSave = this.onSave.bind(this);
22 32
     };
23 33
 
24
-    render() {  
25
-        return (
26
-            <View style={styles.regcontainer}>
27
-                <Picker style={styles.picker} selectedValue={this.state.language} onValueChange={(itemValue,itemIndex) => {
28
-                    this.setState({language: itemValue})
29
-                    if(itemValue === 0){
30
-                        this.setState({english: true, spanish: false});
31
-                    }
32
-                    else if(itemValue === 1){
33
-                        this.setState({english: false, spanish: true});
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);
34 69
                     }
35 70
                     else{
36
-                        this.setState({english: true, spanish: true});
37
-                    }}}>
38
-                        <Picker.Item label="English" value={0}/>
39
-                        <Picker.Item label="Spanish" value={1}/>
40
-                        <Picker.Item label="Both" value={2}/>
41
-                    </Picker>
42
-            </View>
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>
43 122
         );
44 123
     }
45
-}
124
+}
125
+
126
+const mapStateProps = (store) => ({currentUser : store.userState.currentUser})
127
+const mapDispatchProps = (dispatch) => bindActionCreators({fetchUser}, dispatch)
128
+export default connect(mapStateProps, mapDispatchProps)(AvailabilityScreen)