fix:new child subscription
this fix makes sure that when the client initializes a new child that needs to subscribe for updates, it first checks whether this item already has a currrent state and uses this, so that a new child always starts in sync with the global state.
This commit is contained in:
@@ -21,7 +21,7 @@
|
|||||||
class: className = ''
|
class: className = ''
|
||||||
}: Props = $props();
|
}: Props = $props();
|
||||||
|
|
||||||
// Local state stores for this like button
|
// Local state stores for this like button - start with props but will be overridden by global state
|
||||||
const likeState = writable({
|
const likeState = writable({
|
||||||
isLiked: isLiked,
|
isLiked: isLiked,
|
||||||
likeCount: likeCount,
|
likeCount: likeCount,
|
||||||
@@ -38,7 +38,15 @@
|
|||||||
const module = await import('$lib/stores/api-sync');
|
const module = await import('$lib/stores/api-sync');
|
||||||
apiSync = module.apiSync;
|
apiSync = module.apiSync;
|
||||||
|
|
||||||
// Initialize the find's like state with props data
|
// Check if global state already exists for this find
|
||||||
|
const existingState = apiSync.getEntityState('find', findId);
|
||||||
|
|
||||||
|
if (existingState) {
|
||||||
|
// Use existing global state - it's more current than props
|
||||||
|
console.log(`Using existing global state for find ${findId}`, existingState);
|
||||||
|
} else {
|
||||||
|
// Initialize with minimal data only if no global state exists
|
||||||
|
console.log(`Initializing new minimal state for find ${findId}`);
|
||||||
apiSync.setEntityState('find', findId, {
|
apiSync.setEntityState('find', findId, {
|
||||||
id: findId,
|
id: findId,
|
||||||
isLikedByUser: isLiked,
|
isLikedByUser: isLiked,
|
||||||
@@ -53,6 +61,7 @@
|
|||||||
username: '',
|
username: '',
|
||||||
isFromFriend: false
|
isFromFriend: false
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Subscribe to global state for this find
|
// Subscribe to global state for this find
|
||||||
const globalLikeState = apiSync.subscribeFindLikes(findId);
|
const globalLikeState = apiSync.subscribeFindLikes(findId);
|
||||||
|
|||||||
@@ -158,7 +158,40 @@ class APISync {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initialize entity state with server data
|
* Check if entity state exists
|
||||||
|
*/
|
||||||
|
hasEntityState(entityType: string, entityId: string): boolean {
|
||||||
|
const store = this.getEntityStore(entityType);
|
||||||
|
let exists = false;
|
||||||
|
|
||||||
|
const unsubscribe = store.subscribe(($entities) => {
|
||||||
|
exists = $entities.has(entityId);
|
||||||
|
});
|
||||||
|
unsubscribe();
|
||||||
|
|
||||||
|
return exists;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get current entity state
|
||||||
|
*/
|
||||||
|
getEntityState<T>(entityType: string, entityId: string): T | null {
|
||||||
|
const store = this.getEntityStore(entityType);
|
||||||
|
let currentState: T | null = null;
|
||||||
|
|
||||||
|
const unsubscribe = store.subscribe(($entities) => {
|
||||||
|
const entity = $entities.get(entityId);
|
||||||
|
if (entity?.data) {
|
||||||
|
currentState = entity.data as T;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
unsubscribe();
|
||||||
|
|
||||||
|
return currentState;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize entity state with server data (only if no existing state)
|
||||||
*/
|
*/
|
||||||
setEntityState<T>(entityType: string, entityId: string, data: T, isLoading = false): void {
|
setEntityState<T>(entityType: string, entityId: string, data: T, isLoading = false): void {
|
||||||
const store = this.getEntityStore(entityType);
|
const store = this.getEntityStore(entityType);
|
||||||
@@ -175,6 +208,15 @@ class APISync {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize entity state only if it doesn't exist yet
|
||||||
|
*/
|
||||||
|
initializeEntityState<T>(entityType: string, entityId: string, data: T, isLoading = false): void {
|
||||||
|
if (!this.hasEntityState(entityType, entityId)) {
|
||||||
|
this.setEntityState(entityType, entityId, data, isLoading);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Update entity loading state
|
* Update entity loading state
|
||||||
*/
|
*/
|
||||||
@@ -426,11 +468,11 @@ class APISync {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initialize find data from server
|
* Initialize find data from server (only if no existing state)
|
||||||
*/
|
*/
|
||||||
initializeFindData(finds: FindState[]): void {
|
initializeFindData(finds: FindState[]): void {
|
||||||
for (const find of finds) {
|
for (const find of finds) {
|
||||||
this.setEntityState('find', find.id, find);
|
this.initializeEntityState('find', find.id, find);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user