diff --git a/frontend/src/stores/roms.js b/frontend/src/stores/roms.js index 9ee189450..48df6d1b5 100644 --- a/frontend/src/stores/roms.js +++ b/frontend/src/stores/roms.js @@ -1,3 +1,4 @@ +import { uniqBy } from "lodash"; import { defineStore } from "pinia"; export default defineStore("roms", { @@ -23,20 +24,27 @@ export default defineStore("roms", { }, actions: { + _reorder() { + // Sort roms by name and remove duplicates + this._all = uniqBy( + this._all.sort((a, b) => + a.file_name_no_tags.localeCompare(b.file_name_no_tags) + ), + "id" + ); + }, // All roms set(roms) { this._all = roms; + this._reorder(); }, add(roms) { this._all = this._all.concat(roms); + this._reorder(); }, update(rom) { - this._all = this._all.map((value) => { - if (value.id === rom.id) { - return rom; - } - return value; - }); + this._all = this._all.map((value) => (value.id === rom.id ? rom : value)); + this._reorder(); }, remove(roms) { this._all = this._all.filter((value) => { diff --git a/frontend/src/views/Gallery/Base.vue b/frontend/src/views/Gallery/Base.vue index 489cc0673..53427ec1a 100644 --- a/frontend/src/views/Gallery/Base.vue +++ b/frontend/src/views/Gallery/Base.vue @@ -64,14 +64,19 @@ async function fetchRoms(platform) { searchTerm: normalizeString(galleryFilter.filter), }) .then((response) => { + // Add any new roms to the store + const allRomsSet = [...allRoms.value, ...response.data.items]; + romsStore.set(allRomsSet); + romsStore.setFiltered(allRomsSet); + if (isFiltered) { searchCursor.value = response.data.next_page; - romsStore.setSearch([...searchRoms.value, ...response.data.items]); - romsStore.setFiltered(searchRoms.value); + + const serchedRomsSet = [...searchRoms.value, ...response.data.items]; + romsStore.setSearch(serchedRomsSet); + romsStore.setFiltered(serchedRomsSet); } else { cursor.value = response.data.next_page; - romsStore.set([...allRoms.value, ...response.data.items]); - romsStore.setFiltered(allRoms.value); } }) .catch((error) => {