[Upd #71] Refactor with handler naming convention

kbss-cvut · Mar 22, 2022 · 11c7596 · 11c7596
1 parent 7e4d437
commit 11c7596
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 70 deletions.
diff --git a/src/components/Answer.jsx b/src/components/Answer.jsx
@@ -18,7 +18,7 @@ const Answer = (props) => {
   const formGenContext = React.useContext(FormGenContext);
   const { options } = React.useContext(ConfigurationContext);
 
-  const onValueChange = (value) => {
+  const handleValueChange = (value) => {
     const change = { ...props.answer };
     _setValue(change, value);
     props.onChange(props.index, change);
@@ -54,27 +54,27 @@ const Answer = (props) => {
         label={label}
         title={title}
         value={value}
-        onChange={onValueChange}
+        onChange={handleValueChange}
         options={options}
       />
     );
   };
 
   const _renderSelect = (value, label, title) => {
     return (
-      <SelectAnswer question={props.question} label={label} title={title} value={value} onChange={onValueChange} />
+      <SelectAnswer question={props.question} label={label} title={title} value={value} onChange={handleValueChange} />
     );
   };
 
   const _renderDateTimePicker = (value, label, title) => {
     return (
-      <DateTimeAnswer question={props.question} value={value} title={title} label={label} onChange={onValueChange} />
+      <DateTimeAnswer question={props.question} value={value} title={title} label={label} onChange={handleValueChange} />
     );
   };
 
   const _renderCheckbox = (value, label, title) => {
     return (
-      <CheckboxAnswer label={label} title={title} value={value} onChange={onValueChange} question={props.question} />
+      <CheckboxAnswer label={label} title={title} value={value} onChange={handleValueChange} question={props.question} />
     );
   };
 
@@ -84,7 +84,7 @@ const Answer = (props) => {
         label={label}
         title={title}
         value={value}
-        onChange={onValueChange}
+        onChange={handleValueChange}
         question={props.question}
         answer={props.answer}
       />
@@ -100,7 +100,7 @@ const Answer = (props) => {
         label={label}
         title={title}
         value={value}
-        onChange={onValueChange}
+        onChange={handleValueChange}
       />
     );
   };
@@ -113,7 +113,7 @@ const Answer = (props) => {
         label={label}
         title={title}
         value={value}
-        onChange={onValueChange}
+        onChange={handleValueChange}
         sparql={true}
       />
     );
@@ -127,7 +127,7 @@ const Answer = (props) => {
         label={label}
         title={title}
         value={value}
-        onChange={onValueChange}
+        onChange={handleValueChange}
         turtle={true}
       />
     );

diff --git a/src/components/FormManager.jsx b/src/components/FormManager.jsx
@@ -19,7 +19,7 @@ class FormManager extends React.Component {
     return this.context.getFormQuestionsData();
   };
 
-  onStepChange = (question, index, change) => {
+  handleStepChange = (question, index, change) => {
     this.context.updateFormQuestionsData(index, { ...question, ...change });
   };
 
@@ -34,7 +34,7 @@ class FormManager extends React.Component {
     return React.createElement(component, {
       key: question['@id'],
       question: question,
-      onChange: (index, change) => this.onStepChange(question, index, change),
+      onChange: (index, change) => this.handleStepChange(question, index, change),
       index: index
     });
   }

diff --git a/src/components/Question.jsx b/src/components/Question.jsx
@@ -61,25 +61,25 @@ export default class Question extends React.Component {
     }
   }
 
-  onAnswerChange = (answerIndex, change) => {
+  handleAnswerChange = (answerIndex, change) => {
     // is answerable section
     if (FormUtils.isSection(this.props.question)) {
       let expanded = !!FormUtils.resolveValue(change);
       this.setState({ expanded: expanded });
     }
 
-    this._onChange(Constants.HAS_ANSWER, answerIndex, change);
+    this._handleChange(Constants.HAS_ANSWER, answerIndex, change);
   };
 
-  onSubQuestionChange = (subQuestionIndex, change) => {
-    this._onChange(Constants.HAS_SUBQUESTION, subQuestionIndex, change);
+  handleSubQuestionChange = (subQuestionIndex, change) => {
+    this._handleChange(Constants.HAS_SUBQUESTION, subQuestionIndex, change);
   };
 
-  onCommentChange = (commentIndex, change) => {
-    this._onChange(Constants.HAS_COMMENT, commentIndex, change);
+  handleCommentChange = (commentIndex, change) => {
+    this._handleChange(Constants.HAS_COMMENT, commentIndex, change);
   };
 
-  _onChange(att, valueIndex, newValue) {
+  _handleChange(att, valueIndex, newValue) {
     let newState = { ...this.props.question };
     newState[att][valueIndex] = newValue;
     if (att === Constants.HAS_ANSWER) {
@@ -217,7 +217,7 @@ export default class Question extends React.Component {
   renderQuestionIcons() {
     const question = this.props.question;
     const options = this.context.options;
-    return QuestionStatic.renderIcons(question, options, this.onCommentChange, this.state.showIcon);
+    return QuestionStatic.renderIcons(question, options, this.handleCommentChange, this.state.showIcon);
   }
 
   renderHeaderExtension() {
@@ -298,8 +298,8 @@ export default class Question extends React.Component {
                   index={i}
                   answer={answers[i]}
                   question={question}
-                  onChange={this.onAnswerChange}
-                  onCommentChange={this.onCommentChange}
+                  onChange={this.handleAnswerChange}
+                  onCommentChange={this.handleCommentChange}
                   showIcon={this.state.showIcon}
               />
             </div>
@@ -410,7 +410,7 @@ export default class Question extends React.Component {
         element = React.createElement(component, {
           key: 'sub-question-' + i,
           question: question,
-          onChange: this.onSubQuestionChange,
+          onChange: this.handleSubQuestionChange,
           index: i
         });
       }

diff --git a/src/components/answer/DateTimeAnswer.jsx b/src/components/answer/DateTimeAnswer.jsx
@@ -26,7 +26,7 @@ const DateTimeAnswer = (props) => {
   // DatePicker does not know dateFormat "x", translate to datetime
   const datePickerFormat = dateFormat === 'x' ? componentsOptions.dateTimeAnswer.dateTimeFormat : dateFormat;
 
-  const onChange = (date) => {
+  const handleDateChange = (date) => {
     if (dateFormat === Constants.DATETIME_NUMBER_FORMAT) {
       props.onChange(Number(date));
     } else {
@@ -40,7 +40,7 @@ const DateTimeAnswer = (props) => {
       <DatePicker
         selected={value}
         placeholderText={datePickerFormat.toUpperCase()}
-        onChange={onChange}
+        onChange={handleDateChange}
         showTimeSelect={!isDate}
         showTimeSelectOnly={isTime}
         timeFormat="HH:mm"

diff --git a/src/components/answer/TypeaheadAnswer.jsx b/src/components/answer/TypeaheadAnswer.jsx
@@ -69,7 +69,7 @@ const TypeaheadAnswer = (props) => {
     setOptions(processTypeaheadOptions(props.question[Constants.HAS_OPTION], intl));
   }, [intl]);
 
-  const onOptionSelected = (option) => {
+  const handleOptionSelectedChange = (option) => {
     props.onChange(option ? option.id : null);
   };
 
@@ -96,7 +96,7 @@ const TypeaheadAnswer = (props) => {
         placeholder={''}
         getOptionLabel={(option) => option.name}
         getOptionValue={(option) => option.id}
-        onChange={onOptionSelected}
+        onChange={handleOptionSelectedChange}
         components={{ MenuList: OptimizedMenuList, Option: DescriptionOption }}
       />
     </FormGroup>

diff --git a/src/components/comment/CommentForm.jsx b/src/components/comment/CommentForm.jsx
@@ -15,25 +15,25 @@ const CommentForm = (props) => {
     formInputRef.current.focus();
   }, []);
 
-  const onValueChange = (e) => {
+  const handleValueChange = (e) => {
     setCommentValue(e.target.value);
   };
 
-  const onSubmitHandler = (e) => {
+  const handleFormSubmit = (e) => {
     e.preventDefault();
     props.onChange(commentValue);
     setCommentValue('');
   };
 
-  const onKeyUpHandler = (e) => {
-    if (e.key === 'Enter' && e.ctrlKey && commentValue.trim()) onSubmitHandler(e);
+  const handleFormKeyUp = (e) => {
+    if (e.key === 'Enter' && e.ctrlKey && commentValue.trim()) handleFormSubmit(e);
   };
 
-  const onClickHandler = (e) => {
+  const handleFormClick = (e) => {
     e.stopPropagation();
   };
 
-  const autoResizeTextArea = () => {
+  const handleTextAreaKeyPress = () => {
     const textArea = formInputRef.current;
     textArea.style.height = 'auto';
     let scrollHeight = textArea.scrollHeight;
@@ -44,7 +44,7 @@ const CommentForm = (props) => {
   };
 
   return (
-    <Form onSubmit={onSubmitHandler} onKeyUp={onKeyUpHandler} onClick={onClickHandler}>
+    <Form onSubmit={handleFormSubmit} onKeyUp={handleFormKeyUp} onClick={handleFormClick}>
       <Form.Group className="m-2" controlId="formBasicComment">
         <Col className="col-lg-12 p-0">
           <Row className="container-fluid p-0 m-0">
@@ -56,10 +56,10 @@ const CommentForm = (props) => {
                 placeholder={intl.formatMessage({ id: 'comment.form.placeholder' })}
                 required
                 value={commentValue}
-                onChange={onValueChange}
+                onChange={handleValueChange}
                 ref={formInputRef}
-                onKeyPress={autoResizeTextArea}
-                onKeyDown={autoResizeTextArea}
+                onKeyPress={handleTextAreaKeyPress}
+                onKeyDown={handleTextAreaKeyPress}
               />
               <Button className="comment-form-button" variant="primary" type="submit">
                 <ArrowRight />

diff --git a/src/components/comment/CommentList.tsx b/src/components/comment/CommentList.tsx
@@ -5,14 +5,14 @@ import { Rings } from 'react-loader-spinner';
 
 interface Props {
     comments: Array<any>,
-    deleteQuestionComment: () => void;
+    onDeleteCommentClick: (index: number) => void;
 }
 
-const CommentList = ({comments, deleteQuestionComment}: Props) => {
+const CommentList = ({comments, onDeleteCommentClick}: Props) => {
   const commentEndRef = useRef<null | HTMLDivElement>(null);
   const [isDeleting, setIsDeleting] = useState<boolean>(false);
 
-  const deleteCommentViewHandler = () => {
+  const handleDeleteViewComment = () => {
     setIsDeleting(true);
     setTimeout(() => {
       setIsDeleting(false);
@@ -41,8 +41,8 @@ const CommentList = ({comments, deleteQuestionComment}: Props) => {
                 commentValue={comment[Constants.HAS_COMMENT_VALUE]}
                 author={comment[Constants.HAS_AUTHOR] ? comment[Constants.HAS_AUTHOR] : null}
                 timestamp={comment[Constants.HAS_TIMESTAMP]}
-                deleteQuestionComment={deleteQuestionComment}
-                deleteCommentView={deleteCommentViewHandler}
+                onDeleteQuestionComment={onDeleteCommentClick}
+                onDeleteViewComment={handleDeleteViewComment}
                 index={index}
               />
             </div>

diff --git a/src/components/comment/CommentView.jsx b/src/components/comment/CommentView.jsx
@@ -94,26 +94,26 @@ const CommentView = (props) => {
     );
   };
 
-  const onMouseAuthorEventHandler = () => {
+  const handleCommentAuthorMouseEnter = () => {
     setShowIRI(!showIRI);
   };
 
-  const onMouseRecycleBinEventHandler = () => {
+  const handleCommentBinMouseEnter = () => {
         setShowRecycleBin(!showRecycleBin)
     }
 
-    const onClickDeleteQuestionCommentHandler = () => {
-        props.deleteQuestionComment(props.index);
-        props.deleteCommentView();
+    const handleDeleteCommentClick = () => {
+        props.onDeleteQuestionComment(props.index);
+        props.onDeleteViewComment();
     }
 
     return (
-        <div className="comment-content" onMouseEnter={onMouseRecycleBinEventHandler} onMouseLeave={onMouseRecycleBinEventHandler}>
+        <div className="comment-content" onMouseEnter={handleCommentBinMouseEnter} onMouseLeave={handleCommentBinMouseEnter}>
       <div className="row">
         <div
           className="col-auto comment-author"
-          onMouseEnter={onMouseAuthorEventHandler}
-          onMouseLeave={onMouseAuthorEventHandler}
+          onMouseEnter={handleCommentAuthorMouseEnter}
+          onMouseLeave={handleCommentAuthorMouseEnter}
         >
           {renderAuthor()}
         </div>
@@ -123,7 +123,7 @@ const CommentView = (props) => {
                         className="comment-delete emphasise-on-relevant-icon"
                         whileHover={{scale: 1.2}}
                         whileTap={{scale: 0.9}}
-                        onClick={onClickDeleteQuestionCommentHandler}>
+                        onClick={handleDeleteCommentClick}>
                         <RecycleBin/>
                     </motion.div>
                 : null }
@@ -139,8 +139,8 @@ CommentView.propTypes = {
   author: PropTypes.object.isRequired,
   timestamp: PropTypes.string.isRequired,
   commentValue: PropTypes.string.isRequired,
-  deleteQuestionComment: PropTypes.func.isRequired,
-  deleteCommentView: PropTypes.func.isRequired,
+  onDeleteQuestionComment: PropTypes.func.isRequired,
+  onDeleteViewComment: PropTypes.func.isRequired,
   index: PropTypes.number.isRequired
 };