DEV: Use helperFn in d-presence (#29461)

This commit is contained in:
Jarek Radosz 2024-10-29 11:21:33 +01:00 committed by GitHub
parent 7af728048c
commit a236e368e4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 66 additions and 67 deletions

View File

@ -1,10 +1,10 @@
import Component from "@glimmer/component"; import Component from "@glimmer/component";
import { cached, tracked } from "@glimmer/tracking"; import { cached, tracked } from "@glimmer/tracking";
import { service } from "@ember/service"; import { service } from "@ember/service";
import { modifier } from "ember-modifier";
import { gt } from "truth-helpers"; import { gt } from "truth-helpers";
import UserLink from "discourse/components/user-link"; import UserLink from "discourse/components/user-link";
import avatar from "discourse/helpers/avatar"; import avatar from "discourse/helpers/avatar";
import helperFn from "discourse/helpers/helper-fn";
import i18n from "discourse-common/helpers/i18n"; import i18n from "discourse-common/helpers/i18n";
export default class ComposerPresenceDisplay extends Component { export default class ComposerPresenceDisplay extends Component {
@ -17,7 +17,7 @@ export default class ComposerPresenceDisplay extends Component {
@tracked whisperChannel; @tracked whisperChannel;
@tracked editChannel; @tracked editChannel;
setupReplyChannel = modifier(() => { setupReplyChannel = helperFn((_, on) => {
const topic = this.args.model.topic; const topic = this.args.model.topic;
if (!topic || !this.isReply) { if (!topic || !this.isReply) {
return; return;
@ -29,10 +29,10 @@ export default class ComposerPresenceDisplay extends Component {
replyChannel.subscribe(); replyChannel.subscribe();
this.replyChannel = replyChannel; this.replyChannel = replyChannel;
return () => replyChannel.unsubscribe(); on.cleanup(() => replyChannel.unsubscribe());
}); });
setupWhisperChannel = modifier(() => { setupWhisperChannel = helperFn((_, on) => {
if ( if (
!this.args.model.topic || !this.args.model.topic ||
!this.isReply || !this.isReply ||
@ -48,10 +48,10 @@ export default class ComposerPresenceDisplay extends Component {
whisperChannel.subscribe(); whisperChannel.subscribe();
this.whisperChannel = whisperChannel; this.whisperChannel = whisperChannel;
return () => whisperChannel.unsubscribe(); on.cleanup(() => whisperChannel.unsubscribe());
}); });
setupEditChannel = modifier(() => { setupEditChannel = helperFn((_, on) => {
if (!this.args.model.post || !this.isEdit) { if (!this.args.model.post || !this.isEdit) {
return; return;
} }
@ -62,10 +62,10 @@ export default class ComposerPresenceDisplay extends Component {
editChannel.subscribe(); editChannel.subscribe();
this.editChannel = editChannel; this.editChannel = editChannel;
return () => editChannel.unsubscribe(); on.cleanup(() => editChannel.unsubscribe());
}); });
notifyState = modifier(() => { notifyState = helperFn((_, on) => {
const { topic, post, reply } = this.args.model; const { topic, post, reply } = this.args.model;
const raw = this.isEdit ? post?.raw || "" : ""; const raw = this.isEdit ? post?.raw || "" : "";
const entity = this.isEdit ? post : topic; const entity = this.isEdit ? post : topic;
@ -74,7 +74,7 @@ export default class ComposerPresenceDisplay extends Component {
this.composerPresenceManager.notifyState(this.state, entity?.id); this.composerPresenceManager.notifyState(this.state, entity?.id);
} }
return () => this.composerPresenceManager.leave(); on.cleanup(() => this.composerPresenceManager.leave());
}); });
get isReply() { get isReply() {
@ -112,38 +112,36 @@ export default class ComposerPresenceDisplay extends Component {
} }
<template> <template>
<div {{this.setupReplyChannel}}
{{this.setupReplyChannel}} {{this.setupWhisperChannel}}
{{this.setupWhisperChannel}} {{this.setupEditChannel}}
{{this.setupEditChannel}} {{this.notifyState}}
{{this.notifyState}}
>
{{#if (gt this.users.length 0)}}
<div class="presence-users">
<div class="presence-avatars">
{{#each this.users as |user|}}
<UserLink @user={{user}}>
{{avatar user imageSize="small"}}
</UserLink>
{{/each}}
</div>
<span class="presence-text"> {{#if (gt this.users.length 0)}}
<span class="description"> <div class="presence-users">
{{~#if this.isReply~}} <div class="presence-avatars">
{{i18n "presence.replying" count=this.users.length}} {{#each this.users as |user|}}
{{~else~}} <UserLink @user={{user}}>
{{i18n "presence.editing" count=this.users.length}} {{avatar user imageSize="small"}}
{{~/if~}} </UserLink>
</span> {{/each}}
<span class="wave">
<span class="dot">.</span>
<span class="dot">.</span>
<span class="dot">.</span>
</span>
</span>
</div> </div>
{{/if}}
</div> <span class="presence-text">
<span class="description">
{{~#if this.isReply~}}
{{i18n "presence.replying" count=this.users.length}}
{{~else~}}
{{i18n "presence.editing" count=this.users.length}}
{{~/if~}}
</span>
<span class="wave">
<span class="dot">.</span>
<span class="dot">.</span>
<span class="dot">.</span>
</span>
</span>
</div>
{{/if}}
</template> </template>
} }

View File

@ -1,10 +1,10 @@
import Component from "@glimmer/component"; import Component from "@glimmer/component";
import { cached, tracked } from "@glimmer/tracking"; import { cached, tracked } from "@glimmer/tracking";
import { service } from "@ember/service"; import { service } from "@ember/service";
import { modifier } from "ember-modifier";
import { gt } from "truth-helpers"; import { gt } from "truth-helpers";
import UserLink from "discourse/components/user-link"; import UserLink from "discourse/components/user-link";
import avatar from "discourse/helpers/avatar"; import avatar from "discourse/helpers/avatar";
import helperFn from "discourse/helpers/helper-fn";
import i18n from "discourse-common/helpers/i18n"; import i18n from "discourse-common/helpers/i18n";
export default class TopicPresenceDisplay extends Component { export default class TopicPresenceDisplay extends Component {
@ -14,17 +14,17 @@ export default class TopicPresenceDisplay extends Component {
@tracked replyChannel; @tracked replyChannel;
@tracked whisperChannel; @tracked whisperChannel;
setupReplyChannel = modifier(() => { setupReplyChannel = helperFn((_, on) => {
const replyChannel = this.presence.getChannel( const replyChannel = this.presence.getChannel(
`/discourse-presence/reply/${this.args.topic.id}` `/discourse-presence/reply/${this.args.topic.id}`
); );
replyChannel.subscribe(); replyChannel.subscribe();
this.replyChannel = replyChannel; this.replyChannel = replyChannel;
return () => replyChannel.unsubscribe(); on.cleanup(() => replyChannel.unsubscribe());
}); });
setupWhisperChannels = modifier(() => { setupWhisperChannels = helperFn((_, on) => {
if (!this.currentUser.staff) { if (!this.currentUser.staff) {
return; return;
} }
@ -35,7 +35,7 @@ export default class TopicPresenceDisplay extends Component {
whisperChannel.subscribe(); whisperChannel.subscribe();
this.whisperChannel = whisperChannel; this.whisperChannel = whisperChannel;
return () => whisperChannel.unsubscribe(); on.cleanup(() => whisperChannel.unsubscribe());
}); });
@cached @cached
@ -49,29 +49,30 @@ export default class TopicPresenceDisplay extends Component {
} }
<template> <template>
<div {{this.setupReplyChannel}} {{this.setupWhisperChannels}}> {{this.setupReplyChannel}}
{{#if (gt this.users.length 0)}} {{this.setupWhisperChannels}}
<div class="presence-users">
<div class="presence-avatars">
{{#each this.users as |user|}}
<UserLink @user={{user}}>
{{avatar user imageSize="small"}}
</UserLink>
{{/each}}
</div>
<span class="presence-text"> {{#if (gt this.users.length 0)}}
<span class="description"> <div class="presence-users">
{{i18n "presence.replying_to_topic" count=this.users.length}} <div class="presence-avatars">
</span> {{#each this.users as |user|}}
<span class="wave"> <UserLink @user={{user}}>
<span class="dot">.</span> {{avatar user imageSize="small"}}
<span class="dot">.</span> </UserLink>
<span class="dot">.</span> {{/each}}
</span>
</span>
</div> </div>
{{/if}}
</div> <span class="presence-text">
<span class="description">
{{i18n "presence.replying_to_topic" count=this.users.length}}
</span>
<span class="wave">
<span class="dot">.</span>
<span class="dot">.</span>
<span class="dot">.</span>
</span>
</span>
</div>
{{/if}}
</template> </template>
} }