From 97e0883f31afe4fc4ea7dca95310253ce90b3fb9 Mon Sep 17 00:00:00 2001
From: SachaG <358832+SachaG@users.noreply.github.com>
Date: Thu, 15 Feb 2018 12:04:51 +0900
Subject: [PATCH] Refactor NewButton/EditButton code

---
 .../lib/modules/components/Datatable.jsx      | 49 ++-----------------
 .../lib/modules/components/EditButton.jsx     | 26 ++++++++--
 .../lib/modules/components/NewButton.jsx      | 19 ++++++-
 3 files changed, 44 insertions(+), 50 deletions(-)

diff --git a/packages/vulcan-core/lib/modules/components/Datatable.jsx b/packages/vulcan-core/lib/modules/components/Datatable.jsx
index 667ed8831..d88fc6ec7 100644
--- a/packages/vulcan-core/lib/modules/components/Datatable.jsx
+++ b/packages/vulcan-core/lib/modules/components/Datatable.jsx
@@ -97,12 +97,12 @@ DatatableAbove Component
 
 */
 const DatatableAbove = (props) => {
-  const { showSearch, showNew, canInsert, value, updateQuery } = props;
+  const { showSearch, showNew, canInsert, value, updateQuery, options } = props;
 
   return (
     <div className="datatable-above">
       {showSearch && <input className="datatable-search form-control" placeholder="Search…" type="text" name="datatableSearchQuery" value={value} onChange={updateQuery} />}
-      {showNew && canInsert && <Components.NewButton {...props}/>}
+      {showNew && canInsert && <Components.NewButton {...props} mutationFragmentName={options && options.fragmentName} />}
     </div>
   )
 }
@@ -198,7 +198,7 @@ DatatableRow Component
 */
 const DatatableRow = (props, { intl }) => {
 
-  const { collection, columns, document, showEdit, editFragmentName, currentUser } = props;
+  const { collection, columns, document, showEdit, currentUser, options } = props;
   const canEdit = collection && collection.options && collection.options.mutations && collection.options.mutations.edit && collection.options.mutations.edit.check(currentUser, document);
 
   return (
@@ -208,12 +208,7 @@ const DatatableRow = (props, { intl }) => {
 
     {showEdit && canEdit ?
       <td>
-        <Components.ModalTrigger
-          label={intl.formatMessage({id: 'datatable.edit'})}
-          component={<Button bsStyle="primary"><FormattedMessage id="datatable.edit" /></Button>}
-        >
-          <Components.DatatableEditForm {...props} />
-        </Components.ModalTrigger>
+        <Components.EditButton {...props} mutationFragmentName={options && options.fragmentName}/>
       </td>
     : null}
 
@@ -225,41 +220,6 @@ registerComponent('DatatableRow', DatatableRow);
 DatatableRow.contextTypes = {
   intl: intlShape
 };
-/*
-
-DatatableEditForm Component
-
-*/
-const DatatableEditForm = ({ collection, document, closeModal, options, ...properties }) =>
-  <Components.SmartForm
-    collection={collection}
-    documentId={document._id}
-    showRemove={true}
-    successCallback={document => {
-      closeModal();
-    }}
-    removeSuccessCallback={document => {
-      closeModal();
-    }}
-    mutationFragmentName={options.fragmentName}
-  />
-registerComponent('DatatableEditForm', DatatableEditForm);
-
-/*
-
-DatatableNewForm Component
-
-*/
-const DatatableNewForm = ({ collection, closeModal, options, ...props }) =>
-  <Components.SmartForm 
-    collection={collection}
-    successCallback={document => {
-      closeModal();
-    }}
-    mutationFragmentName={options.fragmentName}
-  />
-registerComponent('DatatableNewForm', DatatableNewForm);
-
 
 /*
 
@@ -280,7 +240,6 @@ registerComponent('DatatableCell', DatatableCell);
 DatatableDefaultCell Component
 
 */
-
 const DatatableDefaultCell = ({ column, document }) =>
   <div>{typeof column === 'string' ? getFieldValue(document[column]) : getFieldValue(document[column.name])}</div>
 
diff --git a/packages/vulcan-core/lib/modules/components/EditButton.jsx b/packages/vulcan-core/lib/modules/components/EditButton.jsx
index 09622b531..020b48655 100644
--- a/packages/vulcan-core/lib/modules/components/EditButton.jsx
+++ b/packages/vulcan-core/lib/modules/components/EditButton.jsx
@@ -3,12 +3,12 @@ import React from 'react';
 import Button from 'react-bootstrap/lib/Button';
 import { FormattedMessage, intlShape } from 'meteor/vulcan:i18n';
 
-const EditButton = ({ collection, document, bsStyle = 'primary', ...properties }, {intl}) =>
+const EditButton = ({ collection, document, bsStyle = 'primary', ...props }, {intl}) =>
   <Components.ModalTrigger 
     label={intl.formatMessage({id: 'datatable.edit'})} 
     component={<Button bsStyle={bsStyle}><FormattedMessage id="datatable.edit" /></Button>}
   >
-    <Components.DatatableEditForm collection={collection} document={document} {...properties} />
+    <Components.EditForm collection={collection} document={document} {...props} />
   </Components.ModalTrigger>
 
 EditButton.contextTypes = {
@@ -17,4 +17,24 @@ EditButton.contextTypes = {
 
 EditButton.displayName = 'EditButton';
 
-registerComponent('EditButton', EditButton);
\ No newline at end of file
+registerComponent('EditButton', EditButton);
+
+/*
+
+EditForm Component
+
+*/
+const EditForm = ({ collection, document, closeModal, options, ...props }) =>
+  <Components.SmartForm
+    {...props}
+    collection={collection}
+    documentId={document._id}
+    showRemove={true}
+    successCallback={document => {
+      closeModal();
+    }}
+    removeSuccessCallback={document => {
+      closeModal();
+    }}
+  />
+registerComponent('EditForm', EditForm);
diff --git a/packages/vulcan-core/lib/modules/components/NewButton.jsx b/packages/vulcan-core/lib/modules/components/NewButton.jsx
index 787a6fe88..10c05a21b 100644
--- a/packages/vulcan-core/lib/modules/components/NewButton.jsx
+++ b/packages/vulcan-core/lib/modules/components/NewButton.jsx
@@ -8,7 +8,7 @@ const NewButton = ({ collection, bsStyle = 'primary', ...props }, {intl}) =>
     label={intl.formatMessage({id: 'datatable.new'})} 
     component={<Button bsStyle={bsStyle}><FormattedMessage id="datatable.new" /></Button>}
   >
-    <Components.DatatableNewForm collection={collection} {...props} />
+    <Components.NewForm collection={collection} {...props} />
   </Components.ModalTrigger>
 
 NewButton.contextTypes = {
@@ -17,4 +17,19 @@ NewButton.contextTypes = {
 
 NewButton.displayName = 'NewButton';
 
-registerComponent('NewButton', NewButton);
\ No newline at end of file
+registerComponent('NewButton', NewButton);
+
+/*
+
+NewForm Component
+
+*/
+const NewForm = ({ collection, closeModal, options, ...props }) =>
+  <Components.SmartForm
+    {...props}
+    collection={collection}
+    successCallback={document => {
+      closeModal();
+    }}
+  />
+registerComponent('NewForm', NewForm);