From 5099b5cbe9a57c5cf902e9e18813f60f55eaa797 Mon Sep 17 00:00:00 2001 From: Maksym Mykhailenko Date: Mon, 11 Nov 2019 11:41:37 +0800 Subject: [PATCH] fix: error during changing selected categories If we select category, after select skills and after change the list of selected categories there would be an error. It's fixed. Ref issue #3369 --- .../SkillsQuestion/SkillsQuestion.jsx | 35 +++++++++++++------ 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/src/projects/detail/components/SkillsQuestion/SkillsQuestion.jsx b/src/projects/detail/components/SkillsQuestion/SkillsQuestion.jsx index 19c60bd48..71bc7825a 100644 --- a/src/projects/detail/components/SkillsQuestion/SkillsQuestion.jsx +++ b/src/projects/detail/components/SkillsQuestion/SkillsQuestion.jsx @@ -9,6 +9,27 @@ import { TC_API_URL } from '../../../../config/constants' let cachedOptions +/** + * If `categoriesMapping` is defined - filter options using selected categories. + * Otherwise returns all `options`. + * + * @param {Object} categoriesMapping form data and API model categories mapping + * @param {Array} selectedCategories selected categories in the form + * @param {Array} options all possible options + * + * @returns {Array} available options + */ +const getAvailableOptions = (categoriesMapping, selectedCategories, options) => { + if (categoriesMapping) { + const mappedCategories = _.map(selectedCategories, (category) => categoriesMapping[category] ? categoriesMapping[category].toLowerCase() : null) + const availableOptions = options.filter(option => _.intersection((option.categories || []).map(c => c.toLowerCase()), mappedCategories).length > 0) + + return availableOptions + } + + return options +} + class SkillsQuestion extends React.Component { constructor(props) { super(props) @@ -56,12 +77,9 @@ class SkillsQuestion extends React.Component { const selectedCategories = _.get(currentProjectData, categoriesField, []) if (selectedCategories.length !== prevSelectedCategories.length) { - const mappedPrevSelectedCategories = _.map(prevSelectedCategories, (category) => categoriesMapping[category] ? categoriesMapping[category].toLowerCase() : null) - const mappedSelectedCategories = _.map(selectedCategories, (category) => categoriesMapping[category] ? categoriesMapping[category].toLowerCase() : null) - const currentValues = getValue() || [] - const prevAvailableOptions = options.filter(option => _.intersection((option.categories || []).map(c => c.toLowerCase()), mappedPrevSelectedCategories).length > 0) - const nextAvailableOptions = options.filter(option => _.intersection((option.categories || []).map(c => c.toLowerCase()), mappedSelectedCategories).length > 0) + const prevAvailableOptions = getAvailableOptions(categoriesMapping, prevSelectedCategories, options) + const nextAvailableOptions = getAvailableOptions(categoriesMapping, selectedCategories, options) const prevValues = currentValues.filter(skill => _.some(prevAvailableOptions, skill)) const nextValues = currentValues.filter(skill => _.some(nextAvailableOptions, skill)) @@ -112,13 +130,10 @@ class SkillsQuestion extends React.Component { const { options, customOptionValue } = this.state const selectedCategories = _.get(currentProjectData, categoriesField, []) - const mappedCategories = categoriesMapping && _.map(selectedCategories, (category) => categoriesMapping[category] ? categoriesMapping[category].toLowerCase() : null) // if have a mapping for categories, then filter options, otherwise use all options - const availableOptions = (categoriesMapping - ? options.filter(option => _.intersection((option.categories || []).map(c => c.toLowerCase()), mappedCategories).length > 0) - : options - ).map(option => _.pick(option, ['id', 'name'])) + const availableOptions = getAvailableOptions(categoriesMapping, selectedCategories, options) + .map(option => _.pick(option, ['id', 'name'])) let currentValues = getValue() || [] // remove from currentValues not available options but still keep created custom options without id