feat(package): initial commit

Author: Jacob-Allen

README.md

@@ -1,39 +1,4 @@
-# c2-[package]
-
-## Creating a New Package From the Template
-1. Create a new GitHub repository without a readme
-2. Open Terminal
-3. Create a bare clone of this repository
-````
-$ git clone --bare git@github.com:ClearC2/package-template.git
-````
-4. Mirror push to your new repository
-````
-$ cd package-template.git
-$ git push --mirror <your new package git URI created in step 1>
-````
-5. Remove the temporary local repository you created in step 3
-````
-$ cd ..
-$ rm -rf package-template.git
-````
-6. Change your `package.json` to conform to your new package instead of `package-template`. This includes:
-    - name
-    - description
-    - keywords
-    - repository URL
-    - bugs URL
-    - homepage URL
-
-7. Change the `README.md` to to conform to your package. This includes:
-    - title
-    - deleting the `Creating a New Package From the Template` section
-
-8. Change the `alias` section in the `example/webpack.config.js` file to resolve your new package name (i.e. change `package-template` to your package name)
-
-9. Change the import statement in `example/src/App.js` to use this new alias instead of `package-template`
-
-10. Commit your changes to the `package.json`, `README.md`, `example/webpack.config.js`, and `example/src/App.js`, and push them up to GitHub. Your package is now ready for development
-
-## TODO
-- [ ] Add Mocha/Chai/Enzyme/Istanbul test framework
+the data provider expects a function that receives props as the argument and returns an object.
+each top level key will be the name of the new prop that will be provided to the base component.
+each key will need to be given an 'api' function (required), and an 'args' array (optional).
+the api function will be fired with the given args, and again any time the args change.

example/src/App.js

@@ -1,12 +1,35 @@
 import React from 'react'
-import PackageComponent, {PackageSubcomponent} from 'package-template'
+import dataProvider from 'c2-data-provider'
+import asyncSuccess from './asyncSuccess'
+import asyncFail from './asyncFail'
 
-export default function App () {
+function App (props) {
+  const {propname, oopsie} = props
   return (
-    <div>
-      <h1>{'C2 <Package>'}</h1>
-      <PackageComponent />
-      <PackageSubcomponent />
+    <div className='page-container '>
+      <div className='page-section'>
+        <code>
+          this.prop.propname = {JSON.stringify(propname)}
+        </code>
+      </div>
+      <div className='page-section'>
+        <code>
+          this.prop.oopsie = {JSON.stringify(oopsie)}
+        </code>
+      </div>
     </div>
   )
 }
+
+export default dataProvider(
+  props => ({
+    propname: {
+      api: asyncSuccess,
+      args: ['ABCDEFGHIJKLMNOPQRSTUVWXYZ123456']
+    },
+    oopsie: {
+      api: asyncFail,
+      args: [props.name]
+    }
+  })
+)(App)

example/src/asyncFail.js

@@ -0,0 +1,8 @@
+const asyncFail = arg => {
+  return Promise.reject({errors: [{
+    code: 777,
+    message: `This is a mock failure and here is the arg you passed in - ${arg}`
+  }]})
+}
+
+export default asyncFail

example/src/asyncSuccess.js

@@ -0,0 +1,6 @@
+const asyncSuccess = id => {
+  return Promise.resolve({data: {name: 'jake', id: id}})
+    .then(resp => resp.data)
+}
+
+export default asyncSuccess

example/src/example.scss

@@ -0,0 +1,13 @@
+.page-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+}
+
+.page-section {
+  display: flex;
+  flex: 1;
+  border: 1px solid black;
+  justify-content: center;
+  padding-top: 50px;
+}

example/webpack.config.js

@@ -29,7 +29,7 @@ let config = {
   },
   resolve: {
     alias: {
-      'package-template': path.join(__dirname, '../src')
+      'c2-data-provider': path.join(__dirname, '../src')
     }
   },
   module: {

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "package-template",
-  "version": "0.0.0",
-  "description": "package description",
+  "name": "c2-data-provider",
+  "version": "0.0.1",
+  "description": "data provider for components",
   "main": "dist/index.js",
   "scripts": {
     "start": "cd example && webpack-dev-server --inline --content-base dist --history-api-fallback --port 8083 --mode development",
@@ -34,7 +34,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ClearC2/package-template.git"
+    "url": "git+https://github.com/ClearC2/c2-data-provider.git"
   },
   "keywords": [
     "react",
@@ -44,9 +44,9 @@
   "author": "Clear C2, Inc.",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/ClearC2/package-template/issues"
+    "url": "https://github.com/ClearC2/c2-data-provider/issues"
   },
-  "homepage": "https://github.com/ClearC2/package-template#readme",
+  "homepage": "https://github.com/ClearC2/c2-data-provider#readme",
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",

src/PackageComponent.js

@@ -0,0 +1,115 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+
+export default class Provider extends Component {
+  static propTypes = {
+    render: PropTypes.func,
+    data: PropTypes.func
+  }
+  constructor (props) {
+    super(props)
+    let data = {}
+    Object.keys(
+      props.data(props)
+    ).forEach(key => (
+      data[key] = {
+        response: null,
+        loading: false,
+        errors: null
+      })
+    )
+    this.state = { // initialize defaults for all APIs
+      ...data
+    }
+  }
+
+  fetchData = (key, api, args) => {
+    if (!this.state[key].loading) { // spam prevention (will also pad this request if a developer mistakenly uses a rapidly changing arg and this starts spamming)
+      this.setState(s => {
+        delete s[key] // this object is not primitive, destroy the ref so componentDidUpdate of child behaves properly
+        s[key] = {loading: true}
+        return s
+      }, () => {
+        api(...args)
+          .then(resp => this.updateAPIResponse(key, resp))
+          .catch(resp => this.updateAPIError(key, resp))
+      })
+    }
+  }
+
+  updateAPIResponse = (key, resp) => {
+    this.setState(s => {
+      delete s[key] // this object is not primitive, destroy the ref so componentDidUpdate of child behaves properly
+      s[key] = {
+        response: resp,
+        loading: false,
+        errors: null
+      }
+      return s
+    })
+    return resp
+  }
+
+  updateAPIError = (key, resp) => {
+    this.setState(s => {
+      delete s[key] // this object is not primitive, destroy the ref so componentDidUpdate of child behaves properly
+      let errors = resp
+      if (resp.data && resp.data.errors) errors = resp.data.errors
+      else if (resp.data && resp.data.error) errors = resp.data.error
+      else if (resp.data) errors = resp.data
+      else if (resp.errors) errors = resp.errors
+      else if (resp.error) errors = resp.error // just trying to catch pretty common rejection shapes
+      s[key] = {
+        response: null,
+        loading: false,
+        errors
+      }
+      return s
+    })
+    return resp
+  }
+
+  fetchAllData = () => {
+    const {data} = this.props
+    Object.keys(data(this.props)).map(key => {
+      const {api = () => null, args = []} = data(this.props)[key]
+      this.fetchData(key, api, args)
+    })
+  }
+
+  determineAPIRefetch = last => { // if the args of any API have changed, refire the API and refresh the data
+    const {data} = this.props
+    const newAPIs = data(this.props)
+    const oldAPIs = last.data(last)
+    const calls = {}
+    Object.keys(newAPIs).forEach(key => {
+      if (oldAPIs[key]) {
+        let {args: oldArgs = []} = oldAPIs[key]
+        let {args: newArgs = []} = newAPIs[key]
+        if (newArgs.some((arg, i) => arg !== oldArgs[i])) {
+          calls[key] = newAPIs[key]
+        }
+      }
+    })
+    if (Object.keys(calls).length > 0) {
+      Object.keys(calls).map(key => {
+        const {api = () => null, args = []} = calls[key]
+        this.fetchData(key, api, args)
+      })
+    }
+  }
+
+  componentDidUpdate = p => {
+    this.determineAPIRefetch(p)
+  }
+
+  componentDidMount () {
+    this.fetchAllData()
+  }
+
+  render () {
+    const {render: C, data, ...rest} = this.props
+    const loading = Object.keys(this.state).some(api => this.state[api].loading === true)
+    return <C loading={loading} {...rest} {...this.state} refreshData={this.fetchAllData} />
+  }
+}