feature: add collections section - query optimization

src/main/entity/game.entity.ts

@@ -6,14 +6,12 @@ import {
   UpdateDateColumn,
   OneToOne,
   JoinColumn,
-  ManyToMany,
 } from "typeorm";
 import { Repack } from "./repack.entity";
 
 import type { GameShop, GameStatus } from "@types";
 import { Downloader } from "@shared";
 import type { DownloadQueue } from "./download-queue.entity";
-import { Collection } from "./collection.entity";
 
 @Entity("game")
 export class Game {
@@ -81,9 +79,6 @@ export class Game {
   @OneToOne("DownloadQueue", "game")
   downloadQueue: DownloadQueue;
 
-  @ManyToMany("Collection", "games")
-  collections: Collection[];
-
   @Column("boolean", { default: false })
   isDeleted: boolean;
 

src/main/events/collections/get-collections.ts

@@ -4,9 +4,11 @@ import { registerEvent } from "../register-event";
 const getCollections = async () =>
   collectionRepository.find({
     relations: {
+      games: true,
+    },
+    select: {
       games: {
-        downloadQueue: true,
-        repack: true,
+        id: true,
       },
     },
     order: {

src/main/events/library/get-library.ts

@@ -8,7 +8,6 @@ const getLibrary = async () =>
     },
     relations: {
       downloadQueue: true,
-      collections: true,
     },
     order: {
       createdAt: "desc",

src/renderer/src/components/sidebar/sidebar.tsx

@@ -49,11 +49,8 @@ export function Sidebar() {
 
   useEffect(() => {
     updateLibrary();
-  }, [lastPacket?.game.id, updateLibrary]);
-
-  useEffect(() => {
     updateCollections();
-  });
+  }, [lastPacket?.game.id, updateLibrary, updateCollections]);
 
   const isDownloading = sortedLibrary.some(
     (game) => game.status === "active" && game.progress !== 1
@@ -85,9 +82,16 @@ export function Sidebar() {
 
   useEffect(() => {
     setFilteredLibrary(
-      sortedLibrary.filter((game) => !game.collections.length)
+      sortedLibrary.filter(
+        (game) =>
+          !collections.some((collection) =>
+            collection.games.some(
+              (collectionGame) => collectionGame.id == game.id
+            )
+          )
+      )
     );
-  }, [sortedLibrary]);
+  }, [sortedLibrary, collections]);
 
   useEffect(() => {
     window.onmousemove = (event: MouseEvent) => {
@@ -216,7 +220,13 @@ export function Sidebar() {
                   </small>
 
                   <ul className={styles.menu}>
-                    {collection.games.map((game) => (
+                    {sortedLibrary
+                      .filter((game) =>
+                        collection.games.some(
+                          (collectionGame) => game.id == collectionGame.id
+                        )
+                      )
+                      .map((game) => (
                         <li
                           key={game.id}
                           className={styles.menuItem({

src/types/index.ts

@@ -128,7 +128,6 @@ export interface Game {
   objectID: string;
   shop: GameShop;
   downloadQueue: DownloadQueue | null;
-  collections: Collection[];
   createdAt: Date;
   updatedAt: Date;
 }