fix race condition in isfollowing

This commit is contained in:
Fran
2026-02-14 19:17:50 -03:00
parent 3e07252c6f
commit d278c75688
4 changed files with 142 additions and 116 deletions

View File

@@ -11,7 +11,7 @@
import { seguirUsuario } from '@/hooks/seguirUsuario'; import { seguirUsuario } from '@/hooks/seguirUsuario';
import type { Post } from '../../types'; import type { Post } from '../../types';
import CardError from './CardError.svelte'; import CardError from './CardError.svelte';
import { cacheSeguidos } from '@/stores/cacheSeguidos.svelte'; import { cacheSeguidos } from '@/stores/cacheSeguidos.js';
let { let {
post, post,
@@ -41,16 +41,13 @@
}); });
async function cargarSeguido() { async function cargarSeguido() {
let a = cacheSeguidos.get(post.authorId); seguido = await cacheSeguidos.getOrFetch(
if (a === undefined) { post.authorId,
async () => {
const seguidoStatus = await esSeguido(post as Post); const seguidoStatus = await esSeguido(post as Post);
if (seguidoStatus) { return seguidoStatus?.isFollowing || false;
cacheSeguidos.set(post.authorId, seguidoStatus.isFollowing || false);
seguido = seguidoStatus.isFollowing || false;
} }
return; );
}
seguido = a;
} }
let mensajeError: string | null = $state(null); let mensajeError: string | null = $state(null);

View File

@@ -1,5 +1,5 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { cacheSeguidos } from '@/stores/cacheSeguidos.svelte'; import { cacheSeguidos } from '@/stores/cacheSeguidos';
import { apiBase } from '@/stores/url'; import { apiBase } from '@/stores/url';
import { sesionStore } from '@/stores/usuario'; import { sesionStore } from '@/stores/usuario';
import { get } from 'svelte/store'; import { get } from 'svelte/store';

View File

@@ -0,0 +1,134 @@
import { browser } from '$app/environment';
import { writable } from 'svelte/store';
class FollowCache {
constructor() {
if (browser) {
this.loadFromStorage();
}
}
/** @type {Map<string, boolean | Promise<boolean>>} */
#cache = new Map();
/** @type {import('svelte/store').Writable<Map<string, boolean>>} */
store = writable(new Map());
/** @param {string} userId */
get(userId) {
const value = this.#cache.get(userId);
return value instanceof Promise ? undefined : value;
}
/** @param {string} userId */
has(userId) {
return this.#cache.has(userId);
}
/**
* @param {string} userId
* @param {() => Promise<boolean>} fetchFn
*/
async getOrFetch(userId, fetchFn) {
const existing = this.#cache.get(userId);
if (existing !== undefined) {
if (existing instanceof Promise) {
return existing;
}
return existing;
}
const promise = fetchFn()
.then((result) => {
this.#setFinal(userId, result);
return result;
})
.catch((err) => {
this.#cache.delete(userId);
this.#updateStore();
throw err;
});
this.#cache.set(userId, promise);
this.#updateStore();
return promise;
}
/**
* @param {string} userId
* @param {boolean} isFollowed
*/
set(userId, isFollowed) {
this.#setFinal(userId, isFollowed);
}
/**
* @param {string} userId
* @param {boolean} value
*/
#setFinal(userId, value) {
this.#cache.set(userId, value);
this.#updateStore();
this.saveToStorage();
if (browser) {
window.dispatchEvent(
new CustomEvent('followCacheUpdated', {
detail: { userId, isFollowed: value }
})
);
}
}
#updateStore() {
const filtered = Array.from(this.#cache.entries())
.filter(([_, v]) => typeof v === 'boolean');
this.store.set(
/** @type {Map<string, boolean>} */
(new Map(filtered))
);
}
/** @param {string} userId */
delete(userId) {
this.#cache.delete(userId);
this.#updateStore();
this.saveToStorage();
}
clear() {
this.#cache.clear();
this.store.set(new Map());
this.saveToStorage();
}
saveToStorage() {
if (!browser) return;
const filtered = Array.from(this.#cache.entries())
.filter(([_, v]) => typeof v === 'boolean');
const data = Object.fromEntries(filtered);
sessionStorage.setItem('follow-cache', JSON.stringify(data));
}
loadFromStorage() {
if (!browser) return;
try {
const stored = sessionStorage.getItem('follow-cache');
if (!stored) return;
const data = JSON.parse(stored);
this.#cache = new Map(Object.entries(data));
this.#updateStore();
} catch (err) {
console.error('Error cargando follow-cache:', err);
}
}
}
export const cacheSeguidos = new FollowCache();

View File

@@ -1,105 +0,0 @@
import { browser } from '$app/environment';
import { writable } from 'svelte/store';
class FollowCache {
constructor() {
if (browser) {
this.loadFromStorage();
}
}
/** @type {Map<string, boolean>} */
#cache = new Map();
/** @type {import('svelte/store').Writable<Map<string, boolean>>} */
store = writable(this.#cache);
/**
* @param {string} userId
* @returns {boolean | undefined}
*/
get(userId) {
return this.#cache.get(userId);
}
/**
* @param {string} userId
* @param {boolean} isFollowed
*/
set(userId, isFollowed) {
this.#cache.set(userId, isFollowed);
this.store.set(this.#cache);
this.saveToStorage();
if (browser) {
window.dispatchEvent(
new CustomEvent('followCacheUpdated', {
detail: { userId, isFollowed }
})
);
}
}
/**
* @param {string} userId
* @returns {boolean}
*/
has(userId) {
return this.#cache.has(userId);
}
/**
* @param {string} userId
*/
delete(userId) {
this.#cache.delete(userId);
this.store.set(this.#cache);
this.saveToStorage();
if (browser) {
window.dispatchEvent(
new CustomEvent('followCacheUpdated', {
detail: { userId, isFollowed: false }
})
);
}
}
clear() {
this.#cache.clear();
this.store.set(this.#cache);
this.saveToStorage();
if (browser) {
window.dispatchEvent(
new CustomEvent('followCacheUpdated', {
detail: { clearAll: true }
})
);
}
}
saveToStorage() {
if (browser) {
const data = Object.fromEntries(this.#cache);
sessionStorage.setItem('follow-cache', JSON.stringify(data));
}
}
loadFromStorage() {
if (browser) {
try {
const stored = sessionStorage.getItem('follow-cache');
if (stored) {
const data = JSON.parse(stored);
this.#cache = new Map(Object.entries(data));
this.store.set(this.#cache);
}
} catch (error) {
console.error('Error cargando desde sesion:', error);
}
}
}
}
export const cacheSeguidos = new FollowCache();