observer db value changes through event fix useStateProducer to call dispose function

Author: SilvVF

app/frontend/src/components/AsyncImage.tsx

@@ -1,23 +1,24 @@
-import { useEffect, useMemo, useRef } from "react"
+import { useLayoutEffect, useRef } from "react"
 import { ReadImageFile } from "wailsjs/go/main/App"
 
 type AsyncImageProps = React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>
 
 export default function AsyncImage(props: AsyncImageProps) {
 
     const ref = useRef<HTMLImageElement>(null)
-    const url = useMemo(() => props.src?.trim() ?? "", [props.src])
 
-    useEffect(() => {
-        if (url.startsWith("file://") && ref.current) {
-            ReadImageFile(url).then((base64) => {
-                const dotIdx = url.lastIndexOf(".")
+    useLayoutEffect(() => {
+        const uri = ref?.current?.src
+        if (!uri) return
+        if (uri.startsWith("file://")) {
+            ReadImageFile(uri).then((base64) => {
+                const dotIdx = uri.lastIndexOf(".")
                 if (ref.current) {
-                    ref.current.src = `data:image/${url.slice(dotIdx, url.length)};base64,${base64}`
+                    ref.current.src = `data:image/${uri.slice(dotIdx, uri.length)};base64,${base64}`
                 }
             })
         }
-    }, [url, ref])
+    }, [props.src, ref])
 
     return <img {...props} />
 }

app/frontend/src/data/database.ts

@@ -1,27 +1,72 @@
+import { CancelFn } from "@/lib/tsutils";
+import { useEffect } from "react";
 import { CreateCustomCharacter, CreatePlaylist, DeleteCharacter, DeleteModById, DeletePlaylistById, DeleteTextureById, InsertTag, InsertTagForAllModsByCharacterIds, RenameMod, RenameTexture, SelectCharactersByGame, SelectCharacterWithModsTagsAndTextures, SelectClosestCharacter, SelectModById, SelectModsByCharacterName, SelectModsByGbId, SelectPlaylistWithModsAndTags, UpdateDisableAllModsByGame, UpdateModEnabledById, UpdateModGbId, UpdateModImages, UpdateModsEnabledFromSlice, UpdatePlaylistName, UpdateTextureEnabledById } from "wailsjs/go/dbh/DbHelper";
 import { SplitTexture } from "wailsjs/go/main/App";
+import { EventsEmit, EventsOn, LogDebug } from "wailsjs/runtime/runtime";
+
+
+type DBKey = "characters" | "mods" | "tags" | "playlist" | "all"
+
+const DBEvent = "DB_EVENT"
+type DBEventData = DBKey[]
+
+const subscribeToDbUpdates = (key: DBKey[] | DBKey, callback: () => void, runOnStart: boolean = false): CancelFn => {
+
+    if (runOnStart) {
+        callback()
+    }
+
+    return EventsOn(DBEvent, (keys: DBEventData) => {
+        LogDebug("received DBEVENT event keys=" + keys)
+        if (typeof key === 'string') {
+            if (key === "all" || keys.includes(key)) {
+                callback()
+            }
+        } else {
+            if (key.any((k) => k === "all" || keys.includes(k))) {
+                callback()
+            }
+        }
+    })
+}
+
+export const useDbUpdateListener = (key: DBKey[] | DBKey, callback: () => void) => {
+    useEffect(() => {
+        const cancel = subscribeToDbUpdates(key, callback)
+
+        return () => cancel()
+    }, [key])
+
+}
+
+const broadcastCharacterUpdate = () => EventsEmit(DBEvent, ["characters"])
+const broadcastModsUpdate = () => EventsEmit(DBEvent, ["mods"])
+const broadcastTagsUpdate = () => EventsEmit(DBEvent, ["tags"])
+const broadcastPlaylistUpdate = () => EventsEmit(DBEvent, ["playlist"])
+//const broadcastMultiUpdate = (keys: DBKey[]) => EventsEmit(DBEvent, keys)
 
 const DB = {
+    onValueChangedListener: subscribeToDbUpdates,
     deleteMod: async (id: number) => {
-        return DeleteModById(id)
+        return DeleteModById(id).then(broadcastCharacterUpdate)
     },
     enableMod: async (id: number, enabled: boolean) => {
-        return UpdateModEnabledById(enabled, id)
+        return UpdateModEnabledById(enabled, id).then(broadcastModsUpdate)
     },
     splitTexture: async (id: number) => {
-        return SplitTexture(id)
+        return SplitTexture(id).then(broadcastModsUpdate)
     },
     deleteTexture: async (id: number) => {
-        return DeleteTextureById(id)
+        return DeleteTextureById(id).then(broadcastModsUpdate)
     },
     enableTexture: async (id: number, enabled: boolean) => {
-        return UpdateTextureEnabledById(id, enabled)
+        return UpdateTextureEnabledById(id, enabled).then(broadcastModsUpdate)
     },
     disableAllMods: async (game: number) => {
-        return UpdateDisableAllModsByGame(game)
+        return UpdateDisableAllModsByGame(game).then(broadcastModsUpdate)
     },
     deleteCharacter: async (name: string, id: number, game: number) => {
-        return DeleteCharacter(name, id, game)
+        return DeleteCharacter(name, id, game).then(broadcastCharacterUpdate)
     },
     selectModById: async (id: number) => {
         return SelectModById(id)
@@ -39,25 +84,25 @@ const DB = {
         return SelectCharactersByGame(game)
     },
     updateModImages: async (id: number, images: string[]) => {
-        return UpdateModImages(id, images)
+        return UpdateModImages(id, images).then(broadcastModsUpdate)
     },
     updateModGbId: async (modId: number, gbId: number) => {
-        return UpdateModGbId(modId, gbId)
+        return UpdateModGbId(modId, gbId).then(broadcastModsUpdate)
     },
     renameMod: async (id: number, name: string) => {
-        return RenameMod(id, name)
+        return RenameMod(id, name).then(broadcastModsUpdate)
     },
     renameTexture: async (id: number, name: string) => {
-        return RenameTexture(id, name)
+        return RenameTexture(id, name).then(broadcastModsUpdate)
     },
     createCustomCharacter: async (name: string, image: string, element: string | undefined, game: number) => {
-        return CreateCustomCharacter(name, image, element ?? "", game)
+        return CreateCustomCharacter(name, image, element ?? "", game).then(broadcastCharacterUpdate)
     },
     insertTag: async (modId: number, name: string) => {
-        return InsertTag(name, modId)
+        return InsertTag(name, modId).then(broadcastTagsUpdate)
     },
     insertTagForAllModsByCharacterIds: async (characterIds: number[], tagName: string, game: number) => {
-        return InsertTagForAllModsByCharacterIds(characterIds, tagName, game)
+        return InsertTagForAllModsByCharacterIds(characterIds, tagName, game).then(broadcastTagsUpdate)
     },
     selectModsByGbId: async (gbId: number) => {
         return SelectModsByGbId(gbId)
@@ -66,16 +111,16 @@ const DB = {
         return SelectPlaylistWithModsAndTags(game)
     },
     createPlaylist: async (game: number, name: string) => {
-        return CreatePlaylist(game, name)
+        return CreatePlaylist(game, name).then(broadcastPlaylistUpdate)
     },
     enableMods: (ids: number[], game: number) => {
-        return UpdateModsEnabledFromSlice(ids, game)
+        return UpdateModsEnabledFromSlice(ids, game).then(broadcastModsUpdate)
     },
     deletePlaylistById: (id: number) => {
-        return DeletePlaylistById(id)
+        return DeletePlaylistById(id).then(broadcastPlaylistUpdate)
     },
     updatePlaylistName: (id: number, name: string) => {
-        return UpdatePlaylistName(id, name)
+        return UpdatePlaylistName(id, name).then(broadcastPlaylistUpdate)
     }
 }
 

app/frontend/src/data/sync.ts

@@ -12,14 +12,13 @@ export async function syncCharacters(dataApi: DataApi, type: SyncType) {
     SyncHelper.Sync(await dataApi.game(), type)
 }
 
-export const useSync = (dataApi: DataApi, onComplete: () => void) => {
+export const useSync = (dataApi: DataApi) => {
     const [syncing, setSyncing] = useState(false);
 
 
     const sync = (type: SyncType) => {
         setSyncing(true);
         syncCharacters(dataApi, type)
-            .then(onComplete)
             .finally(() => setSyncing(false));
     };
 

app/frontend/src/lib/utils.ts

@@ -113,7 +113,7 @@ export function useStateProducer<T extends any>(
       LogError(e);
     }
 
-    () => {
+    return () => {
       aborted = true
       disposeIfAborted()
     }

app/frontend/src/screens/GameScreen.tsx

@@ -24,7 +24,7 @@ import {
 } from "@/components/CharacterInfoCard";
 import { usePlaylistStore } from "@/state/playlistStore";
 import { SearchIcon, XIcon } from "lucide-react";
-import { EventsOn } from "wailsjs/runtime/runtime";
+import { EventsOn, LogDebug } from "wailsjs/runtime/runtime";
 import useCrossfadeNavigate from "@/hooks/useCrossfadeNavigate";
 import { useDialogStore } from "@/components/appdialog";
 import DB from "@/data/database";
@@ -45,7 +45,7 @@ const getElementPref = (game: number): GoPref<string[]> => {
   }
 };
 
-const useMultiSelectState = (cwmt: types.CharacterWithModsAndTags[], refreshCharacters: () => void) => {
+const useMultiSelectState = (cwmt: types.CharacterWithModsAndTags[]) => {
 
   const [multiSelect, setMultiSelect] = useState(false)
   const [selectedCardsUnfiltered, setSelectedCards] = useState<number[] | undefined>(undefined)
@@ -64,7 +64,7 @@ const useMultiSelectState = (cwmt: types.CharacterWithModsAndTags[], refreshChar
         c.characters.game
       )
       )
-    ).finally(refreshCharacters)
+    )
   }
 
   const multiSelectedCharacters = useMemo(() => {
@@ -175,14 +175,13 @@ interface FilterState {
 }
 
 function GameScreen(props: { dataApi: DataApi; game: number }) {
+
   const navigate = useCrossfadeNavigate();
-  const [refreshTrigger, setRefreshTrigger] = useState(0);
   const updates = usePlaylistStore(useShallow((state) => state.updates));
 
   const setDialog = useDialogStore(useShallow(s => s.setDialog))
 
   const running = useDownloadStore(useShallow((state) => state.running));
-  const refreshCharacters = () => setRefreshTrigger((prev) => prev + 1);
 
   const elements = useStateProducer<string[]>(
     [],
@@ -195,18 +194,23 @@ function GameScreen(props: { dataApi: DataApi; game: number }) {
   const characters = useStateProducer<types.CharacterWithModsAndTags[]>(
     [],
     async (update, onDispose) => {
-
-      update(await props.dataApi.charactersWithModsAndTags());
+      const unsubscribe = DB.onValueChangedListener(['characters', 'mods', 'tags'], () => {
+        props.dataApi.charactersWithModsAndTags().then(update)
+      }, true)
 
       const cancel = EventsOn("sync", ({ game }) => {
         if (game === props.game) {
           props.dataApi.charactersWithModsAndTags().then(update)
         }
       })
 
-      onDispose(() => cancel())
+      onDispose(() => {
+        LogDebug("disposing character state producer")
+        cancel()
+        unsubscribe()
+      })
     },
-    [props.dataApi, running, updates, refreshTrigger]
+    [props.dataApi, running, updates]
   );
 
   const filterState = useFilterState(characters, props.game)
@@ -219,28 +223,28 @@ function GameScreen(props: { dataApi: DataApi; game: number }) {
     mutliSelectedIds,
     deleteCharacters,
     clearMultiSelected
-  } = useMultiSelectState(characters, refreshCharacters)
+  } = useMultiSelectState(characters)
 
   const handleUnselectAll = () => {
-    DB.disableAllMods(props.game).then(refreshCharacters)
+    DB.disableAllMods(props.game)
   }
 
   const handleEnableMod = (id: number, enabled: boolean) => {
-    DB.enableMod(id, enabled).then(refreshCharacters)
+    DB.enableMod(id, enabled)
   }
 
   const handleDeleteMod = (id: number) => {
-    DB.deleteMod(id).then(refreshCharacters)
+    DB.deleteMod(id)
   }
 
   const handleEnableTexture = (id: number, enabled: boolean) => {
-    DB.enableTexture(id, enabled).then(refreshCharacters)
+    DB.enableTexture(id, enabled)
   }
   const handleDeleteTexture = (id: number) => {
-    DB.deleteTexture(id).then(refreshCharacters)
+    DB.deleteTexture(id)
   }
   const handleSplitTexture = (id: number) => {
-    DB.splitTexture(id).then(refreshCharacters)
+    DB.splitTexture(id)
   }
 
   return (
@@ -251,7 +255,7 @@ function GameScreen(props: { dataApi: DataApi; game: number }) {
             addTag={() => setDialog({
               type: "add_tag_multi",
               selectedChars: multiSelectedCharacters.map((it) => it.characters),
-              refresh: refreshCharacters,
+              refresh: () => { },
               game: props.game
             })}
             clearMultiSelected={clearMultiSelected}
@@ -263,7 +267,7 @@ function GameScreen(props: { dataApi: DataApi; game: number }) {
           <GameActionsTopBar
             unselectAll={handleUnselectAll}
             elements={elements}
-            addCharacter={() => setDialog({ type: "add_character", game: props.game, elements: elements, refresh: refreshCharacters })}
+            addCharacter={() => setDialog({ type: "add_character", game: props.game, elements: elements, refresh: () => { } })}
             importMod={() => navigate("/import", {
               state: { game: props.game }
             })}
@@ -273,7 +277,6 @@ function GameScreen(props: { dataApi: DataApi; game: number }) {
       </div>
       <FloatingActionButtons
         dataApi={props.dataApi}
-        refreshCharacters={refreshCharacters}
       />
       <div className="columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4 mb-16 mx-2">
         {filterState.filteredCharacters.map((c) => (
@@ -288,10 +291,10 @@ function GameScreen(props: { dataApi: DataApi; game: number }) {
               cmt={c}
               modDropdownMenu={(mwt) => (
                 <ModActionsDropDown
-                  addTag={() => setDialog({ type: "add_tag", mod: mwt.mod, refresh: refreshCharacters })}
+                  addTag={() => setDialog({ type: "add_tag", mod: mwt.mod, refresh: () => { } })}
                   onEnable={() => handleEnableMod(mwt.mod.id, !mwt.mod.enabled)}
                   onDelete={() => handleDeleteMod(mwt.mod.id)}
-                  onRename={() => setDialog({ type: "rename_mod", id: mwt.mod.id, refresh: refreshCharacters })}
+                  onRename={() => setDialog({ type: "rename_mod", id: mwt.mod.id, refresh: () => { } })}
                   onView={() => {
                     if (mwt.mod.gbId !== 0) {
                       navigate(`/mods/${mwt.mod.gbId}`);
@@ -305,7 +308,7 @@ function GameScreen(props: { dataApi: DataApi; game: number }) {
                   onEnable={() => handleEnableTexture(t.id, !t.enabled)}
                   onDelete={() => handleDeleteTexture(t.id)}
                   onSplit={() => handleSplitTexture(t.id)}
-                  onRename={() => setDialog({ type: "rename_texture", id: t.id, refresh: refreshCharacters })}
+                  onRename={() => setDialog({ type: "rename_texture", id: t.id, refresh: () => { } })}
                   onView={() => {
                     if (t.gbId !== 0) {
                       navigate(`/mods/${t.gbId}`);
@@ -395,11 +398,9 @@ function MultiSelectTopBar(
 }
 
 function FloatingActionButtons({
-  dataApi,
-  refreshCharacters,
+  dataApi
 }: {
-  dataApi: DataApi;
-  refreshCharacters: () => void;
+  dataApi: DataApi
 }) {
 
   const {
@@ -410,7 +411,7 @@ function FloatingActionButtons({
   const {
     syncing,
     sync,
-  } = useSync(dataApi, refreshCharacters)
+  } = useSync(dataApi)
 
   return (
     <div className="fixed bottom-4 -translate-y-1 end-6 flex flex-row z-10">