updated

screens/AvailabilityScreen.js

@@ -1,45 +1,128 @@
 import React, { Component } from "react";
-import { TextInput, TouchableWithoutFeedback, Keyboard, ImageBackground, Image, View } from "react-native";
+import { TextInput, TouchableWithoutFeedback, Keyboard, ImageBackground, Image, View, Text, Button } from "react-native";
 import firebase from "firebase";
-import { Picker } from "@react-native-picker/picker";
+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 { styles } from "../config/styles";
-import CustomButton from "../components/CustomButton";
+import { fetchUser } from "../../redux/actions";
+import { styles } from "../../config/styles";
+import { availability } from "../../config/availability";
 
-
-export default class AvailabilityScreen extends Component {
+export class AvailabilityScreen extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            face_to_face: false,
-            online: false,
-            multiple: false,
-            one_on_one: false,
-            spanish: false,
             english: false,
-            language: 0,
+            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);
     };
 
-    render() {  
-        return (
-            <View style={styles.regcontainer}>
-                <Picker style={styles.picker} selectedValue={this.state.language} onValueChange={(itemValue,itemIndex) => {
-                    this.setState({language: itemValue})
-                    if(itemValue === 0){
-                        this.setState({english: true, spanish: false});
-                    }
-                    else if(itemValue === 1){
-                        this.setState({english: false, spanish: true});
+    componentDidMount(){
+        this.props.fetchUser();
+        const { currentUser } = this.props;
+
+        if(currentUser.english !== undefined){
+            this.setState(currentUser);
+        }
+    };
+
+    onSave(){
+        const { selectedItems } = this.state;
+    
+        selectedItems.forEach((value) => {
+            if(value === 'English'){
+                this.setState({english : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({english : true}, {merge : true}));
+            }
+            else if(value === 'Spanish'){
+                this.setState({spanish : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({spanish : true}, {merge : true}));
+            }
+            else if(value === 'Virtual'){
+                this.setState({virtual : true}, () => firebase.firestore().collection('Interpreters').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('Interpreters').doc(firebase.auth().currentUser.uid).set({face_to_face : true}, {merge : true}));
+            }
+            else if(value === 'Personal Session'){
+                this.setState({personal : true}, () => firebase.firestore().collection('Interpreters').doc(firebase.auth().currentUser.uid).set({personal : true}, {merge : true}));
+            }
+            else if(value === 'Group Session'){
+                this.setState({group : true}, () => firebase.firestore().collection('Interpreters').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.setState({english: true, spanish: true});
-                    }}}>
-                        <Picker.Item label="English" value={0}/>
-                        <Picker.Item label="Spanish" value={1}/>
-                        <Picker.Item label="Both" value={2}/>
-                    </Picker>
-            </View>
+                        this.state.markedDates[key].timeSlot = [];
+                        this.state.markedDates[key].timeSlot.push(value);
+                    }
+                }
+            }
+            else{
+                this.state.cities.push(value);
+            }
+        })
+        firebase.firestore().collection('Interpreters')
+            .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)