Merge pull request #1 from m4tr1k/previous-pages-button

Add previous button to history sync (tegon#150)

src/_locales/en/messages.json

@@ -80,6 +80,9 @@
   "nextPage": {
     "message": "Next page"
   },
+  "previousPage": {
+    "message": "Previous page"
+  },
   "pagesToLoad": {
     "message": "Pages to load"
   },

src/_locales/pt_BR/messages.json

@@ -80,6 +80,9 @@
   "nextPage": {
     "message": "Próxima página"
   },
+  "previousPage": {
+    "message": "Página anterior"
+  },
   "pagesToLoad": {
     "message": "Páginas para carregar"
   },

src/class/NetflixApiUtils.js

@@ -55,40 +55,47 @@ const netflixApiUtils = {
   },
 
   /**
-   * @param {number} page The first page to load.
-   * @param {number} [lastPage] The last page to load. Defaults to the first page. If -1, all pages are loaded.
+   * @param {number} currentPage The current page.
+   * @param {number} [desiredPage] The desired page to load. Defaults to the first page. If -1, all pages are loaded.
    */
-  async listActivities(page, lastPage) {
-    if (!lastPage) {
-      lastPage = page;
+  async listActivities(currentPage, desiredPage) {
+    if (!desiredPage) {
+      desiredPage = currentPage;
     }
-    let loadAll = lastPage === -1;
+    let loadAll = desiredPage === Number.MAX_VALUE;
     let isLastPage = false;
     const activities = [];
-    while (!isLastPage && (loadAll || page <= lastPage)) {
-      ActivityActionCreators.updatePage(page);
-      try {
-        const response = await Request.sendAndWait({
-          method: `GET`,
-          url: `${NETFLIX_API_HOST}/${this.buildIdentifier}/viewingactivity?languages=en-US&authURL=${this.authUrl}&pg=${page}`,
-        });
-        const _activities = JSON.parse(response).viewedItems;
+
+    if(currentPage < desiredPage){
+      while (!isLastPage && (loadAll || currentPage < desiredPage)) { 
+        ActivityActionCreators.updatePage(currentPage);
+        const _activities = await this.getPageInformation(currentPage);
+
         if (_activities.length) {
           activities.push(...(_activities.filter(a => (a.bookmark/a.duration)>0.8)));
         } else {
           isLastPage = true;
         }
-        page += 1;
-      } catch (error) {
-        ActivityActionCreators.receiveActivitiesFailed(error.status, error.response);
-        console.log(error.status, error.response);
-        return;
+        currentPage += 1;
+      }
+    } else if(currentPage > desiredPage) {
+      while (!isLastPage && (currentPage > desiredPage)) {
+        const possibleCurrentPage = currentPage - 2;
+        ActivityActionCreators.updatePage(currentPage);
+        const _activities = await this.getPageInformation(possibleCurrentPage);
+
+        if (_activities.length) {
+          activities.push(...(_activities.filter(a => (a.bookmark/a.duration)>0.8)));
+          currentPage -= 1;
+        } else {
+          isLastPage = true;
+        }
       }
     }
     const result = (await this.getActivitiesMetadata(activities)).map(this.parseActivity.bind(this));
     const parsedActivities = result.map(item => item.parsedItem);
     const promises = result.map(item => item.promise);
-    ActivityActionCreators.receiveActivities(parsedActivities, page);
+    ActivityActionCreators.receiveActivities(parsedActivities, currentPage);
     const storage = await BrowserStorage.get(`options`);
     if (storage.options && storage.options.sendReceiveSuggestions && (await browser.permissions.contains({ origins: [`*://script.google.com/*`, `*://script.googleusercontent.com/*`] }))) {
       Request.send({
@@ -124,11 +131,26 @@ const netflixApiUtils = {
       .then(ActivityActionCreators.finishLoadingTraktData.bind(ActivityActionCreators));
   },
 
-  getActivities(page = 0, lastPage = 0) {
+  async getPageInformation(currentPage){
+    try {
+      const response = await Request.sendAndWait({
+        method: `GET`,
+        url: `${NETFLIX_API_HOST}/${this.buildIdentifier}/viewingactivity?languages=en-US&authURL=${this.authUrl}&pg=${currentPage}`,
+      });
+      const _activities = JSON.parse(response).viewedItems;
+      return _activities;
+    } catch (error) {
+      ActivityActionCreators.receiveActivitiesFailed(error.status, error.response);
+      console.log(error.status, error.response);
+      return;
+    }
+  },
+
+  getActivities(currentPage = 0, desiredPage = 1) {
     ActivityActionCreators.resetActivities();
     ActivityActionCreators.startLoadingTraktData();
     this.activateAPI()
-      .then(() => this.listActivities(page, lastPage));
+      .then(() => this.listActivities(currentPage, desiredPage));
   },
 
   /**

src/class/history-sync/ViewingActivityApp.js

@@ -16,7 +16,8 @@ export default class ViewingActivityApp extends React.Component {
     return Object.assign(this.getStateFromStores(), {
       hideSynced: this.props.hideSynced,
       use24Clock: this.props.use24Clock,
-      pagesToLoad: this.props.pagesToLoad
+      pagesToLoad: this.props.pagesToLoad,
+      loadedPages: this.props.loadedPages
     });
   }
 
@@ -76,13 +77,28 @@ export default class ViewingActivityApp extends React.Component {
     this.setState({pagesToLoad});
   }
 
-  _onNextPageClick() {
+  _loadedPagesChange(loadedPages){
+    this.setState({loadedPages});
+  }
+
+  async _onNextPageClick() {
     this.setState({loading: true});
     if (this.state.pagesToLoad === `All`) {
-      NetflixApiUtils.getActivities(this.state.page, -1);
+      await NetflixApiUtils.getActivities(this.state.page, Number.MAX_VALUE);
     } else {
-      NetflixApiUtils.getActivities(this.state.page, this.state.page + parseInt(this.state.pagesToLoad));
+      await NetflixApiUtils.getActivities(this.state.page, this.state.page + parseInt(this.state.pagesToLoad));
     }
+    this._loadedPagesChange(this.state.pagesToLoad);
+  }
+
+  async _onPreviousPageClick(){
+    this.setState({loading: true});
+
+    const currentPage = this.state.page - this.state.loadedPages - parseInt(this.state.pagesToLoad)
+    const desiredPage = this.state.page - this.state.loadedPages;
+
+    await NetflixApiUtils.getActivities(currentPage, desiredPage);
+    this._loadedPagesChange(this.state.pagesToLoad);
   }
 
   _onToggleAll(event) {
@@ -133,6 +149,7 @@ export default class ViewingActivityApp extends React.Component {
 
   render() {
     let content;
+
 
     if (this.state.loading) {
       content = (
@@ -194,15 +211,20 @@ export default class ViewingActivityApp extends React.Component {
               {browser.i18n.getMessage(`nextPage`)}
             </button>
 
+            <button onClick={this._onPreviousPageClick.bind(this)}
+                    className='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect'>
+              {browser.i18n.getMessage(`previousPage`)}
+            </button>
+
             <Select
               label={browser.i18n.getMessage(`pagesToLoad`)}
               value={this.state.pagesToLoad}
               options={[
-                { value: `0`, label: `1` },
-                { value: `4`, label: `5` },
-                { value: `9`, label: `10` },
-                { value: `49`, label: `50` },
-                { value: `99`, label: `100` },
+                { value: `1`, label: `1` },
+                { value: `5`, label: `5` },
+                { value: `10`, label: `10` },
+                { value: `50`, label: `50` },
+                { value: `100`, label: `100` },
                 { value: `All`, label: browser.i18n.getMessage(`allPages`) }
               ]}
               onChange={this._onPagesToLoadChange.bind(this)}