feat(ui) - pagination wip

frontend/app/components/BugFinder/SessionList/SessionList.js

@@ -1,13 +1,14 @@
 import { connect } from 'react-redux';
-import { Loader, NoContent, Button, LoadMoreButton } from 'UI';
+import { Loader, NoContent, Button, LoadMoreButton, Pagination } from 'UI';
 import { applyFilter, addAttribute, addEvent } from 'Duck/filters';
-import { fetchSessions, addFilterByKeyAndValue } from 'Duck/search';
+import { fetchSessions, addFilterByKeyAndValue, updateCurrentPage } from 'Duck/search';
 import SessionItem from 'Shared/SessionItem';
 import SessionListHeader from './SessionListHeader';
 import { FilterKey } from 'Types/filter/filterType';
+import { sliceListPerPage } from 'App/utils';
 
 const ALL = 'all';
-const PER_PAGE = 10;
+const PER_PAGE = 5;
 const AUTOREFRESH_INTERVAL = 3 * 60 * 1000;
 var timeoutId;
 
@@ -20,12 +21,14 @@ var timeoutId;
   total: state.getIn([ 'sessions', 'total' ]),
   filters: state.getIn([ 'search', 'instance', 'filters' ]),
   metaList: state.getIn(['customFields', 'list']).map(i => i.key),
+  currentPage: state.getIn([ 'search', 'currentPage' ]),
 }), {
   applyFilter,
   addAttribute,
   addEvent,
   fetchSessions,
   addFilterByKeyAndValue,
+  updateCurrentPage,
 })
 export default class SessionList extends React.PureComponent {
   state = {
@@ -76,6 +79,8 @@ export default class SessionList extends React.PureComponent {
     clearTimeout(timeoutId)
   }
 
+  
+
   renderActiveTabContent(list) {
     const {
       loading,
@@ -84,6 +89,7 @@ export default class SessionList extends React.PureComponent {
       allList,
       activeTab,
       metaList,
+      currentPage,
     } = this.props;
     const _filterKeys = filters.map(i => i.key);
     const hasUserFilter = _filterKeys.includes(FilterKey.USERID) || _filterKeys.includes(FilterKey.USERANONYMOUSID);
@@ -93,28 +99,28 @@ export default class SessionList extends React.PureComponent {
     return (
       <NoContent
         title={this.getNoContentMessage(activeTab)}
-        subtext="Please try changing your search parameters."
+        // subtext="Please try changing your search parameters."
         icon="exclamation-circle"
         show={ !loading && list.size === 0}
         subtext={
-        <div>
-          <div>Please try changing your search parameters.</div>
-          {allList.size > 0 && (
-            <div className="pt-2">
-              However, we found other sessions based on your search parameters. 
-              <div>
-                <Button
-                  plain
-                  onClick={() => onMenuItemClick({ name: 'All', type: 'all' })}
-                >See All</Button>
+          <div>
+            <div>Please try changing your search parameters.</div>
+            {allList.size > 0 && (
+              <div className="pt-2">
+                However, we found other sessions based on your search parameters. 
+                <div>
+                  <Button
+                    plain
+                    onClick={() => onMenuItemClick({ name: 'All', type: 'all' })}
+                  >See All</Button>
+                </div>
               </div>
-            </div>
-          )}
-        </div>
+            )}
+          </div>
         }
       >
         <Loader loading={ loading }>
-          { list.take(displayedCount).map(session => (
+          { sliceListPerPage(list, currentPage, PER_PAGE).map(session => (
             <SessionItem
               key={ session.sessionId }
               session={ session }
@@ -124,7 +130,12 @@ export default class SessionList extends React.PureComponent {
             />
           ))}
         </Loader>
-        <LoadMoreButton
+        <Pagination
+          page={currentPage}
+          totalPages={Math.ceil(list.size / PER_PAGE)}
+          onPageChange={(page) => this.props.updateCurrentPage(page)}
+        />
+        {/* <LoadMoreButton
           className="mt-12 mb-12"
           displayedCount={displayedCount}
           totalCount={list.size}
@@ -135,7 +146,7 @@ export default class SessionList extends React.PureComponent {
               Haven't found the session in the above list? <br/>Try being a bit more specific by setting a specific time frame or simply use different filters
             </div>
           }
-        />
+        /> */}
       </NoContent>
     );
   }

frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx

@@ -12,7 +12,7 @@ import { addFilterByKeyAndValue, updateCurrentPage, updateSort } from 'Duck/live
 import DropdownPlain from 'Shared/DropdownPlain';
 import SortOrderButton from 'Shared/SortOrderButton';
 import { TimezoneDropdown } from 'UI';
-import { capitalize } from 'App/utils';
+import { capitalize, sliceListPerPage } from 'App/utils';
 import LiveSessionReloadButton from 'Shared/LiveSessionReloadButton';
 
 const AUTOREFRESH_INTERVAL = .5 * 60 * 1000
@@ -107,12 +107,6 @@ function LiveSessionList(props: Props) {
     }, AUTOREFRESH_INTERVAL);
   }
 
-  const sliceListPerPage = (list, page) => {
-    const start = page * PER_PAGE;
-    const end = start + PER_PAGE;
-    return list.slice(start, end);
-  }
-
   return (
     <div>
       <div className="flex mb-6 justify-between items-end">
@@ -140,13 +134,7 @@ function LiveSessionList(props: Props) {
           <SortOrderButton onChange={(state) => props.updateSort({ order: state })} sortOrder={sort.order} />
         </div>
       </div>
-      <div className="w-full flex items-center justify-center py-6">
-        <Pagination
-          page={currentPage}
-          totalPages={Math.ceil(sessions.size / PER_PAGE)}
-          onPageChange={(page) => props.updateCurrentPage(page)}
-        />
-      </div>
+
       <NoContent
         title={"No live sessions."}
         subtext={
@@ -172,17 +160,13 @@ function LiveSessionList(props: Props) {
             />
           ))}
 
-          {/* <LoadMoreButton
-            className="my-6"
-            displayedCount={displayedCount}
-            totalCount={sessions.size}
-            onClick={addPage}
-          /> */}
-          {/* <Pagination
-            currentPage={1}
-            totalCount={30}
-            onChange={(page) => null}
-          /> */}
+        <div className="w-full flex items-center justify-center py-6">
+          <Pagination
+            page={currentPage}
+            totalPages={Math.ceil(sessions.size / PER_PAGE)}
+            onPageChange={(page) => props.updateCurrentPage(page)}
+          />
+        </div>
         </Loader>
       </NoContent>
     </div>

frontend/app/duck/search.js

@@ -28,6 +28,7 @@ const CLEAR_SEARCH = `${name}/CLEAR_SEARCH`;
 const UPDATE = `${name}/UPDATE`;
 const APPLY = `${name}/APPLY`;
 const SET_ALERT_METRIC_ID = `${name}/SET_ALERT_METRIC_ID`;
+const UPDATE_CURRENT_PAGE = `${name}/UPDATE_CURRENT_PAGE`;
 
 const REFRESH_FILTER_OPTIONS = 'filters/REFRESH_FILTER_OPTIONS';
 
@@ -49,6 +50,7 @@ const initialState = Map({
 	instance: new Filter({ filters: [] }),
   savedSearch: new SavedFilter({}),
   filterSearchList: {},
+  currentPage: 1,
 });
 
 // Metric - Series - [] - filters
@@ -83,6 +85,8 @@ function reducer(state = initialState, action = {}) {
       return state.set('savedSearch', action.filter);
     case EDIT_SAVED_SEARCH:
       return state.mergeIn([ 'savedSearch' ], action.instance);
+    case UPDATE_CURRENT_PAGE:
+      return state.set('currentPage', action.page);
 	}
 	return state;
 }
@@ -122,6 +126,8 @@ const reduceThenFetchResource = actionCreator => (...args) => (dispatch, getStat
   dispatch(actionCreator(...args));
   const filter = getState().getIn([ 'search', 'instance']).toData();
   filter.filters = filter.filters.map(filterMap);
+  filter.limit = 5;
+  filter.page = getState().getIn([ 'search', 'currentPage']);
 
   return isRoute(ERRORS_ROUTE, window.location.pathname)
     ? dispatch(fetchErrorsList(filter))
@@ -268,4 +274,11 @@ export const refreshFilterOptions = () => {
   return {
     type: REFRESH_FILTER_OPTIONS
   }
+}
+
+export function updateCurrentPage(page) {
+  return {
+    type: UPDATE_CURRENT_PAGE,
+    page,
+  };
 }

frontend/app/duck/sessions.js

@@ -60,6 +60,7 @@ const initialState = Map({
   funnelPage: Map(),
   timelinePointer: null,
   sessionPath: '',
+  total: 0,
 });
 
 const reducer = (state = initialState, action = {}) => {
@@ -129,6 +130,7 @@ const reducer = (state = initialState, action = {}) => {
         .set('favoriteList', list.filter(({ favorite }) => favorite))
         .set('total', total)
         .set('keyMap', keyMap)
+        .set('total', total)
         .set('wdTypeCount', wdTypeCount);
     case SET_AUTOPLAY_VALUES: {
       const sessionIds = state.get('sessionIds')

frontend/app/utils.js

@@ -232,4 +232,10 @@ export const isGreaterOrEqualVersion = (version, compareTo) => {
   const [major, minor, patch] = version.split("-")[0].split('.');
   const [majorC, minorC, patchC] = compareTo.split("-")[0].split('.');
   return (major > majorC) || (major === majorC && minor > minorC) || (major === majorC && minor === minorC && patch >= patchC);
+}
+
+export const sliceListPerPage = (list, page, perPage = 10) => {
+  const start = page * perPage;
+  const end = start + perPage;
+  return list.slice(start, end);
 }