diff --git a/app/controllers/stories_controller.rb b/app/controllers/stories_controller.rb index dc1f35e34..807b6bb4b 100644 --- a/app/controllers/stories_controller.rb +++ b/app/controllers/stories_controller.rb @@ -236,6 +236,7 @@ class StoriesController < ApplicationController # 2nd with 1 badge (!) <-- and that would look off. @badges_limit = 6 @profile = @user.profile.decorate + @is_user_flagged = Reaction.where(user_id: session_current_user_id, reactable: @user).any? set_surrogate_key_header "articles-user-#{@user.id}" set_user_json_ld diff --git a/app/javascript/packs/profileDropdown.js b/app/javascript/packs/profileDropdown.js index 3d8338083..6e0c35664 100644 --- a/app/javascript/packs/profileDropdown.js +++ b/app/javascript/packs/profileDropdown.js @@ -1,7 +1,13 @@ import { initBlock } from '../profileDropdown/blockButton'; +import { initFlag } from '../profileDropdown/flagButton'; + +function initButtons() { + initBlock(); + initFlag(); +} window.InstantClick.on('change', () => { - initBlock(); + initButtons(); }); -initBlock(); +initButtons(); diff --git a/app/javascript/profileDropdown/flagButton.js b/app/javascript/profileDropdown/flagButton.js new file mode 100644 index 000000000..1cd76ecd4 --- /dev/null +++ b/app/javascript/profileDropdown/flagButton.js @@ -0,0 +1,67 @@ +/* global userData */ +/* eslint-disable no-alert */ +/** + * Adds a flag button visible only to trusted users on profile pages. + * @function initFlag + * @returns {(void|undefined)} This function has no useable return value. + */ +export function initFlag() { + const flagButton = document.getElementById( + 'user-profile-dropdownmenu-flag-button', + ); + + if (!flagButton) { + // button not always present when this is called + return; + } + + const user = userData(); + if (!user) { + return; + } + + const { profileUserId, profileUserName } = flagButton.dataset; + let isUserFlagged = flagButton.dataset.isUserFlagged === 'true'; + const trustedOrAdmin = user.trusted || user.admin; + + if (!trustedOrAdmin || user.id === parseInt(profileUserId, 10)) { + flagButton.remove(); + } + + function flag() { + const confirmFlag = window.confirm( + isUserFlagged + ? 'Are you sure you want to unflag this person? This will make all of their posts visible again.' + : 'Are you sure you want to flag this person? This will make all of their posts less visible.', + ); + + if (confirmFlag) { + fetch('/reactions', { + method: 'POST', + headers: { + 'X-CSRF-Token': window.csrfToken, + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + reactable_type: 'User', + category: 'vomit', + reactable_id: profileUserId, + }), + }) + .then((response) => response.json()) + .then((response) => { + if (response.result === 'create') { + isUserFlagged = true; + flagButton.innerHTML = `Unflag ${profileUserName}`; + } else { + isUserFlagged = false; + flagButton.innerHTML = `Flag ${profileUserName}`; + } + }) + .catch((e) => window.alert(`Something went wrong: ${e}`)); + } + } + + flagButton.addEventListener('click', flag); +} +/* eslint-enable no-alert */ diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb index 746fffdc2..58690a59b 100644 --- a/app/views/users/show.html.erb +++ b/app/views/users/show.html.erb @@ -33,8 +33,17 @@