feat: separate screensots endpoint

fix: react query keys

app.go

@@ -25,57 +25,68 @@ func (a *App) startup(ctx context.Context) {
 	a.ctx = ctx
 }
 
-func WrapError(err error) SteamLibraryMeta {
+func SteamLibraryMetaError(err error) SteamLibraryMeta {
 	return SteamLibraryMeta{Error: err.Error()}
 }
 
 type SteamLibraryMeta struct {
-	Error           string               `json:"error,omitempty"`
-	SteamDir        string               `json:"steamDir"`
-	UserDir         string               `json:"userDir"`
-	GameDirs        []string             `json:"gameDirs"`
-	ScreenshotsDirs []dirs.ScreenshotDir `json:"screenshotsDirs"`
-	SyncDir         string               `json:"syncDir"`
+	Error    string   `json:"error,omitempty"`
+	SteamDir string   `json:"steamDir"`
+	UserDir  string   `json:"userDir"`
+	GameDirs []string `json:"gameDirs"`
+	SyncDir  string   `json:"syncDir"`
 }
 
 func (a *App) GetSteamLibraryMeta() SteamLibraryMeta {
 	p, err := dirs.GetSteamDirectory()
 	if err != nil {
-		return WrapError(err)
+		return SteamLibraryMetaError(err)
 	}
 	userDir, err := dirs.GetSteamUserDirectory()
 	if err != nil {
-		return WrapError(err)
+		return SteamLibraryMetaError(err)
 	}
 	// fmt.Printf("User Dir: %s\n", userDir)
 	userId := filepath.Base(userDir)
 	gd, err := dirs.GetGameDirectories(userId)
 	if err != nil {
-		return WrapError(err)
+		return SteamLibraryMetaError(err)
 	}
 	syncDir, err := dirs.GetSyncDirectory()
 	if err != nil {
-		return WrapError(err)
-	}
-	screenshotsDirPaths, err := dirs.GetScreenshotsDirs()
-	if err != nil {
-		return WrapError(err)
-	}
-	screenshotsDirs := []dirs.ScreenshotDir{}
-	for _, path := range screenshotsDirPaths {
-		screenshotsDirs = append(screenshotsDirs, dirs.NewScreenshotDirFromPath(path))
+		return SteamLibraryMetaError(err)
 	}
 	out := SteamLibraryMeta{
-		SteamDir:        p,
-		GameDirs:        gd,
-		UserDir:         userDir,
-		SyncDir:         syncDir,
-		ScreenshotsDirs: screenshotsDirs,
+		SteamDir: p,
+		GameDirs: gd,
+		UserDir:  userDir,
+		SyncDir:  syncDir,
 	}
 
 	return out
 }
 
+type ScreenshotsDirs struct {
+	Error           string                `json:"error,omitempty"`
+	ScreenshotsDirs []dirs.ScreenshotsDir `json:"screenshotsDirs"`
+}
+
+func ScreenshotsDirsError(err error) ScreenshotsDirs {
+	return ScreenshotsDirs{Error: err.Error()}
+}
+
+func (a *App) GetScreenshots() ScreenshotsDirs {
+	screenshotsDirPaths, err := dirs.GetScreenshotsDirs()
+	if err != nil {
+		return ScreenshotsDirsError(err)
+	}
+	screenshotsDirs := []dirs.ScreenshotsDir{}
+	for _, path := range screenshotsDirPaths {
+		screenshotsDirs = append(screenshotsDirs, dirs.NewScreenshotsDirFromPath(path))
+	}
+	return ScreenshotsDirs{ScreenshotsDirs: screenshotsDirs}
+}
+
 func (a *App) OnWindowResize() {
 	config := GetConfig()
 

dirs/screenshots.go

@@ -9,20 +9,20 @@ import (
 )
 
 // screenshots: /Users/chen/Library/Application\ Support/Steam/userdata/USER_ID/760/remote/GAME_ID/screenshots
-type ScreenshotDir struct {
+type ScreenshotsDir struct {
 	Dir         string   `json:"dir"`
 	UserId      string   `json:"userId"`
 	GameId      string   `json:"gameId"`
 	Screenshots []string `json:"screenshots"`
 }
 
-func NewScreenshotDirFromPath(path string) ScreenshotDir {
+func NewScreenshotsDirFromPath(path string) ScreenshotsDir {
 	dir, err := os.Open(path)
 	if err != nil {
 		panic(err)
 	}
 	defer dir.Close()
-	s := ScreenshotDir{}
+	s := ScreenshotsDir{}
 	s.Dir = path
 	s.GameId = filepath.Base(GetDir(path, 1))
 	s.UserId = filepath.Base(GetDir(path, 4))

frontend/src/App.tsx

@@ -33,7 +33,7 @@ function App() {
 }
 
 function AppContextProvider({ children }: React.PropsWithChildren<object>) {
-  const { data: meta, isFetching } = useApi(() => GetSteamLibraryMeta(), {
+  const { data: meta, isFetching } = useApi(GetSteamLibraryMeta, ['meta'], {
     initialData: {} as never,
     debug: true,
   })

frontend/src/common/api.ts

@@ -1,4 +1,4 @@
-import { useQuery, UseQueryOptions, UseQueryResult } from '@tanstack/react-query'
+import { QueryKey, useQuery, UseQueryOptions, UseQueryResult } from '@tanstack/react-query'
 
 type FullfilledUseQueryResult<TData = unknown, TError = Error> = Omit<
   UseQueryResult<TData, TError>,
@@ -7,14 +7,14 @@ type FullfilledUseQueryResult<TData = unknown, TError = Error> = Omit<
   data: Exclude<TData, undefined>
 }
 
-type WrappedUseQueryOptions<TData, TError, TQueryFnData> = UseQueryOptions<
-  TQueryFnData,
-  TError,
-  TData
+type WrappedUseQueryOptions<TData, TError, TQueryFnData> = Omit<
+  UseQueryOptions<TQueryFnData, TError, TData>,
+  'queryKey'
 > & { debug?: boolean }
 
 export function useApi<T>(
   promise: () => Promise<T>,
+  queryKey: QueryKey,
   options: Partial<WrappedUseQueryOptions<T, Error, T>> = {},
 ): FullfilledUseQueryResult<T, Error> {
   const query = useQuery({
@@ -24,7 +24,7 @@ export function useApi<T>(
       if (options.debug) console.debug('useApi response:', json)
       return await (isError(json) ? Promise.reject(json.error) : Promise.resolve(json))
     },
-    queryKey: [],
+    queryKey,
     ...options,
   })
   return query as FullfilledUseQueryResult<T, Error>

frontend/src/pages/Screenshots/ScreenshotsPage.tsx

@@ -1,24 +1,40 @@
+import { GetScreenshots } from '../../../wailsjs/go/main/App'
+import { useApi } from '../../common/api'
 import { useAppContext } from '../../common/app_context'
 import { cn } from '../../common/utils'
 
+function useScreenshotsDirs() {
+  const { data: screenshots, ...rest } = useApi(GetScreenshots, ['screenshots'], {
+    debug: true,
+    initialData: {} as never,
+  })
+  return {
+    screenshots: screenshots ?? {},
+    ...rest,
+  }
+}
+
 export function ScreenshotsPage() {
   const { meta } = useAppContext()
+  const { screenshots, isFetching } = useScreenshotsDirs()
   console.debug('ScreenshotsPage', meta)
   return (
     <div className={cn('p-4')}>
       <h1 className="text-2xl">Screenshots</h1>
 
       <div>
-        {meta.screenshotsDirs.map((dir) => (
-          <div key={dir.dir}>
-            <h2>{dir.gameId}</h2>
-            <div className="flex items-start gap-4 flex-wrap max-w-full">
-              {dir.screenshots.map((file) => (
-                <img className="max-w-64 rounded-md" key={file} src={file} alt={file} />
-              ))}
+        {isFetching
+          ? 'Loading...'
+          : screenshots.screenshotsDirs.map((dir) => (
+            <div key={dir.dir}>
+              <h2>{dir.gameId}</h2>
+              <div className="flex items-start gap-4 flex-wrap max-w-full">
+                {dir.screenshots.map((file) => (
+                  <img className="max-w-64 rounded-md" key={file} src={file} alt={file} />
+                ))}
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
       </div>
 
       <details>

frontend/vite.config.ts

@@ -4,4 +4,10 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    hmr: {
+      host: 'localhost',
+      protocol: 'ws',
+    },
+  },
 })

frontend/wailsjs/go/main/App.d.ts

@@ -2,6 +2,8 @@
 // This file is automatically generated. DO NOT EDIT
 import {main} from '../models';
 
+export function GetScreenshots():Promise<main.ScreenshotsDirs>;
+
 export function GetSteamLibraryMeta():Promise<main.SteamLibraryMeta>;
 
 export function OnWindowResize():Promise<void>;

frontend/wailsjs/go/main/App.js

@@ -2,6 +2,10 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
+export function GetScreenshots() {
+  return window['go']['main']['App']['GetScreenshots']();
+}
+
 export function GetSteamLibraryMeta() {
   return window['go']['main']['App']['GetSteamLibraryMeta']();
 }

frontend/wailsjs/go/models.ts

@@ -1,13 +1,13 @@
 export namespace dirs {
 	
-	export class ScreenshotDir {
+	export class ScreenshotsDir {
 	    dir: string;
 	    userId: string;
 	    gameId: string;
 	    screenshots: string[];
 	
 	    static createFrom(source: any = {}) {
-	        return new ScreenshotDir(source);
+	        return new ScreenshotsDir(source);
 	    }
 	
 	    constructor(source: any = {}) {
@@ -23,26 +23,18 @@ export namespace dirs {
 
 export namespace main {
 	
-	export class SteamLibraryMeta {
+	export class ScreenshotsDirs {
 	    error?: string;
-	    steamDir: string;
-	    userDir: string;
-	    gameDirs: string[];
-	    screenshotsDirs: dirs.ScreenshotDir[];
-	    syncDir: string;
+	    screenshotsDirs: dirs.ScreenshotsDir[];
 	
 	    static createFrom(source: any = {}) {
-	        return new SteamLibraryMeta(source);
+	        return new ScreenshotsDirs(source);
 	    }
 	
 	    constructor(source: any = {}) {
 	        if ('string' === typeof source) source = JSON.parse(source);
 	        this.error = source["error"];
-	        this.steamDir = source["steamDir"];
-	        this.userDir = source["userDir"];
-	        this.gameDirs = source["gameDirs"];
-	        this.screenshotsDirs = this.convertValues(source["screenshotsDirs"], dirs.ScreenshotDir);
-	        this.syncDir = source["syncDir"];
+	        this.screenshotsDirs = this.convertValues(source["screenshotsDirs"], dirs.ScreenshotsDir);
 	    }
 	
 		convertValues(a: any, classs: any, asMap: boolean = false): any {
@@ -63,6 +55,26 @@ export namespace main {
 		    return a;
 		}
 	}
+	export class SteamLibraryMeta {
+	    error?: string;
+	    steamDir: string;
+	    userDir: string;
+	    gameDirs: string[];
+	    syncDir: string;
+	
+	    static createFrom(source: any = {}) {
+	        return new SteamLibraryMeta(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.error = source["error"];
+	        this.steamDir = source["steamDir"];
+	        this.userDir = source["userDir"];
+	        this.gameDirs = source["gameDirs"];
+	        this.syncDir = source["syncDir"];
+	    }
+	}
 
 }