ui/js/actions/app.js

@@ -243,3 +243,11 @@ export function doRemoveSnackBarSnack() {
     type: types.REMOVE_SNACKBAR_SNACK,
   };
 }
+
+export function doClearCache() {
+  return function(dispatch, getState) {
+    window.cacheStore.purge();
+
+    return Promise.resolve();
+  };
+}

ui/js/page/settings/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
+import { doClearCache } from "actions/app";
 import { doSetDaemonSetting } from "actions/settings";
 import { selectDaemonSettings } from "selectors/settings";
 import SettingsPage from "./view";
@@ -10,6 +11,7 @@ const select = state => ({
 
 const perform = dispatch => ({
   setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)),
+  clearCache: () => dispatch(doClearCache()),
 });
 
 export default connect(select, perform)(SettingsPage);

ui/js/page/settings/view.jsx

@@ -2,6 +2,9 @@ import React from "react";
 import { FormField, FormRow } from "component/form.js";
 import SubHeader from "component/subHeader";
 import lbry from "lbry.js";
+import Link from "component/link";
+
+const { remote } = require("electron");
 
 class SettingsPage extends React.PureComponent {
   constructor(props) {
@@ -15,9 +18,23 @@ class SettingsPage extends React.PureComponent {
       showNsfw: lbry.getClientSetting("showNsfw"),
       showUnavailable: lbry.getClientSetting("showUnavailable"),
       language: lbry.getClientSetting("language"),
+      clearingCache: false,
     };
   }
 
+  clearCache() {
+    this.setState({
+      clearingCache: true,
+    });
+    const success = () => {
+      this.setState({ clearingCache: false });
+      window.location.href = `${remote.app.getAppPath()}/dist/index.html`;
+    };
+    const clear = () => this.props.clearCache().then(success.bind(this));
+
+    setTimeout(clear, 1000, { once: true });
+  }
+
   setDaemonSetting(name, value) {
     this.props.setDaemonSetting(name, value);
   }
@@ -274,6 +291,27 @@ class SettingsPage extends React.PureComponent {
             />
           </div>
         </section>
+
+        <section className="card">
+          <div className="card__content">
+            <h3>{__("Application Cache")}</h3>
+          </div>
+          <div className="card__content">
+            <p>
+              <Link
+                label={
+                  this.state.clearingCache
+                    ? __("Clearing")
+                    : __("Clear the cache")
+                }
+                icon="icon-trash"
+                button="alt"
+                onClick={this.clearCache.bind(this)}
+                disabled={this.state.clearingCache}
+              />
+            </p>
+          </div>
+        </section>
       </main>
     );
   }

ui/js/store.js

@@ -100,6 +100,6 @@ const persistOptions = {
   debounce: 1000,
   storage: localForage,
 };
-persistStore(reduxStore, persistOptions);
+window.cacheStore = persistStore(reduxStore, persistOptions);
 
 export default reduxStore;