Policies List

by shreygupta123

HTML

import React from "react";
import View from "View";
import CardModal from "./card-modal";

class PolicyCard extends React.Component
{
  render()
  {
    let policy = this.props.policy;
    var description = policy.expiry+"\n"+policy.content.substr(0,100)+"....";
    return <CardModal title={policy.policynumber}
           description={description}
           source={{uri:policy.image}}
           color={'#0E48BE'}
           content={policy.content}
           onClick={this.props.onClick}
           due={30}
           />
  }
}
export default PolicyCard;

PolicyCard.props = {
  policy:React.PropTypes.object,
  onClick:React.PropTypes.func
}

JavaScript

import React, { Component } from 'react';
import {
	AppRegistry,
	StyleSheet,
	Text,
	TouchableOpacity,
	View,
	ScrollView,
	LayoutAnimation
} from 'react-native';

import PolicyCard from './PolicyCard';
import ParallaxScrollView from 'react-native-parallax-scroll-view';

export default class PoliciesList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			scroll: true,
			policies:[],
			loadingPolicies:false
		}
		this.disableScroll = this.disableScroll.bind(this);
	}

	disableScroll() {
		this.setState({ scroll: !this.state.scroll });
	}

	render() {
		if(this.state.loadingPolicies)
		{
				return <View style={styles.container}>
					<Text>Loading....</Text>
				</View>;
		}
		return (
			<ScrollView scrollEnabled={this.state.scroll} style={styles.container}>
				{this.renderPolicies()}
			</ScrollView>
		);
	}

	renderPolicies()
	{
		return this.state.policies.map((policy)=>{
				return <PolicyCard key={"PolicyCard-"+policy.ID} policy={policy} onClick={this.disableScroll}/>
		});
	}

	componentWillMount()
	{
		this.loadPolicies();
	}
	//@todo implment TimerMixin for requestAnimationFrame
	async loadPolicies()
	{
		var policies = [];
		try {
			this.setState({
				loadingPolicies:true
			});
			let response = await fetch("https://www.coverhero.com.au/api/index.json");
			policies = await response.json();
		} catch (e) {
			//@todo add error handling
			requestAnimationFrame(()=>{
					alert("Error in Loading policies");
			});
		} finally {
			this.setState({
				policies,
				loadingPolicies:false,
			});
		}
	}
}

var styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#ddd'
	},
	box: {
		backgroundColor: 'red'
	},
	button: {
		borderColor: 1,
		borderWidth: 1,
	}
})