From 1d1a8456a5897cab840b470f824a351bd2209d9d Mon Sep 17 00:00:00 2001 From: Arit Amana <32520970+msarit@users.noreply.github.com> Date: Wed, 15 Apr 2020 15:26:10 -0400 Subject: [PATCH] Use StimulusJS for vomit confirmations in Internal (#7255) This PR implements the async vomit-reaction functionality using StimulusJS. Prior to this, the JS lived in `_abuse-reports.html.erb`. Co-authored-by: Ben Halpern --- app/assets/stylesheets/chat.scss | 12 +-- app/javascript/chat/chat.jsx | 74 +++++++++++++------ .../controllers/reaction_controller.js | 70 ++++++++++++++++++ .../feedback_messages/_abuse_reports.html.erb | 71 ++++-------------- app/views/video_chats/show.html.erb | 3 +- 5 files changed, 141 insertions(+), 89 deletions(-) create mode 100644 app/javascript/internal/controllers/reaction_controller.js diff --git a/app/assets/stylesheets/chat.scss b/app/assets/stylesheets/chat.scss index 2af386f41..47f9feb90 100644 --- a/app/assets/stylesheets/chat.scss +++ b/app/assets/stylesheets/chat.scss @@ -88,7 +88,6 @@ input { outline: 0; } - } .chat__channels--expanded { @@ -172,7 +171,6 @@ } } - .chat_chatconfig { position: absolute; bottom: 0px; @@ -367,7 +365,7 @@ @media screen and (max-width: 426px) { width: calc(100% - 16px); min-width: calc(100% - 16px); - } + } iframe { position: absolute; top: 0; @@ -396,7 +394,8 @@ max-width: 52%; } -.chat--content-visible .activechatchannel__activecontent.activechatchannel__activecontent--video { +.chat--content-visible + .activechatchannel__activecontent.activechatchannel__activecontent--video { width: 180px; min-width: 180px; } @@ -446,7 +445,6 @@ } } - .activechatchannel__activecontentexitbutton { font-size: 30px; position: absolute; @@ -600,13 +598,11 @@ border: 1px solid var(--base-30); } - .chatchanneltab--new { border: 1px solid var(--accent-brand); color: var(--accent-brand-darker); } - .chatchanneltab--video { background: lighten($green, 10%); animation: small-pulser 0.5s linear infinite; @@ -718,7 +714,7 @@ display: flex; max-width: 100%; @media not all and (pointer: coarse) { - &:hover { + &:hover { @include themeable( background, theme-container-background-hover, diff --git a/app/javascript/chat/chat.jsx b/app/javascript/chat/chat.jsx index 1938029dc..7858375ab 100644 --- a/app/javascript/chat/chat.jsx +++ b/app/javascript/chat/chat.jsx @@ -1,3 +1,4 @@ +/* eslint-disable consistent-return,no-unused-vars,react/destructuring-assignment,react/no-access-state-in-setstate,react/button-has-type */ import { h, Component } from 'preact'; import PropTypes from 'prop-types'; import ConfigImage from '../../assets/images/three-dots.svg'; @@ -79,16 +80,11 @@ export default class Chat extends Component { channelUsers: [], showMemberlist: false, memberFilterQuery: null, - rerenderIfUnchangedCheck: null + rerenderIfUnchangedCheck: null, }; getAllMessages(chatOptions.activeChannelId, 0, this.receiveAllMessages); } - shouldComponentUpdate(nextProps, nextState) { - if(this.state.rerenderIfUnchangedCheck !== nextState.rerenderIfUnchangedCheck) { - return false; - } - } componentDidMount() { const { chatChannels, @@ -144,6 +140,14 @@ export default class Chat extends Component { getChannelInvites(this.handleChannelInvites, null); } + shouldComponentUpdate(nextProps, nextState) { + if ( + this.state.rerenderIfUnchangedCheck !== nextState.rerenderIfUnchangedCheck + ) { + return false; + } + } + componentDidUpdate() { const { scrolled, currentMessageLocation } = this.state; const messageList = document.getElementById('messagelist'); @@ -344,7 +348,10 @@ export default class Chat extends Component { if (entry.isIntersecting && this.state.scrolled === true) { this.setState({ scrolled: false, showAlert: false }); } else if (this.state.scrolled === false) { - this.setState({ scrolled: true, rerenderIfUnchangedCheck: Math.random() }); + this.setState({ + scrolled: true, + rerenderIfUnchangedCheck: Math.random(), + }); } }); }; @@ -601,7 +608,7 @@ export default class Chat extends Component { message: '/call', mentionedUsersId: this.getMentionedUsers(message), }; - this.setState({ videoPath: `/video_chats/${ activeChannelId}` }); + this.setState({ videoPath: `/video_chats/${activeChannelId}` }); sendMessage(messageObject, this.handleSuccess, this.handleFailure); } else if (message.startsWith('/new')) { this.setActiveContentState(activeChannelId, { @@ -816,10 +823,11 @@ export default class Chat extends Component { }); } else if (target.dataset.content === 'exit') { this.setActiveContentState(activeChannelId, null); - this.setState({fullscreenContent: null}); + this.setState({ fullscreenContent: null }); } else if (target.dataset.content === 'fullscreen') { - const mode = this.state.fullscreenContent === 'sidecar' ? null : 'sidecar' - this.setState({fullscreenContent: mode}) + const mode = + this.state.fullscreenContent === 'sidecar' ? null : 'sidecar'; + this.setState({ fullscreenContent: mode }); } } document.getElementById('messageform').focus(); @@ -1018,12 +1026,12 @@ export default class Chat extends Component { toggleSearchShowing = () => { if (!this.state.searchShowing) { - setTimeout(function(){ - document.getElementById("chatchannelsearchbar").focus() - },100) + setTimeout(function () { + document.getElementById('chatchannelsearchbar').focus(); + }, 100); } - this.setState({searchShowing: !this.state.searchShowing}) - } + this.setState({ searchShowing: !this.state.searchShowing }); + }; renderChatChannels = () => { const { state } = this; @@ -1074,10 +1082,32 @@ export default class Chat extends Component { > {'<'} - {state.searchShowing ? : ''} + {state.searchShowing ? ( + + ) : ( + '' + )} {invitesButton}
- + {this.renderChannelFilterButton( 'all', 'all', @@ -1145,7 +1175,7 @@ export default class Chat extends Component { } const jumpbackButton = document.getElementById('jumpback_button'); - + if (this.scroller) { const scrolledRatio = (this.scroller.scrollTop + this.scroller.clientHeight) / @@ -1264,7 +1294,7 @@ export default class Chat extends Component { ); }; - onTriggerVideoContent = e => { + onTriggerVideoContent = (e) => { if (e.target.dataset.content === 'exit') { this.setState({ videoPath: null, fullscreenContent: null }); } else if (this.state.fullscreenContent === 'video') { @@ -1578,9 +1608,9 @@ export default class Chat extends Component { } let fullscreenMode = ''; if (state.fullscreenContent === 'sidecar') { - fullscreenMode = 'chat--content-visible-full' + fullscreenMode = 'chat--content-visible-full'; } else if (state.fullscreenContent === 'video') { - fullscreenMode = 'chat--video-visible-full' + fullscreenMode = 'chat--video-visible-full'; } return (
+ response + .json() + .then((json) => { + if (json.outcome === 'Success') { + this.element.remove(); + document.getElementById(`js__reaction__div__hr__${id}`).remove(); + } else { + alert(json.error); + } + }) + .catch((error) => { + alert(error); + }), + ); + } + + updateReactionInvalid() { + this.updateReaction(this.reactionId, this.invalidStatus); + } + + reactableUserCheck() { + if (this.reactableType === 'user') { + // eslint-disable-next-line no-restricted-globals + if (confirm('You are confirming a User vomit reaction; are you sure?')) { + this.updateReaction(this.reactionId, this.confirmedStatus); + } + } else { + this.updateReaction(this.reactionId, this.confirmedStatus); + } + } + + get reactionId() { + return parseInt(this.data.get('id'), 10); + } + + get confirmedStatus() { + return this.confirmedTarget.dataset.status; + } + + get reactableType() { + return this.confirmedTarget.dataset.reactable; + } + + get invalidStatus() { + return this.invalidTarget.dataset.altstatus; + } +} diff --git a/app/views/internal/feedback_messages/_abuse_reports.html.erb b/app/views/internal/feedback_messages/_abuse_reports.html.erb index 96ba4d4b9..588acbdea 100644 --- a/app/views/internal/feedback_messages/_abuse_reports.html.erb +++ b/app/views/internal/feedback_messages/_abuse_reports.html.erb @@ -27,7 +27,7 @@
<% @vomits.each do |reaction| %> <% next if (reaction.reactable_type == "Article" && !reaction.reactable.published) || (reaction.reactable_type == "User" && reaction.reactable&.banished?) %> -
+
🤢 @<%= reaction.user.username %> @@ -45,28 +45,31 @@ <% if params[:status] == "Open" || params[:status].blank? %> <% if reaction.reactable_type == "User" %> <% else %> <% end %> <% end %> @@ -78,49 +81,3 @@
- - diff --git a/app/views/video_chats/show.html.erb b/app/views/video_chats/show.html.erb index 441660251..e37689548 100644 --- a/app/views/video_chats/show.html.erb +++ b/app/views/video_chats/show.html.erb @@ -24,7 +24,6 @@ margin-bottom: 100px; } - #local-media video { width: 150px; position: fixed; @@ -32,7 +31,7 @@ right: 10px; z-index: 5; } - + #local-media.video-hidden { opacity: 0.1; }