📦 atlas-react-fetch-loader 💬 Allow to rename payload keys (#15)

* Update dependencies

* Add new prop that maps old keys to new keys that should be renamed

* Include new prop in DemoCompnent that should be renamed

Also, use new option in fetch-mock to artificially set a timeout

* Include renameDataFields in demo page

* Fix for Firefox Webpack-generated source maps

* Change name of new prop to something more accurate

* Fix typo

packages/atlas-react-fetch-loader/__test__/FetchLoader.test.js

@@ -121,4 +121,14 @@ describe(`FetchLoader`, () => {
     expect(wrapper.find(MyComponent)).toHaveProp(`name`)
     expect(wrapper.find(MyComponent)).toHaveProp(`message`)
   })
+
+  test(`can rename data keys before injecting the payload to the wrapped component`, async () => {
+    fetchMock.get(`/foo/bar`, `{"results":[]}`)
+    const wrapper = shallow(<ComponentWithFetchLoader {...props} renameDataKeys={{ results: `foobarius` }}/>)
+
+    await wrapper.instance().componentDidMount()
+    expect(wrapper.find(MyComponent)).toHaveProp(props)
+    expect(wrapper.find(MyComponent)).not.toHaveProp(`results`)
+    expect(wrapper.find(MyComponent)).toHaveProp(`foobarius`, [])
+  })
 })

packages/atlas-react-fetch-loader/html/DemoComponent.js

@@ -1,17 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const DemoComponent = ({title, message, footer}) =>
+const DemoComponent = ({title, message, footer, renamedProp}) =>
   <div>
     <h1>{title}</h1>
     <p>{message}</p>
+    <p>{renamedProp}</p>
     <small>{footer}</small>
   </div>
 
 DemoComponent.propTypes = {
   title: PropTypes.string.isRequired,
   message: PropTypes.string.isRequired,
+  renamedProp: PropTypes.string.isRequired,
   footer: PropTypes.string.isRequired
 }
 
+DemoComponent.defaultProps = {
+  renamedProp: `If you can read this, an error happened: this message should be overwritten with a renamed prop`
+}
+
 export default DemoComponent

packages/atlas-react-fetch-loader/html/index.html

@@ -26,6 +26,9 @@
   fetchLoaderDemo.render({
     host: 'http://foo.bar/path/',
     resource: 'yolo/1337',
+    renameDataKeys: {
+      somethingElse: 'renamedProp'
+    },
     title: 'Passed-in prop',
     footer: 'This footer will be overwritten'
   }, 'target')

packages/atlas-react-fetch-loader/html/renderFetchLoadDemoComponent.js

@@ -7,11 +7,12 @@ import { withFetchLoader } from '../src/index'
 import '@babel/polyfill'
 import fetchMock from 'fetch-mock'
 
-const delay = (response, after=500) => () => new Promise(resolve => setTimeout(resolve, after)).then(() => response)
-
 fetchMock.get(
   `http://foo.bar/path/yolo/1337`,
-  delay(`{"message": "Foobar", "footer": "Overwritten prop retrieved from data"}`, 5000))
+  `{"message": "Foobar", "footer": "Overwritten prop retrieved from data", "somethingElse": "Mystery message!"}`,
+  {
+    delay: 5000
+  })
 
 const FetchLoadDemoComponent = withFetchLoader(DemoComponent)
 

packages/atlas-react-fetch-loader/package.json

@@ -35,34 +35,35 @@
   },
   "dependencies": {
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "styled-components": "^4.4.1",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "styled-components": "^5.0.1",
     "urijs": "^1.19.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.7.5",
-    "@babel/core": "^7.7.5",
-    "@babel/polyfill": "^7.7.0",
-    "@babel/preset-env": "^7.7.6",
-    "@babel/preset-react": "^7.7.4",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.8.6",
+    "@babel/polyfill": "^7.8.3",
+    "@babel/preset-env": "^7.8.6",
+    "@babel/preset-react": "^7.8.3",
     "@ebi-gene-expression-group/eslint-config": "^2.0.0",
-    "babel-jest": "^24.9.0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^25.1.0",
     "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "^3.0.0",
     "coveralls": "^3.0.9",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
-    "eslint": "^6.7.2",
-    "fetch-mock": "^8.1.0",
-    "jest": "^24.9.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^6.8.0",
+    "fetch-mock": "^8.3.2",
+    "jest": "^25.1.0",
     "jest-environment-enzyme": "^7.1.2",
     "jest-enzyme": "^7.1.2",
     "node-fetch": "^2.6.0",
-    "react-test-renderer": "^16.12.0",
-    "webpack": "^4.41.3",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.0"
+    "react-test-renderer": "^16.13.0",
+    "webpack": "^4.41.6",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
   },
   "bugs": {
     "url": "https://github.com/ebi-gene-expression-group/atlas-react-fetch-loader/issues"

packages/atlas-react-fetch-loader/src/FetchLoader.js

@@ -66,8 +66,12 @@ const withFetchLoader = (WrappedComponent) => {
           throw new Error(`${url} => ${response.status}`)
         }
 
+        const data = await response.json()
+        Object.keys(this.props.renameDataKeys)
+          .forEach(key => delete Object.assign(data, {[this.props.renameDataKeys[key]]: data[key] })[key])
+
         this.setState({
-          data: await response.json(),
+          data: data,
           isLoading: false,
           hasError: null
         })
@@ -117,12 +121,14 @@ const withFetchLoader = (WrappedComponent) => {
     host: PropTypes.string.isRequired,
     resource: PropTypes.string.isRequired,
     loadingPayloadProvider: PropTypes.func,
-    errorPayloadProvider: PropTypes.func
+    errorPayloadProvider: PropTypes.func,
+    renameDataKeys: PropTypes.objectOf(PropTypes.string)
   }
 
   FetchLoader.defaultProps = {
     loadingPayloadProvider: null,
-    errorPayloadProvider: null
+    errorPayloadProvider: null,
+    renameDataKeys: {}
   }
 
   return FetchLoader

packages/atlas-react-fetch-loader/webpack.config.js

@@ -16,7 +16,9 @@ module.exports = {
   output: {
     library: `[name]`,
     filename: `[name].bundle.js`,
-    publicPath: commonPublicPath
+    publicPath: commonPublicPath,
+    // This setting fixes source maps in Firefox, the string can be anything you’d like
+    devtoolNamespace: `firefox`
   },
 
   resolve: {