Added config/AvailabilityScreen.js

config/AvailabilityScreen.js

@@ -0,0 +1,127 @@
+import React, { Component } from "react";
+import { TextInput, TouchableWithoutFeedback, Keyboard, ImageBackground, Image, View, Text, Button } from "react-native";
+import firebase from "firebase";
+import { Calendar } from "react-native-calendars";
+import { ScrollView } from "react-native-gesture-handler";
+import SectionedMultiSelect from 'react-native-sectioned-multi-select';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { fetchUser } from "../redux/actions";
+import { styles } from "../config/styles";
+import { availability } from "../config/availability";
+
+export class AvailabilityScreen extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            english: false,
+            spanish: false,
+            virtual: false,
+            face_to_face: false,
+            personal: false,
+            group: false,
+            cities: [],
+            selectedItems: [],
+            markedDates: {}
+        };
+        this.onSelectedItemsChange = this.onSelectedItemsChange.bind(this);
+        this.onDaySelect = this.onDaySelect.bind(this);
+        this.onSave = this.onSave.bind(this);
+    };
+
+    componentDidMount(){
+        const user = firebase.auth().currentUser.uid
+
+        if(user.english !== undefined){
+            this.setState(user);
+        }
+    };
+
+    onSave(){
+        const { selectedItems } = this.state;
+    
+        selectedItems.forEach((value) => {
+            if(value === 'English'){
+                this.setState({english : true}, () => firebase.firestore().collection('Interprete').doc(firebase.auth().currentUser.uid).set({english : true}, {merge : true}));
+            }
+            else if(value === 'Spanish'){
+                this.setState({spanish : true}, () => firebase.firestore().collection('Interprete').doc(firebase.auth().currentUser.uid).set({spanish : true}, {merge : true}));
+            }
+            else if(value === 'Virtual'){
+                this.setState({virtual : true}, () => firebase.firestore().collection('Interprete').doc(firebase.auth().currentUser.uid).set({virtual : true}, {merge : true}));
+            }
+            else if(value === 'Face-to-Face'){
+                this.setState({face_to_face : true}, () => firebase.firestore().collection('Interprete').doc(firebase.auth().currentUser.uid).set({face_to_face : true}, {merge : true}));
+            }
+            else if(value === 'Personal Session'){
+                this.setState({personal : true}, () => firebase.firestore().collection('Interprete').doc(firebase.auth().currentUser.uid).set({personal : true}, {merge : true}));
+            }
+            else if(value === 'Group Session'){
+                this.setState({group : true}, () => firebase.firestore().collection('Interprete').doc(firebase.auth().currentUser.uid).set({group : true}, {merge : true}));
+            }
+            else if(!isNaN(value.charAt(0))){
+                for (let key in this.state.markedDates) {
+                    if(this.state.markedDates[key].hasOwnProperty('timeSlot')){
+                        this.state.markedDates[key].timeSlot.push(value);
+                    }
+                    else{
+                        this.state.markedDates[key].timeSlot = [];
+                        this.state.markedDates[key].timeSlot.push(value);
+                    }
+                }
+            }
+            else{
+                this.state.cities.push(value);
+            }
+        })
+        firebase.firestore().collection('Interprete')
+            .doc(firebase.auth().currentUser.uid)
+            .set(this.state, {merge : true})
+            .then(() => {this.props.navigation.goBack()});
+    };
+
+    onSelectedItemsChange = (selectedItems) => {
+        this.setState({selectedItems});
+    };
+
+    onDaySelect = (day) => {
+        const selectedDay = day.dateString;
+        let selected = true;
+
+        if (this.state.markedDates[selectedDay]) {
+            selected = !this.state.markedDates[selectedDay].selected;
+        }
+        const updatedMarkedDates = {...this.state.markedDates, ...{ [selectedDay]: { selected } } }
+        this.setState({ markedDates : updatedMarkedDates });
+    }
+
+    render() {
+        return (
+            <ScrollView contentContainerstyle={styles.stdcontainer}>
+                <Calendar
+                    onDayPress={this.onDaySelect}
+                    style={styles.calendar}
+                    markedDates={this.state.markedDates}
+                    theme={{selectedDayBackgroundColor: 'green'}}
+                />
+                <SectionedMultiSelect 
+                    items={availability}
+                    IconRenderer={Icon}
+                    readOnlyHeadings={true}
+                    uniqueKey='name'
+                    subKey='children'
+                    selectText='Choose your availability...'
+                    onSelectedItemsChange={this.onSelectedItemsChange}
+                    selectedItems={this.state.selectedItems}
+                />
+                <Button title='Save' onPress={() => {this.onSave()}}/>
+            </ScrollView>
+        );
+    }
+}
+
+const mapStateProps = (store) => ({currentUser : store.userState.currentUser})
+const mapDispatchProps = (dispatch) => bindActionCreators({fetchUser}, dispatch)
+export default connect(mapStateProps, mapDispatchProps)(AvailabilityScreen)