Untitled

import React, { Component } from 'react';
import { StyleSheet, View, Text, Image, TouchableWithoutFeedback } from 'react-native';
import { Card, CardItem, Body, H3, Toast, Button, Icon } from 'native-base';
import { FlatGrid } from 'react-native-super-grid';
import NavigationService from '../components/NavigationService.js';
import Loading from '../components/Loading.js';
import { URL } from '../components/url';
import axios from 'axios';

export default class CategoryDetailGrid extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            error: '',
            categoryDetailList: [],
            category_id: '',
            startPoint: 0,
            endReach: 20
        }
    }

    componentDidMount() {
        this.getCategoryDetailList(this.props.id, this.state.startPoint, this.state.endReach);
    }

    showErrorToast = () => {
        Toast.show({
            text: "İnternet bağlantısında problem yarandı",
            buttonText: "Bağla",
            type: "danger",
            duration: 3000,
            position: "top"
        });
    }

    getCategoryDetailList = (id, startPoint, endReach) => {
        this.setState({ isLoading: true })
        axios.get(URL + 'app/apiv3/index.php/get_mehsul_v/apikey/melhem3/dil/az/alt_kategoriya_id/' + id)
            .then(result => this.setState({
                isLoading: false,
                categoryDetailList: result.data.slice(startPoint, endReach)
            }))
            .catch(error => this.setState({
                isLoading: true,
                error: error
            }, () => this.showErrorToast()));
    }

    _renderItem = ({ item }) => {
        return (
            <TouchableWithoutFeedback onPress={() => NavigationService.navigate('DrugDetail', { id: item.mehsul_id, image: item.mehsul_mini_sekil_url, title: item.mehsul_qisa_adi, price: item.endirimli_qiymet.slice(0, -2), description: item.aciqlama, rule: item.istifade_qaydasi, composition: item.terkibi })}>
                <Card style={styles.cardStyle}>
                    <CardItem cardBody>
                        <Image source={{ uri: URL + item.mehsul_thumbnail }} style={styles.itemImage} />
                    </CardItem>
                    <CardItem>
                        <Body style={styles.cardBodyStyle}>
                            <Text>{item.mehsul_qisa_adi}</Text>
                            <Text style={styles.priceStyle}>{item.endirimli_qiymet.slice(0, -2)} AZN</Text>
                        </Body>
                    </CardItem>
                </Card>
            </TouchableWithoutFeedback>
        );
    }

    back = () => {
        this.setState({
            startPoint: this.state.startPoint - 20,
            endReach: this.state.endReach - 20
        }, () => {
            this.componentDidMount();
        });
    }

    next = () => {
        this.setState({
            startPoint: this.state.startPoint + 20,
            endReach: this.state.endReach + 20
        }, () => {
            this.componentDidMount();
        });
    }

    render() {
        const { isLoading, categoryDetailList } = this.state;
        if (isLoading) {
            return (
                <Loading />
            );
        }
        return (
            <View style={styles.viewStyle} >
                <H3 style={styles.titleStyle}>{this.props.title}</H3>
                <FlatGrid
                    key={this.props.id}
                    itemDimension={130}
                    items={categoryDetailList}
                    renderItem={this._renderItem}
                />
                <View style={styles.btnSectionStyle}>
                    {(this.state.startPoint > 0) ?
                        (<Button iconLeft style={styles.backButtonStyle} onPress={this.back}>
                            <Icon name='arrow-back' />
                            <Text style={styles.btnText}>Əvvəlki</Text>
                        </Button>) :
                        (<View></View>)}
                    <Button iconRight style={styles.nextButtonStyle} onPress={this.next}>
                        <Text style={styles.btnText}>Növbəti</Text>
                        <Icon name='arrow-forward' />
                    </Button>
                </View>
            </View>
        );
    }

}
const styles = StyleSheet.create({
    viewStyle: {
        padding: 20
    },
    cardStyle: {
        borderRadius: 15,
        overflow: 'hidden',
        height: 235
    },
    itemImage: {
        flex: 1,
        width: null,
        height: 150,
    },
    cardBodyStyle: {
        justifyContent: 'flex-start',
        alignItems: 'flex-start'
    },
    priceStyle: {
        fontWeight: 'bold'
    },
    titleStyle: {
        paddingLeft: 10,
        fontWeight: 'bold'
    },
    btnSectionStyle: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    backButtonStyle: {
        borderRadius: 15,
        marginRight: 10,
        overflow: 'hidden',
        backgroundColor: '#70BE44'
    },
    nextButtonStyle: {
        borderRadius: 15,
        marginLeft: 10,
        overflow: 'hidden',
        backgroundColor: '#70BE44'
    },
    btnText: {
        padding: 10,
        color: '#fff'
    }
});