Skip to content

Commit 368c226

Browse files
Gregory-PereiraGregory-Pereira
authored
Merge pull request #565 from vishnoianil/update-skill-tokens
hold:User words as tokens for skill question and answer
2 parents 86eced1 + aa29c11 commit 368c226

File tree

2 files changed

+86
-50
lines changed

2 files changed

+86
-50
lines changed

‎src/components/Contribute/Skill/Github/index.tsx

+44-26
Original file line numberDiff line numberDiff line change
@@ -166,22 +166,34 @@ export const SkillFormGithub: React.FunctionComponent<SkillFormProps> = ({ skill
166166
return ValidatedOptions.success;
167167
};
168168

169-
const validateQuestion = (question: string): ValidatedOptions => {
170-
if (question.length > 0 && question.length < 250) {
171-
setDisableAction(!checkSkillFormCompletion(skillFormData));
172-
return ValidatedOptions.success;
169+
const validateQuestion = (question: string) => {
170+
const questionStr = question.trim();
171+
if (questionStr.length === 0) {
172+
setDisableAction(true);
173+
return { msg: 'Question is required', status: ValidatedOptions.error };
174+
}
175+
const tokens = questionStr.split(/\s+/);
176+
if (tokens.length > 0 && tokens.length < 250) {
177+
setDisableAction(!checkSkillFormCompletion(skillFormData, true));
178+
return { msg: 'Valid input', status: ValidatedOptions.success };
173179
}
174180
setDisableAction(true);
175-
return ValidatedOptions.error;
181+
return { msg: 'Question must be less than 250 words. Current word count: ' + tokens.length, status: ValidatedOptions.error };
176182
};
177183

178-
const validateAnswer = (answer: string): ValidatedOptions => {
179-
if (answer.length > 0 && answer.length < 250) {
180-
setDisableAction(!checkSkillFormCompletion(skillFormData));
181-
return ValidatedOptions.success;
184+
const validateAnswer = (answer: string) => {
185+
const answerStr = answer.trim();
186+
if (answerStr.length === 0) {
187+
setDisableAction(true);
188+
return { msg: 'Answer is required', status: ValidatedOptions.error };
189+
}
190+
const tokens = answerStr.split(/\s+/);
191+
if (tokens.length > 0 && tokens.length < 250) {
192+
setDisableAction(!checkSkillFormCompletion(skillFormData, true));
193+
return { msg: 'Valid input', status: ValidatedOptions.success };
182194
}
183195
setDisableAction(true);
184-
return ValidatedOptions.error;
196+
return { msg: 'Answer must be less than 250 words. Current word count: ' + tokens.length, status: ValidatedOptions.error };
185197
};
186198

187199
const handleContextInputChange = (seedExampleIndex: number, contextValue: string): void => {
@@ -225,14 +237,17 @@ export const SkillFormGithub: React.FunctionComponent<SkillFormProps> = ({ skill
225237

226238
const handleAnswerBlur = (seedExampleIndex: number): void => {
227239
setSeedExamples(
228-
seedExamples.map((seedExample: SkillSeedExample, index: number) =>
229-
index === seedExampleIndex
230-
? {
231-
...seedExample,
232-
isAnswerValid: validateAnswer(seedExample.answer)
233-
}
234-
: seedExample
235-
)
240+
seedExamples.map((seedExample: SkillSeedExample, index: number) => {
241+
if (index === seedExampleIndex) {
242+
const { msg, status } = validateAnswer(seedExample.answer);
243+
return {
244+
...seedExample,
245+
isAnswerValid: status,
246+
answerValidationError: msg
247+
};
248+
}
249+
return seedExample;
250+
})
236251
);
237252
};
238253

@@ -251,14 +266,17 @@ export const SkillFormGithub: React.FunctionComponent<SkillFormProps> = ({ skill
251266

252267
const handleQuestionBlur = (seedExampleIndex: number): void => {
253268
setSeedExamples(
254-
seedExamples.map((seedExample: SkillSeedExample, index: number) =>
255-
index === seedExampleIndex
256-
? {
257-
...seedExample,
258-
isQuestionValid: validateQuestion(seedExample.question)
259-
}
260-
: seedExample
261-
)
269+
seedExamples.map((seedExample: SkillSeedExample, index: number) => {
270+
if (index === seedExampleIndex) {
271+
const { msg, status } = validateQuestion(seedExample.question);
272+
return {
273+
...seedExample,
274+
isQuestionValid: status,
275+
questionValidationError: msg
276+
};
277+
}
278+
return seedExample;
279+
})
262280
);
263281
};
264282

‎src/components/Contribute/Skill/Native/index.tsx

+42-24
Original file line numberDiff line numberDiff line change
@@ -136,22 +136,34 @@ export const SkillFormNative: React.FunctionComponent<SkillFormProps> = ({ skill
136136
return ValidatedOptions.success;
137137
};
138138

139-
const validateQuestion = (question: string): ValidatedOptions => {
140-
if (question.length > 0 && question.length < 250) {
139+
const validateQuestion = (question: string) => {
140+
const questionStr = question.trim();
141+
if (questionStr.length === 0) {
142+
setDisableAction(true);
143+
return { msg: 'Question is required', status: ValidatedOptions.error };
144+
}
145+
const tokens = questionStr.split(/\s+/);
146+
if (tokens.length > 0 && tokens.length < 250) {
141147
setDisableAction(!checkSkillFormCompletion(skillFormData, true));
142-
return ValidatedOptions.success;
148+
return { msg: 'Valid input', status: ValidatedOptions.success };
143149
}
144150
setDisableAction(true);
145-
return ValidatedOptions.error;
151+
return { msg: 'Question must be less than 250 words. Current word count: ' + tokens.length, status: ValidatedOptions.error };
146152
};
147153

148-
const validateAnswer = (answer: string): ValidatedOptions => {
149-
if (answer.length > 0 && answer.length < 250) {
154+
const validateAnswer = (answer: string) => {
155+
const answerStr = answer.trim();
156+
if (answerStr.length === 0) {
157+
setDisableAction(true);
158+
return { msg: 'Answer is required', status: ValidatedOptions.error };
159+
}
160+
const tokens = answerStr.split(/\s+/);
161+
if (tokens.length > 0 && tokens.length < 250) {
150162
setDisableAction(!checkSkillFormCompletion(skillFormData, true));
151-
return ValidatedOptions.success;
163+
return { msg: 'Valid input', status: ValidatedOptions.success };
152164
}
153165
setDisableAction(true);
154-
return ValidatedOptions.error;
166+
return { msg: 'Answer must be less than 250 words. Current word count: ' + tokens.length, status: ValidatedOptions.error };
155167
};
156168

157169
const handleContextInputChange = (seedExampleIndex: number, contextValue: string): void => {
@@ -195,14 +207,17 @@ export const SkillFormNative: React.FunctionComponent<SkillFormProps> = ({ skill
195207

196208
const handleAnswerBlur = (seedExampleIndex: number): void => {
197209
setSeedExamples(
198-
seedExamples.map((seedExample: SkillSeedExample, index: number) =>
199-
index === seedExampleIndex
200-
? {
201-
...seedExample,
202-
isAnswerValid: validateAnswer(seedExample.answer)
203-
}
204-
: seedExample
205-
)
210+
seedExamples.map((seedExample: SkillSeedExample, index: number) => {
211+
if (index === seedExampleIndex) {
212+
const { msg, status } = validateAnswer(seedExample.answer);
213+
return {
214+
...seedExample,
215+
isAnswerValid: status,
216+
answerValidationError: msg
217+
};
218+
}
219+
return seedExample;
220+
})
206221
);
207222
};
208223

@@ -221,14 +236,17 @@ export const SkillFormNative: React.FunctionComponent<SkillFormProps> = ({ skill
221236

222237
const handleQuestionBlur = (seedExampleIndex: number): void => {
223238
setSeedExamples(
224-
seedExamples.map((seedExample: SkillSeedExample, index: number) =>
225-
index === seedExampleIndex
226-
? {
227-
...seedExample,
228-
isQuestionValid: validateQuestion(seedExample.question)
229-
}
230-
: seedExample
231-
)
239+
seedExamples.map((seedExample: SkillSeedExample, index: number) => {
240+
if (index === seedExampleIndex) {
241+
const { msg, status } = validateQuestion(seedExample.question);
242+
return {
243+
...seedExample,
244+
isQuestionValid: status,
245+
questionValidationError: msg
246+
};
247+
}
248+
return seedExample;
249+
})
232250
);
233251
};
234252

0 commit comments

Comments
 (0)