Add EntityDeletionView
authorFrank Bessou <frank.bessou@logilab.fr>
Mon, 10 Apr 2017 11:07:49 +0200
changeset 103 930f8bb45e22
parent 102 02ed873453e8
child 104 80bf81f6463c
Add EntityDeletionView
src/Api.js
src/components/Entity.js
--- a/src/Api.js	Tue Apr 11 09:34:45 2017 +0200
+++ b/src/Api.js	Mon Apr 10 11:07:49 2017 +0200
@@ -220,7 +220,13 @@
         const options = {
             method: 'DELETE',
         };
-        return this.jsonSchemaFetch(url, options);
+        return this.fetch(this.buildUrl(url), options)
+            .then( response => response.status)
+            .then( status => {
+                if (status !== 204 && status !== 404) {
+                    throw new Error(`Could not delete resource /${etype}/${eid}`);
+                }
+            });
     }
 
     getTransitionsSchema(etype, eid) {
--- a/src/components/Entity.js	Tue Apr 11 09:34:45 2017 +0200
+++ b/src/components/Entity.js	Mon Apr 10 11:07:49 2017 +0200
@@ -184,6 +184,9 @@
         this.state = {entity: null};
         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);
     }
 
     componentDidMount() {
@@ -200,10 +203,31 @@
         this.setState(merge({}, this.state, {entity: {data: wrappedData}}));
     }
 
+    deleteEntity() {
+        Api.deleteEntity(this.etype, this.eid)
+            .then( () => {
+                this.navigateToParent();
+            });
+    }
+
     getEditionSchema() {
         return Api.getSchema(this.state.entity.url, 'edition');
     }
 
+    navigateToSelf() {
+        this.context.router.push(this.state.entity.data.getLink('self').href);
+    }
+
+    navigateToParent() {
+        const parentRoute = this.state.entity.data.getLink('up').href;
+        if (parentRoute) {
+            this.context.router.push(parentRoute);
+        } else {
+            // XXX Use previous location as fallback
+            this.context.router.push('/');
+        }
+    }
+
     render() {
         if (this.state.entity === null) {
             return <div>loading...</div>;
@@ -218,6 +242,14 @@
                     redirectPath={ redirectPath }
                 />
             );
+        } else if (this.props.params.view === 'delete') {
+            return (
+                <EntityDeletionView
+                    entity={this.state.entity}
+                    onConfirm={this.deleteEntity}
+                    onCancel={this.navigateToSelf}
+                />
+            );
         }
         return <EntityView entity={this.state.entity}/>;
     }
@@ -232,6 +264,9 @@
     }),
 };
 
+Entity.contextTypes = {
+    router: React.PropTypes.object.isRequired,
+}
 export class EntityView extends React.Component {
 
     renderTitle() {
@@ -445,3 +480,20 @@
     getSchema: React.PropTypes.func.isRequired,
     updateEntity: React.PropTypes.func.isRequired,
 };
+
+function EntityDeletionView({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>
+    );
+
+}
+
+EntityDeletionView.propTypes = {
+    onCancel: React.PropTypes.func.isRequired,
+    onConfirm: React.PropTypes.func.isRequired,
+};