Improve cache clearing UI feedback (#620)

* Warning about using Nodejs versions > 10

I removed the warning about using nodejs versions above 10 because they function well in the dev environement.

* clear all cache issue

1 files changed, 22 insertions, 2 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 5cd8bdb36..6d86c09ec 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -99,6 +99,10 @@ const messages = defineMessages({
     id: 'settings.app.cacheInfo',
     defaultMessage: '!!!Ferdi cache is currently using {size} of disk space.',
   },
+  cacheNotCleared: {
+    id: 'settings.app.cacheNotCleared',
+    defaultMessage: 'Couldn\'t clear all cache',
+  },
   buttonClearAllCache: {
     id: 'settings.app.buttonClearAllCache',
     defaultMessage: '!!!Clear cache',
@@ -169,6 +173,14 @@ export default @observer class EditSettingsForm extends Component {
     intl: intlShape,
   };
 
+  state={
+    clearCacheButtonClicked: false,
+  }
+
+  onClearCacheClicked=() => {
+    this.setState({ clearCacheButtonClicked: true });
+  }
+
   submit(e) {
     e.preventDefault();
     this.props.form.submit({
@@ -217,7 +229,7 @@ export default @observer class EditSettingsForm extends Component {
       lockingFeatureEnabled,
       scheduledDNDEnabled,
     } = window.ferdi.stores.settings.all.app;
-
+    const notCleared = this.state.clearCacheButtonClicked && isClearingAllCache === false && cacheSize !== 0;
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -483,11 +495,17 @@ export default @observer class EditSettingsForm extends Component {
                   size: cacheSize,
                 })}
               </p>
+              {notCleared && (
+              <p>
+                {intl.formatMessage(messages.cacheNotCleared)
+                }
+              </p>
+              )}
               <p>
                 <Button
                   buttonType="secondary"
                   label={intl.formatMessage(messages.buttonClearAllCache)}
-                  onClick={onClearAllCache}
+                  onClick={() => { onClearAllCache(); this.onClearCacheClicked(); }}
                   disabled={isClearingAllCache}
                   loaded={!isClearingAllCache}
                 />
@@ -542,10 +560,12 @@ export default @observer class EditSettingsForm extends Component {
               <span className="mdi mdi-github-face" />
               <span>
 
+
                 Ferdi is based on
                 {' '}
                 <a href="https://github.com/meetfranz/franz" target="_blank">Franz</a>
 
+
                 , a project published
                 under the
                 {' '}