cleanup setFiltered in rom store

frontend/src/App.vue

@@ -25,7 +25,6 @@ const isFiltered = normalizeString(galleryFilter.filterSearch).trim() != "";
 const emitter = inject<Emitter<Events>>("emitter");
 
 // Props
-const authStore = storeAuth();
 const heartbeatStore = storeHeartbeat();
 const configStore = storeConfig();
 
@@ -36,25 +35,10 @@ socket.on("scan:scanning_platform", ({ name, slug, id }) => {
 socket.on("scan:scanning_rom", ({ platform_name, platform_slug, ...rom }) => {
   if (romsStore.platform.name === platform_name) {
     romsStore.add([rom]);
-    if (isFiltered) {
-      romsStore.setFiltered(
-        romsStore.filteredRoms,
-        galleryFilter.filterUnmatched,
-        galleryFilter.selectedGenre,
-        galleryFilter.selectedFranchise,
-        galleryFilter.selectedCollection,
-        galleryFilter.selectedCompany
-      );
-    } else {
-      romsStore.setFiltered(
-        romsStore.allRoms,
-        galleryFilter.filterUnmatched,
-        galleryFilter.selectedGenre,
-        galleryFilter.selectedFranchise,
-        galleryFilter.selectedCollection,
-        galleryFilter.selectedCompany
-      );
-    }
+    romsStore.setFiltered(
+      isFiltered ? romsStore.filteredRoms : romsStore.allRoms,
+      galleryFilter
+    );
   }
 
   let scannedPlatform = scanningPlatforms.value.find(

frontend/src/stores/roms.ts

@@ -1,7 +1,11 @@
 import type { PlatformSchema, RomSchema } from "@/__generated__/";
 import { groupBy, isNull, uniqBy } from "lodash";
 import { nanoid } from "nanoid";
-import { defineStore } from "pinia";
+import { defineStore, type Store } from "pinia";
+import storeGalleryFilter from "./galleryFilter";
+import type { ExtractPiniaStoreType } from "@/types";
+
+type GalleryFilterStore = ExtractPiniaStoreType<typeof storeGalleryFilter>;
 
 export type Rom = RomSchema & {
   siblings?: RomSchema[]; // Added by the frontend
@@ -107,30 +111,21 @@ export default defineStore("roms", {
       this._selectedIDs = [];
       this.lastSelectedIndex = -1;
     },
-    // Filtered roms
-    setFiltered(
-      roms: Rom[],
-      filterUnmatched: boolean,
-      filterGenre: string | null = null,
-      filterFranchise: string | null = null,
-      filterCollection: string | null = null,
-      filterCompany: string | null = null
-    ) {
+    // Filter roms by gallery filter store state
+    setFiltered(roms: Rom[], galleryFilter: GalleryFilterStore) {
       this._filteredIDs = roms.map((rom) => rom.id);
-      if (filterUnmatched) {
-        this.filterUnmatched();
+      if (galleryFilter.filterUnmatched) this.filterUnmatched();
+      if (galleryFilter.selectedGenre) {
+        this.filterGenre(galleryFilter.selectedGenre);
       }
-      if (filterGenre) {
-        this.filterGenre(filterGenre);
+      if (galleryFilter.selectedFranchise) {
+        this.filterFranchise(galleryFilter.selectedFranchise);
       }
-      if (filterFranchise) {
-        this.filterFranchise(filterFranchise);
+      if (galleryFilter.selectedCollection) {
+        this.filterCollection(galleryFilter.selectedCollection);
       }
-      if (filterCollection) {
-        this.filterCollection(filterCollection);
-      }
-      if (filterCompany) {
-        this.filterCompany(filterCompany);
+      if (galleryFilter.selectedCollection) {
+        this.filterCompany(galleryFilter.selectedCollection);
       }
     },
     filterUnmatched() {
@@ -140,17 +135,13 @@ export default defineStore("roms", {
     },
     filterGenre(genreToFilter: string) {
       this._filteredIDs = this.filteredRoms
-        .filter((rom) =>
-          rom.genres.some((genre) => genre === genreToFilter)
-        )
+        .filter((rom) => rom.genres.some((genre) => genre === genreToFilter))
         .map((rom) => rom.id);
     },
     filterFranchise(franchiseToFilter: string) {
       this._filteredIDs = this.filteredRoms
         .filter((rom) =>
-          rom.franchises.some(
-            (franchise) => franchise === franchiseToFilter
-          )
+          rom.franchises.some((franchise) => franchise === franchiseToFilter)
         )
         .map((rom) => rom.id);
     },
@@ -166,9 +157,7 @@ export default defineStore("roms", {
     filterCompany(companyToFilter: string) {
       this._filteredIDs = this.filteredRoms
         .filter((rom) =>
-          rom.companies.some(
-            (company) => company === companyToFilter
-          )
+          rom.companies.some((company) => company === companyToFilter)
         )
         .map((rom) => rom.id);
     },

frontend/src/types/index.ts

@@ -1,3 +1,13 @@
-export function isKeyof<T extends object>(key: PropertyKey, obj: T): key is keyof T {
-    return key in obj;
+export function isKeyof<T extends object>(
+  key: PropertyKey,
+  obj: T
+): key is keyof T {
+  return key in obj;
 }
+
+export type ExtractPiniaStoreType<D> = D extends (
+  pinia?: any,
+  hot?: any
+) => infer R
+  ? R
+  : never;

frontend/src/views/Gallery/Base.vue

@@ -74,28 +74,14 @@ async function fetchRoms() {
       // Add any new roms to the store
       const allRomsSet = [...allRoms.value, ...data.items];
       romsStore.set(allRomsSet);
-      romsStore.setFiltered(
-        allRomsSet,
-        galleryFilterStore.filterUnmatched,
-        galleryFilterStore.selectedGenre,
-        galleryFilterStore.selectedFranchise,
-        galleryFilterStore.selectedCollection,
-        galleryFilterStore.selectedCompany
-      );
+      romsStore.setFiltered(allRomsSet, galleryFilterStore);
 
       if (galleryFilterStore.isFiltered()) {
         if (data.next_page !== undefined) searchCursor.value = data.next_page;
 
         const serchedRomsSet = [...searchRoms.value, ...data.items];
         romsStore.setSearch(serchedRomsSet);
-        romsStore.setFiltered(
-          serchedRomsSet,
-          galleryFilterStore.filterUnmatched,
-          galleryFilterStore.selectedGenre,
-          galleryFilterStore.selectedFranchise,
-          galleryFilterStore.selectedCollection,
-          galleryFilterStore.selectedCompany
-        );
+        romsStore.setFiltered(serchedRomsSet, galleryFilterStore);
       } else if (data.next_page !== undefined) {
         cursor.value = data.next_page;
       }
@@ -122,14 +108,7 @@ async function onFilterChange() {
   searchCursor.value = "";
   romsStore.setSearch([]);
   if (!galleryFilterStore.isFiltered()) {
-    romsStore.setFiltered(
-      allRoms.value,
-      galleryFilterStore.filterUnmatched,
-      galleryFilterStore.selectedGenre,
-      galleryFilterStore.selectedFranchise,
-      galleryFilterStore.selectedCollection,
-      galleryFilterStore.selectedCompany
-    );
+    romsStore.setFiltered(allRoms.value, galleryFilterStore);
     return;
   }
   await fetchRoms();