DEV: Pass a status object to the user-status-picker instead of passing emoji + description (#18513)

This commit is contained in:
Andrei Prigorshnev 2022-10-08 02:21:53 +04:00 committed by GitHub
parent e320bbe513
commit ec65f3c1ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 86 additions and 29 deletions

View File

@ -8,12 +8,18 @@ export default class UserStatusPicker extends Component {
tagName = "";
isFocused = false;
emojiPickerIsActive = false;
emoji = null;
description = null;
@computed("emoji")
didInsertElement() {
this._super(...arguments);
if (!this.status) {
this.set("status", {});
}
}
@computed("status.emoji")
get emojiHtml() {
const emoji = escapeExpression(`:${this.emoji}:`);
const emoji = escapeExpression(`:${this.status.emoji}:`);
return emojiUnescape(emoji);
}
@ -24,7 +30,7 @@ export default class UserStatusPicker extends Component {
@action
emojiSelected(emoji) {
this.set("emoji", emoji);
this.set("status.emoji", emoji);
this.set("emojiPickerIsActive", false);
scheduleOnce("afterRender", () => {
@ -44,8 +50,8 @@ export default class UserStatusPicker extends Component {
@action
setDefaultEmoji() {
if (!this.emoji) {
this.set("emoji", "speech_balloon");
if (!this.status.emoji) {
this.set("status.emoji", "speech_balloon");
}
}

View File

@ -12,25 +12,18 @@ import {
export default Controller.extend(ModalFunctionality, {
userStatusService: service("user-status"),
emoji: null,
description: null,
endsAt: null,
showDeleteButton: false,
prefilledDateTime: null,
timeShortcuts: null,
_itsatrap: null,
onShow() {
const status = this.currentUser.status;
const currentStatus = { ...this.currentUser.status };
this.setProperties({
emoji: status?.emoji,
description: status?.description,
endsAt: status?.ends_at,
showDeleteButton: !!status,
status: currentStatus,
showDeleteButton: !!this.currentUser.status,
timeShortcuts: this._buildTimeShortcuts(),
prefilledDateTime: status?.ends_at,
prefilledDateTime: currentStatus?.ends_at,
});
this.set("_itsatrap", new ItsATrap());
@ -42,7 +35,7 @@ export default Controller.extend(ModalFunctionality, {
this.set("timeShortcuts", null);
},
@discourseComputed("emoji", "description")
@discourseComputed("status.emoji", "status.description")
statusIsSet(emoji, description) {
return !!emoji && !!description;
},
@ -69,18 +62,18 @@ export default Controller.extend(ModalFunctionality, {
@action
onTimeSelected(_, time) {
this.set("endsAt", time);
this.set("status.endsAt", time);
},
@action
saveAndClose() {
const status = {
description: this.description,
emoji: this.emoji,
ends_at: this.endsAt?.toISOString(),
const newStatus = {
description: this.status.description,
emoji: this.status.emoji,
ends_at: this.status.endsAt?.toISOString(),
};
this.userStatusService
.set(status)
.set(newStatus)
.then(() => {
this.send("closeModal");
})

View File

@ -7,7 +7,7 @@
{{on "focus" this.focus}}
{{on "blur" this.blur}}
>
{{#if @emoji}}
{{#if @status.emoji}}
{{html-safe this.emojiHtml}}
{{else}}
{{d-icon "discourse-emojis"}}
@ -15,11 +15,15 @@
</button>
<Input
class="user-status-description"
@value={{@description}}
@value={{@status.description}}
placeholder={{i18n "user_status.what_are_you_doing"}}
{{on "input" this.setDefaultEmoji}}
{{on "focus" this.focus}}
{{on "blur" this.blur}} />
</div>
</div>
<EmojiPicker @isActive={{this.emojiPickerIsActive}} @emojiSelected={{action "emojiSelected"}} @onEmojiPickerClose={{action "onEmojiPickerOutsideClick"}} @placement="bottom" />
<EmojiPicker
@isActive={{this.emojiPickerIsActive}}
@emojiSelected={{action "emojiSelected"}}
@onEmojiPickerClose={{action "onEmojiPickerOutsideClick"}}
@placement="bottom"/>

View File

@ -1,7 +1,7 @@
<DModalBody>
<ConditionalLoadingSpinner @condition={{this.loading}}>
<div class="control-group">
<UserStatusPicker @emoji={{this.emoji}} @description={{this.description}} />
<UserStatusPicker @status={{this.status}} />
</div>
<div class="control-group control-group-remove-status">
<label class="control-label">

View File

@ -0,0 +1,54 @@
import { module, test } from "qunit";
import { click, fillIn, render } from "@ember/test-helpers";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { hbs } from "ember-cli-htmlbars";
import { query } from "discourse/tests/helpers/qunit-helpers";
module("Integration | Component | user-status-picker", function (hooks) {
setupRenderingTest(hooks);
test("it renders current status", async function (assert) {
const status = {
emoji: "tooth",
description: "off to dentist",
};
this.set("status", status);
await render(hbs`<UserStatusPicker @status={{this.status}} />`);
assert.equal(
query(".emoji").alt,
status.emoji,
"the status emoji is shown"
);
assert.equal(
query(".user-status-description").value,
status.description,
"the status description is shown"
);
});
test("it picks emoji", async function (assert) {
const status = {
emoji: "tooth",
description: "off to dentist",
};
this.set("status", status);
await render(hbs`<UserStatusPicker @status={{this.status}} />`);
const newEmoji = "mega";
await click(".btn-emoji");
await fillIn(".emoji-picker-content .filter", newEmoji);
await click(".results .emoji");
assert.equal(query(".emoji").alt, newEmoji);
});
test("it sets default emoji when user starts typing a description", async function (assert) {
const defaultEmoji = "speech_balloon";
this.set("status", null);
await render(hbs`<UserStatusPicker @status={{this.status}} />`);
await fillIn(".user-status-description", "s");
assert.equal(query(".emoji").alt, defaultEmoji);
});
});