Merge pull request #9 from space-fe/fix/pre-location

fix: update state pre location query

Author: XiaocongDong

es/index.js

@@ -321,8 +321,8 @@ var queryToPropsHOC = function queryToPropsHOC(DecoratedComponent, config) {
       _this = _possibleConstructorReturn(this, _getPrototypeOf(queryToPropsComponent).call(this, props));
 
       _defineProperty(_assertThisInitialized(_this), "__getLocationQueryObj", function (location) {
-        var currLocation = location || _this.currLocation;
-        return currLocation ? queryString.parse(currLocation.search, {
+        var l = location || _this.currLocation;
+        return l ? queryString.parse(l.search, {
           arrayFormat: 'comma'
         }) : {};
       });
@@ -334,10 +334,10 @@ var queryToPropsHOC = function queryToPropsHOC(DecoratedComponent, config) {
       });
 
       _defineProperty(_assertThisInitialized(_this), "__getValidatedQueryObj", function (location) {
-        var currentQueryObj = _this.__getLocationQueryObj(location);
+        var queryObj = _this.__getLocationQueryObj(location);
 
         var filterKeys = Object.keys(queryPropsConfig);
-        var filterQueryObj = filterObjWithDefaultObj(currentQueryObj, defaultState, filterKeys);
+        var filterQueryObj = filterObjWithDefaultObj(queryObj, defaultState, filterKeys);
         var decodedQueryObj = decodeObj(filterQueryObj, queryPropsConfig);
         var validatedQueryObj = validateObject(decodedQueryObj, defaultState, validatorMap);
         return validatedQueryObj;
@@ -358,10 +358,9 @@ var queryToPropsHOC = function queryToPropsHOC(DecoratedComponent, config) {
 
         var validatedState = validateObject(newState, defaultState, validatorMap);
 
-        _this.__updateUrl(validatedState); // this.currLocation has not been changed at this time
+        _this.__updateUrl(validatedState);
 
-
-        var prevValidatedQueryObj = _this.__getValidatedQueryObj();
+        var prevValidatedQueryObj = _this.__getValidatedQueryObj(_this.prevLocation);
 
         if (!deepEqual(prevValidatedQueryObj, validatedState)) {
           _this.setState(_objectSpread({}, validatedState), function () {
@@ -371,6 +370,7 @@ var queryToPropsHOC = function queryToPropsHOC(DecoratedComponent, config) {
       });
 
       _defineProperty(_assertThisInitialized(_this), "handleRouteChanged", function (prevLocation, currLocation) {
+        _this.prevLocation = prevLocation;
         _this.currLocation = currLocation;
 
         var validatedQueryObj = _this.__getValidatedQueryObj(currLocation);
@@ -385,6 +385,7 @@ var queryToPropsHOC = function queryToPropsHOC(DecoratedComponent, config) {
       });
 
       _this.__firstCallHandleRouteChanged = false;
+      _this.prevLocation = null;
       _this.currLocation = null;
 
       var _validatedQueryObj = _this.__getValidatedQueryObj(props.location);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-query-string-to-props",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Mapping query string from url to Component props seamlessly.",
   "main": "es/index.js",
   "module": "es/index.js",

src/QueryToPropsHOC.js

@@ -36,17 +36,18 @@ const queryToPropsHOC = (DecoratedComponent, config) => {
     constructor (props) {
       super(props)
       this.__firstCallHandleRouteChanged = false
+      this.prevLocation = null
       this.currLocation = null
 
       const validatedQueryObj = this.__getValidatedQueryObj(props.location)
       this.state = { ...defaultState, ...validatedQueryObj }
     }
 
     __getLocationQueryObj = (location) => {
-      const currLocation = location || this.currLocation
+      const l = location || this.currLocation
 
-      return currLocation
-        ? queryString.parse(currLocation.search, { arrayFormat: 'comma' })
+      return l
+        ? queryString.parse(l.search, { arrayFormat: 'comma' })
         : {}
     }
 
@@ -55,10 +56,10 @@ const queryToPropsHOC = (DecoratedComponent, config) => {
     }
 
     __getValidatedQueryObj = (location) => {
-      const currentQueryObj = this.__getLocationQueryObj(location)
+      const queryObj = this.__getLocationQueryObj(location)
 
       const filterKeys = Object.keys(queryPropsConfig)
-      const filterQueryObj = filterObjWithDefaultObj(currentQueryObj, defaultState, filterKeys)
+      const filterQueryObj = filterObjWithDefaultObj(queryObj, defaultState, filterKeys)
 
       const decodedQueryObj = decodeObj(filterQueryObj, queryPropsConfig)
       const validatedQueryObj = validateObject(decodedQueryObj, defaultState, validatorMap)
@@ -88,8 +89,7 @@ const queryToPropsHOC = (DecoratedComponent, config) => {
       const validatedState = validateObject(newState, defaultState, validatorMap)
       this.__updateUrl(validatedState)
 
-      // this.currLocation has not been changed at this time
-      const prevValidatedQueryObj = this.__getValidatedQueryObj()
+      const prevValidatedQueryObj = this.__getValidatedQueryObj(this.prevLocation)
 
       if (!deepEqual(prevValidatedQueryObj, validatedState)) {
         this.setState({ ...validatedState }, () => {
@@ -99,6 +99,7 @@ const queryToPropsHOC = (DecoratedComponent, config) => {
     }
 
     handleRouteChanged = (prevLocation, currLocation) => {
+      this.prevLocation = prevLocation
       this.currLocation = currLocation
 
       const validatedQueryObj = this.__getValidatedQueryObj(currLocation)

types/index.d.ts

@@ -9,23 +9,20 @@ interface IValidator {
   value: ValidatorValue
 }
 
-declare function queryToPropsHOC<T>(
-  DecoratedComponent: React.ComponentType,
-  config: {
-    history: History
-    queryPropsConfig: {
-      [key: string]: QueryPropTypes
-    }
-    defaultQueryProps?: {
-      [key: string]: PropValue
-    },
-    validatorMap?: {
-      [key: string]: IValidator[]
-    }
-    replaceRouteWhenChange?: boolean
-    mapDefaultQueryPropsToUrlWhenMounted?: boolean
-  }
-): React.ComponentType<T>
+interface IMap<T> {
+  [key: string]: T
+}
+
+interface IConfig {
+  history: History
+  queryPropsConfig: IMap<QueryPropTypes>
+  defaultQueryProps?: IMap<PropValue>
+  validatorMap?: IMap<IValidator[]>
+  replaceRouteWhenChange?: boolean
+  mapDefaultQueryPropsToUrlWhenMounted?: boolean
+}
+
+declare function queryToPropsHOC<T>(DecoratedComponent: React.ComponentType, config: IConfig): React.ComponentType<T>
 
 declare enum QueryPropTypes {
   number = 'number',
@@ -41,6 +38,6 @@ declare enum ValidateTypes {
   function = 'function'
 }
 
-export { QueryPropTypes, ValidateTypes }
+export { QueryPropTypes, ValidateTypes, IConfig }
 
 export default queryToPropsHOC