From 66c350e12040d6f6164fb2158fff98b04deee27a Mon Sep 17 00:00:00 2001 From: knod Date: Sat, 24 Nov 2018 13:57:55 -0500 Subject: [PATCH 1/5] Code style through 'FeedbackForm.js' --- .../prompts/BrowserLeaveListener.js | 2 +- src/components/prompts/ErrorListener.js | 2 +- src/components/prompts/FeedbackAnytime.js | 12 ++-- src/components/prompts/FeedbackForm.js | 70 +++++++++++-------- src/containers/VisitPage.js | 6 +- 5 files changed, 50 insertions(+), 42 deletions(-) diff --git a/src/components/prompts/BrowserLeaveListener.js b/src/components/prompts/BrowserLeaveListener.js index 774677d6..300ecb38 100644 --- a/src/components/prompts/BrowserLeaveListener.js +++ b/src/components/prompts/BrowserLeaveListener.js @@ -31,4 +31,4 @@ class BrowserLeaveListener extends React.Component { } } -export default BrowserLeaveListener; +export { BrowserLeaveListener }; diff --git a/src/components/prompts/ErrorListener.js b/src/components/prompts/ErrorListener.js index 56c16352..c287057a 100644 --- a/src/components/prompts/ErrorListener.js +++ b/src/components/prompts/ErrorListener.js @@ -32,4 +32,4 @@ class ErrorListener extends React.Component { } } -export default ErrorListener; +export { ErrorListener }; diff --git a/src/components/prompts/FeedbackAnytime.js b/src/components/prompts/FeedbackAnytime.js index 43b13548..35c5bab5 100644 --- a/src/components/prompts/FeedbackAnytime.js +++ b/src/components/prompts/FeedbackAnytime.js @@ -2,16 +2,16 @@ import React from 'react'; import { Button } from 'semantic-ui-react'; -const FeedbackAnytime = function (props) { +const FeedbackAnytime = function ({ openFeedback }) { return (
diff --git a/src/components/prompts/FeedbackForm.js b/src/components/prompts/FeedbackForm.js index 056b1f77..97f229bc 100644 --- a/src/components/prompts/FeedbackForm.js +++ b/src/components/prompts/FeedbackForm.js @@ -38,7 +38,7 @@ class AskPermission extends React.Component { const { question, submitting } = this.props; const { submitType } = this.state; return ([ - +

{ question }

@@ -58,7 +58,7 @@ class AskPermission extends React.Component { onChange = { this.setSubmitType } /> , - + Date: Sat, 24 Nov 2018 19:58:50 -0500 Subject: [PATCH 2/5] Some more cleaning --- .../prompts/BrowserLeaveListener.js | 8 +-- src/components/prompts/ErrorListener.js | 8 +-- src/components/prompts/FeedbackAnytime.js | 2 +- src/components/prompts/FeedbackForm.js | 12 ++-- src/components/prompts/FeedbackPrompt.js | 29 ++++---- src/components/prompts/PredictionsWarning.js | 70 +++++++++---------- .../prompts/ReactRouterLeaveListener.js | 35 +++++----- src/containers/VisitPage.js | 6 +- .../components/prompts/FeedbackPrompt.test.js | 2 +- 9 files changed, 90 insertions(+), 82 deletions(-) diff --git a/src/components/prompts/BrowserLeaveListener.js b/src/components/prompts/BrowserLeaveListener.js index 300ecb38..48f20aa7 100644 --- a/src/components/prompts/BrowserLeaveListener.js +++ b/src/components/prompts/BrowserLeaveListener.js @@ -20,15 +20,15 @@ class BrowserLeaveListener extends React.Component { componentDidMount() { window.addEventListener('beforeunload', this.confirm); - } + }; componentWillUnmount() { window.removeEventListener('beforeunload', this.confirm); - } + }; render() { return null; - } -} + }; +}; export { BrowserLeaveListener }; diff --git a/src/components/prompts/ErrorListener.js b/src/components/prompts/ErrorListener.js index c287057a..3b667b8e 100644 --- a/src/components/prompts/ErrorListener.js +++ b/src/components/prompts/ErrorListener.js @@ -21,15 +21,15 @@ class ErrorListener extends React.Component { componentDidMount() { window.addEventListener('error', this.handleError); - } + }; componentWillUnmount() { window.removeEventListener('error', this.handleError); - } + }; render() { return null; - } -} + }; +}; export { ErrorListener }; diff --git a/src/components/prompts/FeedbackAnytime.js b/src/components/prompts/FeedbackAnytime.js index 35c5bab5..c6c1a591 100644 --- a/src/components/prompts/FeedbackAnytime.js +++ b/src/components/prompts/FeedbackAnytime.js @@ -17,7 +17,7 @@ const FeedbackAnytime = function ({ openFeedback }) { ); -}; // End +}; // Ends export { FeedbackAnytime }; diff --git a/src/components/prompts/FeedbackForm.js b/src/components/prompts/FeedbackForm.js index 97f229bc..66d3bec8 100644 --- a/src/components/prompts/FeedbackForm.js +++ b/src/components/prompts/FeedbackForm.js @@ -25,11 +25,11 @@ class AskPermission extends React.Component { this.props.closeAskPermission(); }; - submit = (evnt) => { - this.props.submit(evnt, this.state.submitType); + submit = (event) => { + this.props.submit(event, this.state.submitType); }; - setSubmitType = (evnt, inputProps) => { + setSubmitType = (event, inputProps) => { this.setState({ submitType: inputProps.value }); }; @@ -130,7 +130,7 @@ class FeedbackForm extends React.Component { throw error; } }); - } + }; close = (event) => { // Reset state for next time it's opened @@ -151,7 +151,7 @@ class FeedbackForm extends React.Component { this.setState({ ready: false }); }; - submit = (evnt, type) => { + submit = (event, type) => { this.setState({ submitting: true }); let data = this.state.formData; @@ -254,7 +254,7 @@ class FeedbackForm extends React.Component { ); - } + }; }; diff --git a/src/components/prompts/FeedbackPrompt.js b/src/components/prompts/FeedbackPrompt.js index 3fbaf090..a782d013 100644 --- a/src/components/prompts/FeedbackPrompt.js +++ b/src/components/prompts/FeedbackPrompt.js @@ -1,5 +1,8 @@ import React from 'react'; -import { Button, Modal } from 'semantic-ui-react'; +import { + Button, + Modal, +} from 'semantic-ui-react'; /** * Called with result of user interaction with on leave modal. @@ -26,6 +29,7 @@ class FeedbackPrompt extends React.Component { event.preventDefault(); this.props.callback(true); }; + stay = (event) => { event.preventDefault(); this.props.callback(false); @@ -49,32 +53,33 @@ class FeedbackPrompt extends React.Component { } // Otherwise, set up the prompt - let realLeave = leaveText || 'Leave', + let realLeave = leaveText || `Leave`, realStay = stayText || `Cancel`, realMessage = message; - if (message === 'default') { + if (message === `default`) { realMessage = `Clicking "${realLeave}" will erase the information you have put into the form. Do you want to tell us something about the app first? That information could help us. You will still be able to come back and click "${realLeave}" afterwards.`; } return ( + open = { open }> {header || `Do you want to tell us more before you click "${realLeave}"?`} -

{realMessage}

+

{ realMessage }

 - - + + ); - } -} + }; +}; -export default FeedbackPrompt; +export { FeedbackPrompt }; diff --git a/src/components/prompts/PredictionsWarning.js b/src/components/prompts/PredictionsWarning.js index 0e5a5296..fd32704f 100644 --- a/src/components/prompts/PredictionsWarning.js +++ b/src/components/prompts/PredictionsWarning.js @@ -7,6 +7,7 @@ import { Modal, } from 'semantic-ui-react'; + /** * Displays a model that requires the user to accept the terms and conditions before using the app * @extends React.Component @@ -14,7 +15,7 @@ import { * @param {function} toggleDistrustConfirmed - function to set the termsAccepted in app state * @param {object} snippets - object containing localization snippets */ -class TermsAndConditions extends Component { +class PredictionsWarningComp extends Component { state = { checkbox1: false, @@ -27,17 +28,18 @@ class TermsAndConditions extends Component { }; allowContinue = () => { - return ( - this.state.checkbox1 === true && - this.state.checkbox2 === true - ) ? true : false; + let { + checkbox1, + checkbox2, + } = this.state; + return (checkbox1 === true && checkbox2 === true); }; closeModal = (accept) => { if (accept) { this.props.toggleDistrustConfirmed(); } else { - this.props.history.push('/'); + this.props.history.push(`/`); } }; @@ -50,15 +52,15 @@ class TermsAndConditions extends Component { return ( - - { snippets.i_header } - + id = { `WarningModal` } + mountNode = { document.getElementById(`App`) } + size = { `large` } + open = { !termsAccepted } + closeOnDimmerClick = { false } + closeOnEscape = { false }> + + { snippets.i_header } + { snippets.i_warning } @@ -66,49 +68,47 @@ class TermsAndConditions extends Component {

{ snippets.i_formInstructions }

+ className = { `radio-yes-no` } + key = { `ReqCkBx1` }> {return this.handleChange('checkbox1');} } /> - - - { snippets.i_checkboxLabel1 } + onClick = { () => { return this.handleChange(`checkbox1`); } } /> + { snippets.i_checkboxLabel1 }
+ className = { `radio-yes-no` } + key = { `ReqCkBx2` }> {return this.handleChange('checkbox2');} } /> - - - { snippets.i_checkboxLabel2 } + onClick = { () => { return this.handleChange(`checkbox2`); } } /> + { snippets.i_checkboxLabel2 }
- - ); // End return() - } // End render() + ); // Ends return() + }; // Ends render() }; -export default withRouter(TermsAndConditions); +const PredictionsWarning = withRouter(PredictionsWarningComp); + + +export { PredictionsWarning }; diff --git a/src/components/prompts/ReactRouterLeaveListener.js b/src/components/prompts/ReactRouterLeaveListener.js index dafc3fa9..eecd5fa2 100644 --- a/src/components/prompts/ReactRouterLeaveListener.js +++ b/src/components/prompts/ReactRouterLeaveListener.js @@ -24,29 +24,30 @@ import { Prompt } from 'react-router-dom'; class ReactRouterLeaveListener extends React.Component { componentDidMount() { - let { confirmer, askForFeedback } = this.props; + let { + confirmer, + askForFeedback, + } = this.props; const tempConfirm = (message, reactCallback) => { // `message` is passed indirectly to `` - return askForFeedback(reactCallback, { message: 'default' }); + return askForFeedback(reactCallback, { message: `default` }); }; // Temporarily use our custom function confirmer.set(tempConfirm); - } + }; componentWillUnmount() { // Restore React Router's standard functionality this.props.confirmer.unset(); - } + }; getConfirmationMessage = (location) => { - // Allow component consumer to determine whether to request confirmation based on - // destination location - if (typeof this.props.shouldRequestConfirmation === 'function') { - if ( - !this.props.shouldRequestConfirmation({ location }) - ) { + // Allow component consumer to determine whether to request + // confirmation based on destination location + if (typeof this.props.shouldRequestConfirmation === `function`) { + if (!this.props.shouldRequestConfirmation({ location })) { return true; } } @@ -60,10 +61,12 @@ class ReactRouterLeaveListener extends React.Component { // This is always invisible and waits for the user // to navigate to a different React Page/Route. // This message doesn't usually show up, but sometimes does. - return ; - } -} + return ( + + ); + }; +}; -export default ReactRouterLeaveListener; +export { ReactRouterLeaveListener }; diff --git a/src/containers/VisitPage.js b/src/containers/VisitPage.js index 28e6a70d..d4015b19 100644 --- a/src/containers/VisitPage.js +++ b/src/containers/VisitPage.js @@ -17,15 +17,15 @@ import { CLIENT_DEFAULTS } from '../utils/CLIENT_DEFAULTS'; // Our Components // import AlertSidebar from '../AlertSidebar' import { BrowserLeaveListener } from '../components/prompts/BrowserLeaveListener'; -import ReactRouterLeaveListener from '../components/prompts/ReactRouterLeaveListener'; +import { ReactRouterLeaveListener } from '../components/prompts/ReactRouterLeaveListener'; import { ErrorListener } from '../components/prompts/ErrorListener'; -import FeedbackPrompt from '../components/prompts/FeedbackPrompt'; +import { FeedbackPrompt } from '../components/prompts/FeedbackPrompt'; import { FeedbackForm } from '../components/prompts/FeedbackForm'; import { FeedbackAnytime } from '../components/prompts/FeedbackAnytime'; +import { PredictionsWarning } from '../components/prompts/PredictionsWarning'; import StepBar from '../components/StepBar'; import { BigButton } from '../forms/inputs'; import { ButtonReset } from '../forms/ButtonReset'; -import PredictionsWarning from '../components/prompts/PredictionsWarning'; import { STEP_VALS } from '../forms/STEP_VALS'; class VisitPage extends Component { diff --git a/src/test/components/prompts/FeedbackPrompt.test.js b/src/test/components/prompts/FeedbackPrompt.test.js index 9484b0b6..a18aa8f5 100644 --- a/src/test/components/prompts/FeedbackPrompt.test.js +++ b/src/test/components/prompts/FeedbackPrompt.test.js @@ -2,7 +2,7 @@ import React from 'react'; import { mount } from 'enzyme'; -import FeedbackPrompt from '../../../components/prompts/FeedbackPrompt'; +import { FeedbackPrompt } from '../../../components/prompts/FeedbackPrompt'; test(` renders`, () => { let isBlocking = true; From 0cc38f58546d56d511be7a675f2881587be76467 Mon Sep 17 00:00:00 2001 From: knod Date: Sat, 24 Nov 2018 21:10:18 -0500 Subject: [PATCH 3/5] Adds 'ends' comment where the start of process scrolls out of sight --- src/components/prompts/FeedbackForm.js | 7 ++++--- src/components/prompts/FeedbackPrompt.js | 2 +- src/components/prompts/PredictionsWarning.js | 4 ++-- src/components/prompts/ReactRouterLeaveListener.js | 2 +- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/prompts/FeedbackForm.js b/src/components/prompts/FeedbackForm.js index 66d3bec8..8f02c471 100644 --- a/src/components/prompts/FeedbackForm.js +++ b/src/components/prompts/FeedbackForm.js @@ -81,8 +81,9 @@ class AskPermission extends React.Component { { (submitType === null) ? (`Send`) : (null) } , - ]);} -} + ]); + }; +}; // Ends /** @@ -255,7 +256,7 @@ class FeedbackForm extends React.Component { ); }; -}; +}; // Ends export { diff --git a/src/components/prompts/FeedbackPrompt.js b/src/components/prompts/FeedbackPrompt.js index a782d013..3b1d017b 100644 --- a/src/components/prompts/FeedbackPrompt.js +++ b/src/components/prompts/FeedbackPrompt.js @@ -80,6 +80,6 @@ class FeedbackPrompt extends React.Component { ); }; -}; +}; // Ends export { FeedbackPrompt }; diff --git a/src/components/prompts/PredictionsWarning.js b/src/components/prompts/PredictionsWarning.js index fd32704f..3af51f31 100644 --- a/src/components/prompts/PredictionsWarning.js +++ b/src/components/prompts/PredictionsWarning.js @@ -104,9 +104,9 @@ class PredictionsWarningComp extends Component { - ); // Ends return() + ); // ends return() }; // Ends render() -}; +}; // Ends const PredictionsWarning = withRouter(PredictionsWarningComp); diff --git a/src/components/prompts/ReactRouterLeaveListener.js b/src/components/prompts/ReactRouterLeaveListener.js index eecd5fa2..7e38aaa9 100644 --- a/src/components/prompts/ReactRouterLeaveListener.js +++ b/src/components/prompts/ReactRouterLeaveListener.js @@ -67,6 +67,6 @@ class ReactRouterLeaveListener extends React.Component { message = { this.getConfirmationMessage } /> ); }; -}; +}; // Ends export { ReactRouterLeaveListener }; From bd691bb07fb729f0a9c943fa9352fc87435f952a Mon Sep 17 00:00:00 2001 From: knod Date: Wed, 28 Nov 2018 08:33:22 -0500 Subject: [PATCH 4/5] Switches inline handlers to members --- src/components/prompts/PredictionsWarning.js | 24 ++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/components/prompts/PredictionsWarning.js b/src/components/prompts/PredictionsWarning.js index 14470d0b..5d20e714 100644 --- a/src/components/prompts/PredictionsWarning.js +++ b/src/components/prompts/PredictionsWarning.js @@ -43,6 +43,22 @@ class PredictionsWarningComp extends Component { } }; + clickHandlerBox1 = () => { + return this.handleChange(`checkbox1`); + }; + + clickHandlerBox2 = () => { + return this.handleChange(`checkbox2`); + }; + + cancelHandler = () => { + return this.closeModal(false); + }; + + acceptHandler = () => { + return this.closeModal(true); + }; + render() { const { @@ -74,7 +90,7 @@ class PredictionsWarningComp extends Component { { return this.handleChange(`checkbox1`); } } /> + onClick = { this.clickHandlerBox1 } /> { translations.i_checkboxLabel1 } @@ -86,19 +102,19 @@ class PredictionsWarningComp extends Component { { return this.handleChange(`checkbox2`); } } /> + onClick = { this.clickHandlerBox2 } /> { translations.i_checkboxLabel2 } - From 9b398a018ae92b632f6876eed63404b70bc7fe86 Mon Sep 17 00:00:00 2001 From: knod Date: Thu, 29 Nov 2018 09:17:25 -0500 Subject: [PATCH 5/5] Messes with names --- src/components/prompts/PredictionsWarning.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/prompts/PredictionsWarning.js b/src/components/prompts/PredictionsWarning.js index 5d20e714..2ee19c43 100644 --- a/src/components/prompts/PredictionsWarning.js +++ b/src/components/prompts/PredictionsWarning.js @@ -15,7 +15,7 @@ import { * @param {function} toggleDistrustConfirmed - function to set the termsAccepted in app state * @param {object} translations - object containing translations */ -class PredictionsWarningComp extends Component { +class PredictionsWarning extends Component { state = { checkbox1: false, @@ -122,9 +122,9 @@ class PredictionsWarningComp extends Component { ); // ends return() }; // Ends render() -}; // Ends +}; // Ends -const PredictionsWarning = withRouter(PredictionsWarningComp); +const wrappedWarning = withRouter(PredictionsWarning); -export { PredictionsWarning }; +export { wrappedWarning as PredictionsWarning };