07ab20131a
This commit introduces the skeleton of the chat thread UI. The
structure of the components looks like this. Its done this way
so the side panel can be used for other things as well if we wish,
not just for threads:
```
.main-chat-outlet
<ChatLivePane />
<ChatSidePanel>
<-- rendered with {{outlet}} -->
<ChatThread />
</ChatSidePanel>
```
Later on the `ChatThreadList` will be rendered here as well.
Now, when you go to a channel you can open a thread by clicking
on either the Open Thread message action button or by clicking on
the reply indicator. This will take you to a route like `chat/c/:slug/:channelId/t/:threadId`.
This works on mobile as well.
This commit includes basic serializers and routes for threads,
as well as a new `ChatThreadsManager` service in JS that caches
threads for a channel the same way the channel threads manager does.
The chat messages inside the thread are intentionally left out
until a later PR.
**NOTE: These changes are gated behind the site setting enable_experimental_chat_threaded_discussions
and the threading_enabled boolean on a ChatChannel**
71 lines
1.8 KiB
JavaScript
71 lines
1.8 KiB
JavaScript
import Service, { inject as service } from "@ember/service";
|
|
import Promise from "rsvp";
|
|
import ChatThread from "discourse/plugins/chat/discourse/models/chat-thread";
|
|
import { tracked } from "@glimmer/tracking";
|
|
import { TrackedObject } from "@ember-compat/tracked-built-ins";
|
|
import { popupAjaxError } from "discourse/lib/ajax-error";
|
|
|
|
/*
|
|
The ChatThreadsManager service is responsible for managing the loaded chat threads
|
|
for the current chat channel.
|
|
|
|
It provides helpers to facilitate using and managing loaded threads instead of constantly
|
|
fetching them from the server.
|
|
*/
|
|
|
|
export default class ChatThreadsManager extends Service {
|
|
@service chatSubscriptionsManager;
|
|
@service chatApi;
|
|
@service currentUser;
|
|
@tracked _cached = new TrackedObject();
|
|
|
|
async find(channelId, threadId, options = { fetchIfNotFound: true }) {
|
|
const existingThread = this.#findStale(threadId);
|
|
if (existingThread) {
|
|
return Promise.resolve(existingThread);
|
|
} else if (options.fetchIfNotFound) {
|
|
return this.#find(channelId, threadId);
|
|
} else {
|
|
return Promise.resolve();
|
|
}
|
|
}
|
|
|
|
// whenever the active channel changes, do this
|
|
resetCache() {
|
|
this._cached = new TrackedObject();
|
|
}
|
|
|
|
get threads() {
|
|
return Object.values(this._cached);
|
|
}
|
|
|
|
store(threadObject) {
|
|
let model = this.#findStale(threadObject.id);
|
|
|
|
if (!model) {
|
|
model = ChatThread.create(threadObject);
|
|
this.#cache(model);
|
|
}
|
|
|
|
return model;
|
|
}
|
|
|
|
async #find(channelId, threadId) {
|
|
return this.chatApi
|
|
.thread(channelId, threadId)
|
|
.catch(popupAjaxError)
|
|
.then((thread) => {
|
|
this.#cache(thread);
|
|
return thread;
|
|
});
|
|
}
|
|
|
|
#cache(thread) {
|
|
this._cached[thread.id] = thread;
|
|
}
|
|
|
|
#findStale(id) {
|
|
return this._cached[id];
|
|
}
|
|
}
|