Add button to directly open darkmode.css

1 files changed, 29 insertions, 0 deletions

diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index e4ff03bb3..d18d7fb9b 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -92,6 +92,10 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
     intl: intlShape,
   };
 
+  state = {
+    isOpeningDarkModeCss: false,
+  }
+
   onSubmit(data) {
     const { action } = this.props.router.params;
     const { recipes, services } = this.props.stores;
@@ -278,6 +282,28 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
     }
   }
 
+  openDarkmodeCss() {
+    const { openDarkmodeCss } = this.props.actions.service;
+    const { action } = this.props.router.params;
+
+    if (action === 'edit') {
+      this.setState({
+        isOpeningDarkModeCss: true,
+      });
+
+      const { activeSettings: service } = this.props.stores.services;
+      openDarkmodeCss({
+        recipe: service.recipe.id,
+      });
+
+      setTimeout(() => {
+        this.setState({
+          isOpeningDarkModeCss: false,
+        });
+      }, 2500);
+    }
+  }
+
   render() {
     const { recipes, services, user } = this.props.stores;
     const { action } = this.props.router.params;
@@ -329,6 +355,8 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
           isDeleting={services.deleteServiceRequest.isExecuting}
           onSubmit={d => this.onSubmit(d)}
           onDelete={() => this.deleteService()}
+          openDarkmodeCss={() => this.openDarkmodeCss()}
+          isOpeningDarkModeCss={this.state.isOpeningDarkModeCss}
           isProxyFeatureEnabled={proxyFeature.isEnabled}
           isServiceProxyIncludedInCurrentPlan={proxyFeature.isIncludedInCurrentPlan}
           isSpellcheckerIncludedInCurrentPlan={spellcheckerFeature.isIncludedInCurrentPlan}
@@ -356,6 +384,7 @@ EditServiceScreen.wrappedComponent.propTypes = {
       createService: PropTypes.func.isRequired,
       updateService: PropTypes.func.isRequired,
       deleteService: PropTypes.func.isRequired,
+      openDarkmodeCss: PropTypes.func.isRequired,
     }).isRequired,
     // settings: PropTypes.shape({
     //   update: PropTypes.func.isRequred,