ViewOwnAvailability.js

import React, { Component } from 'react';
import Icons from 'react-native-vector-icons/Ionicons';
import { 
  View, 
  StyleSheet, 
  BackHandler,
  TextInput,
  Text, 
  Dimensions, 
  TouchableOpacity, 
  Modal, 
  TouchableWithoutFeedback, 
  ScrollView,
  AsyncStorage,
} from 'react-native';
import { NavigationStyle } from '../../common/NavigatorStyle'; 
import Header from '../../common/ViewOwnProfileDashBoard'; 
import { Calendar } from 'react-native-calendars';
import url from '../../common/api-constants';
import BookedDate from './BookedDate';
import { Spinner } from '../../common/Spinner';


const ACCESS_TOKEN = 'access_token';

export default class CalendarsScreen extends Component {
  
  static navigatorStyle = NavigationStyle;

  componentWillMount() {
    this.getToken();
  }

  constructor(props) {
    super(props);
    this.state = {
      isModalVisible: false,
      pickerDisplayed: false,
      text: '',
      Token: '',
      events: [],
      UserID: '',
      BookedDate: [],
    };
    this.onDayPress = this.onDayPress.bind(this);
  }

  async getToken() {
    this.setState({ apifetchingStatus: true })
    try {
      let token = await AsyncStorage.getItem(ACCESS_TOKEN);
      console.log(`the token is ${token}`);
      this.setState({ Token: token });
      this.getprofileData();
    } catch (error) {
      console.log('Something Went Wrong');
    }
  }

  async getprofileData() {
    try {
      let profiledata = await AsyncStorage.getItem('ProfileData');
     await this.setState({ profileData: JSON.parse(profiledata) })
      this.serviceCall();
    } catch (error) {
      console.log('Something Went Wrong');
    }
  }

  togglePicker = () => {
    this.setState({
    pickerDisplayed: !this.state.pickerDisplayed
    });
  }
  
  toggleModal = () =>
  this.setState({ isModalVisible: !this.state.isModalVisible });

  reload = () => {
    this.props.navigator.push({
      screen: 'getclick.ViewOwnProfileAvailability',
    });
  }

  navigateTo = () => {
    this.props.navigator.push({
      screen: 'getclick.ViewOwnProfile',
    });
  }
  serviceCall = () => {
    fetch(`${url}/profile/availability?access_token=${this.state.Token}&id=${this.state.profileData.userId}`, {
      method: 'GET',
    })
      .then(res => res.json())
      .then( data => {
        data.availability.map(data => {
          this.setState(prevState => ({
            events: [...prevState.events, data]
          }))
          this.setState( prevState => ({
           BookedDate: [...prevState.BookedDate, data.availability.booked_date]
          }))
          console.log(this.state.BookedDate);
        })
      })
      this.setState({ apifetchingStatus: false }) 
    }
    
  availability = () => {
    this.togglePicker();
    fetch(`${url}/availability/create?access_token=${this.state.Token}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        booked_date: this.state.selected,
        body: this.state.text
      })
    })
      .then(res => res.json())
      .then( data => {
        this.setState(prevState => ({
          events: [...prevState.events, data]
        }))
      }) 
      this.reload();
    }
    search() {
      this.props.navigator.resetTo({
        screen: 'getclick.Maps'
      });
    }
    
  markedDates = () => {
    let dates;
   
    dates =   this.state.BookedDate.map(date => {
      return {
        [date] : {selected: true}
      }
    })
    console.log('Dates'+ dates);
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <View style={styles.header}>
          <Header 
           Search={()=>this.search()}
           color="#ffff" colors='#ffff' Colors='#ffff' colorss='#00a3ee' navigator={this.props.navigator} />
          </View>
          <View style={styles.arrowContainer}>
          <TouchableOpacity  onPress={this.navigateTo}  style={{ paddingLeft: 25 }}><Icons size={25} name='md-arrow-back' color='#ffffff' /></TouchableOpacity> 
          </View>
        <Calendar
          onDayPress={this.onDayPress}
          style={styles.calendar}
          horizontal={true}
          pagingEnabled={true}
          markedDates={{[this.state.selected]: {selected: true, disableTouchEvent: true }}}
          theme={{
            calendarBackground: '#232323',
            textSectionTitleColor: '#ffb901',
            dayTextColor: '#ffb901',
            todayTextColor: 'white',
            selectedDayTextColor: '#00a3ee',
            monthTextColor: '#ffb901',
            selectedDayBackgroundColor: '#232323',
            //arrowColor: 'white',
            textDisabledColor: '#707070',
            'stylesheet.calendar.header': {
              week: {
                marginTop: 3,
                flexDirection: 'row',
                justifyContent: 'space-between',
              },
            }
          }}
            markedDates={
              this.markedDates()}
        />
           <View style={{ paddingTop: 10 }}>
              {(this.state.events.length > 0) ? this.state.events.map((data) => {
                return <BookedDate body={data.availability.body} date={data.date} day={data.day} id={data.availability.id} key={data.availability.id}  reload={this.reload} />
              })  :  null}     
           </View>
           <View style={{ marginTop: 75 }}>
           <Modal 
                transparent visible={this.state.pickerDisplayed} animationType={'none'}
                onRequestClose={() => {
                }}
            >   
                  <TouchableWithoutFeedback>
                    <View style={styles.modalStyle}>
                    <View style={styles.outerView}>
                                <Text style={{ color: '#00a3ee', fontWeight: 'bold', fontSize: 15 }}>{this.state.selected}</Text>
                                <TouchableOpacity onPress={() => this.availability()} style={styles.modalsStyle}><Icons size={30} name='md-arrow-forward' color='#00a3ee' /></TouchableOpacity>
                    </View>
                      <View style={{padding: 10 }}>
                      <TextInput
                        style={{fontSize: 15 }}
                        multiline = {true}
                        numberOfLines = {4}
                        onChangeText={(text) => this.setState({text})}
                        />
               <TouchableOpacity onPress={() => this.togglePicker()} style={{ paddingTop: 5, paddingLeft: 160 }}><Text>close</Text></TouchableOpacity>
                      </View>
            </View>
            </TouchableWithoutFeedback>
            </Modal>
            </View>
      </ScrollView>
    );
  }

  async onDayPress(day) {
   await this.setState({
      selected: day.dateString
    });
    console.log(this.state.selected);
    this.togglePicker();
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 2,
    backgroundColor: '#232323'
  },
  header: {
  flex: 0.18, 
  marginTop: 10
  },
  arrowContainer: {
    marginTop: 20,
    flexDirection: 'row',
    },
  calendar: {
    paddingTop: 5,
    borderColor: '#eee',
    height: 350
  },
  text: {
    textAlign: 'center',
    borderColor: '#bbb',
    padding: 10,
    backgroundColor: '#eee'
  },
  modalStyle: {
    backgroundColor: '#ffffff', 
    alignSelf: 'center',
    marginTop: '60%',
    width: 225, 
    height: 225,
    borderRadius: 8
  },
  modalsStyle: {
    alignItems: 'flex-end',
},
outerView: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 15
},
});