refactor(reducers): refactor reducers to prevent tsc type issues (#36)

cern-sis · May 14, 2024 · 040de3f · 040de3f
1 parent c0d46e8
commit 040de3f
Show file tree

Hide file tree

Showing 6 changed files with 288 additions and 283 deletions.
diff --git a/src/admin/components/Customize.jsx b/src/admin/components/Customize.jsx
@@ -1,28 +1,33 @@
 import { useEffect, useState } from "react";
-import PropTypes from "prop-types";
 import PropertyKeyEditorForm from "./PropKeyEditorForm";
 
 import { Radio, Space, Tabs, Typography } from "antd";
 import { SIZE_OPTIONS } from "../utils";
 import { useDispatch, useSelector } from "react-redux";
-import { updateSchemaByPath, updateUiSchemaByPath } from "../../store/schemaWizard";
+import {
+  updateSchemaByPath,
+  updateUiSchemaByPath,
+} from "../../store/schemaWizard";
 
-import { get } from "lodash-es"
+import { get } from "lodash-es";
 
 const JUSTIFY_OPTIONS = ["start", "center", "end"];
 
-const Customize = ({
-  path,
-}) => {
+const Customize = () => {
   const [justify, setJustify] = useState(() => "start");
   const [size, setSize] = useState("xlarge");
 
-  const dispatch = useDispatch()
-  const _path = useSelector((state) => state.schemaWizard.field.path)
-  const _uiPath = useSelector((state) => state.schemaWizard.field.uiPath)
-
-  const schema = useSelector((state) => _path && get(state.schemaWizard, ["current", "schema", ..._path]))
-  const uiSchema = useSelector((state) => _uiPath && get(state.schemaWizard, ["current", "uiSchema", ..._uiPath]))
+  const dispatch = useDispatch();
+  const path = useSelector((state) => state.schemaWizard.field.path);
+  const uiPath = useSelector((state) => state.schemaWizard.field.uiPath);
+
+  const schema = useSelector(
+    (state) => path && get(state.schemaWizard, ["current", "schema", ...path]),
+  );
+  const uiSchema = useSelector(
+    (state) =>
+      uiPath && get(state.schemaWizard, ["current", "uiSchema", ...uiPath]),
+  );
 
   useEffect(() => {
     if (uiSchema && Object.hasOwn(uiSchema, "ui:options")) {
@@ -31,28 +36,38 @@ const Customize = ({
     }
   }, [uiSchema]);
 
-  const _onSchemaChange = data => {
-    dispatch(updateSchemaByPath({path: path.path, value: data.formData}));
+  const _onSchemaChange = (data) => {
+    dispatch(updateSchemaByPath({ path: path, value: data.formData }));
   };
-  const _onUiSchemaChange = data => {
-    dispatch(updateUiSchemaByPath({path: path.uiPath, value: data.formData}));
+  const _onUiSchemaChange = (data) => {
+    dispatch(updateUiSchemaByPath({ path: uiPath, value: data.formData }));
   };
-  const sizeChange = newSize => {
+  const sizeChange = (newSize) => {
     let { "ui:options": uiOptions = {}, ...rest } = uiSchema;
 
-    dispatch(updateUiSchemaByPath({path: path.uiPath, value: {
-      ...rest,
-      "ui:options": { ...uiOptions, size: newSize },
-    }}));
+    dispatch(
+      updateUiSchemaByPath({
+        path: uiPath,
+        value: {
+          ...rest,
+          "ui:options": { ...uiOptions, size: newSize },
+        },
+      }),
+    );
   };
 
-  const alignChange = newAlign => {
+  const alignChange = (newAlign) => {
     let { "ui:options": uiOptions = {}, ...rest } = uiSchema;
 
-    dispatch(updateUiSchemaByPath({path: path.uiPath, value: {
-      ...rest,
-      "ui:options": { ...uiOptions, justify: newAlign },
-    }}));
+    dispatch(
+      updateUiSchemaByPath({
+        path: uiPath,
+        value: {
+          ...rest,
+          "ui:options": { ...uiOptions, justify: newAlign },
+        },
+      }),
+    );
   };
 
   return (
@@ -79,15 +94,15 @@ const Customize = ({
           key: "2",
           label: "UI Schema Settings",
           children:
-            _path.length != 0 ? (
+            path.length != 0 ? (
               <PropertyKeyEditorForm
                 schema={schema && schema}
                 uiSchema={uiSchema && uiSchema}
                 formData={uiSchema && uiSchema}
                 onChange={_onUiSchemaChange}
                 optionsSchemaObject="optionsUiSchema"
                 optionsUiSchemaObject="optionsUiSchemaUiSchema"
-                key={_uiPath}
+                key={uiPath}
               />
             ) : (
               <Space
@@ -97,11 +112,11 @@ const Customize = ({
                 <Typography.Text>Size Options</Typography.Text>
                 <Radio.Group
                   size="small"
-                  onChange={e => sizeChange(e.target.value)}
+                  onChange={(e) => sizeChange(e.target.value)}
                   value={size}
                   style={{ paddingBottom: "15px" }}
                 >
-                  {Object.keys(SIZE_OPTIONS).map(size => (
+                  {Object.keys(SIZE_OPTIONS).map((size) => (
                     <Radio.Button key={size} value={size}>
                       {size}
                     </Radio.Button>
@@ -110,10 +125,10 @@ const Customize = ({
                 <Typography.Text>Align Options</Typography.Text>
                 <Radio.Group
                   size="small"
-                  onChange={e => alignChange(e.target.value)}
+                  onChange={(e) => alignChange(e.target.value)}
                   value={justify}
                 >
-                  {JUSTIFY_OPTIONS.map(justify => (
+                  {JUSTIFY_OPTIONS.map((justify) => (
                     <Radio.Button key={justify} value={justify}>
                       {justify}
                     </Radio.Button>
@@ -127,8 +142,4 @@ const Customize = ({
   );
 };
 
-Customize.propTypes = {
-  path: PropTypes.object,
-};
-
 export default Customize;
diff --git a/src/admin/components/PropertyEditor.jsx b/src/admin/components/PropertyEditor.jsx
@@ -12,19 +12,21 @@ import { PageHeader } from "@ant-design/pro-layout";
 import Customize from "../components/Customize";
 import { DeleteOutlined } from "@ant-design/icons";
 import { useDispatch, useSelector } from "react-redux";
-import { deleteByPath, enableCreateMode, renameIdByPath } from "../../store/schemaWizard";
+import {
+  deleteByPath,
+  enableCreateMode,
+  renameIdByPath,
+} from "../../store/schemaWizard";
 
 const { useBreakpoint } = Grid;
 
-const renderPath = pathToUpdate => {
+const renderPath = (path) => {
   let prev;
   let content;
   const breadcrumbItems = [];
 
-  let path = pathToUpdate.path;
-
   path &&
-    path.map(item => {
+    path.map((item) => {
       if (breadcrumbItems.length == 0) {
         if (item == "properties") content = "{ } root";
         else if (item == "items") content = "[ ] root";
@@ -49,35 +51,40 @@ const PropertyEditor = () => {
   const [name, setName] = useState();
   const screens = useBreakpoint();
 
-  const pathObj = useSelector((state) => state.schemaWizard.field)
+  const path = useSelector((state) => state.schemaWizard.field.path);
+  const uiPath = useSelector((state) => state.schemaWizard.field.uiPath);
 
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
   useEffect(() => {
-    if (pathObj) {
-      const p = pathObj.path;
-      if (p.length) {
-        setName(p.findLast(item => item !== "properties" && item != "items"));
+    if (path) {
+      if (path.length) {
+        setName(
+          path.findLast((item) => item !== "properties" && item != "items"),
+        );
       } else {
         setName("root");
       }
     }
-  }, [pathObj]);
+  }, [path]);
 
   return (
-    <div style={{ display: "flex", flexDirection: "column", width: "100%" }} data-cy="fieldSettings">
+    <div
+      style={{ display: "flex", flexDirection: "column", width: "100%" }}
+      data-cy="fieldSettings"
+    >
       <PageHeader
         onBack={() => dispatch(enableCreateMode())}
-        title={(screens.xl || pathObj.path.length == 0) && "Field settings"}
+        title={(screens.xl || path.length == 0) && "Field settings"}
         extra={
-          pathObj.path.length > 0 && (
+          path.length > 0 && (
             <Popconfirm
               title="Delete field"
               okType="danger"
               okText="Delete"
               cancelText="Cancel"
               onConfirm={() => {
-                dispatch(deleteByPath({path: pathObj}));
+                dispatch(deleteByPath({ path }));
                 dispatch(enableCreateMode());
               }}
             >
@@ -88,22 +95,27 @@ const PropertyEditor = () => {
       />
       <Row justify="center">
         <Col xs={22} style={{ paddingBottom: "10px", textAlign: "center" }}>
-          {renderPath(pathObj)}
+          {renderPath(path)}
         </Col>
         <Col xs={18} data-cy="editFieldId">
           <Typography.Title
             level={5}
-            editable={pathObj.path.length && {
-              text: name,
-              onChange: value => dispatch(renameIdByPath({path: pathObj, newName: value})),
-            }}
+            editable={
+              path.length && {
+                text: name,
+                onChange: (value) =>
+                  dispatch(
+                    renameIdByPath({ path: { path, uiPath }, newName: value }),
+                  ),
+              }
+            }
             style={{ textAlign: "center" }}
           >
             {name}
           </Typography.Title>
         </Col>
       </Row>
-      <Customize path={pathObj} />
+      <Customize />
     </div>
   );
 };

diff --git a/src/admin/components/SchemaWizard.jsx b/src/admin/components/SchemaWizard.jsx
@@ -8,15 +8,17 @@ import FormPreview from "../components/FormPreview";
 import { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { schemaInit } from "../../store/schemaWizard";
+import { isEmpty } from "lodash-es";
 
 const SchemaWizard = () => {
+  const field = useSelector((state) => state.schemaWizard.field);
+  const loader = useSelector((state) => state.schemaWizard.loader);
 
-  const field = useSelector((state) => state.schemaWizard.field)
-  const loader = useSelector((state) => state.schemaWizard.loader)
+  const dispatch = useDispatch();
 
-  const dispatch = useDispatch()
-
-  useEffect(() => { dispatch(schemaInit()) }, [])
+  useEffect(() => {
+    dispatch(schemaInit());
+  }, []);
 
   if (loader)
     return (
@@ -38,7 +40,7 @@ const SchemaWizard = () => {
           }}
           className="tour-field-types"
         >
-          {field ? <PropertyEditor /> : <SelectFieldType />}
+          {isEmpty(field) ? <SelectFieldType /> : <PropertyEditor />}
         </Col>
         <Col
           xs={14}

diff --git a/src/admin/components/SelectOrEdit.jsx b/src/admin/components/SelectOrEdit.jsx
@@ -1,12 +1,12 @@
 import SelectFieldType from "./SelectFieldType";
 import PropertyEditor from "./PropertyEditor";
 import { useSelector } from "react-redux";
+import { isEmpty } from "lodash-es";
 
 const SelectOrEdit = () => {
+  const path = useSelector((state) => state.schemaWizard.field);
 
-    const path = useSelector((state) => state.schemaWizard.field)
-
-    return path ? <PropertyEditor /> : <SelectFieldType />
+  return isEmpty(path) ? <SelectFieldType /> : <PropertyEditor />;
 };
 
 export default SelectOrEdit;
diff --git a/src/forms/widgets/RequiredWidget.jsx b/src/forms/widgets/RequiredWidget.jsx
@@ -3,14 +3,13 @@ import { useDispatch, useSelector } from "react-redux";
 import { updateRequired } from "../../store/schemaWizard";
 
 const RequiredWidget = ({ value, onChange }) => {
+  const path = useSelector((state) => state.schemaWizard.field.path);
 
-  const path = useSelector((state) => state.schemaWizard.field)
+  const dispatch = useDispatch();
 
-  const dispatch = useDispatch()
-
-  const handleChange = checked => {
+  const handleChange = (checked) => {
     onChange(checked);
-    dispatch(updateRequired({path: path.path, isRequired: checked}));
+    dispatch(updateRequired({ path, isRequired: checked }));
   };
 
   return (