Button to display message source in the New Modmail

[xeoth]

If I did everything right, this fixes #323

[creesch]

Had a quick look with some initial comments. Will go over it in more detail when I have a bit more time.

[creesch]

I am not sure we need to do the request for every modmail loaded. Possibly just do the request the first time source is clicked

[creesch]

You haven't actually resolved this, for every message in a conversation you are still doing a request.

My suggestion would be to set up your cache something along these lines:

1. Keep a local boolean named conversationCached and set it to false by default.
2. Attach the buttons to the replies.
3. When a source button is clicked check the boolean, if true use cache for the source if false fetch the conversation and set the cache.
4. Clear the boolean based on a TBNewPage event.

[xeoth]

Thanks for your comments, Creesch. I wouldn't have noticed those. I fixed what needed fixing and added a toggling feature. It should all be good now.

Please review and leave a comment if you find something that still needs a fix.

[creesch]

So uh yeah I ended up testing my suggested changes to make sure that what I was saying makes sense.

So if you want you can simply use the below code ;)

        if (sourceButton) {
            let conversationCached = false;
            window.addEventListener('TBNewPage', () => {
                conversationCached = false;
            });

            TB.listener.on('author', event => {
                if (event.detail.type !== 'TBmodmailCommentAuthor') {
                    return;
                }
                const $target = $(event.target);

                $target.closest('.Message__header').append('<button class="tb-source-button tb-general-button">source</button>');

                $('.tb-source-button').click(async e => {
                    // Something is causing the listener to be triggered multiple times.
                    e.stopImmediatePropagation();
                    const $currentSourceBtn = $(e.currentTarget.parentElement);

                    // Getting the ID of the message on which the button was clicked.
                    const activeMessageID = event.detail.data.comment.id;
                    const $currentSourceField = $(`#tb-source-${activeMessageID}`);

                    // Toggling the source
                    if ($currentSourceField.length) {
                        // If the source field exists, toggle it

                        $currentSourceField.toggle();
                    } else {
                        // If the source field is not present (has not been requested yet), request it and create
                        // a div+textarea with the source.

                        if (!$currentSourceBtn.closest('.Thread__message').has('.tb-source-field').length) {
                            let conversationInfo;
                            if (conversationCached) {
                                conversationInfo = await TBStorage.getCache('NewModmailPro', 'current-conversation');
                            } else {
                                // Fetch and store the conversation info in cache
                                const currentID = event.detail.data.post.id;
                                conversationInfo = await TBApi.apiOauthGET(`/api/mod/conversations/${currentID}`).then(r => r.json());
                                TBStorage.setCache('NewModmailPro', 'current-conversation', conversationInfo);
                                conversationCached = true;
                            }
                            // Getting the body in markdown from selected message
                            const messageSource = conversationInfo.messages[activeMessageID].bodyMarkdown;

                            $currentSourceBtn.closest('.Thread__message').append(`
                                <div class="tb-source-field" id="tb-source-${activeMessageID}">
                                    <textarea readonly></textarea>
                                </div>`);
                            $(`#tb-source-${activeMessageID} textarea`).text(messageSource);
                        }
                    }
                });
            });
        }

[creesch]

You haven't actually resolved this, for every message in a conversation you are still doing a request.

My suggestion would be to set up your cache something along these lines:

1. Keep a local boolean named conversationCached and set it to false by default.
2. Attach the buttons to the replies.
3. When a source button is clicked check the boolean, if true use cache for the source if false fetch the conversation and set the cache.
4. Clear the boolean based on a TBNewPage event.