feat(Album View Page): Next/Prev arrows will load cached photo image …

…when possible
danactive · Apr 1, 2020 · 5d9ce5b · 5d9ce5b
1 parent 9dee9af
commit 5d9ce5b
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 89 deletions.
diff --git a/ui/app/containers/AlbumViewPage/tests/reducer.test.js b/ui/app/containers/AlbumViewPage/tests/reducer.test.js
@@ -1,7 +1,7 @@
 /* global beforeEach, describe, expect, test */
 import produce from 'immer';
 
-import json from '../../App/tests/fixtures/album';
+import json from '../../App/tests/fixtures/album.json';
 import pageReducer, { initialState } from '../reducer';
 import {
   loadAlbum,

diff --git a/ui/app/containers/AlbumViewPage/tests/saga.test.js b/ui/app/containers/AlbumViewPage/tests/saga.test.js
@@ -20,7 +20,7 @@ import {
   LOAD_ALBUM_SUCCESS,
   LOAD_ALBUM_ERROR,
 } from '../constants';
-import albumFixture from '../../App/tests/fixtures/album';
+import albumFixture from '../../App/tests/fixtures/album.json';
 
 describe('AlbumViewPage Saga', () => {
   describe('getAlbumFile on Dropbox', () => {

diff --git a/ui/app/containers/App/reducer.js b/ui/app/containers/App/reducer.js
@@ -11,8 +11,6 @@ import {
   LOAD_NEXT_THUMB_PAGE_SUCCESS,
   LOAD_THUMBS_SUCCESS,
   PAGE_SIZE,
-  NEXT_MEMORY,
-  PREV_MEMORY,
 } from '../AlbumViewPage/constants';
 import { insertPage } from '../AlbumViewPage/paging';
 import { LOAD_GALLERY, LOAD_GALLERY_SUCCESS } from '../GalleryViewPage/constants';
@@ -104,26 +102,6 @@ const appReducer = (state = initialState, action) => produce(state, (draft) => {
       break;
     }
 
-    case NEXT_MEMORY:
-    case PREV_MEMORY: {
-      const { memories } = state[state.host][state.gallery][state.album];
-      const currentMemoryId = state.currentMemory.id || 0;
-      const currentMemoryIndex = memories.findIndex(item => item.id === currentMemoryId);
-      let adjacentMemoryIndex = currentMemoryIndex + action.adjacentInt;
-
-      const carouselEnd = adjacentMemoryIndex >= memories.length;
-      if (carouselEnd) adjacentMemoryIndex -= memories.length;
-
-      const carouselBegin = adjacentMemoryIndex < 0;
-      if (carouselBegin) adjacentMemoryIndex = memories.length + adjacentMemoryIndex;
-
-      const findIndex = memories[adjacentMemoryIndex].id;
-
-      const found = state[state.host][state.gallery][state.album].memories.filter(item => item.id === findIndex)[0];
-      draft.currentMemory = found || {};
-      break;
-    }
-
     case LOAD_GALLERY: {
       draft.host = action.host;
       draft.gallery = action.gallery;

diff --git a/ui/app/containers/App/tests/reducer.test.js b/ui/app/containers/App/tests/reducer.test.js
@@ -2,11 +2,8 @@
 import produce from 'immer';
 
 import appReducer, { initialState } from '../reducer';
-import {
-  albumLoadSuccess,
-  chooseAdjacentMemory, loadAlbum,
-} from '../../AlbumViewPage/actions';
-import json from './fixtures/album';
+import { albumLoadSuccess, loadAlbum } from '../../AlbumViewPage/actions';
+import json from './fixtures/album.json';
 
 /* eslint-disable default-case, no-param-reassign */
 describe('appReducer', () => {
@@ -64,57 +61,4 @@ describe('appReducer', () => {
 
     expect(received).toStrictEqual(expected);
   });
-
-  describe('should handle the currentMemory action correctly', () => {
-    const testState = {
-      host: 'dropbox',
-      gallery: 'demo',
-      album: 'sample',
-      dropbox: {
-        demo: {
-          sample: {
-            memories: [
-              { id: 1 },
-              { id: 2 },
-              { id: 3 },
-            ],
-          },
-        },
-      },
-      currentMemory: {
-        id: 2,
-      },
-    };
-    test('should be one after ID two', () => {
-      const expectedResult = produce(testState, (draft) => {
-        draft.currentMemory.id = 3;
-      });
-
-      expect(appReducer(testState, chooseAdjacentMemory(1))).toEqual(expectedResult);
-    });
-
-    test('should be one before ID two', () => {
-      const expectedResult = produce(testState, (draft) => {
-        draft.currentMemory.id = 1;
-      });
-
-      expect(appReducer(testState, chooseAdjacentMemory(-1))).toEqual(expectedResult);
-    });
-
-    test('should be two after ID two', () => {
-      const expectedResult = produce(testState, (draft) => {
-        draft.currentMemory.id = 1;
-      });
-
-      expect(appReducer(testState, chooseAdjacentMemory(2))).toEqual(expectedResult);
-    });
-
-    test('should be two before ID two', () => {
-      const expectedResult = produce(testState, (draft) => {
-        draft.currentMemory.id = 3;
-      });
-
-      expect(appReducer(testState, chooseAdjacentMemory(-2))).toEqual(expectedResult);
-    });
-  });
 });
diff --git a/ui/app/containers/InfiniteThumbs/saga.js b/ui/app/containers/InfiniteThumbs/saga.js
@@ -9,11 +9,8 @@ import normalizeError from '../../utils/error';
 import { CHOOSE_MEMORY } from '../App/constants';
 import { makeSelectCurrentMemory } from '../App/selectors';
 import { makeSelectMemories } from '../AlbumViewPage/selectors';
-import { photoLoadError, photoLoadSuccess } from '../App/actions';
-import {
-  NEXT_MEMORY,
-  PREV_MEMORY,
-} from '../AlbumViewPage/constants';
+import { chooseMemory, photoLoadError, photoLoadSuccess } from '../App/actions';
+import { NEXT_MEMORY, PREV_MEMORY } from '../AlbumViewPage/constants';
 
 const dbx = (process.env.HISTORY_DROPBOX_ACCESS_TOKEN) ? new Dropbox({ accessToken: process.env.HISTORY_DROPBOX_ACCESS_TOKEN, fetch }) : null;
 
@@ -34,7 +31,7 @@ export const argsPhotoXmlPath = ({ gallery, filename }) => {
 };
 
 
-// saga WORKER for CHOOSE_MEMORY
+// saga WORKER for CHOOSE_MEMORY for Dropbox gallery
 export function* getPhotoPathsOnDropbox({
   currentMemory,
   host,
@@ -57,6 +54,7 @@ export function* getPhotoPathsOnDropbox({
   }
 }
 
+// saga WORKER for CHOOSE_MEMORY for local gallery
 export function* getPhotoPathsLocally({
   id,
   currentMemory,
@@ -73,6 +71,7 @@ export function* getPhotoPathsLocally({
   }));
 }
 
+// saga WORKER for CHOOSE_MEMORY
 export function* getCurrentMemoryPhotoPath({ id }) {
   const {
     currentMemory,
@@ -107,8 +106,35 @@ export function* getCurrentMemoryPhotoPath({ id }) {
   }
 }
 
+export const determineAdjacentInCarousel = ({ adjacentInt, currentMemory, memories }) => {
+  const currentMemoryId = currentMemory.id || 0;
+  const currentMemoryIndex = memories.findIndex(item => item.id === currentMemoryId);
+  let adjacentMemoryIndex = currentMemoryIndex + adjacentInt;
+
+  const carouselEnd = adjacentMemoryIndex >= memories.length;
+  if (carouselEnd) adjacentMemoryIndex -= memories.length;
+
+  const carouselBegin = adjacentMemoryIndex < 0;
+  if (carouselBegin) adjacentMemoryIndex = memories.length + adjacentMemoryIndex;
+
+  const findIndex = memories[adjacentMemoryIndex].id;
+
+  return findIndex;
+};
+
+// saga WORKER for NEXT_MEMORY, PREV_MEMORY
+export function* calculateAdjacentMemoryId({ adjacentInt }) {
+  const { currentMemory } = yield select(makeSelectCurrentMemory());
+  const memories = yield select(makeSelectMemories());
+
+  const findIndex = determineAdjacentInCarousel({ adjacentInt, currentMemory, memories });
+
+  yield put(chooseMemory(findIndex));
+}
+
 
 // ROOT saga manages WATCHER lifecycle
 export default function* InfiniteThumbsSagaWatcher() {
-  yield takeEvery([CHOOSE_MEMORY, NEXT_MEMORY, PREV_MEMORY], getCurrentMemoryPhotoPath);
+  yield takeEvery([CHOOSE_MEMORY], getCurrentMemoryPhotoPath);
+  yield takeEvery([NEXT_MEMORY, PREV_MEMORY], calculateAdjacentMemoryId);
 }
diff --git a/ui/app/containers/InfiniteThumbs/tests/saga.test.js b/ui/app/containers/InfiniteThumbs/tests/saga.test.js
@@ -0,0 +1,36 @@
+/* global describe, expect, test */
+import { determineAdjacentInCarousel } from '../saga';
+
+/* eslint-disable default-case, no-param-reassign */
+describe('InfiniteThumbs Saga', () => {
+  describe('determineAdjacentInCarousel', () => {
+    describe('should handle the currentMemory action correctly', () => {
+      const testState = {
+        memories: [
+          { id: 1 },
+          { id: 2 },
+          { id: 3 },
+        ],
+        currentMemory: {
+          id: 2,
+        },
+      };
+
+      test('should be one after ID two', () => {
+        expect(determineAdjacentInCarousel({ adjacentInt: 1, ...testState })).toEqual(3);
+      });
+
+      test('should be one before ID two', () => {
+        expect(determineAdjacentInCarousel({ adjacentInt: -1, ...testState })).toEqual(1);
+      });
+
+      test('should be two after ID two', () => {
+        expect(determineAdjacentInCarousel({ adjacentInt: 2, ...testState })).toEqual(1);
+      });
+
+      test('should be two before ID two', () => {
+        expect(determineAdjacentInCarousel({ adjacentInt: -2, ...testState })).toEqual(3);
+      });
+    });
+  });
+});