fix(content): change in input validation to use react query instead of redux

Author: jesusbalderramawgu

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

@@ -19,6 +19,7 @@ import * as hooks from './hooks';
 import { ProblemTypeKeys } from '../../../../../data/constants/problem';
 import ExpandableTextArea from '../../../../../sharedComponents/ExpandableTextArea';
 import { answerRangeFormatRegex } from '../../../data/OLXParser';
+import { useValidateInputBlock } from '../../../data/apiHooks';
 
 const AnswerOption = ({
   answer,
@@ -28,12 +29,10 @@ 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);
   const blockId = useSelector(selectors.app.blockId);
-
   const removeAnswer = hooks.removeAnswer({ answer, dispatch });
   const setAnswer = hooks.setAnswer({ answer, hasSingleAnswer, dispatch });
   const setAnswerTitle = hooks.setAnswerTitle({
@@ -45,6 +44,7 @@ const AnswerOption = ({
   const setSelectedFeedback = hooks.setSelectedFeedback({ answer, hasSingleAnswer, dispatch });
   const setUnselectedFeedback = hooks.setUnselectedFeedback({ answer, hasSingleAnswer, dispatch });
   const { isFeedbackVisible, toggleFeedback } = hooks.useFeedback(answer);
+  const { data = { is_valid: true }, mutate } = useValidateInputBlock();
 
   const staticRootUrl = isLibrary
     ? `${getConfig().STUDIO_BASE_URL}/library_assets/blocks/${blockId}/`
@@ -72,18 +72,21 @@ const AnswerOption = ({
     }
     if (problemType !== ProblemTypeKeys.NUMERIC || !answer.isAnswerRange) {
       return (
-        <Form.Group isInvalid={!isNumericInputValid}>
+        <Form.Group isInvalid={!data?.is_valid ?? true}>
           <Form.Control
             as="textarea"
             className="answer-option-textarea text-gray-500 small"
             autoResize
             rows={1}
             value={answer.title}
-            onChange={setAnswerTitle}
+            onChange={(e) => {
+              setAnswerTitle(e);
+              mutate({ title: e.target.value });
+            }}
             placeholder={intl.formatMessage(messages.answerTextboxPlaceholder)}
 
           />
-          {!isNumericInputValid && (
+          {(!data?.is_valid ?? true) && (
           <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, thunkActions } from '../../../../../data/redux';
+import { actions } from '../../../../../data/redux';
 import { ProblemTypeKeys } from '../../../../../data/constants/problem';
 import { fetchEditorContent } from '../hooks';
 
@@ -29,17 +29,6 @@ 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,
@@ -54,11 +43,6 @@ 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) => {
@@ -129,5 +113,4 @@ export default {
   useFeedback,
   isSingleAnswerProblem,
   useAnswerContainer,
-  validateInputBlock,
 };

src/editors/containers/ProblemEditor/data/apiHooks.ts

@@ -0,0 +1,19 @@
+import { useMutation } from '@tanstack/react-query';
+import { getConfig } from '@edx/frontend-platform';
+import api from '@src/editors/data/services/cms/api';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
+export const useValidateInputBlock = () => useMutation({
+  mutationFn: async ({ title }) => {
+    try {
+      const res = await api.validateBlockNumericInput({ studioEndpointUrl: `${getApiBaseUrl()}`, data: { formula: title } });
+      return res.data;
+    } catch (err) {
+      return {
+        is_valid: false,
+        error: err.response?.data?.error ?? 'Unknown error',
+      };
+    }
+  },
+});

src/editors/data/redux/index.ts

@@ -157,7 +157,6 @@ 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/problem/reducers.ts

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

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

@@ -18,7 +18,6 @@ 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/thunkActions/problem.ts

@@ -138,19 +138,6 @@ 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, validateBlockNumericInput,
+  initializeProblem, switchEditor, switchToAdvancedEditor, fetchAdvancedSettings,
 };

src/editors/data/redux/thunkActions/requests.js

@@ -485,21 +485,6 @@ 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,
@@ -522,5 +507,4 @@ export default StrictDict({
   fetchVideoFeatures,
   uploadVideo,
   getHandlerlUrl,
-  validateNumericInput,
 });

src/editors/data/services/cms/api.ts

@@ -392,10 +392,9 @@ export const apiMethods = {
   ),
   validateBlockNumericInput: ({
     studioEndpointUrl,
-    blockId,
     data,
   }) => post(
-    urls.validateNumericInputUrl({ studioEndpointUrl, blockId }),
+    urls.validateNumericInputUrl({ studioEndpointUrl }),
     data,
   ),
 };