[#37] Prepare data by changing valid keys in Form Editor

frontend/src/pages/forms/Editor.js

@@ -2,8 +2,8 @@ import React, { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import WebformEditor from "akvo-react-form-editor";
 import "akvo-react-form-editor/dist/index.css"; /* REQUIRED */
-import snakeCase from "lodash/snakeCase";
-import { api } from "../../lib";
+
+import { api, prepareFormData, prepareFormSubmission } from "../../lib";
 import { GlobalStore } from "../../store";
 import { Spin, notification } from "antd";
 
@@ -18,36 +18,13 @@ const Editor = ({ isAddNew }) => {
   useEffect(() => {
     if (!Object.keys(formDef).length && !isAddNew) {
       api.get(`form/${formId}`).then((res) => {
-        setFormDef(res.data);
+        setFormDef(prepareFormData(res.data));
       });
     }
   }, [formId, formDef, isAddNew]);
 
-  const camelToSnake = (obj) => {
-    const newObj = {};
-    for (const key in obj) {
-      if (Object.prototype.hasOwnProperty.call(obj, key)) {
-        const newKey = key.replace(/([A-Z])/g, "_$1").toLowerCase();
-        newObj[newKey] = obj[key];
-      }
-    }
-    return newObj;
-  };
-
   const onSave = (payload) => {
-    const data = {
-      ...payload,
-      question_group: payload?.question_group?.map((qg) => ({
-        ...qg,
-        name: qg?.name || snakeCase(qg?.label),
-        question: qg?.question
-          ?.map((q) => camelToSnake(q))
-          .map((q) => ({
-            ...q,
-            name: q?.name || snakeCase(q?.label),
-          })),
-      })),
-    };
+    const data = prepareFormSubmission(payload);
     delete data?.displayOnly;
     const apiCall =
       isAddNew && !post ? api.post("form", data) : api.put("form", data);