Skip to content

Commit

Permalink
[Fix #69] Code refactor for better readability.
Browse files Browse the repository at this point in the history
  • Loading branch information
@LaChope
LaChope committed Nov 3, 2021
1 parent 67e3fc0 commit 24a6c53
Show file tree
Hide file tree
Showing 5 changed files with 62 additions and 36 deletions.
2 changes: 1 addition & 1 deletion src/components/Answer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ Answer.propTypes = {
onChange: PropTypes.func.isRequired,
onCommentChange: PropTypes.func.isRequired,
index: PropTypes.number,
icons: PropTypes.object
icons: PropTypes.array
};

export default Answer;
59 changes: 43 additions & 16 deletions src/components/Question.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import { CaretSquareUp, CaretSquareDown, InfoCircle } from '../styles/icons';
import { ConfigurationContext } from '../contexts/ConfigurationContext';
import classNames from 'classnames';
import QuestionCommentIcon from "./comment/QuestionCommentIcon";
import IconList from "./IconList";

// TODO Remove once the pretty layout is tested
const PRETTY_ANSWERABLE_LAYOUT = true;
Expand Down Expand Up @@ -98,6 +97,8 @@ export default class Question extends React.Component {

render() {
const question = this.props.question;
const options = this.context.options;

if (FormUtils.isHidden(question)) {
return null;
}
Expand Down Expand Up @@ -156,7 +157,7 @@ export default class Question extends React.Component {
{label}
</h6>
</li>
{this._renderIcons()}
{Question.renderIcons(question, options, this.onCommentChange)}
</ul>
</Accordion.Toggle>
{collapsible ? <Accordion.Collapse>{cardBody}</Accordion.Collapse> : { cardBody }}
Expand Down Expand Up @@ -211,7 +212,8 @@ export default class Question extends React.Component {
renderAnswers() {
const question = this.props.question,
children = [],
answers = this._getAnswers();
answers = this._getAnswers(),
options = this.context.options;
let cls;
let isTextarea;

Expand All @@ -234,7 +236,7 @@ export default class Question extends React.Component {
question={question}
onChange={this.onAnswerChange}
onCommentChange={this.onCommentChange}
icons={this._renderIcons()}
icons={Question.renderIcons(question, options, this.onCommentChange)}
/>
</div>
{this._renderUnits()}
Expand Down Expand Up @@ -316,7 +318,16 @@ export default class Question extends React.Component {
}

static renderQuestionHelp(question, options) {
if (!options.questionHelp || options.questionHelp === "enable") {
const icons = options.icons;
let questionHelpIcon;

This comment has been minimized.

Sign in to view

Copy link
@blcham

blcham Nov 3, 2021 •
edited

Collaborator

Redundancy. Why this is not separate function ?:

    let questionHelpIcon;

    for (let i = 0; i < icons.length; i++) {
      if (icons[i].id === Constants.ICONS.QUESTION_HELP) {
        questionHelpIcon = icons[i];
      }
    }

for (let i = 0; i < icons.length; i++) {
if (icons[i].id === Constants.ICONS.QUESTION_HELP) {
questionHelpIcon = icons[i];
}
}

if (!questionHelpIcon || questionHelpIcon.behavior === Constants.ICON_BEHAVIOR.ENABLE) {
if (question[Constants.HELP_DESCRIPTION]) {
return <HelpIcon
text={JsonLdUtils.getLocalized(question[Constants.HELP_DESCRIPTION], options.intl)}
Expand All @@ -327,27 +338,43 @@ export default class Question extends React.Component {
}

static renderQuestionComments = (question, options, onChange) => {
const icons = options.icons
let questionCommentsIcon;

This comment has been minimized.

Sign in to view

Copy link
@blcham

blcham Nov 3, 2021

Collaborator

see comment about redundancy.

for (let i = 0; i < icons.length; i++) {
if (icons[i].id === Constants.ICONS.QUESTION_COMMENTS) {
questionCommentsIcon = icons[i];
}
}

if (options.questionComments === "enable") {
if (questionCommentsIcon && questionCommentsIcon.behavior === Constants.ICON_BEHAVIOR.ENABLE) {
return <QuestionCommentIcon
question={question}
onChange={onChange}/>
}
return null;
}

_renderIcons() {
const question = this.props.question;
const options = this.context.options;
static renderIcons(question, options, onCommentChange) {
const icons = options.icons;
let iconsArray = [];
const renderQuestionHelp = Question.renderQuestionHelp(question, options);
const renderQuestionComments = Question.renderQuestionComments(question, options, this.onCommentChange);
const renderQuestionComments = Question.renderQuestionComments(question, options, onCommentChange);

return (
<IconList>
{renderQuestionHelp}
{renderQuestionComments}
</IconList>
);
for (let i = 0; i < icons.length; i++) {
if (icons[i].id === Constants.ICONS.QUESTION_COMMENTS) {
iconsArray.push(
<li key={i} className="icon-list-item">{renderQuestionComments}</li>
)
}
if (icons[i].id === Constants.ICONS.QUESTION_HELP) {
iconsArray.push(
<li key={i} className="icon-list-item">{renderQuestionHelp}</li>
)
}
}

return iconsArray;
}

_renderPrefixes() {
Expand Down
20 changes: 3 additions & 17 deletions src/components/wizard/WizardStep.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import Constants from '../../constants/Constants';
import { FormQuestionsContext } from '../../contexts/FormQuestionsContext';
import Question from '../Question';
import JsonLdObjectMap from "../../util/JsonLdObjectMap";
import IconList from "../IconList";


export default class WizardStep extends React.Component {
Expand Down Expand Up @@ -57,24 +56,11 @@ export default class WizardStep extends React.Component {
this.context.updateFormQuestionsData(this.props.stepIndex || index, { ...this.props.step, ...change });
};

_renderIcons = () => {
const question = this.context.getFormQuestionsData([this.props.stepIndex]);
const options = this.props.options;

const renderQuestionHelp = Question.renderQuestionHelp(question, options);
const renderQuestionComments = Question.renderQuestionComments(question, options, this.onCommentChange);

return (
<IconList>
{renderQuestionHelp}
{renderQuestionComments}
</IconList>
);
}

render() {

const categoryClass = Question._getQuestionCategoryClass(this.props.step);
const question = this.context.getFormQuestionsData([this.props.stepIndex]);
const options = this.props.options;

let questionComponent = this.props.mapComponent(this.props.step, Question);
let questionElement = React.createElement(questionComponent, {
Expand All @@ -90,7 +76,7 @@ export default class WizardStep extends React.Component {
<Card.Header className="bg-primary text-white" as="h6" id={this.props.step['@id']}>
<ul className="icon-list-items">
<li className="icon-list-item">{JsonLdUtils.getLocalized(this.props.step[JsonLdUtils.RDFS_LABEL], this.props.options.intl)}</li>
{this._renderIcons()}
{Question.renderIcons(question, options, this.onCommentChange)}
</ul>
</Card.Header>
<Card.Body className={categoryClass}>
Expand Down
11 changes: 11 additions & 0 deletions src/constants/Constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,4 +105,15 @@ export default class Constants {
static RDFS_LABEL = JsonLdUtils.RDFS_LABEL;
static RDFS_COMMENT = JsonLdUtils.RDFS_COMMENT;
static DEFAULT_HAS_CHILD = JsonLdUtils.DEFAULT_HAS_CHILD;

static ICONS = {
QUESTION_COMMENTS: "questionComments",
QUESTION_HELP: "questionHelp"
}

static ICON_BEHAVIOR = {
ENABLE: "enable",
DISABLE: "disable",
ON_HOVER: "onHover"
}
}
6 changes: 4 additions & 2 deletions test/rendering/TestApp.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,10 @@ class TestApp extends React.Component {
{id: "http://fel.cvut.cz/people/max-chopart", label: "Max Chopart"},
{id: "http://fel.cvut.cz/people/miroslav-blasko", label: "Miroslav Blasko"}],
currentUser: "http://fel.cvut.cz/people/max-chopart",
questionComments: "enable", // enable | <disable>
questionHelp: "enable" // <enable> | disable
icons: [

This comment has been minimized.

Sign in to view

Copy link
@blcham

blcham Nov 3, 2021 •
edited

Collaborator

We need to behave somehow if user does not configure "icons:".

Within some configuration file we want to have default behaviour when user does not specify anything there:

      icons: [
        {id: ICONS.QUESTION_HELP, behavior: ICON_BEHAVIOR.ENABLE},
        {id: ICONS.QUESTION_COMMENTS, behavior: ICON_BEHAVIOR.DISABLE}
      ]
{id: "questionHelp", behavior: "enable"}, // <enable> | disable
{id: "questionComments", behavior: "enable"} // enable | <disable>
]
};

return (
Expand Down

0 comments on commit 24a6c53

Please sign in to comment.