Merge pull request #234 from jmeas/support-dots-in-keys

Support bracket notation to support dots in keys

INDEX.md

@@ -122,7 +122,7 @@ import store from './store';
 const state = store.getState();
 // The second argument to this method is a path into the state tree. This method
 // protects you from needing to check for undefined values.
-const readStatus = getStatus(store, 'books.meta.24.readStatus');
+const readStatus = getStatus(store, 'books.meta[24].readStatus');
 
 if (readStatus.pending) {
   console.log('The request is in flight.');

README.md

@@ -92,7 +92,7 @@ import store from './store';
 const state = store.getState();
 // The second argument to this method is a path into the state tree. This method
 // protects you from needing to check for undefined values.
-const readStatus = getStatus(store, 'books.meta.24.readStatus');
+const readStatus = getStatus(store, 'books.meta[24].readStatus');
 
 if (readStatus.pending) {
   console.log('The request is in flight.');

docs/api-reference/get-status.md

@@ -66,7 +66,7 @@ import { getStatus } from 'redux-resource';
 import store from './store';
 
 const state = store.getState();
-const bookDeleteStatus = getStatus(state, 'books.meta.23.deleteStatus');
+const bookDeleteStatus = getStatus(state, 'books.meta[23].deleteStatus');
 ```
 
 In this example, we pass two locations:
@@ -79,7 +79,7 @@ const state = store.getState();
 const bookReadStatus = getStatus(
   state,
   [
-    'articles.meta.23.readStatus',
+    'articles.meta[23].readStatus',
     'comments.requests.detailsRead.status'
   ],
   true

docs/extras/redux-resource-prop-types.md

@@ -114,7 +114,7 @@ MyComponent.propTypes = {
 
 mapStateToProps(state) {
   return {
-    bookReadStatus: getStatus(state, 'books.meta.23.readStatus');
+    bookReadStatus: getStatus(state, 'books.meta[23].readStatus');
   };
 }
 ```

docs/guides/request-statuses.md

@@ -49,7 +49,7 @@ export class BookDetails extends Component {
 function mapStateToProps(state, props) {
   // A user can pass a `bookId` into this Component to view the book's data
   const bookId = props.bookId;
-  const readStatus = getStatus(state, `books.meta.${bookId}.readStatus`, true);
+  const readStatus = getStatus(state, `books.meta[${bookId}].readStatus`, true);
   const book = state.books.resources[book.id];
 
   return {

docs/recipes/user-feedback.md

@@ -23,7 +23,7 @@ this might look like:
 ```jsx
 render() {
   const { state } = this.props;
-  const readStatus = getStatus(state, 'books.meta.24.readStatus');
+  const readStatus = getStatus(state, 'books.meta[24].readStatus');
 
   return (
     <div>
@@ -77,7 +77,7 @@ If you're using React, an example code snippet of disabling a button is:
 ```jsx
 render() {
   const { state } = this.props;
-  const readStatus = getStatus(state, 'books.meta.24.readStatus');
+  const readStatus = getStatus(state, 'books.meta[24].readStatus');
 
   return (
     <div>
@@ -111,7 +111,7 @@ React, a typical error message might look like the following:
 ```jsx
 render() {
   const { state } = this.props;
-  const readStatus = getStatus(state, 'books.meta.24.readStatus');
+  const readStatus = getStatus(state, 'books.meta[24].readStatus');
 
   return (
     <div>
@@ -186,7 +186,7 @@ using React. For instance:
 ```jsx
 render() {
   const { state } = this.props;
-  const updateState = getStatus(state, 'books.meta.24.updateStatus');
+  const updateState = getStatus(state, 'books.meta[24].updateStatus');
 
   return (
     <div>

examples/read-resource/src/components/Book.js

@@ -6,7 +6,7 @@ import { slicePropType } from 'redux-resource-prop-types';
 class Book extends Component {
   render() {
     const { state, readBook, bookId } = this.props;
-    const readStatus = getStatus(state, 'meta.24.readStatus');
+    const readStatus = getStatus(state, 'meta[24].readStatus');
     const book = state.resources[bookId];
 
     return (

packages/redux-resource/src/utils/get-path-parts.js

@@ -0,0 +1,59 @@
+// Given a path, such as "meta[24].readStatus", this will return an array of "path parts." In
+// that example, the path parts would be ['meta', '24', 'readStatus'].
+// This method supports dot notation as well as bracket notation.
+export default function getPathParts(path) {
+  const parts = [];
+  let i = 0;
+  let nextDot, nextOpenBracket, openQuote, nextCloseBracket;
+
+  while (i < path.length) {
+    nextDot = path.indexOf('.', i);
+    nextOpenBracket = path.indexOf('[', i);
+
+    // When there are no dots nor opening brackets ahead of the
+    // current index, then we've reached the final path part.
+    if (nextDot === -1 && nextOpenBracket === -1) {
+      parts.push(path.slice(i, path.length));
+      i = path.length;
+    }
+
+    // This handles dots. When there are no more open brackets, or the next dot is before
+    // the next open bracket, then we simply add the path part.
+    else if (nextOpenBracket === -1 || (nextDot !== -1 && nextDot < nextOpenBracket)) {
+      parts.push(path.slice(i, nextDot));
+      i = nextDot + 1;
+    }
+
+    // If neither of the above two conditions are met, then we're dealing with a bracket.
+    else {
+      if (nextOpenBracket > i) {
+        parts.push(path.slice(i, nextOpenBracket));
+        i = nextOpenBracket;
+      }
+
+      openQuote = path.slice(nextOpenBracket + 1, nextOpenBracket + 2);
+
+      // This handles the situation when we do not have quotes. For instance, [24] or [asdf]
+      if (openQuote !== '"' && openQuote !== "'") {
+        nextCloseBracket = path.indexOf(']', nextOpenBracket);
+        if (nextCloseBracket === -1) {
+          nextCloseBracket = path.length;
+        }
+        parts.push(path.slice(i + 1, nextCloseBracket));
+        i = (path.slice(nextCloseBracket + 1, nextCloseBracket + 2) === '.') ? nextCloseBracket + 2 : nextCloseBracket + 1;
+      }
+
+      // This handles brackets that are wrapped in quotes. For instance, ["hello"] or ['24']
+      else {
+        nextCloseBracket = path.indexOf(`${openQuote}]`, nextOpenBracket);
+        if (nextCloseBracket === -1) {
+          nextCloseBracket = path.length;
+        }
+        parts.push(path.slice(i + 2, nextCloseBracket));
+        i = (path.slice(nextCloseBracket + 2, nextCloseBracket + 3) === '.') ? nextCloseBracket + 3 : nextCloseBracket + 2;
+      }
+    }
+  }
+
+  return parts;
+}

packages/redux-resource/src/utils/get-status.js

@@ -1,8 +1,9 @@
 import requestStatuses from './request-statuses';
+import getPathParts from './get-path-parts';
 import warning from './warning';
 
 function getSingleStatus(state, statusLocation, treatNullAsPending) {
-  const splitPath = statusLocation.split('.');
+  const splitPath = getPathParts(statusLocation);
 
   let status;
   let currentVal = state;

packages/redux-resource/test/unit/utils/get-status.js

@@ -32,6 +32,21 @@ describe('getStatus', function() {
             updateStatus: requestStatuses.FAILED,
           }
         },
+      },
+      things: {
+        'pasta.is.tasty': {
+          readStatus: requestStatuses.SUCCEEDED
+        },
+        24: {
+          updateStatus: requestStatuses.FAILED
+        },
+        100: requestStatuses.PENDING,
+        '\\\'': {
+          deleteStatus: requestStatuses.PENDING
+        },
+        '[\'a\']': {
+          '[\\"a\\"]': requestStatuses.FAILED
+        }
       }
     };
   });
@@ -65,7 +80,7 @@ describe('getStatus', function() {
   });
 
   describe('singular', () => {
-    it('should return a meta that exists', () => {
+    it('should return a request status that exists', () => {
       expect(getStatus(this.state, 'sandwiches.meta.102.readStatus')).to.deep.equal({
         null: false,
         pending: false,
@@ -75,6 +90,16 @@ describe('getStatus', function() {
       expect(console.error.callCount).to.equal(0);
     });
 
+    it('should return a request status that exists; bracket syntax', () => {
+      expect(getStatus(this.state, 'sandwiches.meta[102].readStatus')).to.deep.equal({
+        null: false,
+        pending: false,
+        failed: false,
+        succeeded: true
+      });
+      expect(console.error.callCount).to.equal(0);
+    });
+
     it('should return a request status that exists', () => {
       expect(getStatus(this.state, 'books.requests.dashboardSearch.status')).to.deep.equal({
         null: false,
@@ -95,6 +120,16 @@ describe('getStatus', function() {
       expect(console.error.callCount).to.equal(0);
     });
 
+    it('should return a meta that exists and is null; bracket syntax', () => {
+      expect(getStatus(this.state, 'sandwiches.meta[100].readStatus')).to.deep.equal({
+        null: true,
+        pending: false,
+        failed: false,
+        succeeded: false
+      });
+      expect(console.error.callCount).to.equal(0);
+    });
+
     it('should return a meta that exists and is null with `treatNullAsPending` set to true', () => {
       expect(getStatus(this.state, 'sandwiches.meta.100.readStatus', true)).to.deep.equal({
         null: false,
@@ -105,6 +140,16 @@ describe('getStatus', function() {
       expect(console.error.callCount).to.equal(0);
     });
 
+    it('should return a meta that exists and is null with `treatNullAsPending` set to true; bracket syntax', () => {
+      expect(getStatus(this.state, 'sandwiches.meta[100].readStatus', true)).to.deep.equal({
+        null: false,
+        pending: true,
+        failed: false,
+        succeeded: false
+      });
+      expect(console.error.callCount).to.equal(0);
+    });
+
     it('should return a meta that exists and is succeeded with `treatNullAsPending` set to true', () => {
       expect(getStatus(this.state, 'sandwiches.meta.102.readStatus', true)).to.deep.equal({
         null: false,
@@ -115,6 +160,16 @@ describe('getStatus', function() {
       expect(console.error.callCount).to.equal(0);
     });
 
+    it('should return a meta that exists and is succeeded with `treatNullAsPending` set to true; bracket syntax', () => {
+      expect(getStatus(this.state, 'sandwiches.meta[102].readStatus', true)).to.deep.equal({
+        null: false,
+        pending: false,
+        failed: false,
+        succeeded: true
+      });
+      expect(console.error.callCount).to.equal(0);
+    });
+
     it('should return a meta that does not exist', () => {
       expect(getStatus(this.state, 'books.meta.10.updateStatus')).to.deep.equal({
         null: true,
@@ -134,6 +189,88 @@ describe('getStatus', function() {
       });
       expect(console.error.callCount).to.equal(0);
     });
+
+    it('should support bracket syntax for keys with periods in them, double quotes', () => {
+      expect(getStatus(this.state, 'things["pasta.is.tasty"].readStatus')).to.deep.equal({
+        null: false,
+        pending: false,
+        failed: false,
+        succeeded: true
+      });
+      expect(console.error.callCount).to.equal(0);
+    });
+
+    it('should support bracket syntax for keys with periods in them, single quotes', () => {
+      expect(getStatus(this.state, "things['pasta.is.tasty'].readStatus")).to.deep.equal({
+        null: false,
+        pending: false,
+        failed: false,
+        succeeded: true
+      });
+      expect(console.error.callCount).to.equal(0);
+    });
+
+    it('should support bracket syntax for numbers', () => {
+      expect(getStatus(this.state, 'things[24].updateStatus')).to.deep.equal({
+        null: false,
+        pending: false,
+        failed: true,
+        succeeded: false
+      });
+      expect(console.error.callCount).to.equal(0);
+    });
+
+    it('should support bracket syntax, ending on a bracket', () => {
+      expect(getStatus(this.state, 'things[100]')).to.deep.equal({
+        null: false,
+        pending: true,
+        failed: false,
+        succeeded: false
+      });
+      expect(console.error.callCount).to.equal(0);
+    });
+
+    it('should support bracket syntax, ending on a bracket, but missing ending bracket', () => {
+      expect(getStatus(this.state, 'things[100')).to.deep.equal({
+        null: false,
+        pending: true,
+        failed: false,
+        succeeded: false
+      });
+      expect(console.error.callCount).to.equal(0);
+    });
+
+    it('should support bracket syntax, ending on a bracket, but missing ending bracket with quotes', () => {
+      expect(getStatus(this.state, 'things["100')).to.deep.equal({
+        null: false,
+        pending: true,
+        failed: false,
+        succeeded: false
+      });
+      expect(console.error.callCount).to.equal(0);
+    });
+
+    it('should support strings with escaped quotes', () => {
+      // eslint-disable-next-line
+      expect(getStatus(this.state, "things[\'\\\'\'].deleteStatus")).to.deep.equal({
+        null: false,
+        pending: true,
+        failed: false,
+        succeeded: false
+      });
+      expect(console.error.callCount).to.equal(0);
+    });
+
+    it('should support strings with escaped quotes', () => {
+      // eslint-disable-next-line
+      expect(getStatus(this.state, 'things["[\'a\']"][\'[\\"a\\"]\']')).to.deep.equal({
+        null: false,
+        pending: false,
+        failed: true,
+        succeeded: false
+      });
+      expect(console.error.callCount).to.equal(0);
+    });
   });
 
   describe('plural', () => {
@@ -216,5 +353,24 @@ describe('getStatus', function() {
       });
       expect(console.error.callCount).to.equal(0);
     });
+
+    it('should fail when one is failed; bracket syntax', () => {
+      const result = getStatus(
+        this.state,
+        [
+          'sandwiches.meta[102].readStatus',
+          'books.requests.dashboardSearch.status',
+          'sandwiches.meta[102].updateStatus'
+        ]
+      );
+
+      expect(result).to.deep.equal({
+        null: false,
+        pending: false,
+        failed: true,
+        succeeded: false
+      });
+      expect(console.error.callCount).to.equal(0);
+    });
   });
 });