Use @@:view suffix to specify actions in client route
authorFrank Bessou <frank.bessou@logilab.fr>
Thu, 04 May 2017 18:34:42 +0200
changeset 183 faaa51e8a501
parent 182 353a3e2767ab
child 184 d4466da07974
Use @@:view suffix to specify actions in client route When using /:view suffix, we can't know if the URL of the resource contains a trailing slash or not. For example, when used with a view suffix,'/author/' can't be distinguished from '/author'. This is not a problem when using @@ suffix as it can be placed after a non-slash character. Another solution would be to use search parameters. This convention comes from Pyramid/Plone/Zope traversal rules: http://docs.pylonsproject.org/projects/pyramid/en/latest/narr/traversal.html#a-description-of-the-traversal-algorithm https://docs.plone.org/develop/plone/views/browserviews.html#accessing-your-newly-created-view https://books.google.fr/books?id=RT7EiQ5ISI4C&pg=PA280&lpg=PA280#v=onepage&q&f=true
src/components/BaseViews.js
src/index.js
test/index.js
--- a/src/components/BaseViews.js	Thu May 04 17:57:10 2017 +0200
+++ b/src/components/BaseViews.js	Thu May 04 18:34:42 2017 +0200
@@ -4,7 +4,6 @@
 import {isEmpty} from 'lodash/lang';
 import {PropTypeAction, PropTypesResourceModel} from '../model';
 import {PropTypeJsonaryWrapper} from '../jsonaryutils';
-import {appendPath} from '../utils';
 
 export function CollectionItemLink({item}) {
     const itemRoute = item.getLink('item').href;
@@ -57,16 +56,16 @@
 };
 
 export function ActionLink({targetUrl, action}) {
-    let url = '';
+    let url = targetUrl;
     switch (action) {
         case 'delete':
-            url = appendPath(targetUrl, '/delete');
+            url += '@@delete';
             break;
         case 'edit':
-            url = appendPath(targetUrl, '/edit');
+            url += '@@edit';
             break;
         case 'create':
-            url = appendPath(targetUrl, '/new');
+            url += '@@new';
             break;
         default:
             return null;
--- a/src/index.js	Thu May 04 17:57:10 2017 +0200
+++ b/src/index.js	Thu May 04 18:34:42 2017 +0200
@@ -17,9 +17,9 @@
             <Switch>
                 <Route exact path='/' component={Root} />
                 <Route path="/:etype/:eid/relationships/:rtype" component={AddRelated} />
-                <Route path="/:etype/new" component={EntityCreationForm} />
-                <Route path="/:etype/:eid/:view" component={Entity} />
-                <Route path="/:etype/:eid/" component={Entity} />
+                <Route path="/:etype/@@new" component={EntityCreationForm} />
+                <Route path="/:etype/:eid@@:view" component={Entity} />
+                <Route path="/:etype/:eid" component={Entity} />
                 <Route path="/:etype" component={Entities} />
                 <Route path="*" component={NotFound} />
             </Switch>
--- a/test/index.js	Thu May 04 17:57:10 2017 +0200
+++ b/test/index.js	Thu May 04 18:34:42 2017 +0200
@@ -210,7 +210,7 @@
         const wrapper = shallow(<ActionLink targetUrl={targetUrl} action='create'/>);
 
         expect(wrapper.is('Link')).to.be.equal(true);
-        expect(wrapper.prop('to')).to.be.equal('/any/123/new');
+        expect(wrapper.prop('to')).to.be.equal('/any/123@@new');
         expect(wrapper.prop('title')).to.be.equal('create');
     });
 
@@ -218,7 +218,7 @@
         const wrapper = shallow(<ActionLink targetUrl={targetUrl} action='edit'/>);
 
         expect(wrapper.is('Link')).to.be.equal(true);
-        expect(wrapper.prop('to')).to.be.equal( '/any/123/edit');
+        expect(wrapper.prop('to')).to.be.equal( '/any/123@@edit');
         expect(wrapper.prop('title')).to.be.equal('edit');
     });
 
@@ -226,7 +226,7 @@
         const wrapper = shallow(<ActionLink targetUrl={targetUrl} action='delete'/>);
 
         expect(wrapper.is('Link')).to.be.equal(true);
-        expect(wrapper.prop('to')).to.be.equal( '/any/123/delete');
+        expect(wrapper.prop('to')).to.be.equal( '/any/123@@delete');
         expect(wrapper.prop('title')).to.be.equal('delete');
     });