From 7146f00c0510566a00f8a91f79a84c1e844dcdb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Fri, 27 Nov 2015 13:36:42 +0100
Subject: [PATCH] Refactor webhooks: add source, clear state on create hide
 create on no items left

---
 js/actions/webhook_actions.js                 | 40 ++--------
 .../ascribe_settings/webhook_settings.js      | 65 +++++++++--------
 .../components/pr_login_container.js          |  0
 js/fetchers/webhook_fetcher.js                | 23 ------
 js/sources/webhook_source.js                  | 46 ++++++++++++
 js/stores/webhook_store.js                    | 73 +++++++++++++++++--
 6 files changed, 153 insertions(+), 94 deletions(-)
 create mode 100644 js/components/whitelabel/prize/portfolioreview/components/pr_login_container.js
 delete mode 100644 js/fetchers/webhook_fetcher.js
 create mode 100644 js/sources/webhook_source.js

diff --git a/js/actions/webhook_actions.js b/js/actions/webhook_actions.js
index 4e5b2462..f9555ce7 100644
--- a/js/actions/webhook_actions.js
+++ b/js/actions/webhook_actions.js
@@ -1,47 +1,19 @@
 'use strict';
 
 import { alt } from '../alt';
-import WebhookFetcher from '../fetchers/webhook_fetcher';
 
 
 class WebhookActions {
     constructor() {
         this.generateActions(
-            'updateWebhooks',
-            'updateEvents',
-            'removeWebhook'
+            'fetchWebhooks',
+            'successFetchWebhooks',
+            'fetchWebhookEvents',
+            'successFetchWebhookEvents',
+            'removeWebhook',
+            'successRemoveWebhook'
         );
     }
-
-    fetchWebhooks() {
-        WebhookFetcher.fetch()
-            .then((res) => {
-                this.actions.updateWebhooks(res.webhooks);
-            })
-            .catch((err) => {
-                console.logGlobal(err);
-            });
-    }
-
-    fetchWebhookEvents() {
-        WebhookFetcher.fetchEvents()
-            .then((res) => {
-                this.actions.updateEvents(res.events);
-            })
-            .catch((err) => {
-                console.logGlobal(err);
-            });
-    }
-
-    deleteWebhook(id){
-        WebhookFetcher.deleteWebhook(id)
-            .then((res) => {
-                this.actions.removeWebhook(id);
-            })
-            .catch((err) => {
-                console.logGlobal(err);
-            });
-    }
 }
 
 export default alt.createActions(WebhookActions);
diff --git a/js/components/ascribe_settings/webhook_settings.js b/js/components/ascribe_settings/webhook_settings.js
index 1f9eefc5..18c21aa6 100644
--- a/js/components/ascribe_settings/webhook_settings.js
+++ b/js/components/ascribe_settings/webhook_settings.js
@@ -11,6 +11,8 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 import Form from '../ascribe_forms/form';
 import Property from '../ascribe_forms/property';
 
+import AclProxy from '../acl_proxy';
+
 import ActionPanel from '../ascribe_panel/action_panel';
 import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
 
@@ -43,16 +45,18 @@ let WebhookSettings = React.createClass({
         this.setState(state);
     },
 
-    onDeleteWebhook(event) {
-        let webhookId = event.target.getAttribute('data-id');
-        WebhookActions.deleteWebhook(webhookId);
+    onRemoveWebhook(webhookId) {
+        return (event) => {
+            WebhookActions.removeWebhook(webhookId);
 
-        let notification = new GlobalNotificationModel(getLangText('Webhook deleted'), 'success', 2000);
-        GlobalNotificationActions.appendGlobalNotification(notification);
+            let notification = new GlobalNotificationModel(getLangText('Webhook deleted'), 'success', 2000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+        };
     },
 
     handleCreateSuccess() {
-        WebhookActions.fetchWebhooks();
+        this.refs.webhookCreateForm.reset();
+        WebhookActions.fetchWebhooks(true);
         let notification = new GlobalNotificationModel(getLangText('Webhook successfully created'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
@@ -60,7 +64,7 @@ let WebhookSettings = React.createClass({
     getWebhooks(){
         let content = <AscribeSpinner color='dark-blue' size='lg'/>;
 
-        if (this.state.webhooks.length > -1) {
+        if (this.state.webhooks) {
             content = this.state.webhooks.map(function(webhook, i) {
                 const event = webhook.event.split('.')[0];
                 return (
@@ -82,8 +86,7 @@ let WebhookSettings = React.createClass({
                                 <div className="pull-right">
                                     <button
                                         className="pull-right btn btn-tertiary btn-sm"
-                                        onClick={this.onDeleteWebhook}
-                                        data-id={webhook.id}>
+                                        onClick={this.onRemoveWebhook(webhook.id)}>
                                         {getLangText('DELETE')}
                                     </button>
                                 </div>
@@ -96,14 +99,13 @@ let WebhookSettings = React.createClass({
     },
 
     getEvents() {
-        if (this.state.events && this.state.events.length > 1) {
+        if (this.state.webhookEvents && this.state.webhookEvents.length) {
             return (
                 <Property
                     name='event'
-                    label={getLangText('Select the event to trigger a webhook', '...')}
-                    onChange={this.onLicenseChange}>
-                    <select name="license">
-                        {this.state.events.map((event, i) => {
+                    label={getLangText('Select the event to trigger a webhook', '...')}>
+                    <select name="events">
+                        {this.state.webhookEvents.map((event, i) => {
                             return (
                                 <option
                                     name={i}
@@ -125,23 +127,24 @@ let WebhookSettings = React.createClass({
             <CollapsibleParagraph
                 title={getLangText('Webhooks')}
                 defaultExpanded={this.props.defaultExpanded}>
-                <Form
-                    url={ApiUrls.webhooks}
-                    handleSuccess={this.handleCreateSuccess}>
-                    { this.getEvents() }
-                    <Property
-                        name='target'
-                        label={getLangText('Redirect Url')}>
-                        <input
-                            type="text"
-                            placeholder={getLangText('Enter the url to be triggered')}
-                            required/>
-                    </Property>
-                    <hr />
-                </Form>
-                <pre>
-                    Usage: curl &lt;url&gt; -H 'Authorization: Bearer &lt;token&gt;'
-                </pre>
+                <AclProxy
+                    show={this.state.webhookEvents && this.state.webhookEvents.length}>
+                    <Form
+                        ref="webhookCreateForm"
+                        url={ApiUrls.webhooks}
+                        handleSuccess={this.handleCreateSuccess}>
+                        { this.getEvents() }
+                        <Property
+                            name='target'
+                            label={getLangText('Redirect Url')}>
+                            <input
+                                type="text"
+                                placeholder={getLangText('Enter the url to be triggered')}
+                                required/>
+                        </Property>
+                        <hr />
+                    </Form>
+                </AclProxy>
                 {this.getWebhooks()}
             </CollapsibleParagraph>
         );
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_login_container.js b/js/components/whitelabel/prize/portfolioreview/components/pr_login_container.js
new file mode 100644
index 00000000..e69de29b
diff --git a/js/fetchers/webhook_fetcher.js b/js/fetchers/webhook_fetcher.js
deleted file mode 100644
index 20775c81..00000000
--- a/js/fetchers/webhook_fetcher.js
+++ /dev/null
@@ -1,23 +0,0 @@
-'use strict';
-
-import requests from '../utils/requests';
-
-let WebhookFetcher = {
-    /**
-     * Fetch the registered webhooks of a user from the API.
-     */
-    fetch() {
-        return requests.get('webhooks');
-    },
-
-    deleteWebhook(id) {
-        return requests.delete('webhook', {'webhook_id': id });
-    },
-
-    fetchEvents() {
-        return requests.get('webhooks_events');
-    }
-
-};
-
-export default WebhookFetcher;
diff --git a/js/sources/webhook_source.js b/js/sources/webhook_source.js
new file mode 100644
index 00000000..5351c89c
--- /dev/null
+++ b/js/sources/webhook_source.js
@@ -0,0 +1,46 @@
+'use strict';
+
+import requests from '../utils/requests';
+
+import WebhookActions from '../actions/webhook_actions';
+
+
+const WebhookSource = {
+    lookupWebhooks: {
+        remote() {
+            return requests.get('webhooks');
+        },
+        local(state) {
+            return state.webhooks && !Object.keys(state.webhooks).length ? state : {};
+        },
+        success: WebhookActions.successFetchWebhooks,
+        error: WebhookActions.errorWebhooks,
+        shouldFetch(state) {
+            return state.webhookMeta.invalidateCache || state.webhooks && !Object.keys(state.webhooks).length;
+        }
+    },
+
+    lookupWebhookEvents: {
+        remote() {
+            return requests.get('webhooks_events');
+        },
+        local(state) {
+            return state.webhookEvents && !Object.keys(state.webhookEvents).length ? state : {};
+        },
+        success: WebhookActions.successFetchWebhookEvents,
+        error: WebhookActions.errorWebhookEvents,
+        shouldFetch(state) {
+            return state.webhookEventsMeta.invalidateCache || state.webhookEvents && !Object.keys(state.webhookEvents).length;
+        }
+    },
+
+    performRemoveWebhook: {
+        remote(state) {
+            return requests.delete('webhook', {'webhook_id': state.webhookMeta.idToDelete });
+        },
+        success: WebhookActions.successRemoveWebhook,
+        error: WebhookActions.errorWebhooks
+    }
+};
+
+export default WebhookSource;
\ No newline at end of file
diff --git a/js/stores/webhook_store.js b/js/stores/webhook_store.js
index 95b081a6..7dfcc61d 100644
--- a/js/stores/webhook_store.js
+++ b/js/stores/webhook_store.js
@@ -3,24 +3,85 @@
 import { alt } from '../alt';
 import WebhookActions from '../actions/webhook_actions';
 
+import WebhookSource from '../sources/webhook_source';
 
 class WebhookStore {
     constructor() {
-        this.webhooks = {};
-        this.events = {};
+        this.webhooks = [];
+        this.webhookEvents = [];
+        this.webhookMeta = {
+            invalidateCache: false,
+            err: null,
+            idToDelete: null
+        };
+        this.webhookEventsMeta = {
+            invalidateCache: false,
+            err: null
+        };
+
         this.bindActions(WebhookActions);
+        this.registerAsync(WebhookSource);
     }
 
-    onUpdateWebhooks(webhooks) {
+    onFetchWebhooks(invalidateCache) {
+        this.webhookMeta.invalidateCache = invalidateCache;
+        this.getInstance().lookupWebhooks();
+    }
+
+    onSuccessFetchWebhooks({ webhooks }) {
+        this.webhookMeta.invalidateCache = false;
+        this.webhookMeta.err = null;
         this.webhooks = webhooks;
+
+        this.webhookEventsMeta.invalidateCache = true;
+        this.getInstance().lookupWebhookEvents();
     }
 
-    onUpdateEvents(events) {
-        this.events = events;
+    onFetchWebhookEvents(invalidateCache) {
+        this.webhookEventsMeta.invalidateCache = invalidateCache;
+        this.getInstance().lookupWebhookEvents();
+    }
+
+    onSuccessFetchWebhookEvents({ events }) {
+        this.webhookEventsMeta.invalidateCache = false;
+        this.webhookEventsMeta.err = null;
+
+        // remove all events that have already been used.
+        const usedEvents = this.webhooks
+                                .reduce((tempUsedEvents, webhook) => {
+                                    tempUsedEvents.push(webhook.event.split('.')[0]);
+                                    return tempUsedEvents;
+                                }, []);
+
+        this.webhookEvents = events.filter((event) => {
+            return usedEvents.indexOf(event) === -1;
+        });
     }
 
     onRemoveWebhook(id) {
-       this.webhooks = this.webhooks.filter((webhook) => webhook.id !== parseInt(id));
+        this.webhookMeta.invalidateCache = true;
+        this.webhookMeta.idToDelete = id;
+
+        if(!this.getInstance().isLoading()) {
+            this.getInstance().performRemoveWebhook();
+        }
+    }
+
+    onSuccessRemoveWebhook() {
+        this.webhookMeta.idToDelete = null;
+        if(!this.getInstance().isLoading()) {
+            this.getInstance().lookupWebhooks();
+        }
+    }
+
+    onErrorWebhooks(err) {
+        console.logGlobal(err);
+        this.webhookMeta.err = err;
+    }
+
+    onErrorWebhookEvents(err) {
+        console.logGlobal(err);
+        this.webhookEventsMeta.err = err;
     }
 }