From 1a0a3aa2c1d749cbf8597ccf850e659de8c16510 Mon Sep 17 00:00:00 2001
From: Thomas <9749173+uhthomas@users.noreply.github.com>
Date: Mon, 3 Jul 2023 03:02:38 +0100
Subject: [PATCH] fix(web): use natural asset order for navigation (#3092)

---
 web/src/lib/stores/asset-interaction.store.ts | 40 +++++++------------
 1 file changed, 14 insertions(+), 26 deletions(-)

diff --git a/web/src/lib/stores/asset-interaction.store.ts b/web/src/lib/stores/asset-interaction.store.ts
index a49f7f4bc2..cff05b2b57 100644
--- a/web/src/lib/stores/asset-interaction.store.ts
+++ b/web/src/lib/stores/asset-interaction.store.ts
@@ -1,6 +1,5 @@
 import { AssetGridState, BucketPosition } from '$lib/models/asset-grid-state';
 import { api, AssetResponseDto } from '@api';
-import { sortBy } from 'lodash-es';
 import { derived, writable } from 'svelte/store';
 import { assetGridState, assetStore } from './assets.store';
 
@@ -20,8 +19,6 @@ function createAssetInteractionStore() {
   let _selectedAssets: Set<AssetResponseDto>;
   let _selectedGroup: Set<string>;
   let _assetsInAlbums: AssetResponseDto[];
-  let savedAssetLength = 0;
-  let assetSortedByDate: AssetResponseDto[] = [];
 
   // Subscriber
   assetGridState.subscribe((state) => {
@@ -64,40 +61,31 @@ function createAssetInteractionStore() {
   };
 
   const navigateAsset = async (direction: 'next' | 'previous') => {
-    // Flatten and sort the asset by date if there are new assets
-    if (assetSortedByDate.length === 0 || savedAssetLength !== _assetGridState.assets.length) {
-      assetSortedByDate = sortBy(_assetGridState.assets, (a) => a.fileCreatedAt);
-      savedAssetLength = _assetGridState.assets.length;
-    }
+    let index = _assetGridState.assets.findIndex(({ id }) => id === _viewingAssetStoreState.id);
 
-    // Find the index of the current asset
-    const currentIndex = assetSortedByDate.findIndex((a) => a.id === _viewingAssetStoreState.id);
+    index = direction === 'next' ? index + 1 : index - 1;
 
-    // Get the next or previous asset
-    const nextIndex = direction === 'previous' ? currentIndex + 1 : currentIndex - 1;
-
-    // Run out of asset, this might be because there is no asset in the next bucket.
-    if (nextIndex == -1) {
-      let nextBucket = '';
-      // Find next bucket that doesn't have all assets loaded
+    const needMoreAbove = index < 0;
+    const needMoreBelow = index >= _assetGridState.assets.length;
 
+    // Try to load more assets if we're at the end.
+    if (needMoreAbove || needMoreBelow) {
       for (const bucket of _assetGridState.buckets) {
         if (bucket.assets.length === 0) {
-          nextBucket = bucket.bucketDate;
+          await assetStore.getAssetsByBucket(
+            bucket.bucketDate,
+            needMoreAbove ? BucketPosition.Above : BucketPosition.Below,
+          );
+          navigateAsset(direction);
           break;
         }
       }
-
-      if (nextBucket !== '') {
-        await assetStore.getAssetsByBucket(nextBucket, BucketPosition.Below);
-        navigateAsset(direction);
-      }
       return;
     }
 
-    const nextAsset = assetSortedByDate[nextIndex];
-    if (nextAsset) {
-      setViewingAsset(nextAsset);
+    const asset = _assetGridState.assets[index];
+    if (asset) {
+      setViewingAsset(asset);
     }
   };