From 9154f1c9cc64b5466a4a8d39f9f3160c9ff802a3 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 10 Aug 2020 11:28:54 -0600 Subject: [PATCH 01/11] Add the comment form and style it --- src/lib/Pusher/pusher.js | 24 +++-- .../HomePage/Report/ReportHistoryCompose.js | 92 +++++++++++++++++++ src/page/HomePage/Report/ReportHistoryItem.js | 4 +- src/page/HomePage/Report/ReportView.js | 3 + src/style/StyleSheet.js | 9 ++ 5 files changed, 123 insertions(+), 9 deletions(-) create mode 100644 src/page/HomePage/Report/ReportHistoryCompose.js diff --git a/src/lib/Pusher/pusher.js b/src/lib/Pusher/pusher.js index ac9c994853977..23011be89c0ac 100644 --- a/src/lib/Pusher/pusher.js +++ b/src/lib/Pusher/pusher.js @@ -24,7 +24,8 @@ function init(appKey, params) { }); // If we want to pass params in our requests to api.php we'll need to add it to socket.config.auth.params - // as per the documentation (https://pusher.com/docs/channels/using_channels/connection#channels-options-parameter). + // as per the documentation + // (https://pusher.com/docs/channels/using_channels/connection#channels-options-parameter). // Any param mentioned here will show up in $_REQUEST when we call "Push_Authenticate". Params passed here need // to pass our inputRules to show up in the request. if (params) { @@ -92,8 +93,9 @@ function bindEventToChannel(channel, eventName, eventCallback = () => {}, isChun return; } - // If we are chunking the requests, we need to construct a rolling list of all packets that have come through Pusher. - // If we've completed one of these full packets, we'll combine the data and act on the event that it's assigned to. + // If we are chunking the requests, we need to construct a rolling list of all packets that have come through + // Pusher. If we've completed one of these full packets, we'll combine the data and act on the event that it's + // assigned to. // If we haven't seen this eventID yet, initialize it into our rolling list of packets. if (!chunkedDataEvents[eventData.id]) { @@ -109,13 +111,17 @@ function bindEventToChannel(channel, eventName, eventCallback = () => {}, isChun chunkedEvent.receivedFinal = true; } - // Only call the event callback if we've received the last packet and we don't have any holes in the complete packet. + // Only call the event callback if we've received the last packet and we don't have any holes in the complete + // packet. if (chunkedEvent.receivedFinal && chunkedEvent.chunks.length === Object.keys(chunkedEvent.chunks).length) { eventCallback(JSON.parse(chunkedEvent.chunks.join(''))); try { eventCallback(JSON.parse(chunkedEvent.chunks.join(''))); } catch (err) { - console.error('[Pusher] Unable to parse chunked JSON response from Pusher', 0, {error: err, eventData: chunkedEvent.chunks.join('')}); + console.error('[Pusher] Unable to parse chunked JSON response from Pusher', 0, { + error: err, + eventData: chunkedEvent.chunks.join('') + }); } delete chunkedDataEvents[eventData.id]; @@ -131,7 +137,8 @@ function bindEventToChannel(channel, eventName, eventCallback = () => {}, isChun * @param {String} channelName * @param {String} eventName * @param {Function} [eventCallback] - * @param {Boolean} [isChunked] This parameters tells us whether or not we expect the result to come in individual pieces/chunks (because it exceeds + * @param {Boolean} [isChunked] This parameters tells us whether or not we expect the result to come in individual + * pieces/chunks (because it exceeds * the 10kB limit that pusher has). * * @return {Promise} @@ -157,7 +164,10 @@ function subscribe(channelName, eventName, eventCallback = () => {}, isChunked = channel.bind('pusher:subscription_error', (status) => { if (status === 403) { - console.debug('[Pusher] Issue authenticating with Pusher during subscribe attempt.', 0, {channelName, status}); + console.debug('[Pusher] Issue authenticating with Pusher during subscribe attempt.', 0, { + channelName, + status + }); } reject(status); diff --git a/src/page/HomePage/Report/ReportHistoryCompose.js b/src/page/HomePage/Report/ReportHistoryCompose.js new file mode 100644 index 0000000000000..b30fa6cb3a0d8 --- /dev/null +++ b/src/page/HomePage/Report/ReportHistoryCompose.js @@ -0,0 +1,92 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import {View, TextInput, Button} from 'react-native'; +import styles from '../../../style/StyleSheet'; + +const propTypes = { + // A method to call when the form is submitted + onSubmit: PropTypes.func.isRequired, +}; + +class ReportHistoryCompose extends React.Component { + constructor(props) { + super(props); + + this.updateComment = this.updateComment.bind(this); + this.submitForm = this.submitForm.bind(this); + this.triggerSubmitShortcut = this.triggerSubmitShortcut.bind(this); + + this.state = { + comment: '', + }; + } + + componentDidMount() { + this.textInput.focus(); + } + + componentDidUpdate() { + this.textInput.focus(); + } + + /** + * Update the value of the comment input in the state + * + * @param {SyntheticEvent} e + */ + updateComment(e) { + this.setState({ + comment: e.target.value, + }); + } + + /** + * Listens for the keyboard shortcut and submits + * the form when we have enter + * + * @param {Object} e + */ + triggerSubmitShortcut(e) { + if (e && e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + this.submitForm(); + } + } + + /** + * Add a new comment to this chat + * + * @param {SyntheticEvent} [e] + */ + submitForm(e) { + if (e) { + e.preventDefault(); + } + this.props.onSubmit(this.state.comment); + this.setState({ + comment: '', + }); + } + + render() { + return ( + + this.textInput = el} + multiline + textAlignVertical + numberOfLines="3" + onChange={this.updateComment} + onKeyPress={this.triggerSubmitShortcut} + style={[styles.textInput]} + /> + +