v1.2.0 New Context API (#49)

* upgrade deps
* migrate to new context api
* version++
* update peer deps

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.2.0
+
+- Upgrade to the new Context API
+
 ## 1.1.0
 
 - Updated Action to set loading state to true when the action is triggered

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perchsecurity/perch-data",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Utilities for managing data. Inspired by react-apollo.",
   "main": "lib/index.js",
   "private": false,
@@ -27,32 +27,32 @@
   "homepage": "https://github.com/usePF/perch-data#readme",
   "peerDependencies": {
     "prop-types": "^15.0.0",
-    "react": ">=15.0.0",
-    "react-dom": ">=15.0.0"
+    "react": ">=16.7.0",
+    "react-dom": ">=16.7.0"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-eslint": "^8.2.2",
+    "babel-eslint": "^8.2.6",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-export-extensions": "^6.22.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-import": "^2.9.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0",
-    "jest": "^22.4.3",
-    "prettier": "^1.11.1",
-    "prop-types": "^15.0.0",
-    "react": "^15.0.0",
-    "react-dom": "^15.0.0",
-    "react-test-renderer": "^15.0.0"
+    "eslint-config-prettier": "^2.10.0",
+    "eslint-plugin-import": "^2.15.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-react": "^7.12.4",
+    "jest": "^22.4.4",
+    "prettier": "^1.16.1",
+    "prop-types": "^15.6.2",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-test-renderer": "^16.7.0"
   },
   "dependencies": {
-    "immutability-helper": "^2.6.6",
+    "immutability-helper": "^2.9.0",
     "lodash.isequal": "^4.5.0",
     "store": "^2.0.12"
   }

src/Action.jsx

@@ -1,6 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 
+import { StoreContext } from "./";
+
 class Action extends React.Component {
   constructor(props, context) {
     super(props, context);
@@ -41,6 +43,8 @@ class Action extends React.Component {
   }
 }
 
+Action.contextType = StoreContext;
+
 Action.propTypes = {
   action: PropTypes.func.isRequired,
   children: PropTypes.func.isRequired,
@@ -58,9 +62,4 @@ Action.defaultProps = {
   variables: {}
 };
 
-Action.contextTypes = {
-  store: PropTypes.object.isRequired,
-  api: PropTypes.func
-};
-
 export default Action;

src/Data.jsx

@@ -2,9 +2,11 @@ import React from "react";
 import PropTypes from "prop-types";
 import isEqual from "lodash.isequal";
 
+import { StoreContext } from "./";
+
 class Data extends React.Component {
-  constructor(props, context) {
-    super(props, context);
+  constructor(props) {
+    super(props);
     this.state = {
       data: null,
       error: null,
@@ -99,6 +101,8 @@ class Data extends React.Component {
   }
 }
 
+Data.contextType = StoreContext;
+
 Data.propTypes = {
   action: PropTypes.func.isRequired,
   children: PropTypes.func.isRequired,
@@ -114,12 +118,4 @@ Data.defaultProps = {
   variables: {}
 };
 
-Data.contextTypes = {
-  api: PropTypes.func,
-  store: PropTypes.shape({
-    observeData: PropTypes.func,
-    unobserveData: PropTypes.func
-  }).isRequired
-};
-
 export default Data;

src/StoreProvider.jsx → src/StoreContext.jsx

@@ -1,32 +1,39 @@
-import React from "react";
+import React, { createContext } from "react";
 import PropTypes from "prop-types";
 import { axiosStore } from "./";
 
 const MINUTE = 1000 * 60;
 
-class StoreProvider extends React.Component {
+export const StoreContext = createContext({});
+
+export class StoreProvider extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { poll: setInterval(this.collectGarbage, MINUTE) };
-  }
-
-  getChildContext() {
-    const { api, store, initialValues } = this.props;
+    const { api, store, initialValues } = props;
     store.initializeStore(initialValues);
-    return { api: api && axiosStore(api, store), store };
+    this.state = {
+      api: api && axiosStore(api, store), // eslint-disable-line
+      poll: setInterval(this.collectGarbage, MINUTE),
+      store
+    };
   }
 
   componentWillUnmount() {
-    if (this.state.poll) clearInterval(this.state.poll);
+    const { poll } = this.state;
+    if (poll) clearInterval(poll);
   }
 
   collectGarbage = () => {
-    const { store } = this.props;
+    const { store } = this.state;
     if (store && store.removeExpiredKeys) store.removeExpiredKeys();
   };
 
   render() {
-    return this.props.children;
+    return (
+      <StoreContext.Provider value={this.state}>
+        {this.props.children}
+      </StoreContext.Provider>
+    );
   }
 }
 
@@ -47,9 +54,4 @@ StoreProvider.defaultProps = {
   initialValues: null
 };
 
-StoreProvider.childContextTypes = {
-  api: PropTypes.func,
-  store: PropTypes.object
-};
-
-export default StoreProvider;
+export const StoreConsumer = StoreContext.Consumer;

src/index.js

@@ -1,6 +1,6 @@
 export withData from "./withData";
 export * as cache from "./cache";
 export axiosStore from "./axiosStore";
-export StoreProvider from "./StoreProvider";
+export * from "./StoreContext";
 export Data from "./Data";
 export Action from "./Action";

src/withData.jsx

@@ -1,7 +1,8 @@
 import React from "react";
-import PropTypes from "prop-types";
 import update from "immutability-helper";
 
+import { StoreContext } from "./";
+
 function withData(actions) {
   function enhance(WrappedComponent) {
     class Enhanced extends React.Component {
@@ -162,12 +163,7 @@ function withData(actions) {
       }
     }
 
-    Enhanced.contextTypes = {
-      store: PropTypes.shape({
-        observeData: PropTypes.func,
-        unobserveData: PropTypes.func
-      }).isRequired
-    };
+    Enhanced.contextType = StoreContext;
 
     return Enhanced;
   }