pagination in search

client/components/lookup/actions.jsx

@@ -59,7 +59,6 @@ export function loadResults(query, pageImported=0, pageFiltered=0) {
 
     // Build querystring
     let q = `q=${query}&page_filtered=${pageFiltered}&page_imported=${pageImported}`;
-
     axios.get(`/api/lookup/prefix?${q}`)
       .then((res) => {
         dispatch(loadResultsSuccess(query, res.data));

client/components/lookup/index.jsx

@@ -97,4 +97,3 @@ export default connect(
   }
 )(Lookup);
 
-

client/components/lookup/pagination.jsx

@@ -34,21 +34,18 @@ const makeLinkProps = function(props) {
 
   // This here can be surely more elegant.
   switch(props.anchor) {
-    case "routes-received":
+    case "received":
       pr = linkPage;
       break;
-    case "routes-filtered":
+    case "filtered":
       pf = linkPage;
       break;
-    case "routes-not-exported":
-      pn = linkPage;
-      break;
   }
 
   const query = props.routing.query.q || "";
 
   const search = `?pr=${pr}&pf=${pf}&q=${query}`;
-  const hash   = `#${props.anchor}`;
+  const hash   = `#routes-${props.anchor}`;
   const linkTo = {
     pathname: props.routing.pathname,
     hash:     hash,
@@ -60,7 +57,7 @@ const makeLinkProps = function(props) {
 
 
 const PageLink = function(props) {
-  const linkPage = parseInt(props.page);
+  const linkPage = parseInt(props.page, 10);
   const label = props.label || (linkPage + 1);
 
   if (props.disabled) {

client/components/lookup/reducer.jsx

@@ -17,6 +17,8 @@ const initialState = {
   query: "",
   queryValue: "",
 
+  anchor: "",
+
   routesImported: [],
   routesFiltered: [],
 
@@ -42,19 +44,36 @@ const initialState = {
   isLoading: false
 }
 
+/*
+ * Helper: Get scroll anchor from hash
+ */
+const getScrollAnchor = function(hash) {
+  return hash.substr(hash.indexOf('-')+1);
+}
+
+
 /*
  * Restore lookup query state from location paramenters
  */
-const _restoreQueryState = function(state, payload) {
+const _handleLocationChange = function(state, payload) {
   const params = payload.query;
   const query = params["q"] || "";
+  const pageFiltered = parseInt(params["pf"] || 0, 10);
+  const pageReceived = parseInt(params["pr"] || 0, 10);
+  const anchor = getScrollAnchor(payload.hash);
 
   return Object.assign({}, state, {
+    anchor: anchor,
     query: query,
-    queryValue: query
+    queryValue: query,
+    pageImported: pageReceived,
+    pageFiltered: pageFiltered
   });
 }
 
+/*
+ * Receive query results
+ */
 const _loadQueryResult = function(state, payload) {
   const results = payload.results;
   const imported = results.imported;
@@ -67,7 +86,7 @@ const _loadQueryResult = function(state, payload) {
     // Cache Status
     cachedAt: api.cache_status.cached_at, // I don't like this style. 
     cacheTtl: api.ttl, 
-
+    
     // Routes
     routesImported: imported.routes,
     routesFiltered: filtered.routes,
@@ -93,7 +112,7 @@ const _loadQueryResult = function(state, payload) {
 export default function reducer(state=initialState, action) {
   switch(action.type) {
     case LOCATION_CHANGE:
-      return _restoreQueryState(state, action.payload);
+      return _handleLocationChange(state, action.payload);
       
     case SET_LOOKUP_QUERY_VALUE:
       return Object.assign({}, state, {
@@ -101,7 +120,7 @@ export default function reducer(state=initialState, action) {
       });
 
     case LOAD_RESULTS_REQUEST:
-      return Object.assign({}, state, initialState, {
+      return Object.assign({}, state, {
         query: action.payload.query,
         queryValue: action.payload.query,
         isLoading: true

client/components/lookup/results.jsx

@@ -97,26 +97,32 @@ const NoResultsFallback = connect(
 
 class LookupResults extends React.Component {
 
-  dispatchLookup(query) {
+  dispatchLookup() {
+    const query = this.props.query;
+    const pageImported = this.props.pagination.imported.page;
+    const pageFiltered = this.props.pagination.filtered.page;
+
     if (query == "") {
       // Dispatch reset and transition to main page
       this.props.dispatch(reset());
       this.props.dispatch(replace("/"));
     } else {
       this.props.dispatch(
-        loadResults(query)
+        loadResults(query, pageImported, pageFiltered)
       );
     }
   }
 
   componentDidMount() {
     // Dispatch query
-    this.dispatchLookup(this.props.query);
+    this.dispatchLookup();
   }
 
   componentDidUpdate(prevProps) {
-    if(this.props.query != prevProps.query) {
-      this.dispatchLookup(this.props.query);
+    if(this.props.query != prevProps.query ||
+       this.props.pagination.filtered.page != prevProps.pagination.filtered.page ||
+       this.props.pagination.imported.page != prevProps.pagination.imported.page) {
+        this.dispatchLookup();
     }
   }
 
@@ -125,6 +131,11 @@ class LookupResults extends React.Component {
       return <LoadingIndicator />;
     }
 
+    const ref = this.refs[this.props.anchor];
+    if(ref) {
+      ref.scrollIntoView();
+    }
+
     const filteredRoutes = this.props.routes.filtered;
     const importedRoutes = this.props.routes.imported;
 
@@ -134,6 +145,7 @@ class LookupResults extends React.Component {
 
         <NoResultsFallback />
 
+        <a ref="filtered" name="routes-filtered" />
         <ResultsView type="filtered"
                      routes={filteredRoutes}
 
@@ -146,6 +158,7 @@ class LookupResults extends React.Component {
 
                      displayReasons="filtered" />
 
+        <a ref="received" name="routes-received" />
         <ResultsView type="received"
 
                      page={this.props.pagination.imported.page}
@@ -157,9 +170,8 @@ class LookupResults extends React.Component {
 
                      routes={importedRoutes} />
       </div>
-    )
+    );
   }
-
 }
 
 export default connect(
@@ -168,6 +180,7 @@ export default connect(
     const importedRoutes = state.lookup.routesImported; 
 
     return {
+      anchor: state.lookup.anchor,
       routes: {
         filtered: filteredRoutes,
         imported: importedRoutes