mobilenews/App.js at master · alphaparticlecode/mobilenews · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import React from 'react';
import { AppRegistry, Image, ListView, StyleSheet, Text, View, WebView, StatusBarIOS } from 'react-native';

var HTMLView = require('react-native-htmlview').default;

var REQUEST_URL = 'https://dailyprophet.alphaparticle.com/wp-json/wp/v2/posts?filter[paged]=';

export default class App extends React.Component {
  constructor() {
    super()

    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
      page: 1,
    }
  }
  render() {
    return (
      <View style={ styles.container }>
        <View style={ styles.header }>
          <Text style={styles.headerText}>Mobile News</Text>
        </View>
        <ListView
          renderRow={this.renderStory}
          dataSource={this.state.dataSource}
          style={styles.listView}
        />
      </View>
    );
  }
  componentDidMount() {
    this.fetchData();
  }
  fetchData(){
    var currentUrl = REQUEST_URL + this.state.page;

    fetch(currentUrl)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData),
          loaded: true,
          page: this.state.page + 1
        });
      })
      .done();
  }
  renderStory(story) {
    return (
      <View style={styles.storyContainer}>
        {story.featured_image_url ?
          <Image
          style={styles.storyThumbnail}
          source={{uri: story.featured_image_url}}
        />
        : null}

        <Text style={styles.headline}>
          {story.title.rendered}
        </Text>
        <HTMLView
          value={story.excerpt.rendered}
          stylesheet={styles}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#eee',
    paddingTop: 50,
    paddingBottom: 50
  },
  headline: {
    fontSize: 36,
    marginBottom: 10,
  },
  bodyCopy: {
    fontSize: 18,
  },
  storyContainer: {
    flex: 1,
    marginTop: 20,
    marginBottom: -60,
    paddingLeft: 12,
    paddingRight: 10,
    alignItems: 'stretch',
    marginBottom: 60
  },
  storyThumbnail: {
    flex: 1,
    height: 200,
    width: 350,
    marginTop: 10
  },
  header: {
    alignSelf: 'stretch',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ca0002',
    height: 60,
    marginTop: -50,
    paddingTop: 10,
  },
  headerText: {
    color: 'white',
    fontSize: 24,
  },
  testStyles: {
    color: 'white',
  },
  p: {
    marginBottom: -60
  }
});