import React, { Component, PropTypes } from 'react';
import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow } from 'material-ui/Table';

import { getRepositories } from '../../installer/github';

import Repository from './Repository';
import Pagination from './Pagination';

const accessToken = window.localStorage.accessToken;
const user = JSON.parse(window.localStorage.user);

class RepositoryList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            page: 1,
            hasNext: false,
            loading: true,
            repositories: [],
        };
    }

    fetchRepositories = page => getRepositories(accessToken, user, page);

    componentWillMount() {
        this.fetchRepositories(this.state.page)
            .then(repositories => this.setState({ repositories }));
    }

    onPageChange = page => () => {
        this.fetchRepositories(page)
            .then(repositories => this.setState({
                page,
                repositories,
            }));
    };

    render() {
        return (
            <div>
                <Table>
                    <TableBody>
                        {this.state.repositories.map(repository => (
                            <Repository
                                key={repository.id}
                                repository={repository}
                            />
                        ))}
                    </TableBody>
                </Table>
                {/* to be implemented
                <Pagination
                    hasNext={true}
                    page={2}
                    onChange={this.onPageChange}
                />*/}
            </div>
        );
    };
}

export default RepositoryList;

@@ -46,16 +46,69 @@
 react';%0A
+import Progress from 'material-ui/CircularProgress';%0A
 import %7B
@@ -886,16 +886,32 @@
 sitories
+, loading: false
  %7D));%0A  
@@ -1160,24 +1160,182 @@
       %3Cdiv%3E%0A
+                %7Bthis.state.loading && %3Cdiv style=%7B%7B textAlign: 'center' %7D%7D%3E%0A                    %3CProgress size=%7B60%7D thickness=%7B5%7D /%3E%0A                %3C/div%3E%7D%0A
             

Add a loader while loading repositories