Merge pull request #954 from codaco/fix/consecutive-alter-forms

ensure unique form names
complexdatacollective · Aug 22, 2019 · 1253350 · 1253350
2 parents 9c4439c + 2055b3c
commit 1253350
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 36 deletions.
diff --git a/src/containers/AlterForms/SlideFormEdge.js b/src/containers/AlterForms/SlideFormEdge.js
@@ -21,8 +21,9 @@ class SlideFormEdge extends PureComponent {
       edge,
       edgeColor,
       nodes,
-      index,
+      edgeIndex,
       subject,
+      stageIndex,
     } = this.props;
 
     const fromNode = find(nodes, [entityPrimaryKeyProperty, edge.from]);
@@ -42,7 +43,7 @@ class SlideFormEdge extends PureComponent {
                 initialValues={edge[entityAttributesProperty]}
                 autoFocus={false}
                 subject={subject}
-                form={`EDGE_FORM_${index + 1}`}
+                form={`EDGE_FORM_${stageIndex}_${edgeIndex + 1}`}
                 onSubmit={this.handleSubmit}
               />
             </Scroller>
@@ -66,7 +67,8 @@ SlideFormEdge.propTypes = {
   updateEdge: PropTypes.func.isRequired,
   subject: PropTypes.object.isRequired,
   edge: PropTypes.object.isRequired,
-  index: PropTypes.number.isRequired,
+  edgeIndex: PropTypes.number.isRequired,
+  stageIndex: PropTypes.number.isRequired,
 };
 
 export { SlideFormEdge };

diff --git a/src/containers/AlterForms/SlideFormNode.js b/src/containers/AlterForms/SlideFormNode.js
@@ -16,8 +16,9 @@ class SlideForm extends PureComponent {
     const {
       form,
       node,
-      index,
+      nodeIndex,
       subject,
+      stageIndex,
     } = this.props;
 
     return (
@@ -32,7 +33,7 @@ class SlideForm extends PureComponent {
                 initialValues={node[entityAttributesProperty]}
                 autoFocus={false}
                 subject={subject}
-                form={`NODE_FORM_${index + 1}`}
+                form={`NODE_FORM_${stageIndex}_${nodeIndex + 1}`}
                 onSubmit={this.handleSubmit}
               />
             </Scroller>
@@ -48,12 +49,13 @@ SlideForm.propTypes = {
   subject: PropTypes.object.isRequired,
   node: PropTypes.object,
   onUpdate: PropTypes.func,
-  index: PropTypes.number,
+  nodeIndex: PropTypes.number,
+  stageIndex: PropTypes.number.isRequired,
 };
 
 SlideForm.defaultProps = {
   form: {},
-  index: 0,
+  nodeIndex: 0,
   node: {},
   onUpdate: () => {},
 };

diff --git a/src/containers/AlterForms/__tests__/SlideFormEdge.test.js b/src/containers/AlterForms/__tests__/SlideFormEdge.test.js
@@ -20,6 +20,8 @@ const mockProps = {
     entity: 'edge',
     type: 'friend',
   },
+  edgeIndex: 1,
+  stageIndex: 1,
 };
 
 describe('<SlideFormEdge />', () => {

diff --git a/src/containers/AlterForms/__tests__/SlideFormNode.test.js b/src/containers/AlterForms/__tests__/SlideFormNode.test.js
@@ -11,6 +11,8 @@ const mockProps = {
     entity: 'node',
     type: 'person',
   },
+  nodeIndex: 1,
+  stageIndex: 1,
 };
 
 describe('<SlideFormNode />', () => {

diff --git a/src/containers/AlterForms/__tests__/__snapshots__/SlideFormEdge.test.js.snap b/src/containers/AlterForms/__tests__/__snapshots__/SlideFormEdge.test.js.snap
@@ -11,6 +11,7 @@ ShallowWrapper {
       }
     }
     edgeColor="blue"
+    edgeIndex={1}
     form={
       Object {
         "entity": "edge",
@@ -28,6 +29,7 @@ ShallowWrapper {
         },
       }
     }
+    stageIndex={1}
   />,
   Symbol(enzyme.__renderer__): Object {
     "batchedUpdates": [Function],
@@ -63,7 +65,7 @@ ShallowWrapper {
               autoFocus={false}
               className="alter-form__form"
               entity="edge"
-              form="EDGE_FORM_NaN"
+              form="EDGE_FORM_1_2"
               initialValues={undefined}
               onSubmit={[Function]}
               subject={undefined}
@@ -100,7 +102,7 @@ ShallowWrapper {
                 autoFocus={false}
                 className="alter-form__form"
                 entity="edge"
-                form="EDGE_FORM_NaN"
+                form="EDGE_FORM_1_2"
                 initialValues={undefined}
                 onSubmit={[Function]}
                 subject={undefined}
@@ -156,7 +158,7 @@ ShallowWrapper {
                 autoFocus={false}
                 className="alter-form__form"
                 entity="edge"
-                form="EDGE_FORM_NaN"
+                form="EDGE_FORM_1_2"
                 initialValues={undefined}
                 onSubmit={[Function]}
                 subject={undefined}
@@ -176,7 +178,7 @@ ShallowWrapper {
                 autoFocus={false}
                 className="alter-form__form"
                 entity="edge"
-                form="EDGE_FORM_NaN"
+                form="EDGE_FORM_1_2"
                 initialValues={undefined}
                 onSubmit={[Function]}
                 subject={undefined}
@@ -193,7 +195,7 @@ ShallowWrapper {
                 "autoFocus": false,
                 "className": "alter-form__form",
                 "entity": "edge",
-                "form": "EDGE_FORM_NaN",
+                "form": "EDGE_FORM_1_2",
                 "initialValues": undefined,
                 "onSubmit": [Function],
                 "subject": undefined,
@@ -240,7 +242,7 @@ ShallowWrapper {
                 autoFocus={false}
                 className="alter-form__form"
                 entity="edge"
-                form="EDGE_FORM_NaN"
+                form="EDGE_FORM_1_2"
                 initialValues={undefined}
                 onSubmit={[Function]}
                 subject={undefined}
@@ -277,7 +279,7 @@ ShallowWrapper {
                   autoFocus={false}
                   className="alter-form__form"
                   entity="edge"
-                  form="EDGE_FORM_NaN"
+                  form="EDGE_FORM_1_2"
                   initialValues={undefined}
                   onSubmit={[Function]}
                   subject={undefined}
@@ -333,7 +335,7 @@ ShallowWrapper {
                   autoFocus={false}
                   className="alter-form__form"
                   entity="edge"
-                  form="EDGE_FORM_NaN"
+                  form="EDGE_FORM_1_2"
                   initialValues={undefined}
                   onSubmit={[Function]}
                   subject={undefined}
@@ -353,7 +355,7 @@ ShallowWrapper {
                   autoFocus={false}
                   className="alter-form__form"
                   entity="edge"
-                  form="EDGE_FORM_NaN"
+                  form="EDGE_FORM_1_2"
                   initialValues={undefined}
                   onSubmit={[Function]}
                   subject={undefined}
@@ -370,7 +372,7 @@ ShallowWrapper {
                   "autoFocus": false,
                   "className": "alter-form__form",
                   "entity": "edge",
-                  "form": "EDGE_FORM_NaN",
+                  "form": "EDGE_FORM_1_2",
                   "initialValues": undefined,
                   "onSubmit": [Function],
                   "subject": undefined,

diff --git a/src/containers/AlterForms/__tests__/__snapshots__/SlideFormNode.test.js.snap b/src/containers/AlterForms/__tests__/__snapshots__/SlideFormNode.test.js.snap
@@ -11,13 +11,14 @@ ShallowWrapper {
         "type": "person",
       }
     }
-    index={0}
     node={
       Object {
         "name": "Bob",
       }
     }
+    nodeIndex={1}
     onUpdate={[Function]}
+    stageIndex={1}
   />,
   Symbol(enzyme.__renderer__): Object {
     "batchedUpdates": [Function],
@@ -46,7 +47,7 @@ ShallowWrapper {
               autoFocus={false}
               className="alter-form__form"
               entity="node"
-              form="NODE_FORM_1"
+              form="NODE_FORM_1_2"
               initialValues={undefined}
               onSubmit={[Function]}
               subject={undefined}
@@ -76,7 +77,7 @@ ShallowWrapper {
                 autoFocus={false}
                 className="alter-form__form"
                 entity="node"
-                form="NODE_FORM_1"
+                form="NODE_FORM_1_2"
                 initialValues={undefined}
                 onSubmit={[Function]}
                 subject={undefined}
@@ -111,7 +112,7 @@ ShallowWrapper {
                 autoFocus={false}
                 className="alter-form__form"
                 entity="node"
-                form="NODE_FORM_1"
+                form="NODE_FORM_1_2"
                 initialValues={undefined}
                 onSubmit={[Function]}
                 subject={undefined}
@@ -131,7 +132,7 @@ ShallowWrapper {
                 autoFocus={false}
                 className="alter-form__form"
                 entity="node"
-                form="NODE_FORM_1"
+                form="NODE_FORM_1_2"
                 initialValues={undefined}
                 onSubmit={[Function]}
                 subject={undefined}
@@ -148,7 +149,7 @@ ShallowWrapper {
                 "autoFocus": false,
                 "className": "alter-form__form",
                 "entity": "node",
-                "form": "NODE_FORM_1",
+                "form": "NODE_FORM_1_2",
                 "initialValues": undefined,
                 "onSubmit": [Function],
                 "subject": undefined,
@@ -188,7 +189,7 @@ ShallowWrapper {
                 autoFocus={false}
                 className="alter-form__form"
                 entity="node"
-                form="NODE_FORM_1"
+                form="NODE_FORM_1_2"
                 initialValues={undefined}
                 onSubmit={[Function]}
                 subject={undefined}
@@ -218,7 +219,7 @@ ShallowWrapper {
                   autoFocus={false}
                   className="alter-form__form"
                   entity="node"
-                  form="NODE_FORM_1"
+                  form="NODE_FORM_1_2"
                   initialValues={undefined}
                   onSubmit={[Function]}
                   subject={undefined}
@@ -253,7 +254,7 @@ ShallowWrapper {
                   autoFocus={false}
                   className="alter-form__form"
                   entity="node"
-                  form="NODE_FORM_1"
+                  form="NODE_FORM_1_2"
                   initialValues={undefined}
                   onSubmit={[Function]}
                   subject={undefined}
@@ -273,7 +274,7 @@ ShallowWrapper {
                   autoFocus={false}
                   className="alter-form__form"
                   entity="node"
-                  form="NODE_FORM_1"
+                  form="NODE_FORM_1_2"
                   initialValues={undefined}
                   onSubmit={[Function]}
                   subject={undefined}
@@ -290,7 +291,7 @@ ShallowWrapper {
                   "autoFocus": false,
                   "className": "alter-form__form",
                   "entity": "node",
-                  "form": "NODE_FORM_1",
+                  "form": "NODE_FORM_1_2",
                   "initialValues": undefined,
                   "onSubmit": [Function],
                   "subject": undefined,

diff --git a/src/containers/Interfaces/AlterEdgeForm.js b/src/containers/Interfaces/AlterEdgeForm.js
@@ -34,7 +34,7 @@ class AlterEdgeForm extends Component {
     };
   }
 
-  getEdgeFormName = activeIndex => `EDGE_FORM_${activeIndex}`;
+  getEdgeFormName = activeIndex => `EDGE_FORM_${this.props.stageIndex}_${activeIndex}`;
 
   formSubmitAllowed = index => (
     this.props.formEnabled(this.getEdgeFormName(index))
@@ -79,6 +79,7 @@ class AlterEdgeForm extends Component {
       form,
       stage,
       stageEdges,
+      stageIndex,
       updateEdge,
     } = this.props;
 
@@ -116,12 +117,13 @@ class AlterEdgeForm extends Component {
             </div>
           </div>
 
-          {stageEdges.map((edge, index) => (
+          {stageEdges.map((edge, edgeIndex) => (
             <SlideFormEdge
-              key={index}
+              key={edgeIndex}
               subject={stage.subject}
               edge={edge}
-              index={index}
+              edgeIndex={edgeIndex}
+              stageIndex={stageIndex}
               updateEdge={updateEdge}
               form={form}
             />
@@ -143,6 +145,7 @@ AlterEdgeForm.propTypes = {
   formEnabled: PropTypes.func.isRequired,
   stage: PropTypes.object.isRequired,
   stageEdges: PropTypes.array,
+  stageIndex: PropTypes.number.isRequired,
   submitForm: PropTypes.func.isRequired,
   updateEdge: PropTypes.func.isRequired,
 };

diff --git a/src/containers/Interfaces/AlterForm.js b/src/containers/Interfaces/AlterForm.js
@@ -36,7 +36,7 @@ class AlterForm extends Component {
     };
   }
 
-  getNodeFormName = activeIndex => `NODE_FORM_${activeIndex}`;
+  getNodeFormName = activeIndex => `NODE_FORM_${this.props.stageIndex}_${activeIndex}`;
 
   formSubmitAllowed = index => (
     this.props.formEnabled(this.getNodeFormName(index))
@@ -84,6 +84,7 @@ class AlterForm extends Component {
       form,
       stage,
       stageNodes,
+      stageIndex,
     } = this.props;
 
     const swiperParams = {
@@ -120,12 +121,13 @@ class AlterForm extends Component {
             </div>
           </div>
 
-          {stageNodes.map((node, index) => (
+          {stageNodes.map((node, nodeIndex) => (
             <SlideFormNode
-              key={index}
+              key={nodeIndex}
               subject={stage.subject}
               node={node}
-              index={index}
+              nodeIndex={nodeIndex}
+              stageIndex={stageIndex}
               onUpdate={this.handleUpdate}
               form={form}
             />
@@ -147,6 +149,7 @@ AlterForm.propTypes = {
   formEnabled: PropTypes.func.isRequired,
   stage: PropTypes.object.isRequired,
   stageNodes: PropTypes.array,
+  stageIndex: PropTypes.number.isRequired,
   submitForm: PropTypes.func.isRequired,
   updateNode: PropTypes.func.isRequired,
 };