Recientemente se añadió Ember.PromiseProxyMixin a los módulos de Ember en el núcleo de Discourse.
Es un mixin de Ember muy útil que te permite realizar solicitudes asíncronas y trabajar fácilmente con Promesas dentro de los componentes de Ember. Piensa en ello como React Suspense pero para Ember. El potencial es enorme para el desarrollo de temas y plugins en Discourse.
Aquí está la documentación oficial de Ember para Ember.PromiseProxyMixin.
Daré un ejemplo simple de cómo se puede usar este mixin dentro de un tema de Discourse. Digamos que, por alguna razón, en el componente topic-list-item quieres estilizar el avatar del poster si este es un miembro del personal; el avatar debe tener un borde diferente.
En algún lugar de topic-list-item.js(.es6) tendrás que:
- Importar
EmberObjectyPromiseProxyMixiny extenderEmberObjectconPromiseProxyMixin.
import EmberObject from "@ember/object";
import PromiseProxyMixin from "@ember/object/promise-proxy-mixin";
const PromiseObject = EmberObject.extend(PromiseProxyMixin);
// Puedes usar una función memoize personalizada para evitar múltiples solicitudes para el mismo usuario
const getUser = memoize(username => ajax(`/u/${username}`).then(data => data));
- Luego tendrás que crear estas propiedades computadas:
// Promesa computada
@discourseComputed("topic")
posterPromise(topic) {
const { user } = topic.posters[0];
return getUser(user.username);
},
// Esta propiedad computada envuelve la promesa con `PromiseObject`
@discourseComputed("posterPromise")
posterProxy() {
const promise = this.get("posterPromise");
return promise && PromiseObject.create({ promise });
},
posterData: reads("posterProxy.content.user"),
@discourseComputed("posterData")
isStaff() {
const posterData = this.get("posterData");
if (!posterData) return false;
const { groups = [] } = posterData;
// Para ver si el usuario es un miembro del personal, debemos verificar
// si el usuario pertenece a un grupo de personal
return groups.some(({ name }) => name === "staff");
}
Y en la plantilla topic-list-item.hb(r|s) tendrías algo como esto:
{{#if posterProxy.isFulfilled}}
{{#if isStaff}}
// haz tu personalización
{{/if}}
{{/if}}
Puedes utilizar isPending para mostrar un indicador de carga, por ejemplo.
Espero que este ejemplo, aunque no sea tan útil, te ayude a entender cómo funciona el mixin y quizás te ayude a encontrar una forma de usarlo en el desarrollo de tus temas o plugins.
