Started working on pagination

app/static/app/css/main.scss

@@ -94,6 +94,40 @@ ul#side-menu.nav{
     z-index: 999999;
 }
 
+.pagination{
+    margin: 0;
+
+    li>a{
+        color: black;
+        border: 1px solid #ecf0f1;
+        background-color: #fff;
+        &:hover, &:focus{
+            background-color: #798d8f;
+        }
+    }
+    .disabled > a{
+        background-color: #fff;
+        border: 1px solid #f4f9f5;
+        &:hover, &:focus{
+            background-color: #fff;
+            border: 1px solid #f4f9f5;
+        }
+    }
+    .active > a{
+        background-color: #798d8f;
+        &:hover, &:focus{
+            background-color: #798d8f;
+        }
+    }  
+
+    &.pagination-sm{
+        a{
+            padding-top: 2px;
+            padding-bottom: 2px;
+        }
+    }
+}
+
 table.table-first-col-bold{
     td:first-child{
         font-weight: bold;

app/static/app/js/Dashboard.jsx

@@ -42,12 +42,13 @@ class Dashboard extends React.Component {
               Add Project
             </button>
           </div>
+
           <EditProjectDialog 
             saveAction={this.addNewProject}
             ref={(domNode) => { this.projectDialog = domNode; }}
             />
           <ProjectList 
-            source="/api/projects/?ordering=-created_at"
+            source="/api/projects/?ordering=-created_at&page=1"
             ref={(domNode) => { this.projectList = domNode; }} />
         </div>
     );

app/static/app/js/components/Paginated.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+/*abstract*/ class Paginated extends React.Component{
+  constructor(){
+    super();
+  }
+
+  // Should be called after parent state is set
+  setupPagination(itemsPerPage, totalItems){
+    let currentPage = 1;
+    if (this.state.pagination && this.state.pagination.currentPage !== undefined){
+      currentPage = this.state.pagination.currentPage;
+    }
+
+    this.setState({pagination: {
+          itemsPerPage: itemsPerPage,
+          totalItems: totalItems,
+          currentPage: currentPage
+      }
+    });
+  }
+
+  getPaginatedUrl(base, page){
+    return base.replace(/#\{PAGE\}/g, page);
+  }
+
+  render(){
+    throw new Error("Override me");
+  }
+} 
+
+export default Paginated;
+

app/static/app/js/components/Paginator.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import $ from 'jquery';
+
+class Paginator extends React.Component {
+    render() {
+        const { itemsPerPage, totalItems, currentPage } = this.props;
+        let paginator = null;
+
+        if (itemsPerPage && itemsPerPage && totalItems > itemsPerPage){
+            const numPages = Math.ceil(totalItems / itemsPerPage),
+                  pages = [...Array(numPages).keys()]; // [0, 1, 2, ...numPages]
+
+            paginator = (
+                <div className={this.props.className}>
+                    <ul className="pagination pagination-sm">
+                        <li className={currentPage === 1 ? "disabled" : ""}>
+                          <a href="#">
+                            <span>&laquo;</span>
+                          </a>
+                        </li>
+                        {pages.map(page => {
+                            return (<li     
+                                key={page + 1}
+                                className={currentPage === (page + 1) ? "active" : ""}
+                            ><a href="#">{page + 1}</a></li>);
+                        })}
+                        <li className={currentPage === numPages ? "disabled" : ""}>
+                          <a href="#">
+                            <span>&raquo;</span>
+                          </a>
+                        </li>
+                    </ul>
+                </div>
+                );
+        }
+
+        return (<div>
+            {paginator}
+            {this.props.children}
+            {paginator}
+        </div>);
+    }
+}
+
+export default Paginator;

app/static/app/js/components/ProjectList.jsx

@@ -2,8 +2,10 @@ import React from 'react';
 import $ from 'jquery';
 
 import ProjectListItem from './ProjectListItem';
+import Paginated from './Paginated';
+import Paginator from './Paginator';
 
-class ProjectList extends React.Component {
+class ProjectList extends Paginated {
     constructor(){
         super();
 
@@ -29,6 +31,7 @@ class ProjectList extends React.Component {
                         projects: json.results,
                         loading: false
                     });
+                    this.setupPagination(10, json.count);
                 }else{
                     this.setState({ 
                         error: `Invalid JSON response: ${JSON.stringify(json)}`,
@@ -59,11 +62,14 @@ class ProjectList extends React.Component {
             return (<div>Loading projects... <i className="fa fa-refresh fa-spin fa-fw"></i></div>);
         }
         else if (this.state.projects){
-            return (<ul className="list-group">
+            return (
+              <Paginator className="text-right" {...this.state.pagination}>
+                <ul className="list-group">
                     {this.state.projects.map(p => (
                         <ProjectListItem key={p.id} data={p} onDelete={this.handleDelete} /> 
                     ))}
-                </ul>);
+                </ul>
+            </Paginator>);
         }else if (this.state.error){
             return (<div>An error occurred: {this.state.error}</div>);
         }else{

app/static/app/js/css/Dashboard.scss

@@ -14,7 +14,7 @@
         }
     }
 
-    .add-button{
+    .add-button, .list-group{
         margin-bottom: 8px;
     }
 }