import React, {Component} from 'react';
import {
    AppRegistry,
    View,
    ListView,
    StyleSheet
} from 'react-native';

import Spinner from 'react-native-loading-spinner-overlay';

import Book from './book';

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

class Library extends Component {
    constructor(props) {
        super(props);

        this.state = {
            loading: true,
            dataSource: ds.cloneWithRows([])
        }
    }

    componentDidMount() {
        this.fetchBooks();
    }

    fetchBooks() {
        fetch('https://www.micose.pierrepironin.fr/api/books/')
        // fetch('http://192.168.0.12:4000/api/books/')
            .then((response) => {
                return response.json();
            })
            .then((response) => {
                // Sort by title and subtitle
                if (!response.data) {
                    return [];
                }
                return response.data.sort((book1, book2) => {
                    if (book1.title < book2.title) {
                        return -1;
                    } else if (book2.title > book1.title) {
                        return 1;
                    } else {
                        return book1.subtitle < book2.subtitle ? -1 : 1;
                    }
                });
            })
            .then((books) => {
                this.setState({
                    loading: false,
                    dataSource: ds.cloneWithRows(books)
                });
            })
            .catch((error) => {
                console.warn(error);
            })
            .done();
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <Spinner visible={this.state.loading}/>
                <ListView
                    style={styles.books}
                    dataSource={this.state.dataSource}
                    renderRow={(rowData) => <Book book={rowData} />}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    books: {
        flex: 1
    },
});

export default Library;
@@ -97,16 +97,36 @@
 yleSheet
+,%0A    RefreshControl
 %0A%7D from 
@@ -496,16 +496,49 @@
 Rows(%5B%5D)
+,%0A            isRefreshing: false
 %0A       
@@ -1432,24 +1432,124 @@
 books) =%3E %7B%0A
+                // Managed 1st loading and refreshing%0A                if (this.state.loading) %7B%0A    
             
@@ -1564,24 +1564,28 @@
 .setState(%7B%0A
+    
             
@@ -1606,17 +1606,276 @@
 g: false
-,
+%0A                    %7D)%0A                %7D else if (this.state.isRefreshing) %7B%0A                    this.setState(%7B%0A                        isRefreshing: false%0A                    %7D)%0A                %7D%0A                // Load books%0A                this.setState(%7B
 %0A       
@@ -2066,24 +2066,121 @@
 e();%0A    %7D%0A%0A
+    onRefresh() %7B%0A        this.setState(%7BisRefreshing: true%7D);%0A        this.fetchBooks();%0A    %7D%0A%0A
     render()
@@ -2483,16 +2483,275 @@
 ta%7D /%3E%7D%0A
+                    refreshControl = %7B%0A                        %3CRefreshControl%0A                            refreshing=%7Bthis.state.isRefreshing%7D%0A                            onRefresh=%7Bthis.onRefresh.bind(this)%7D%0A                        /%3E%0A                    %7D%0A
         

Add a pull up to refresh books view