Fix InputURI so it can handle items modeled as an Object

LD4P · Aug 1, 2019 · e26b9b3 · e26b9b3
1 parent d0979e7
commit e26b9b3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 43 deletions.
diff --git a/__tests__/components/editor/property/InputURI.test.js b/__tests__/components/editor/property/InputURI.test.js
@@ -17,10 +17,7 @@ const plProps = {
     'resourceTemplate:bf2:Monograph:Instance',
     'http://id.loc.gov/ontologies/bibframe/hasEquivalent',
   ],
-  formData: {
-    items: [],
-    errors: [],
-  },
+  items: {},
 }
 
 
@@ -33,8 +30,7 @@ describe('<InputURI />', () => {
 
   it('contains required="true" attribute on input tag when mandatory is true', () => {
     const propertyTemplate = { propertyTemplate: { ...plProps.propertyTemplate, mandatory: 'true' } }
-    const formData = { formData: { errors: [{ id: 'Required' }] } }
-    wrapper.setProps({ ...plProps, ...propertyTemplate, ...formData })
+    wrapper.setProps({ ...plProps, ...propertyTemplate })
     expect(wrapper.find('input').prop('required')).toBeTruthy()
   })
 
@@ -89,7 +85,9 @@ describe('When the user enters input into field', () => {
 
     expect(mockItemsChange.mock.calls[0][0]).toEqual(
       {
-        items: [{ uri: 'http://example.com/thing/1', id: 0 }],
+        items: {
+          0: { uri: 'http://example.com/thing/1' },
+        },
         reduxPath: ['resourceTemplate:bf2:Monograph:Instance', 'http://id.loc.gov/ontologies/bibframe/hasEquivalent'],
       },
     )
@@ -105,13 +103,17 @@ describe('When the user enters input into field', () => {
 
     expect(mockItemsChange.mock.calls[0][0]).toEqual(
       {
-        items: [{ uri: 'http://example.com/thing/1', id: 0 }],
+        items: {
+          0: { uri: 'http://example.com/thing/1' },
+        },
         reduxPath: ['resourceTemplate:bf2:Monograph:Instance', 'http://id.loc.gov/ontologies/bibframe/hasEquivalent'],
       },
     )
     expect(mockItemsChange.mock.calls[1][0]).toEqual(
       {
-        items: [{ uri: 'http://example.com/thing/2', id: 0 }],
+        items: {
+          0: { uri: 'http://example.com/thing/2' },
+        },
         reduxPath: ['resourceTemplate:bf2:Monograph:Instance', 'http://id.loc.gov/ontologies/bibframe/hasEquivalent'],
       },
     )
@@ -123,16 +125,18 @@ describe('When the user enters input into field', () => {
     mockWrapper.setProps({
       ...plProps,
       ...propertyTemplate,
-      formData: { id: 1, uri: 'http://id.loc.gov/ontologies/bibframe/hasEquivalent' },
-      items: [{ uri: 'http://example.com/thing/1', id: 4 }],
+      items: {
+        4: { uri: 'http://example.com/thing/1', id: 4 },
+      },
     })
     expect(mockWrapper.find('div#userInput').text()).toEqual('http://example.com/thing/1XEdit') // Contains X and Edit as buttons
   })
 
   it('calls the removeMockDataFn when X is clicked', () => {
     mockWrapper.setProps({
-      formData: { id: 1, uri: 'http://id.loc.gov/ontologies/bibframe/hasEquivalent' },
-      items: [{ uri: 'test' }],
+      items: {
+        abc123: { uri: 'test' },
+      },
     })
     expect(removeMockDataFn.mock.calls.length).toEqual(0)
     mockWrapper.find('button#deleteItem').first().simulate('click', { target: { dataset: { item: 5 } } })
@@ -163,14 +167,11 @@ describe('when there is a default literal value in the property template', () =>
           ],
         },
       },
-      formData: {
-        errors: [],
-      },
-      items: [
-        {
+      items: {
+        abc123: {
           uri: 'http://id.loc.gov/vocabulary/organizations/dlc',
         },
-      ],
+      },
     }
     const wrapper = shallow(<InputURI.WrappedComponent {...plProps} id={12}
                                                        handleMyItemsChange={mockMyItemsChange} />)
@@ -197,7 +198,7 @@ describe('when there is a default literal value in the property template', () =>
                                    id={'11tydg'}
                                    handleMyItemsChange={mockMyItemsChange}
                                    handleRemoveItem={mockRemoveItem}
-                                   items={[{ uri: 'http://foo.by', id: 0 }]}/>,
+                                   items={{ 0: { uri: 'http://foo.by', id: 0 } }}/>,
       )
 
       expect(nonrepeatWrapper.exists('input', { disabled: true })).toBe(true)
@@ -209,7 +210,7 @@ describe('when there is a default literal value in the property template', () =>
                                    id={'11tydg'}
                                    handleMyItemsChange={mockMyItemsChange}
                                    handleRemoveItem={mockRemoveItem}
-                                   items={[]}/>,
+                                   items={{}}/>,
       )
       expect(nonrepeatWrapper.exists('input', { disabled: false })).toBe(true)
     })

diff --git a/src/components/editor/property/InputURI.jsx b/src/components/editor/property/InputURI.jsx
@@ -41,7 +41,9 @@ const InputURI = (props) => {
 
     const userInput = {
       reduxPath: props.reduxPath,
-      items: [{ uri: currentcontent, id: shortid.generate() }],
+      items: {
+        [shortid.generate()]: { uri: currentcontent },
+      },
     }
 
     props.handleMyItemsChange(userInput)
@@ -79,8 +81,6 @@ const InputURI = (props) => {
    */
   const required = booleanPropertyFromTemplate(props.propertyTemplate, 'mandatory', false)
 
-  const items = props.items || []
-
   const mergeErrors = () => {
     let errors = []
     if (uriError) {
@@ -92,31 +92,27 @@ const InputURI = (props) => {
     return errors
   }
 
-  const addedList = items.map((obj) => {
-    const itemId = obj.id || shortid.generate()
-
-    return <div id="userInput" key = {itemId} >
-      {obj.uri}
+  const addedList = Object.keys(props.items).map(itemId => (
+    <div id="userInput" key={itemId}>
+      {props.items[itemId].uri}
       <button
         id="deleteItem"
         type="button"
         onClick={handleDeleteClick}
-        key={`delete${obj.id}`}
+        key={`delete${itemId}`}
         data-item={itemId}
-        data-label={props.formData.uri}
       >X
       </button>
       <button
         id="editItem"
         type="button"
         onClick={handleEditClick}
-        key={`edit${obj.id}`}
+        key={`edit${itemId}`}
         data-item={itemId}
-        data-label={props.formData.uri}
       >Edit
       </button>
     </div>
-  })
+  ))
 
   let error
   let groupClasses = 'form-group'
@@ -149,12 +145,7 @@ const InputURI = (props) => {
 InputURI.propTypes = {
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   propertyTemplate: SinopiaPropTypes.propertyTemplate,
-  formData: PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    uri: PropTypes.string,
-    errors: PropTypes.array,
-  }),
-  items: PropTypes.array,
+  items: PropTypes.object,
   handleMyItemsChange: PropTypes.func,
   handleRemoveItem: PropTypes.func,
   reduxPath: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
@@ -167,14 +158,12 @@ const mapStateToProps = (state, props) => {
   const resourceTemplateId = reduxPath[reduxPath.length - 2]
   const propertyURI = reduxPath[reduxPath.length - 1]
   const displayValidations = getDisplayValidations(state)
-  const formData = findNode(state.selectorReducer, reduxPath)
   // items has to be its own prop or rerendering won't occur when one is removed
-  const items = formData.items
+  const items = findNode(state.selectorReducer, reduxPath).items
   const propertyTemplate = getPropertyTemplate(state, resourceTemplateId, propertyURI)
   const errors = findErrors(state.selectorReducer, reduxPath)
 
   return {
-    formData,
     items,
     propertyTemplate,
     displayValidations,