BuyWhat/src/components/ItemsPage/index.js

import React from 'react'
import { View, Text, ListView, RefreshControl, TouchableOpacity } from 'react-native'

const ds = new ListView.DataSource({
    rowHasChanged: (r1, r2) => {
        return r1.name != r2.name
    }
})

const defState = () => ({
    show: false,
    list: [],
    id: '',
    result: null
})

const shuffle = (array) => {
    var currentIndex = array.length, temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;
}

export default class ItemsPage extends React.Component {

    constructor(props) {
        super(props)
        this.state = defState()
        this.refreshList = this.refreshList.bind(this)
        this.randomItem = this.randomItem.bind(this)
    }

    refreshList() {
        let { getList } = this.props
        getList(this.state.id)
    }

    randomItem() {
        let ls = shuffle([...this.state.list])
        this.setState({
            result: ls[0] || null
        })
    }

    componentWillReceiveProps(nextProps) {
        if (this.state.show !== nextProps.show) {
            this.setState({
                show: nextProps.show,
                result: null
            })
        }
        if (this.state.id !== nextProps.sid) {
            this.setState({ id: nextProps.sid }, () => {
                this.refreshList()
            })
        }
        this.setState({
            list: nextProps.list
        })
    }


    render() {
        let { dev, list, refresh, getList, backPage } = this.props
        if (!this.state.show) return null
        console.log('Items')
        return (
            <View style={{ flex: 1 }}>
                <View style={{
                    height: 25,
                    marginTop: 5,
                    marginLeft: 10,
                    marginRight: 10,
                    marginBottom: 5
                }}>
                    <TouchableOpacity onPress={() => backPage()}>
                        <Text style={{ fontSize: 20 }}>&lt;&lt;Back</Text>
                    </TouchableOpacity>
                </View>
                <View style={{
                    height: 30,
                    margin: 10,
                    alignContent: 'center',
                    alignItems: 'center'
                }}>
                    <TouchableOpacity onPress={() => this.randomItem()}>
                        <Text style={{ fontSize: 25 }}>Random!!</Text>
                    </TouchableOpacity>
                </View>
                <View style={{
                    height: 25,
                    padding: 5,
                    alignItems: 'center'
                }}>
                    {this.state.result != null ? <Text>結果: {this.state.result.name} / {this.state.result.price}</Text> : null}
                </View>
                <ListView
                    refreshControl={<RefreshControl refreshing={refresh} onRefresh={this.refreshList} />}
                    enableEmptySections={true}
                    dataSource={ds.cloneWithRows(list)}
                    renderRow={data => {
                        return (
                            <Text>{data.name} / {data.price}</Text>
                        )
                    }} />
            </View>
        )
    }
}