Add ResourceDeletionView to Resource.js
authorFrank Bessou <frank.bessou@logilab.fr>
Wed, 10 May 2017 16:33:28 +0200
changeset 192 74c9a8eed1ef
parent 191 a532f96e0050
child 193 3c032c1c33c8
Add ResourceDeletionView to Resource.js This component is working on resources, so Resource.js is seems to be a better place for it.
src/components/Entity.js
src/components/Resource.js
src/index.js
--- a/src/components/Entity.js	Wed May 10 13:20:22 2017 +0200
+++ b/src/components/Entity.js	Wed May 10 16:33:28 2017 +0200
@@ -150,9 +150,6 @@
         this.state = this.getInitialState(props);
         this.getEditionSchema = this.getEditionSchema.bind(this);
         this.updateEntity = this.updateEntity.bind(this);
-        this.deleteEntity = this.deleteEntity.bind(this);
-        this.navigateToParent = this.navigateToParent.bind(this);
-        this.navigateToSelf = this.navigateToSelf.bind(this);
     }
 
     getInitialState() {
@@ -192,31 +189,10 @@
         this.setState(merge({}, this.state, {entity: {data: entity}}));
     }
 
-    deleteEntity() {
-        HypermediaClient.deleteResource(this.state.entity.route)
-            .then( () => {
-                this.navigateToParent();
-            });
-    }
-
     getEditionSchema() {
         return HypermediaClient.getSchema(appendPath(this.state.entity.url, '/schema?role=edition'));
     }
 
-    navigateToSelf() {
-        this.context.router.history.push(this.state.entity.data.getLink('self').href);
-    }
-
-    navigateToParent() {
-        const parentRoute = this.state.entity.data.getLink('up').href;
-        if (parentRoute) {
-            this.context.router.history.push(parentRoute);
-        } else {
-            // XXX Use previous location as fallback
-            this.context.router.history.push('/');
-        }
-    }
-
     render() {
         if (this.state.entity === null) {
             return <div>loading...</div>;
@@ -233,13 +209,6 @@
                     redirectPath={ redirectPath }
                 />
             );
-        } else if (this.props.match.params.view === 'delete') {
-            return (
-                <ResourceDeletionView
-                    onConfirm={this.deleteEntity}
-                    onCancel={this.navigateToSelf}
-                />
-            );
         }
     }
 
@@ -377,20 +346,3 @@
     getSchema: PropTypes.func.isRequired,
     updateEntity: PropTypes.func.isRequired,
 };
-
-function ResourceDeletionView({onConfirm, onCancel}) {
-    return (
-        <div>
-            Do you really want to permanently remove this resource?
-            <br/>
-            <button onClick={onConfirm}>Confirm</button>
-            <button onClick={onCancel}>Cancel</button>
-        </div>
-    );
-
-}
-
-ResourceDeletionView.propTypes = {
-    onCancel: PropTypes.func.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-};
--- a/src/components/Resource.js	Wed May 10 13:20:22 2017 +0200
+++ b/src/components/Resource.js	Wed May 10 16:33:28 2017 +0200
@@ -162,11 +162,47 @@
     resource: PropTypesResourceModel,
 };
 
+export function ResourceDeletionView({resource}, {router}) {
+    const history = router.history;
+    function navigateToParent() {
+        const parentRoute = resource.data.getLink('up').href;
+        if (parentRoute) {
+            history.push(parentRoute);
+        } else {
+            // XXX Use previous location as fallback
+            history.push('/');
+        }
+    }
+    function navigateToSelf() {
+        history.push(resource.url);
+    }
+    function deleteEntity() {
+        hypermediaClient.deleteResource(resource.url).then(navigateToParent);
+    }
+    return (
+        <div>
+            Do you really want to permanently remove this resource?
+            <br/>
+            <button onClick={deleteEntity}>Confirm</button>
+            <button onClick={navigateToSelf}>Cancel</button>
+        </div>
+    );
+
+}
+ResourceDeletionView.propTypes = {
+    resource: PropTypesResourceModel.isRequired,
+};
+ResourceDeletionView.contextTypes = {
+    router: PropTypes.object.isRequired,
+};
+
 export function Resource(props) {
     function selectView() {
         switch (props.match.params.action) {
             case 'new':
                 return ResourceCreationForm;
+            case 'delete':
+                return ResourceDeletionView;
             case 'view':
             default:
                 return ResourceView;
--- a/src/index.js	Wed May 10 13:20:22 2017 +0200
+++ b/src/index.js	Wed May 10 16:33:28 2017 +0200
@@ -18,11 +18,11 @@
                 <Route exact path='/' component={Root} />
                 <Route path="/:etype/:eid/relationships/:rtype" component={AddRelated} />
 
-                {/* Entity edit and delete routes */}
-                <Route exact path="/:etype/:eid@@:view(edit|delete)" component={Entity} />
-                <Route exact path="/:etype/:eid/@@:view(edit|delete)" component={Entity} />
+                {/* Entity edit route */}
+                <Route exact path="/:etype/:eid@@:view(edit)" component={Entity} />
+                <Route exact path="/:etype/:eid/@@:view(edit)" component={Entity} />
 
-                <Route exact path=":apiUrl(.*)@@:action(view|new)" component={Resource} />
+                <Route exact path=":apiUrl(.*)@@:action(view|new|delete)" component={Resource} />
                 <Route exact path=":apiUrl(.*)" component={Resource} />
 
                 <Route path="*" component={NotFound} />