♻️ [#454] Refactor React editgrid into isolated component

* Updated the ChooseProductStep from appointments to use the component * Add stories for with/without add button * Centralized the markup/class names for edit grid so we can refactor more to NL DS components
open-formulieren · Oct 31, 2023 · 838431e · 838431e
1 parent 0dd09ae
commit 838431e
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 33 deletions.
diff --git a/src/components/EditGrid/EditGrid.js b/src/components/EditGrid/EditGrid.js
@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import OFButton from 'components/Button';
+import FAIcon from 'components/FAIcon';
+import {getBEMClassName} from 'utils';
+
+const DefaultAddButtonLabel = () => (
+  <>
+    <FAIcon icon="plus" />{' '}
+    <FormattedMessage
+      description="Edit grid add button, default label text"
+      defaultMessage="Add another"
+    />
+  </>
+);
+
+const EditGrid = ({children, onAddItem, addButtonLabel}) => (
+  <div className={getBEMClassName('editgrid')}>
+    <div className={getBEMClassName('editgrid__groups')}>{children}</div>
+
+    {onAddItem && (
+      <div className={getBEMClassName('editgrid__add-button')}>
+        <OFButton type="button" appearance="primary-action-button" onClick={onAddItem}>
+          {addButtonLabel || <DefaultAddButtonLabel />}
+        </OFButton>
+      </div>
+    )}
+  </div>
+);
+
+EditGrid.propTypes = {
+  children: PropTypes.node.isRequired,
+  addButtonLabel: PropTypes.node,
+  onAddItem: PropTypes.func,
+};
+
+export default EditGrid;
diff --git a/src/components/EditGrid/EditGrid.stories.js b/src/components/EditGrid/EditGrid.stories.js
@@ -0,0 +1,41 @@
+import Body from 'components/Body';
+
+import {EditGrid, EditGridItem} from '.';
+
+export default {
+  title: 'Pure React components / EditGrid / EditGrid',
+  component: EditGrid,
+  argTypes: {
+    children: {control: false},
+    onAddItem: {control: false},
+  },
+  args: {
+    children: (
+      <>
+        <EditGridItem heading="Item 1">
+          <Body>First item</Body>
+        </EditGridItem>
+        <EditGridItem heading="Item 2">
+          <Body>Second item</Body>
+        </EditGridItem>
+      </>
+    ),
+  },
+  parameters: {
+    controls: {sort: 'requiredFirst'},
+  },
+};
+
+export const WithAddButton = {};
+
+export const WithCustomAddButtonLabel = {
+  args: {
+    addButtonLabel: 'Custom add button label',
+  },
+};
+
+export const WithoutAddbutton = {
+  args: {
+    onAddItem: undefined,
+  },
+};
diff --git a/src/components/EditGrid/index.js b/src/components/EditGrid/index.js
@@ -1,2 +1,3 @@
 export {default as EditGridButtonGroup} from './EditGridButtonGroup';
 export {default as EditGridItem} from './EditGridItem';
+export {default as EditGrid} from './EditGrid';
diff --git a/src/components/appointments/steps/ChooseProductStep.js b/src/components/appointments/steps/ChooseProductStep.js
@@ -10,11 +10,10 @@ import {toFormikValidationSchema} from 'zod-formik-adapter';
 
 import {OFButton} from 'components/Button';
 import {CardTitle} from 'components/Card';
-import {EditGridButtonGroup, EditGridItem} from 'components/EditGrid';
+import {EditGrid, EditGridButtonGroup, EditGridItem} from 'components/EditGrid';
 import FAIcon from 'components/FAIcon';
 import useQuery from 'hooks/useQuery';
 import useTitle from 'hooks/useTitle';
-import {getBEMClassName} from 'utils';
 
 import {AppointmentConfigContext} from '../Context';
 import {useCreateAppointmentContext} from '../CreateAppointment/CreateAppointmentState';
@@ -61,37 +60,34 @@ const ChooseProductStepFields = ({values: {products = []}, validateForm}) => {
     <Form style={{width: '100%'}}>
       <FieldArray name="products">
         {arrayHelpers => (
-          <div className={getBEMClassName('editgrid')}>
-            <div className={getBEMClassName('editgrid__groups')}>
-              {products.map(({productId}, index) => (
-                // blank blocks don't have a product selected yet -> so the index is added
-                // to make the key guaranteed unique
-                <ProductWrapper
-                  key={`${productId}-${index}`}
-                  index={index}
-                  numProducts={numProducts}
-                  onRemove={withValidate(() => arrayHelpers.remove(index))}
-                >
-                  <Product namePrefix="products" index={index} selectedProducts={products} />
-                </ProductWrapper>
-              ))}
-            </div>
-
-            {supportsMultipleProducts && (
-              <div className={getBEMClassName('editgrid__add-button')}>
-                <OFButton
-                  appearance="primary-action-button"
-                  onClick={withValidate(() => arrayHelpers.push({productId: '', amount: 1}))}
-                >
-                  <FAIcon icon="plus" />
-                  <FormattedMessage
-                    description="Appointments: add additional product/service button text"
-                    defaultMessage="Add another product"
-                  />
-                </OFButton>
-              </div>
-            )}
-          </div>
+          <EditGrid
+            addButtonLabel={
+              <>
+                <FAIcon icon="plus" />{' '}
+                <FormattedMessage
+                  description="Appointments: add additional product/service button text"
+                  defaultMessage="Add another product"
+                />
+              </>
+            }
+            onAddItem={
+              supportsMultipleProducts &&
+              withValidate(() => arrayHelpers.push({productId: '', amount: 1}))
+            }
+          >
+            {products.map(({productId}, index) => (
+              // blank blocks don't have a product selected yet -> so the index is added
+              // to make the key guaranteed unique
+              <ProductWrapper
+                key={`${productId}-${index}`}
+                index={index}
+                numProducts={numProducts}
+                onRemove={withValidate(() => arrayHelpers.remove(index))}
+              >
+                <Product namePrefix="products" index={index} selectedProducts={products} />
+              </ProductWrapper>
+            ))}
+          </EditGrid>
         )}
       </FieldArray>
 

diff --git a/src/i18n/compiled/en.json b/src/i18n/compiled/en.json
@@ -1175,6 +1175,12 @@
       "value": "Your payment is received and processed."
     }
   ],
+  "cKFCTI": [
+    {
+      "type": 0,
+      "value": "Add another"
+    }
+  ],
   "cxDC/G": [
     {
       "type": 0,

diff --git a/src/i18n/compiled/nl.json b/src/i18n/compiled/nl.json
@@ -1179,6 +1179,12 @@
       "value": "Uw betaling is ontvangen en verwerkt."
     }
   ],
+  "cKFCTI": [
+    {
+      "type": 0,
+      "value": "Add another"
+    }
+  ],
   "cxDC/G": [
     {
       "type": 0,

diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
@@ -544,6 +544,11 @@
     "description": "payment registered status",
     "originalDefault": "Your payment is received and processed."
   },
+  "cKFCTI": {
+    "defaultMessage": "Add another",
+    "description": "Edit grid add button, default label text",
+    "originalDefault": "Add another"
+  },
   "cxDC/G": {
     "defaultMessage": "The required field is not filled out.",
     "description": "ZOD 'required' error message",

diff --git a/src/i18n/messages/nl.json b/src/i18n/messages/nl.json
@@ -550,6 +550,11 @@
     "description": "payment registered status",
     "originalDefault": "Your payment is received and processed."
   },
+  "cKFCTI": {
+    "defaultMessage": "Add another",
+    "description": "Edit grid add button, default label text",
+    "originalDefault": "Add another"
+  },
   "cxDC/G": {
     "defaultMessage": "Het verplichte veld is niet ingevuld.",
     "description": "ZOD 'required' error message",