ReactnativeWordpress/App.js at master · codeariv/ReactnativeWordpress · 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
import React, { Component } from 'react';
import { Image, Dimensions, View, ActivityIndicator } from 'react-native';
import { Container, Header, Body, Title, Content, Card, CardItem, Text, Button, Left } from 'native-base';
import Moment from 'moment';
import HTML from 'react-native-render-html';
export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      posts: [],
    };
  }

  componentDidMount() {
        fetch(`https://www.techomoro.com/wp-json/wp/v2/posts?_embed`)
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({
            isLoading: false,
            posts: responseJson,
          })
        })
        .catch((error) => {
          console.error(error);
        });
  }

  render() {
    if (this.state.isLoading == true) {
      return(
        <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center',}}>
          <ActivityIndicator size="large" color="#1C97F7" />
        </View>
      )
    }
    else{
    Moment.locale('en');
    return (
      <Container>

        <Header androidStatusBarColor="#004447" style={{ backgroundColor: '#006064' }}>
          <Body style = {{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }}>
            <Title>TECHOMORO</Title>
          </Body>
        </Header>

        <Content>
        {this.state.posts.map((item, index) => (
          <Card style={{flex: 0}} key = {item.id}>
            <CardItem>
              <Left>
                <Body>
                  <Text style = {{ fontSize: 24, fontWeight:'bold' }}>{item.title.rendered}</Text>
                  <Text note>Published on: {Moment(item.date).format('d MMM Y')}</Text>
                </Body>
              </Left>
            </CardItem>
            <CardItem>
              {item._embedded['wp:featuredmedia'].filter( element => element.id == item.featured_media).map((subitem, index) => (
                  <Image source={{uri: subitem.media_details.sizes.medium.source_url}} style={{height: 200, width: 200, flex: 1}} key = {item.id}/>
                  ))}
            </CardItem>
            <CardItem>
                <HTML html={item.content.rendered} imagesMaxWidth={Dimensions.get('window').width} />
            </CardItem>
            <CardItem>
              <Left>
                <Button transparent textStyle={{color: '#87838B'}}>
                  <Text>Author:</Text>
                  {item._embedded.author.filter( element => element.id ==item.author).map((subitem, index) => (
                  <Text key = {item.id}>{subitem.name}</Text>
                  ))}
                </Button>
              </Left>
            </CardItem>
          </Card>
        ))}
        </Content>
      </Container>
    )
  }
  }
}