feat(validation): validation added to numeric input with new endpoint to see if is a valid math expression

Author: jesusbalderramawgu

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx

@@ -18,7 +18,7 @@ import { FeedbackBox } from './components/Feedback';
 import * as hooks from './hooks';
 import { ProblemTypeKeys } from '../../../../../data/constants/problem';
 import ExpandableTextArea from '../../../../../sharedComponents/ExpandableTextArea';
-import { answerRangeFormatRegex, numericRegex } from '../../../data/OLXParser';
+import { answerRangeFormatRegex } from '../../../data/OLXParser';
 
 const AnswerOption = ({
   answer,
@@ -28,6 +28,7 @@ const AnswerOption = ({
   const dispatch = useDispatch();
 
   const problemType = useSelector(selectors.problem.problemType);
+  const isNumericInputValid = useSelector(selectors.problem.isNumericInputValid);
   const images = useSelector(selectors.app.images);
   const isLibrary = useSelector(selectors.app.isLibrary);
   const learningContextId = useSelector(selectors.app.learningContextId);
@@ -53,10 +54,6 @@ const AnswerOption = ({
     const cleanedValue = value.replace(/^\s+|\s+$/g, '');
     return !cleanedValue.length || answerRangeFormatRegex.test(cleanedValue);
   };
-  const validateAnswerNumeric = (value) => {
-    const cleanedValue = (value ?? '').trim();
-    return !cleanedValue.length || numericRegex.test(cleanedValue);
-  };
 
   const getInputArea = () => {
     if ([ProblemTypeKeys.SINGLESELECT, ProblemTypeKeys.MULTISELECT].includes(problemType)) {
@@ -74,9 +71,8 @@ const AnswerOption = ({
       );
     }
     if (problemType !== ProblemTypeKeys.NUMERIC || !answer.isAnswerRange) {
-      const isValidValue = validateAnswerNumeric(answer.title);
       return (
-        <Form.Group isInvalid={!isValidValue}>
+        <Form.Group isInvalid={!isNumericInputValid}>
           <Form.Control
             as="textarea"
             className="answer-option-textarea text-gray-500 small"
@@ -87,7 +83,7 @@ const AnswerOption = ({
             placeholder={intl.formatMessage(messages.answerTextboxPlaceholder)}
 
           />
-          {!isValidValue && (
+          {!isNumericInputValid && (
           <Form.Control.Feedback type="invalid">
             <FormattedMessage {...messages.answerNumericErrorText} />
           </Form.Control.Feedback>

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.js

@@ -5,7 +5,7 @@ import { StrictDict } from '../../../../../utils';
 // should be re-thought and cleaned up to avoid this pattern.
 // eslint-disable-next-line import/no-self-import
 import * as module from './hooks';
-import { actions } from '../../../../../data/redux';
+import { actions, thunkActions } from '../../../../../data/redux';
 import { ProblemTypeKeys } from '../../../../../data/constants/problem';
 import { fetchEditorContent } from '../hooks';
 
@@ -29,6 +29,17 @@ export const setAnswer = ({ answer, hasSingleAnswer, dispatch }) => (payload) =>
   dispatch(actions.problem.updateAnswer({ id: answer.id, hasSingleAnswer, ...payload }));
 };
 
+export const validateInputBlock = ({
+  title, dispatch,
+}) => {
+  if (!title) {
+    return;
+  }
+  dispatch(thunkActions.problem.validateBlockNumericInput({
+    title,
+  }));
+};
+
 export const setAnswerTitle = ({
   answer,
   hasSingleAnswer,
@@ -43,6 +54,11 @@ export const setAnswerTitle = ({
   if (isDirty !== undefined) {
     dispatch(actions.problem.setDirty(isDirty));
   }
+
+  // For numeric problems, validate input on title change
+  if (problemType === ProblemTypeKeys.NUMERIC) {
+    validateInputBlock({ title, dispatch });
+  }
 };
 
 export const setSelectedFeedback = ({ answer, hasSingleAnswer, dispatch }) => (value) => {
@@ -106,5 +122,12 @@ export const useAnswerContainer = ({ answers, updateField }) => {
 };
 
 export default {
-  state, removeAnswer, setAnswer, setAnswerTitle, useFeedback, isSingleAnswerProblem, useAnswerContainer,
+  state,
+  removeAnswer,
+  setAnswer,
+  setAnswerTitle,
+  useFeedback,
+  isSingleAnswerProblem,
+  useAnswerContainer,
+  validateInputBlock,
 };

src/editors/containers/ProblemEditor/data/OLXParser.js

@@ -96,7 +96,6 @@ export const responseKeys = [
  * []
  */
 export const answerRangeFormatRegex = /^[([]\s*-?(?:\d+(?:\.\d+)?|\d+\/\d+)\s*,\s*-?(?:\d+(?:\.\d+)?|\d+\/\d+)\s*[)\]]$/m;
-export const numericRegex = /^[+-]?(\d+(\.\d*)?|\.\d+)$/;
 export const stripNonTextTags = ({ input, tag }) => {
   const stripedTags = {};
   Object.entries(input).forEach(([key, value]) => {

src/editors/data/constants/requests.ts

@@ -30,4 +30,5 @@ export const RequestKeys = StrictDict({
   fetchAdvancedSettings: 'fetchAdvancedSettings',
   fetchVideoFeatures: 'fetchVideoFeatures',
   getHandlerUrl: 'getHandlerUrl',
+  validateBlockNumericInput: 'validateBlockNumericInput',
 } as const);

src/editors/data/images/numericalInput.png

@@ -157,6 +157,7 @@ export interface EditorState {
     rawOLX: string;
     rawMarkdown: string;
     problemType: null | ProblemType | AdvancedProblemType;
+    isNumericInputValid: boolean;
     /**
      * Is the "markdown" editor currently active (as opposed to visual or advanced editors)
      * This is confusingly named, and different from `isMarkdownEditorEnabledForContext`

src/editors/data/redux/index.ts

@@ -13,6 +13,7 @@ const initialState: EditorState['problem'] = {
   rawMarkdown: '',
   isMarkdownEditorEnabled: false,
   problemType: null,
+  isNumericInputValid: true,
   question: '',
   answers: [],
   correctAnswerCount: 0,

src/editors/data/redux/problem/reducers.ts

@@ -18,6 +18,7 @@ export const simpleSelectors = {
   defaultSettings: mkSimpleSelector(problemData => problemData.defaultSettings),
   completeState: mkSimpleSelector(problemData => problemData),
   isDirty: mkSimpleSelector(problemData => problemData.isDirty),
+  isNumericInputValid: mkSimpleSelector(problemData => problemData.isNumericInputValid),
 };
 
 export default simpleSelectors;

src/editors/data/redux/problem/selectors.ts

@@ -138,6 +138,19 @@ export const initializeProblem = (blockValue) => (dispatch, getState) => {
   }
 };
 
+export const validateBlockNumericInput = ({ title, ...rest }) => (dispatch) => {
+  dispatch(requests.validateNumericInput({
+    title,
+    ...rest,
+    onSuccess: (response) => {
+      dispatch(actions.problem.updateField({ isNumericInputValid: response.data.is_valid }));
+    },
+    onFailure: () => {
+      dispatch(actions.problem.updateField({ isNumericInputValid: false }));
+    },
+  }));
+};
+
 export default {
-  initializeProblem, switchEditor, switchToAdvancedEditor, fetchAdvancedSettings,
+  initializeProblem, switchEditor, switchToAdvancedEditor, fetchAdvancedSettings, validateBlockNumericInput,
 };

src/editors/data/redux/thunkActions/problem.ts

@@ -485,6 +485,21 @@ export const uploadVideo = ({ data, ...rest }) => (dispatch, getState) => {
   }));
 };
 
+export const validateNumericInput = ({ title, ...rest }) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.validateBlockNumericInput,
+    promise: api.validateBlockNumericInput({
+      blockId: selectors.app.blockId(getState()),
+      blockType: selectors.app.blockType(getState()),
+      learningContextId: selectors.app.learningContextId(getState()),
+      data: { formula: title },
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+      title: selectors.app.blockTitle(getState()),
+    }),
+    ...rest,
+  }));
+};
+
 export default StrictDict({
   fetchBlock,
   fetchStudioView,
@@ -507,4 +522,5 @@ export default StrictDict({
   fetchVideoFeatures,
   uploadVideo,
   getHandlerlUrl,
+  validateNumericInput,
 });