calendar.js

import React, { Component } from 'react'
import {
  StyleSheet,
  TouchableOpacity,
  Dimensions,
  FlatList,
  Text,
  View,
  Image
} from 'react-native'

import Loading from '../../components/loading'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'

const win = Dimensions.get('window')

export default class List extends Component {
  static navigationOptions = {
    title: 'Расписание',
  }

  constructor(props) {
    super(props)
    this.state = {
      dataSource: [],
      loaded: false,
    }
  } 
  componentDidMount() {
    this.fetchData().done()
  }

  async fetchData() {
    try {
      const request = new XMLHttpRequest()
      request.open(
        'GET',
        'http://p23-calendars.icloud.com/published/2/IKRvEPIp3f2SRnoIwor7d3MQEEyXokWefjUVjRrczIVmpvi5AHgCEDhJRx_S_dEjcJf8_guJPY2sZZ_64AGD0Se7UQLD3l_7CPvDZhrIJK0',
        true
      )
      request.send(null)
      request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200) {
          const type = request.getResponseHeader('Content-Type')
          if (type.indexOf('text') !== 1) {


            sanitizeStr = (str) => {
              return str
              .replace("\n", " ")
              .replace("\,", ",")
            }
              
            const lines = request.responseText.split("\r\n").map(sanitizeStr)
            //console.log('lines', lines)
            const events = [] 
            const events_i = 0
            for (i = 0; i < lines.length; i++) {
              if (!events[events_i]) events[events_i] = {}

              
              if (lines[i].includes('DTSTART')) {
                events[events_i]['date'] = lines[i].split(':').pop()
              }
              else if (lines[i].includes('SUMMARY')) {
                events[events_i]['title'] = lines[i].split(':').pop()
              }
              else if (lines[i].startsWith('LOCATION:')) {
                events[events_i]['location'] = lines[i].split(':').pop()
              }
              else if (lines[i].startsWith('DESCRIPTION:')) { 
                events[events_i]['description'] = lines[i].split(':').pop()
              }
              else if (lines[i].includes('END:VEVENT')) {
                events_i++
              }
            }
            this.setState({ 
              loaded: true,
              dataSource: events
            }) 
          }
        }
      }
    } catch (e) {
      throw e
    }
  }

  renderLoadingView() {
    return (
      <Loading />
    )
  }

  getItemDetails(date, location, title, description) {
    const { navigate } = this.props.navigation
    navigate('Profile', {dataDate: date, dataLocation: location, dataTitle: title, dataDescription: description})
  }

  renderData(data) {
    return ( <Item 
      data={data.item} 
      onPressItem={(
        date: string, 
        location: string,
        title: string, 
        description: string
      ) => this.getItemDetails( date, location, title, description)
      }>
    </Item>
    )
  }

  _keyExtractor = (item, index) => item.date

  render() {
    if (!this.state.loaded) {
      return this.renderLoadingView()
    }
    const { container } = styles
    console.log('state', this.state.dataSource)
    return (
      <View style={container}>
        <FlatList
          data={this.state.dataSource}
          keyExtractor = {this._keyExtractor} 
          renderItem={this.renderData.bind(this)}
          extraData={this.state}
        />
      </View>
    )
  }
}

class Item extends Component {
  chooseItem () {
    const { date, location, title, description } = this.props.data
    this.props.onPressItem(date, location, title, description)
  }

  render() {
    const { titleContainer, chevron, posterText } = styles
    const { date, location, title, description } = this.props.data
    return(
      <TouchableOpacity onPress={()=>this.chooseItem()}>
        <View style={titleContainer}>
          <Text style={posterText} numberOfLines={1} ellipsizeMode='tail'>{title}</Text>
          <Icon style={chevron} name="chevron-right" size={30} color="#DBD7D2" />
        </View>
      </TouchableOpacity>
    )
  }
}

const styles = {
  container: {
    flex: 1,
    paddingTop: 40
  },
  title: {
    fontFamily: 'AppleSDGothicNeo-Light',
    fontWeight: '200',
    marginLeft: 15,
    paddingTop: 15,
    color: '#474747',
    fontSize: 17,
    flex: -1
  },
  chevron: {
    alignSelf: 'flex-end',
    justifyContent: 'center',
    backgroundColor: 'transparent',
    paddingTop: 20,
    marginRight: 10 
  },
  titleContainer: {
    flex: 1,
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
    height: 50,
  },
  posterText: {
    fontFamily: 'AppleSDGothicNeo-Light',
    fontWeight: '300',
    color: '#474747',
    marginLeft: 10,
    marginBottom: 5,
    alignItems: 'center',
    fontSize: 20,
    backgroundColor: 'transparent',
    alignSelf: 'flex-end'
  },
  imageStyle: {
    alignSelf: 'stretch',
    width: win.width,
    height: win.width-20, 
  }
}