feat(App): Add option to clear app cache (@dannyqiu)

10 files changed, 93 insertions, 82 deletions

diff --git a/src/api/LocalApi.js b/src/api/LocalApi.js
index d52e9cd10..3f84f8a0b 100644
--- a/src/api/LocalApi.js
+++ b/src/api/LocalApi.js
@@ -16,6 +16,10 @@ export default class LocalApi {
     return this.local.removeKey(key);
   }
 
+  getAppCacheSize() {
+    return this.local.getAppCacheSize();
+  }
+
   clearAppCache() {
     return this.local.clearAppCache();
   }
diff --git a/src/api/server/LocalApi.js b/src/api/server/LocalApi.js
index d2ce0c9de..e95d750ac 100644
--- a/src/api/server/LocalApi.js
+++ b/src/api/server/LocalApi.js
@@ -1,4 +1,7 @@
 import { remote } from 'electron';
+import du from 'du';
+
+import { getServicePartitionsDirectory } from '../../helpers/service-helpers.js';
 
 const { session } = remote;
 
@@ -36,14 +39,29 @@ export default class LocalApi {
   }
 
   // Services
+  async getAppCacheSize() {
+    const partitionsDir = getServicePartitionsDirectory();
+    return new Promise((resolve, reject) => {
+      du(partitionsDir, (err, size) => {
+        if (err) reject(err);
+
+        console.debug('LocalApi::getAppCacheSize resolves', size);
+        resolve(size);
+      });
+    });
+  }
+
   async clearCache(serviceId) {
-    console.debug(`Clearing cache for persist:service-${serviceId}`);
     const s = session.fromPartition(`persist:service-${serviceId}`);
-    await new Promise(resolve => s.clearCache(resolve));
+
+    console.debug('LocalApi::clearCache resolves', serviceId);
+    return new Promise(resolve => s.clearCache(resolve));
   }
 
   async clearAppCache() {
     const s = session.defaultSession;
-    await new Promise(resolve => s.clearCache(resolve));
+
+    console.debug('LocalApi::clearCache clearAppCache');
+    return new Promise(resolve => s.clearCache(resolve));
   }
 }
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index 3daa2d8b6..d75d2e559 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -213,7 +213,9 @@ export default class ServerApi {
       throw request;
     }
     const data = await request.json();
-    await removeServicePartitionDirectory(id);
+
+    removeServicePartitionDirectory(id, true);
+
     console.debug('ServerApi::deleteService resolves', data);
     return data;
   }
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index b5300f605..4458c4c5a 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -71,14 +71,6 @@ const messages = defineMessages({
     id: 'settings.service.form.isMutedInfo',
     defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted',
   },
-  buttonClearCache: {
-    id: 'settings.service.form.buttonClearCache',
-    defaultMessage: '!!!Clear cache',
-  },
-  buttonClearingCache: {
-    id: 'settings.service.form.buttonClearingCache',
-    defaultMessage: '!!!Clearing cache',
-  },
   headlineNotifications: {
     id: 'settings.service.form.headlineNotifications',
     defaultMessage: '!!!Notifications',
@@ -110,10 +102,8 @@ export default class EditServiceForm extends Component {
     form: PropTypes.instanceOf(Form).isRequired,
     onSubmit: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
-    onClearCache: PropTypes.func.isRequired,
     isSaving: PropTypes.bool.isRequired,
     isDeleting: PropTypes.bool.isRequired,
-    isClearingCache: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -168,9 +158,7 @@ export default class EditServiceForm extends Component {
       form,
       isSaving,
       isDeleting,
-      isClearingCache,
       onDelete,
-      onClearCache,
     } = this.props;
     const { intl } = this.context;
 
@@ -193,23 +181,6 @@ export default class EditServiceForm extends Component {
       />
     );
 
-    const clearCacheButton = isClearingCache ? (
-      <Button
-        buttonType="secondary"
-        className="settings__clear-cache-button"
-        loaded={false}
-        label={intl.formatMessage(messages.buttonClearingCache)}
-        disabled
-      />
-    ) : (
-      <Button
-        buttonType="warning"
-        className="settings__clear-cache-button"
-        label={intl.formatMessage(messages.buttonClearCache)}
-        onClick={onClearCache}
-      />
-    );
-
     let activeTabIndex = 0;
     if (recipe.hasHostedOption && service.team) {
       activeTabIndex = 1;
@@ -316,7 +287,6 @@ export default class EditServiceForm extends Component {
               <div className="settings__settings-group">
                 <h3>{intl.formatMessage(messages.headlineGeneral)}</h3>
                 <Toggle field={form.$('isEnabled')} />
-                {clearCacheButton}
               </div>
             </div>
             {recipe.message && (
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 074a4b731..4f027638c 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -40,13 +40,13 @@ const messages = defineMessages({
     id: 'settings.app.translationHelp',
     defaultMessage: '!!!Help us to translate Franz into your language.',
   },
+  cacheInfo: {
+    id: 'settings.app.cacheInfo',
+    defaultMessage: '!!!Franz cache is currently using {size} of disk space.',
+  },
   buttonClearAllCache: {
     id: 'settings.app.buttonClearAllCache',
-    defaultMessage: '!!!Clear global cache for Franz and all services',
-  },
-  buttonClearingAllCache: {
-    id: 'settings.app.buttonClearingAllCache',
-    defaultMessage: '!!!Clearing global cache...',
+    defaultMessage: '!!!Clear cache',
   },
   buttonSearchForUpdate: {
     id: 'settings.app.buttonSearchForUpdate',
@@ -87,6 +87,7 @@ export default class EditSettingsForm extends Component {
     updateIsReadyToInstall: PropTypes.bool.isRequired,
     isClearingAllCache: PropTypes.bool.isRequired,
     onClearAllCache: PropTypes.func.isRequired,
+    cacheSize: PropTypes.string.isRequired,
   };
 
   static contextTypes = {
@@ -115,6 +116,7 @@ export default class EditSettingsForm extends Component {
       updateIsReadyToInstall,
       isClearingAllCache,
       onClearAllCache,
+      cacheSize,
     } = this.props;
     const { intl } = this.context;
 
@@ -127,23 +129,6 @@ export default class EditSettingsForm extends Component {
       updateButtonLabelMessage = messages.buttonSearchForUpdate;
     }
 
-    const clearAllCacheButton = isClearingAllCache ? (
-      <Button
-        buttonType="secondary"
-        className="settings__clear-all-cache-button"
-        loaded={false}
-        label={intl.formatMessage(messages.buttonClearingAllCache)}
-        disabled
-      />
-    ) : (
-      <Button
-        buttonType="warning"
-        className="settings__clear-all-cache-button"
-        label={intl.formatMessage(messages.buttonClearAllCache)}
-        onClick={onClearAllCache}
-      />
-    );
-
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -184,7 +169,26 @@ export default class EditSettingsForm extends Component {
             <h2 id="advanced">{intl.formatMessage(messages.headlineAdvanced)}</h2>
             <Toggle field={form.$('enableSpellchecking')} />
             {/* <Select field={form.$('spellcheckingLanguage')} /> */}
-            {clearAllCacheButton}
+            <div className="settings__settings-group">
+              <h3>
+                {/* {intl.formatMessage(messages.headlineGeneral)} */}
+                Service cache
+              </h3>
+              <p>
+                {intl.formatMessage(messages.cacheInfo, {
+                  size: cacheSize,
+                })}
+              </p>
+              <p>
+                <Button
+                  buttonType="secondary"
+                  label={intl.formatMessage(messages.buttonClearAllCache)}
+                  onClick={onClearAllCache}
+                  disabled={isClearingAllCache}
+                  loaded={!isClearingAllCache}
+                />
+              </p>
+            </div>
 
             {/* Updates */}
             <h2 id="updates">{intl.formatMessage(messages.headlineUpdates)}</h2>
@@ -195,6 +199,7 @@ export default class EditSettingsForm extends Component {
               />
             ) : (
               <Button
+                buttonType="secondary"
                 label={intl.formatMessage(updateButtonLabelMessage)}
                 onClick={checkForUpdates}
                 disabled={isCheckingForUpdates || isUpdateAvailable}
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index 78f043e80..3c52152b1 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -169,14 +169,6 @@ export default class EditServiceScreen extends Component {
     }
   }
 
-  clearCache() {
-    const { clearCache } = this.props.actions.service;
-    const { activeSettings: service } = this.props.stores.services;
-    clearCache({
-      serviceId: service.id,
-    });
-  }
-
   render() {
     const { recipes, services, user } = this.props.stores;
     const { action } = this.props.router.params;
@@ -219,10 +211,8 @@ export default class EditServiceScreen extends Component {
         status={services.actionStatus}
         isSaving={services.updateServiceRequest.isExecuting || services.createServiceRequest.isExecuting}
         isDeleting={services.deleteServiceRequest.isExecuting}
-        isClearingCache={services.clearCacheRequest.isExecuting}
         onSubmit={d => this.onSubmit(d)}
         onDelete={() => this.deleteService()}
-        onClearCache={() => this.clearCache()}
       />
     );
   }
@@ -244,7 +234,6 @@ EditServiceScreen.wrappedComponent.propTypes = {
       createService: PropTypes.func.isRequired,
       updateService: PropTypes.func.isRequired,
       deleteService: PropTypes.func.isRequired,
-      clearCache: PropTypes.func.isRequired,
     }).isRequired,
   }).isRequired,
 };
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 890bf6501..9fa815a0a 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -193,8 +193,17 @@ export default class EditSettingsScreen extends Component {
   }
 
   render() {
-    const { updateStatus, updateStatusTypes, isClearingAllCache } = this.props.stores.app;
-    const { checkForUpdates, installUpdate, clearAllCache } = this.props.actions.app;
+    const {
+      updateStatus,
+      cacheSize,
+      updateStatusTypes,
+      isClearingAllCache,
+    } = this.props.stores.app;
+    const {
+      checkForUpdates,
+      installUpdate,
+      clearAllCache,
+    } = this.props.actions.app;
     const form = this.prepareForm();
 
     return (
@@ -207,6 +216,7 @@ export default class EditSettingsScreen extends Component {
         noUpdateAvailable={updateStatus === updateStatusTypes.NOT_AVAILABLE}
         updateIsReadyToInstall={updateStatus === updateStatusTypes.DOWNLOADED}
         onSubmit={d => this.onSubmit(d)}
+        cacheSize={cacheSize}
         isClearingAllCache={isClearingAllCache}
         onClearAllCache={clearAllCache}
       />
diff --git a/src/helpers/service-helpers.js b/src/helpers/service-helpers.js
index eb804103e..5f63f6b7c 100644
--- a/src/helpers/service-helpers.js
+++ b/src/helpers/service-helpers.js
@@ -4,16 +4,17 @@ import fs from 'fs-extra';
 
 const app = remote.app;
 
-function getServicePartitionsDirectory() {
+export function getServicePartitionsDirectory() {
   return path.join(app.getPath('userData'), 'Partitions');
 }
 
-export function removeServicePartitionDirectory(id = '') {
-  const servicePartition = path.join(getServicePartitionsDirectory(), `service-${id}`);
+export function removeServicePartitionDirectory(id = '', addServicePrefix = false) {
+  const servicePartition = path.join(getServicePartitionsDirectory(), `${addServicePrefix ? 'service-' : ''}${id}`);
+
   return fs.remove(servicePartition);
 }
 
 export async function getServiceIdsFromPartitions() {
   const files = await fs.readdir(getServicePartitionsDirectory());
-  return files.map(filename => filename.replace('service-', ''));
+  return files.filter(n => n !== '__chrome_extension');
 }
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 665d0e3cd..b8a8151f1 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -124,8 +124,6 @@
   "settings.service.form.indirectMessages": "Show message badge for all new messages",
   "settings.service.form.enableAudio": "Enable audio",
   "settings.service.form.isMutedInfo": "When disabled, all notification sounds and audio playback are muted",
-  "settings.service.form.buttonClearCache": "Clear cache",
-  "settings.service.form.buttonClearingCache": "Clearing cache...",
   "settings.service.form.headlineNotifications": "Notifications",
   "settings.service.form.headlineBadges": "Unread message badges",
   "settings.service.form.headlineGeneral": "General",
@@ -151,8 +149,8 @@
   "settings.app.updateStatusSearching": "Is searching for update",
   "settings.app.updateStatusAvailable": "Update available, downloading...",
   "settings.app.updateStatusUpToDate": "You are using the latest version of Franz",
-  "settings.app.buttonClearAllCache": "Clear global cache for Franz and all services",
-  "settings.app.buttonClearingAllCache": "Clearing global cache...",
+  "settings.app.cacheInfo": "Franz cache is currently using {size} of disk space.",
+  "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.form.autoLaunchOnStart": "Launch Franz on start",
   "settings.app.form.autoLaunchInBackground": "Open in background",
   "settings.app.form.enableSystemTray": "Show Franz in system tray",
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index ac8d15632..63130a3ba 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -1,10 +1,11 @@
 import { remote, ipcRenderer, shell } from 'electron';
-import { action, observable } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import moment from 'moment';
 import key from 'keymaster';
 import { getDoNotDisturb } from '@meetfranz/electron-notification-state';
 import idleTimer from '@paulcbetts/system-idle-time';
 import AutoLaunch from 'auto-launch';
+import prettyBytes from 'pretty-bytes';
 
 import Store from './lib/Store';
 import Request from './lib/Request';
@@ -14,7 +15,7 @@ import locales from '../i18n/translations';
 import { gaEvent } from '../lib/analytics';
 import Miner from '../lib/Miner';
 
-import { getServiceIdsFromPartitions } from '../helpers/service-helpers.js';
+import { getServiceIdsFromPartitions, removeServicePartitionDirectory } from '../helpers/service-helpers.js';
 
 const { app, powerMonitor } = remote;
 const defaultLocale = DEFAULT_APP_SETTINGS.locale;
@@ -32,6 +33,7 @@ export default class AppStore extends Store {
   };
 
   @observable healthCheckRequest = new Request(this.api.app, 'health');
+  @observable getAppCacheSizeRequest = new Request(this.api.local, 'getAppCacheSize');
   @observable clearAppCacheRequest = new Request(this.api.local, 'clearAppCache');
 
   @observable autoLaunchOnStart = true;
@@ -163,6 +165,10 @@ export default class AppStore extends Store {
     this._healthCheck();
   }
 
+  @computed get cacheSize() {
+    return prettyBytes(this.getAppCacheSizeRequest.execute().result || 0);
+  }
+
   // Actions
   @action _notify({ title, options, notificationId, serviceId = null }) {
     if (this.stores.settings.all.isAppMuted) return;
@@ -256,9 +262,17 @@ export default class AppStore extends Store {
   @action async _clearAllCache() {
     this.isClearingAllCache = true;
     const clearAppCache = this.clearAppCacheRequest.execute();
-    const serviceIds = await getServiceIdsFromPartitions();
-    await Promise.all(serviceIds.map(id => this.actions.service.clearCache({ serviceId: id })));
+    const allServiceIds = await getServiceIdsFromPartitions();
+    const allOrphanedServiceIds = allServiceIds.filter(id => !this.stores.services.all.find(s => id.replace('service-', '') === s.id));
+
+    await Promise.all(allOrphanedServiceIds.map(id => removeServicePartitionDirectory(id)));
+
+    await Promise.all(this.stores.services.all.map(s => this.actions.service.clearCache({ serviceId: s.id })));
+
     await clearAppCache._promise;
+
+    this.getAppCacheSizeRequest.execute();
+
     this.isClearingAllCache = false;
   }