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,39 +220,45 @@ export function Sidebar() {
                   </small>
 
                   <ul className={styles.menu}>
-                    {collection.games.map((game) => (
-                      <li
-                        key={game.id}
-                        className={styles.menuItem({
-                          active:
-                            location.pathname ===
-                            `/game/${game.shop}/${game.objectID}`,
-                          muted: game.status === "removed",
-                        })}
-                      >
-                        <button
-                          type="button"
-                          className={styles.menuItemButton}
-                          onClick={(event) =>
-                            handleSidebarGameClick(event, game)
-                          }
+                    {sortedLibrary
+                      .filter((game) =>
+                        collection.games.some(
+                          (collectionGame) => game.id == collectionGame.id
+                        )
+                      )
+                      .map((game) => (
+                        <li
+                          key={game.id}
+                          className={styles.menuItem({
+                            active:
+                              location.pathname ===
+                              `/game/${game.shop}/${game.objectID}`,
+                            muted: game.status === "removed",
+                          })}
                         >
-                          {game.iconUrl ? (
-                            <img
-                              className={styles.gameIcon}
-                              src={game.iconUrl}
-                              alt={game.title}
-                            />
-                          ) : (
-                            <SteamLogo className={styles.gameIcon} />
-                          )}
+                          <button
+                            type="button"
+                            className={styles.menuItemButton}
+                            onClick={(event) =>
+                              handleSidebarGameClick(event, game)
+                            }
+                          >
+                            {game.iconUrl ? (
+                              <img
+                                className={styles.gameIcon}
+                                src={game.iconUrl}
+                                alt={game.title}
+                              />
+                            ) : (
+                              <SteamLogo className={styles.gameIcon} />
+                            )}
 
-                          <span className={styles.menuItemButtonLabel}>
-                            {getGameTitle(game)}
-                          </span>
-                        </button>
-                      </li>
-                    ))}
+                            <span className={styles.menuItemButtonLabel}>
+                              {getGameTitle(game)}
+                            </span>
+                          </button>
+                        </li>
+                      ))}
                   </ul>
                 </section>
               ) : null

src/types/index.ts

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