Merge remote-tracking branch 'upstream/master'

.bumpversion.cfg

@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 0.12.0
+current_version = 0.12.2rc3
 commit = True
 tag = True
 parse = (?P<major>\d+)\.(?P<minor>\d+)\.(?P<patch>\d+)((?P<release>[a-z]+)(?P<candidate>\d+))?

CHANGELOG.md

@@ -8,24 +8,24 @@ Web UI version numbers should always match the corresponding version of LBRY App
 
 ## [Unreleased]
 ### Added
-  *
+  * State is persisted through app close and re-open, resulting in faster opens
-  *
 
 ### Changed
-  *
+  * Upgraded to lbry daemon 0.13, including updating API signatures
-  *
+  * Channels resolve much faster
+  * Resolve is no longer cancelled on navigate
 
 ### Fixed
-  *
+  * Fix help menu force reloading whole app
-  *
+  * Show page updates correctly when navigating from show page to another show page
 
 ### Deprecated
   *
   *
 
 ### Removed
-  *
+  * The author metadata field is no longer shown, in favor of first-class identities
-  *
+  * Availability is no longer checked before showing Download options, due to unreliability
 
 ## [0.12.0] - 2017-06-09
 

app/menu/main-menu.js

@@ -36,7 +36,7 @@ const baseTemplate = [
         label: 'Help',
         click(item, focusedWindow) {
           if (focusedWindow) {
-            focusedWindow.loadURL(`file://${__dirname}/../dist/index.html?help`);
+            focusedWindow.webContents.send('open-menu', '/help');
           }
         }
       }

app/package-lock.json

@@ -63,6 +63,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.6.0.tgz",
       "integrity": "sha1-Umao9J3Zib5Pn2gbbyoMVShdDZo="
     },
+    "modify-filename": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/modify-filename/-/modify-filename-1.1.0.tgz",
+      "integrity": "sha1-mi3sg4Bvuy2XXyK+7IWcoms5OqE="
+    },
     "npm": {
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/npm/-/npm-4.6.1.tgz",
@@ -1451,6 +1456,16 @@
         }
       }
     },
+    "path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
+    },
+    "pupa": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/pupa/-/pupa-1.0.0.tgz",
+      "integrity": "sha1-mpVopa9+ZXuEYqbp1TKHQ1YM7/Y="
+    },
     "semver": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
@@ -1465,6 +1480,11 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.1.0.tgz",
       "integrity": "sha1-yWPc8DciiS7FnLpWnpQLcZVNFyk="
+    },
+    "unused-filename": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/unused-filename/-/unused-filename-0.1.0.tgz",
+      "integrity": "sha1-5fM7yeSmP4f2TTwR0xl53vXS5/s="
     }
   }
 }

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "LBRY",
-  "version": "0.12.0",
+  "version": "0.12.2rc3",
   "main": "main.js",
   "description": "LBRY is a fully decentralized, open-source protocol facilitating the discovery, access, and (sometimes) purchase of data.",
   "author": {

build/DAEMON_URL

@@ -1 +1 @@
-https://github.com/lbryio/lbry/releases/download/v0.11.0/lbrynet-daemon-v0.11.0-OSNAME.zip
+https://github.com/lbryio/lbry/releases/download/v0.13.1rc1/lbrynet-daemon-v0.13.1rc1-OSNAME.zip

package-lock.json

@@ -2,9 +2,9 @@
   "lockfileVersion": 1,
   "dependencies": {
     "@types/node": {
-      "version": "7.0.29",
+      "version": "7.0.31",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.29.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.31.tgz",
-      "integrity": "sha512-+8JrLZny/uR+d/jLK9eaV63buRM7X/gNzQk57q76NS4KNKLSKOmxJYFIlwuP2zDvA7wqZj05POPhSd9Z1hYQpQ==",
+      "integrity": "sha512-+KrE1LDddn97ip+gXZAnzNQ0pupKH/6tcKwTpo96BDVNpzmhIKGHug0Wd3H0dN4WEqYB1tXYI5m2mZuIZNI8tg==",
       "dev": true
     },
     "7zip-bin": {
@@ -121,9 +121,9 @@
       "dev": true
     },
     "balanced-match": {
-      "version": "0.4.2",
+      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
       "dev": true
     },
     "base64-js": {
@@ -164,9 +164,9 @@
       "dev": true
     },
     "brace-expansion": {
-      "version": "1.1.7",
+      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.7.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
-      "integrity": "sha1-Pv/DxQ4ABTH7cg6v+A8K6O8jz1k=",
+      "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=",
       "dev": true
     },
     "builtin-modules": {
@@ -431,9 +431,9 @@
       "optional": true
     },
     "electron": {
-      "version": "1.6.10",
+      "version": "1.6.11",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-1.6.10.tgz",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-1.6.11.tgz",
-      "integrity": "sha1-Twuc1ZbjVwC1cSj5iMwdLOZ+VnE=",
+      "integrity": "sha1-vnnA69zv7bW/KBF0CYAPpTus7/o=",
       "dev": true
     },
     "electron-builder": {
@@ -993,12 +993,6 @@
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true
     },
-    "lodash": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.12.0.tgz",
-      "integrity": "sha1-K9bcRqBA9Z5obJcu0h2T3FkFMlg=",
-      "dev": true
-    },
     "loud-rejection": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
@@ -1666,12 +1660,6 @@
       "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=",
       "dev": true
     },
-    "why-did-you-update": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/why-did-you-update/-/why-did-you-update-0.0.8.tgz",
-      "integrity": "sha1-OJ2X3WwUfh7byfXVRw1E2YXIrjg=",
-      "dev": true
-    },
     "widest-line": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-1.0.0.tgz",

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/actions/content.js

@@ -11,6 +11,7 @@ import { selectResolvingUris } from "selectors/content";
 import { selectCostInfoForUri } from "selectors/cost_info";
 import { doOpenModal } from "actions/app";
 import { doClaimEligiblePurchaseRewards } from "actions/rewards";
+import batchActions from "util/batchActions";
 
 export function doResolveUri(uri) {
   return function(dispatch, getState) {
@@ -43,16 +44,6 @@ export function doResolveUri(uri) {
   };
 }
 
-export function doCancelResolveUri(uri) {
-  return function(dispatch, getState) {
-    lbry.cancelResolve({ uri });
-    dispatch({
-      type: types.RESOLVE_URI_CANCELED,
-      data: { uri },
-    });
-  };
-}
-
 export function doFetchFeaturedUris() {
   return function(dispatch, getState) {
     const state = getState();
@@ -63,20 +54,29 @@ export function doFetchFeaturedUris() {
 
     const success = ({ Categories, Uris }) => {
       let featuredUris = {};
+      const actions = [];
 
       Categories.forEach(category => {
         if (Uris[category] && Uris[category].length) {
-          featuredUris[category] = Uris[category];
+          const uris = Uris[category];
+
+          featuredUris[category] = uris;
+          uris.forEach(uri => {
+            actions.push(doResolveUri(uri));
+          });
         }
       });
 
-      dispatch({
+      actions.push({
         type: types.FETCH_FEATURED_CONTENT_COMPLETED,
         data: {
           categories: Categories,
           uris: featuredUris,
+          success: true,
         },
       });
+
+      dispatch(batchActions(...actions));
     };
 
     const failure = () => {
@@ -246,23 +246,22 @@ export function doPurchaseUri(uri, purchaseModalName) {
   };
 }
 
-export function doFetchClaimsByChannel(uri) {
+export function doFetchClaimsByChannel(uri, page = 1) {
   return function(dispatch, getState) {
     dispatch({
       type: types.FETCH_CHANNEL_CLAIMS_STARTED,
       data: { uri },
     });
 
-    lbry.resolve({ uri }).then(resolutionInfo => {
+    lbry.claim_list_by_channel({ uri, page }).then(result => {
-      const { claims_in_channel } = resolutionInfo
+      const claimResult = result[uri],
-        ? resolutionInfo
+        claims = claimResult ? claimResult.claims_in_channel : [];
-        : { claims_in_channel: [] };
 
       dispatch({
         type: types.FETCH_CHANNEL_CLAIMS_COMPLETED,
         data: {
           uri,
-          claims: claims_in_channel,
+          claims: claims,
         },
       });
     });

ui/js/actions/file_info.js

@@ -89,7 +89,7 @@ export function doDeleteFile(outpoint, deleteFromComputer) {
 
     lbry.file_delete({
       outpoint: outpoint,
-      delete_target_file: deleteFromComputer,
+      delete_from_download_dir: deleteFromComputer,
     });
 
     dispatch(doCloseModal());
@@ -102,12 +102,7 @@ export function doFetchFileInfosAndPublishedClaims() {
       isClaimListMinePending = selectClaimListMineIsPending(state),
       isFileInfoListPending = selectFileListIsPending(state);
 
-    if (isClaimListMinePending === undefined) {
     dispatch(doFetchClaimListMine());
-    }
-
-    if (isFileInfoListPending === undefined) {
     dispatch(doFileList());
-    }
   };
 }

ui/js/actions/search.js

@@ -4,6 +4,7 @@ import lighthouse from "lighthouse";
 import { doResolveUri } from "actions/content";
 import { doNavigate, doHistoryPush } from "actions/app";
 import { selectCurrentPage } from "selectors/app";
+import batchActions from "util/batchActions";
 
 export function doSearch(query) {
   return function(dispatch, getState) {
@@ -25,22 +26,26 @@ export function doSearch(query) {
       dispatch(doNavigate("search", { query: query }));
     } else {
       lighthouse.search(query).then(results => {
+        const actions = [];
+
         results.forEach(result => {
           const uri = lbryuri.build({
             channelName: result.channel_name,
             contentName: result.name,
             claimId: result.channel_id || result.claim_id,
           });
-          dispatch(doResolveUri(uri));
+          actions.push(doResolveUri(uri));
         });
 
-        dispatch({
+        actions.push({
           type: types.SEARCH_COMPLETED,
           data: {
             query,
             results,
           },
         });
+
+        dispatch(batchActions(...actions));
       });
     }
   };

ui/js/actions/wallet.js

@@ -22,7 +22,7 @@ export function doFetchTransactions() {
       type: types.FETCH_TRANSACTIONS_STARTED,
     });
 
-    lbry.call("transaction_list", {}, results => {
+    lbry.transaction_list().then(results => {
       dispatch({
         type: types.FETCH_TRANSACTIONS_COMPLETED,
         data: {
@@ -55,7 +55,7 @@ export function doCheckAddressIsMine(address) {
       type: types.CHECK_ADDRESS_IS_MINE_STARTED,
     });
 
-    lbry.checkAddressIsMine(address, isMine => {
+    lbry.wallet_is_address_mine({ address }).then(isMine => {
       if (!isMine) dispatch(doGetNewAddress());
 
       dispatch({
@@ -103,12 +103,12 @@ export function doSendDraftTransaction() {
       dispatch(doOpenModal("transactionFailed"));
     };
 
-    lbry.sendToAddress(
+    lbry
-      draftTx.amount,
+      .send_amount_to_address({
-      draftTx.address,
+        amount: draftTx.amount,
-      successCallback,
+        address: draftTx.address,
-      errorCallback
+      })
-    );
+      .then(successCallback, errorCallback);
   };
 }
 

ui/js/component/file-selector.js

@@ -21,7 +21,9 @@ class FileSelector extends React.PureComponent {
   handleButtonClick() {
     remote.dialog.showOpenDialog(
       {
-        properties: [this.props.type == "file" ? "openFile" : "openDirectory"],
+        properties: this.props.type == "file"
+          ? ["openFile"]
+          : ["openDirectory", "createDirectory"],
       },
       paths => {
         if (!paths) {

ui/js/component/fileActions/index.js

@@ -28,7 +28,8 @@ const makeSelect = () => {
 
   const select = (state, props) => ({
     fileInfo: selectFileInfoForUri(state, props),
-    isAvailable: selectIsAvailableForUri(state, props),
+    /*availability check is disabled due to poor performance, TBD if it dies forever or requires daemon fix*/
+    isAvailable: true, //selectIsAvailableForUri(state, props),
     platform: selectPlatform(state),
     modal: selectCurrentModal(state),
     downloading: selectDownloadingForUri(state, props),

ui/js/component/fileCard/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import { doNavigate } from "actions/app";
-import { doResolveUri, doCancelResolveUri } from "actions/content";
+import { doResolveUri } from "actions/content";
 import { selectObscureNsfw } from "selectors/app";
 import {
   makeSelectClaimForUri,
@@ -31,7 +31,6 @@ const makeSelect = () => {
 const perform = dispatch => ({
   navigate: (path, params) => dispatch(doNavigate(path, params)),
   resolveUri: uri => dispatch(doResolveUri(uri)),
-  cancelResolveUri: uri => dispatch(doCancelResolveUri(uri)),
 });
 
 export default connect(makeSelect, perform)(FileCard);

ui/js/component/fileCard/view.jsx

@@ -23,14 +23,6 @@ class FileCard extends React.PureComponent {
     }
   }
 
-  componentWillUnmount() {
-    const { isResolvingUri, cancelResolveUri, uri } = this.props;
-
-    if (isResolvingUri) {
-      cancelResolveUri(uri);
-    }
-  }
-
   handleMouseOver() {
     this.setState({
       hovered: true,
@@ -47,13 +39,11 @@ class FileCard extends React.PureComponent {
     const { claim, fileInfo, metadata, isResolvingUri, navigate } = this.props;
 
     const uri = lbryuri.normalize(this.props.uri);
-    const title = !isResolvingUri && metadata && metadata.title
+    const title = metadata && metadata.title ? metadata.title : uri;
-      ? metadata.title
-      : uri;
     const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
 
     let description = "";
-    if (isResolvingUri) {
+    if (isResolvingUri && !claim) {
       description = __("Loading...");
     } else if (metadata && metadata.description) {
       description = metadata.description;

ui/js/component/fileList/view.jsx

@@ -82,7 +82,7 @@ class FileList extends React.PureComponent {
     });
     return (
       <section className="file-list__header">
-        {fetching && <span className="busy-indicator" />}
+        {fetching && <BusyMessage />}
         <span className="sort-section">
           {__("Sort by")} {" "}
           <FormField type="select" onChange={this.handleSortChanged.bind(this)}>

ui/js/component/fileTile/view.jsx

@@ -19,14 +19,14 @@ class FileTile extends React.PureComponent {
   }
 
   componentDidMount() {
-    this.resolve(this.props);
+    const { isResolvingUri, claim, uri, resolveUri } = this.props;
+
+    if (!isResolvingUri && !claim && uri) resolveUri(uri);
   }
 
   componentWillReceiveProps(nextProps) {
-    this.resolve(nextProps);
+    const { isResolvingUri, claim, uri, resolveUri } = this.props;
-  }
 
-  resolve({ isResolvingUri, claim, uri, resolveUri }) {
     if (!isResolvingUri && claim === undefined && uri) resolveUri(uri);
   }
 

ui/js/component/uriIndicator/view.jsx

@@ -21,7 +21,7 @@ class UriIndicator extends React.PureComponent {
   render() {
     const { claim, uri, isResolvingUri } = this.props;
 
-    if (isResolvingUri) {
+    if (isResolvingUri && !claim) {
       return <span className="empty">Validating...</span>;
     }
 

ui/js/constants/action_types.js

@@ -39,7 +39,6 @@ export const FETCH_FEATURED_CONTENT_COMPLETED =
   "FETCH_FEATURED_CONTENT_COMPLETED";
 export const RESOLVE_URI_STARTED = "RESOLVE_URI_STARTED";
 export const RESOLVE_URI_COMPLETED = "RESOLVE_URI_COMPLETED";
-export const RESOLVE_URI_CANCELED = "RESOLVE_URI_CANCELED";
 export const FETCH_CHANNEL_CLAIMS_STARTED = "FETCH_CHANNEL_CLAIMS_STARTED";
 export const FETCH_CHANNEL_CLAIMS_COMPLETED = "FETCH_CHANNEL_CLAIMS_COMPLETED";
 export const FETCH_CLAIM_LIST_MINE_STARTED = "FETCH_CLAIM_LIST_MINE_STARTED";

ui/js/lbry.js

@@ -1,15 +1,15 @@
-import lbryio from './lbryio.js';
+import lbryio from "./lbryio.js";
-import lighthouse from './lighthouse.js';
+import lighthouse from "./lighthouse.js";
-import jsonrpc from './jsonrpc.js';
+import jsonrpc from "./jsonrpc.js";
-import lbryuri from './lbryuri.js';
+import lbryuri from "./lbryuri.js";
-import { getLocal, getSession, setSession, setLocal } from './utils.js';
+import { getLocal, getSession, setSession, setLocal } from "./utils.js";
 
-const { remote, ipcRenderer } = require('electron');
+const { remote, ipcRenderer } = require("electron");
-const menu = remote.require('./menu/main-menu');
+const menu = remote.require("./menu/main-menu");
 
 let lbry = {
   isConnected: false,
-	daemonConnectionString: 'http://localhost:5279/lbryapi',
+  daemonConnectionString: "http://localhost:5279/lbryapi",
   pendingPublishTimeout: 20 * 60 * 1000,
   defaultClientSettings: {
     showNsfw: false,
@@ -18,10 +18,21 @@ let lbry = {
     useCustomLighthouseServers: false,
     customLighthouseServers: [],
     showDeveloperMenu: false,
-		language: 'en'
+    language: "en",
-	}
+  },
 };
 
+function apiCall(method, params, resolve, reject) {
+  return jsonrpc.call(
+    lbry.daemonConnectionString,
+    method,
+    params,
+    resolve,
+    reject,
+    reject
+  );
+}
+
 /**
  * Records a publish attempt in local storage. Returns a dictionary with all the data needed to
  * needed to make a dummy claim or file info object.
@@ -33,17 +44,17 @@ function savePendingPublish({ name, channel_name }) {
   } else {
     uri = lbryuri.build({ name: name }, false);
   }
-	const pendingPublishes = getLocal('pendingPublishes') || [];
+  const pendingPublishes = getLocal("pendingPublishes") || [];
   const newPendingPublish = {
     name,
     channel_name,
-		claim_id: 'pending_claim_' + uri,
+    claim_id: "pending_claim_" + uri,
-		txid: 'pending_' + uri,
+    txid: "pending_" + uri,
     nout: 0,
-		outpoint: 'pending_' + uri + ':0',
+    outpoint: "pending_" + uri + ":0",
-		time: Date.now()
+    time: Date.now(),
   };
-	setLocal('pendingPublishes', [...pendingPublishes, newPendingPublish]);
+  setLocal("pendingPublishes", [...pendingPublishes, newPendingPublish]);
   return newPendingPublish;
 }
 
@@ -61,7 +72,7 @@ function removePendingPublishIfNeeded({ name, channel_name, outpoint }) {
   }
 
   setLocal(
-		'pendingPublishes',
+    "pendingPublishes",
     lbry.getPendingPublishes().filter(pub => !pubMatches(pub))
   );
 }
@@ -71,11 +82,11 @@ function removePendingPublishIfNeeded({ name, channel_name, outpoint }) {
  * removes them from the list.
  */
 lbry.getPendingPublishes = function() {
-	const pendingPublishes = getLocal('pendingPublishes') || [];
+  const pendingPublishes = getLocal("pendingPublishes") || [];
   const newPendingPublishes = pendingPublishes.filter(
     pub => Date.now() - pub.time <= lbry.pendingPublishTimeout
   );
-	setLocal('pendingPublishes', newPendingPublishes);
+  setLocal("pendingPublishes", newPendingPublishes);
   return newPendingPublishes;
 };
 
@@ -101,7 +112,7 @@ function pendingPublishToDummyClaim({
   outpoint,
   claim_id,
   txid,
-	nout
+  nout,
 }) {
   return { name, outpoint, claim_id, txid, nout, channel_name };
 }
@@ -110,23 +121,6 @@ function pendingPublishToDummyFileInfo({ name, outpoint, claim_id }) {
   return { name, outpoint, claim_id, metadata: null };
 }
 
-lbry.call = function(
-	method,
-	params,
-	callback,
-	errorCallback,
-	connectFailedCallback
-) {
-	return jsonrpc.call(
-		lbry.daemonConnectionString,
-		method,
-		params,
-		callback,
-		errorCallback,
-		connectFailedCallback
-	);
-};
-
 //core
 lbry._connectPromise = null;
 lbry.connect = function() {
@@ -135,26 +129,20 @@ lbry.connect = function() {
       let tryNum = 0;
 
       function checkDaemonStartedFailed() {
-				if (tryNum <= 100) {
+        if (tryNum <= 200) {
           // Move # of tries into constant or config option
           setTimeout(() => {
             tryNum++;
             checkDaemonStarted();
           }, tryNum < 50 ? 400 : 1000);
         } else {
-					reject(new Error('Unable to connect to LBRY'));
+          reject(new Error("Unable to connect to LBRY"));
         }
       }
 
       // Check every half second to see if the daemon is accepting connections
       function checkDaemonStarted() {
-				lbry.call(
+        lbry.status().then(resolve).catch(checkDaemonStartedFailed);
-					'status',
-					{},
-					resolve,
-					checkDaemonStartedFailed,
-					checkDaemonStartedFailed
-				);
       }
 
       checkDaemonStarted();
@@ -164,19 +152,6 @@ lbry.connect = function() {
   return lbry._connectPromise;
 };
 
-lbry.checkAddressIsMine = function(address, callback) {
-	lbry.call('wallet_is_address_mine', { address: address }, callback);
-};
-
-lbry.sendToAddress = function(amount, address, callback, errorCallback) {
-	lbry.call(
-		'send_amount_to_address',
-		{ amount: amount, address: address },
-		callback,
-		errorCallback
-	);
-};
-
 /**
  * Takes a LBRY URI; will first try and calculate a total cost using
  * Lighthouse. If Lighthouse can't be reached, it just retrives the
@@ -191,7 +166,7 @@ lbry.costPromiseCache = {};
 lbry.getCostInfo = function(uri) {
   if (lbry.costPromiseCache[uri] === undefined) {
     lbry.costPromiseCache[uri] = new Promise((resolve, reject) => {
-			const COST_INFO_CACHE_KEY = 'cost_info_cache';
+      const COST_INFO_CACHE_KEY = "cost_info_cache";
       let costInfoCache = getSession(COST_INFO_CACHE_KEY, {});
 
       function cacheAndResolve(cost, includesData) {
@@ -238,15 +213,13 @@ lbry.getCostInfo = function(uri) {
  * This currently includes a work-around to cache the file in local storage so that the pending
  * publish can appear in the UI immediately.
  */
-lbry.publish = function(
+lbry.publishDeprecated = function(
   params,
   fileListedCallback,
   publishedCallback,
   errorCallback
 ) {
-	lbry.call(
+  lbry.publish(params).then(
-		'publish',
-		params,
     result => {
       if (returnedPending) {
         return;
@@ -273,7 +246,7 @@ lbry.publish = function(
     if (publishedCallback) {
       savePendingPublish({
         name: params.name,
-				channel_name: params.channel_name
+        channel_name: params.channel_name,
       });
       publishedCallback(true);
     }
@@ -282,7 +255,7 @@ lbry.publish = function(
       const { name, channel_name } = params;
       savePendingPublish({
         name: params.name,
-				channel_name: params.channel_name
+        channel_name: params.channel_name,
       });
       fileListedCallback(true);
     }
@@ -292,7 +265,7 @@ lbry.publish = function(
 lbry.getClientSettings = function() {
   var outSettings = {};
   for (let setting of Object.keys(lbry.defaultClientSettings)) {
-		var localStorageVal = localStorage.getItem('setting_' + setting);
+    var localStorageVal = localStorage.getItem("setting_" + setting);
     outSettings[setting] = localStorageVal === null
       ? lbry.defaultClientSettings[setting]
       : JSON.parse(localStorageVal);
@@ -301,8 +274,8 @@ lbry.getClientSettings = function() {
 };
 
 lbry.getClientSetting = function(setting) {
-	var localStorageVal = localStorage.getItem('setting_' + setting);
+  var localStorageVal = localStorage.getItem("setting_" + setting);
-	if (setting == 'showDeveloperMenu') {
+  if (setting == "showDeveloperMenu") {
     return true;
   }
   return localStorageVal === null
@@ -317,67 +290,49 @@ lbry.setClientSettings = function(settings) {
 };
 
 lbry.setClientSetting = function(setting, value) {
-	return localStorage.setItem('setting_' + setting, JSON.stringify(value));
+  return localStorage.setItem("setting_" + setting, JSON.stringify(value));
-};
-
-lbry.getSessionInfo = function(callback) {
-	lbry.call('status', { session_status: true }, callback);
-};
-
-lbry.reportBug = function(message, callback) {
-	lbry.call(
-		'report_bug',
-		{
-			message: message
-		},
-		callback
-	);
 };
 
 //utilities
 lbry.formatCredits = function(amount, precision) {
-	return amount.toFixed(precision || 1).replace(/\.?0+$/, '');
+  return amount.toFixed(precision || 1).replace(/\.?0+$/, "");
 };
 
 lbry.formatName = function(name) {
   // Converts LBRY name to standard format (all lower case, no special characters, spaces replaced by dashes)
-	name = name.replace('/s+/g', '-');
+  name = name.replace("/s+/g", "-");
-	name = name.toLowerCase().replace(/[^a-z0-9\-]/g, '');
+  name = name.toLowerCase().replace(/[^a-z0-9\-]/g, "");
   return name;
 };
 
 lbry.imagePath = function(file) {
-	return 'img/' + file;
+  return "img/" + file;
 };
 
 lbry.getMediaType = function(contentType, fileName) {
   if (contentType) {
     return /^[^/]+/.exec(contentType)[0];
   } else if (fileName) {
-		var dotIndex = fileName.lastIndexOf('.');
+    var dotIndex = fileName.lastIndexOf(".");
     if (dotIndex == -1) {
-			return 'unknown';
+      return "unknown";
     }
 
     var ext = fileName.substr(dotIndex + 1);
     if (/^mp4|mov|m4v|flv|f4v$/i.test(ext)) {
-			return 'video';
+      return "video";
     } else if (/^mp3|m4a|aac|wav|flac|ogg$/i.test(ext)) {
-			return 'audio';
+      return "audio";
     } else if (/^html|htm|pdf|odf|doc|docx|md|markdown|txt$/i.test(ext)) {
-			return 'document';
+      return "document";
     } else {
-			return 'unknown';
+      return "unknown";
     }
   } else {
-		return 'unknown';
+    return "unknown";
   }
 };
 
-lbry.stop = function(callback) {
-	lbry.call('stop', {}, callback);
-};
-
 lbry._subscribeIdCount = 0;
 lbry._balanceSubscribeCallbacks = {};
 lbry._balanceSubscribeInterval = 5000;
@@ -418,22 +373,22 @@ lbry.balanceUnsubscribe = function(subscribeId) {
 };
 
 lbry.showMenuIfNeeded = function() {
-	const showingMenu = sessionStorage.getItem('menuShown') || null;
+  const showingMenu = sessionStorage.getItem("menuShown") || null;
-	const chosenMenu = lbry.getClientSetting('showDeveloperMenu')
+  const chosenMenu = lbry.getClientSetting("showDeveloperMenu")
-		? 'developer'
+    ? "developer"
-		: 'normal';
+    : "normal";
   if (chosenMenu != showingMenu) {
-		menu.showMenubar(chosenMenu == 'developer');
+    menu.showMenubar(chosenMenu == "developer");
   }
-	sessionStorage.setItem('menuShown', chosenMenu);
+  sessionStorage.setItem("menuShown", chosenMenu);
 };
 
 lbry.getAppVersionInfo = function() {
   return new Promise((resolve, reject) => {
-		ipcRenderer.once('version-info-received', (event, versionInfo) => {
+    ipcRenderer.once("version-info-received", (event, versionInfo) => {
       resolve(versionInfo);
     });
-		ipcRenderer.send('version-info-requested');
+    ipcRenderer.send("version-info-requested");
   });
 };
 
@@ -463,8 +418,8 @@ lbry.file_list = function(params = {}) {
       }
     }
     
-		lbry.call(
+    apiCall(
-			'file_list',
+      "file_list",
       params,
       fileInfos => {
         removePendingPublishIfNeeded({ name, channel_name, outpoint });
@@ -474,7 +429,6 @@ lbry.file_list = function(params = {}) {
           .map(pendingPublishToDummyFileInfo);
         resolve([...fileInfos, ...dummyFileInfos]);
       },
-			reject,
       reject
     );
   });
@@ -482,15 +436,15 @@ lbry.file_list = function(params = {}) {
 
 lbry.claim_list_mine = function(params = {}) {
   return new Promise((resolve, reject) => {
-		lbry.call(
+    apiCall(
-			'claim_list_mine',
+      "claim_list_mine",
       params,
       claims => {
         for (let { name, channel_name, txid, nout } of claims) {
           removePendingPublishIfNeeded({
             name,
             channel_name,
-						outpoint: txid + ':' + nout
+            outpoint: txid + ":" + nout,
           });
         }
 
@@ -499,36 +453,26 @@ lbry.claim_list_mine = function(params = {}) {
           .map(pendingPublishToDummyClaim);
         resolve([...claims, ...dummyClaims]);
       },
-			reject,
       reject
     );
   });
 };
 
-const claimCacheKey = 'resolve_claim_cache';
+
-lbry._claimCache = getSession(claimCacheKey, {});
 lbry._resolveXhrs = {};
 lbry.resolve = function(params = {}) {
   return new Promise((resolve, reject) => {
     if (!params.uri) {
-			throw __('Resolve has hacked cache on top of it that requires a URI');
+      throw __("Resolve has hacked cache on top of it that requires a URI");
     }
-		if (params.uri && lbry._claimCache[params.uri] !== undefined) {
+    lbry._resolveXhrs[params.uri] = apiCall(
-			resolve(lbry._claimCache[params.uri]);
+      "resolve",
-		} else {
-			lbry._resolveXhrs[params.uri] = lbry.call(
-				'resolve',
       params,
       function(data) {
-					if (data !== undefined) {
+        resolve(data && data[params.uri] ? data[params.uri] : {});
-						lbry._claimCache[params.uri] = data;
-					}
-					setSession(claimCacheKey, lbry._claimCache);
-					resolve(data);
       },
       reject
     );
-		}
   });
 };
 
@@ -547,17 +491,10 @@ lbry = new Proxy(lbry, {
 
     return function(params = {}) {
       return new Promise((resolve, reject) => {
-				jsonrpc.call(
+        apiCall(name, params, resolve, reject);
-					lbry.daemonConnectionString,
-					name,
-					params,
-					resolve,
-					reject,
-					reject
-				);
       });
     };
-	}
+  },
 });
 
 export default lbry;

ui/js/main.js

@@ -49,6 +49,12 @@ ipcRenderer.on("open-uri-requested", (event, uri) => {
   }
 });
 
+ipcRenderer.on("open-menu", (event, uri) => {
+  if (uri && uri.startsWith("/help")) {
+    app.store.dispatch(doNavigate("/help"));
+  }
+});
+
 document.addEventListener("click", event => {
   var target = event.target;
   while (target && target !== document) {

ui/js/page/fileListDownloaded/view.jsx

@@ -12,7 +12,7 @@ import SubHeader from "component/subHeader";
 
 class FileListDownloaded extends React.PureComponent {
   componentWillMount() {
-    this.props.fetchFileInfosDownloaded();
+    if (!this.props.isPending) this.props.fetchFileInfosDownloaded();
   }
 
   render() {

ui/js/page/fileListPublished/view.jsx

@@ -12,7 +12,7 @@ import SubHeader from "component/subHeader";
 
 class FileListPublished extends React.PureComponent {
   componentWillMount() {
-    this.props.fetchFileListPublished();
+    if (!this.props.isPending) this.props.fetchFileListPublished();
   }
 
   componentDidUpdate() {

ui/js/page/filePage/view.jsx

@@ -9,7 +9,7 @@ import Link from "component/link";
 import UriIndicator from "component/uriIndicator";
 
 const FormatItem = props => {
-  const { contentType, metadata: { author, language, license } } = props;
+  const { contentType, metadata: { language, license } } = props;
 
   const mediaType = lbry.getMediaType(contentType);
 
@@ -19,9 +19,6 @@ const FormatItem = props => {
         <tr>
           <td>{__("Content-Type")}</td><td>{mediaType}</td>
         </tr>
-        <tr>
-          <td>{__("Author")}</td><td>{author}</td>
-        </tr>
         <tr>
           <td>{__("Language")}</td><td>{language}</td>
         </tr>

ui/js/page/help/view.jsx

@@ -26,12 +26,12 @@ class HelpPage extends React.PureComponent {
           upgradeAvailable: upgradeAvailable,
         });
       });
-    lbry.call("version", {}, info => {
+    lbry.version().then(info => {
       this.setState({
         versionInfo: info,
       });
     });
-    lbry.getSessionInfo(info => {
+    lbry.status({ session_status: true }).then(info => {
       this.setState({
         lbryId: info.lbry_id,
       });

ui/js/page/publish/view.jsx

@@ -134,7 +134,7 @@ class PublishPage extends React.PureComponent {
         publishArgs.file_path = this.refs.file.getValue();
       }
 
-      lbry.publish(
+      lbry.publishDeprecated(
         publishArgs,
         message => {
           this.handlePublishStarted();

ui/js/page/report.js

@@ -1,37 +1,45 @@
 import React from "react";
 import Link from "component/link";
 import { FormRow } from "component/form";
-import Modal from "../component/modal.js";
+import { doShowSnackBar } from "actions/app";
 import lbry from "../lbry.js";
 
-class ReportPage extends React.PureComponent {
+class ReportPage extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
       submitting: false,
-      modal: null,
+      message: "",
     };
   }
 
   submitMessage() {
-    if (this._messageArea.value) {
+    const message = this.state.message;
+    if (message) {
       this.setState({
         submitting: true,
       });
-      lbry.reportBug(this._messageArea.value, () => {
+      lbry.report_bug({ message }).then(() => {
         this.setState({
           submitting: false,
-          modal: "submitted",
         });
+
+        // Display global notice
+        const action = doShowSnackBar({
+          message: __("Message received! Thanks for helping."),
+          isError: false,
         });
-      this._messageArea.value = "";
+        window.app.store.dispatch(action);
+      });
+
+      this.setState({ message: "" });
     }
   }
 
-  closeModal() {
+  onMessageChange(event) {
     this.setState({
-      modal: null,
+      message: event.target.value,
     });
   }
 
@@ -49,9 +57,12 @@ class ReportPage extends React.PureComponent {
             <div className="form-row">
               <FormRow
                 type="textarea"
-                ref={t => (this._messageArea = t)}
                 rows="10"
                 name="message"
+                value={this.state.message}
+                onChange={event => {
+                  this.onMessageChange(event);
+                }}
                 placeholder={__("Description of your issue")}
               />
             </div>
@@ -83,17 +94,6 @@ class ReportPage extends React.PureComponent {
             />.
           </div>
         </section>
-        <Modal
-          isOpen={this.state.modal == "submitted"}
-          contentLabel={__("Bug report submitted")}
-          onConfirmed={event => {
-            this.closeModal(event);
-          }}
-        >
-          {__(
-            "Your bug report has been submitted! Thank you for your feedback."
-          )}
-        </Modal>
       </main>
     );
   }

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/page/showPage/view.jsx

@@ -6,15 +6,13 @@ import FilePage from "page/filePage";
 
 class ShowPage extends React.PureComponent {
   componentWillMount() {
-    this.resolve(this.props);
+    const { isResolvingUri, resolveUri, uri } = this.props;
+
+    if (!isResolvingUri) resolveUri(uri);
   }
 
   componentWillReceiveProps(nextProps) {
-    this.resolve(nextProps);
+    const { isResolvingUri, resolveUri, claim, uri } = this.props;
-  }
-
-  resolve(props) {
-    const { isResolvingUri, resolveUri, claim, uri } = props;
 
     if (!isResolvingUri && claim === undefined && uri) {
       resolveUri(uri);
@@ -26,7 +24,7 @@ class ShowPage extends React.PureComponent {
 
     let innerContent = "";
 
-    if (isResolvingUri || !claim) {
+    if (isResolvingUri && !claim) {
       innerContent = (
         <section className="card">
           <div className="card__inner">
@@ -44,7 +42,7 @@ class ShowPage extends React.PureComponent {
           </div>
         </section>
       );
-    } else if (claim.name.length && claim.name[0] === "@") {
+    } else if (claim && claim.name.length && claim.name[0] === "@") {
       innerContent = <ChannelPage uri={uri} />;
     } else if (claim) {
       innerContent = <FilePage uri={uri} />;

ui/js/reducers/claims.js

@@ -26,15 +26,6 @@ reducers[types.RESOLVE_URI_COMPLETED] = function(state, action) {
   });
 };
 
-reducers[types.RESOLVE_URI_CANCELED] = function(state, action) {
-  const uri = action.data.uri;
-  const newClaims = Object.assign({}, state.claimsByUri);
-  delete newClaims[uri];
-  return Object.assign({}, state, {
-    claimsByUri: newClaims,
-  });
-};
-
 reducers[types.FETCH_CLAIM_LIST_MINE_STARTED] = function(state, action) {
   return Object.assign({}, state, {
     isClaimListMinePending: true,

ui/js/store.js

@@ -1,22 +1,28 @@
-const redux = require('redux');
+import { createLogger } from "redux-logger";
-const thunk = require('redux-thunk').default;
+import appReducer from "reducers/app";
+import availabilityReducer from "reducers/availability";
+import claimsReducer from "reducers/claims";
+import contentReducer from "reducers/content";
+import costInfoReducer from "reducers/cost_info";
+import fileInfoReducer from "reducers/file_info";
+import rewardsReducer from "reducers/rewards";
+import searchReducer from "reducers/search";
+import settingsReducer from "reducers/settings";
+import userReducer from "reducers/user";
+import walletReducer from "reducers/wallet";
+import { persistStore, autoRehydrate } from "redux-persist";
+import createCompressor from "redux-persist-transform-compress";
+import createFilter from "redux-persist-transform-filter";
+import { REHYDRATE } from "redux-persist/constants";
+import createActionBuffer from "redux-action-buffer";
+
+const localForage = require("localforage");
+const redux = require("redux");
+const thunk = require("redux-thunk").default;
 const env = ENV;
 
-import { createLogger } from 'redux-logger';
-import appReducer from 'reducers/app';
-import availabilityReducer from 'reducers/availability';
-import claimsReducer from 'reducers/claims';
-import contentReducer from 'reducers/content';
-import costInfoReducer from 'reducers/cost_info';
-import fileInfoReducer from 'reducers/file_info';
-import rewardsReducer from 'reducers/rewards';
-import searchReducer from 'reducers/search';
-import settingsReducer from 'reducers/settings';
-import walletReducer from 'reducers/wallet';
-import userReducer from 'reducers/user';
-
 function isFunction(object) {
-	return typeof object === 'function';
+  return typeof object === "function";
 }
 
 function isNotFunction(object) {
@@ -25,7 +31,7 @@ function isNotFunction(object) {
 
 function createBulkThunkMiddleware() {
   return ({ dispatch, getState }) => next => action => {
-		if (action.type === 'BATCH_ACTIONS') {
+    if (action.type === "BATCH_ACTIONS") {
       action.actions
         .filter(isFunction)
         .map(actionFn => actionFn(dispatch, getState));
@@ -37,7 +43,7 @@ function createBulkThunkMiddleware() {
 function enableBatching(reducer) {
   return function batchingReducer(state, action) {
     switch (action.type) {
-			case 'BATCH_ACTIONS':
+      case "BATCH_ACTIONS":
         return action.actions
           .filter(isNotFunction)
           .reduce(batchingReducer, state);
@@ -64,17 +70,36 @@ const reducers = redux.combineReducers({
 const bulkThunk = createBulkThunkMiddleware();
 const middleware = [thunk, bulkThunk];
 
-if (env === 'development') {
+if (env === "development") {
   const logger = createLogger({
-		collapsed: true
+    collapsed: true,
   });
   middleware.push(logger);
 }
 
+middleware.push(createActionBuffer(REHYDRATE));
+
 const createStoreWithMiddleware = redux.compose(
+  autoRehydrate(),
   redux.applyMiddleware(...middleware)
 )(redux.createStore);
 
 const reduxStore = createStoreWithMiddleware(enableBatching(reducers));
+const compressor = createCompressor();
+const saveClaimsFilter = createFilter("claims", [
+  "byId",
+  "claimsByUri",
+  "myClaims",
+]);
+
+const persistOptions = {
+  whitelist: ["claims"],
+  // Order is important. Needs to be compressed last or other transforms can't
+  // read the data
+  transforms: [saveClaimsFilter, compressor],
+  debounce: 1000,
+  storage: localForage,
+};
+window.cacheStore = persistStore(reduxStore, persistOptions);
 
 export default reduxStore;

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lbry-web-ui",
-  "version": "0.12.0",
+  "version": "0.12.2rc3",
   "description": "LBRY UI",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -26,6 +26,7 @@
     "babel-preset-react": "^6.11.1",
     "from2": "^2.3.0",
     "jshashes": "^1.0.6",
+    "localforage": "^1.5.0",
     "node-sass": "^3.8.0",
     "rc-progress": "^2.0.6",
     "react": "^15.4.0",
@@ -33,7 +34,11 @@
     "react-modal": "^1.5.2",
     "react-redux": "^5.0.3",
     "redux": "^3.6.0",
+    "redux-action-buffer": "^1.1.0",
     "redux-logger": "^3.0.1",
+    "redux-persist": "^4.8.0",
+    "redux-persist-transform-compress": "^4.2.0",
+    "redux-persist-transform-filter": "0.0.10",
     "redux-thunk": "^2.2.0",
     "render-media": "^2.10.0",
     "reselect": "^3.0.0",
@@ -42,7 +47,7 @@
   "devDependencies": {
     "babel": "^6.5.2",
     "babel-core": "^6.18.2",
-    "babel-loader": "^6.2.8",
+    "babel-loader": "^6.4.1",
     "babel-plugin-react-require": "^3.0.0",
     "babel-polyfill": "^6.20.0",
     "babel-preset-es2015": "^6.18.0",
@@ -59,7 +64,7 @@
     "lint-staged": "^3.6.0",
     "node-sass": "^3.13.0",
     "prettier": "^1.4.2",
-    "webpack": "^1.13.3",
+    "webpack": "^2.6.1",
     "webpack-dev-server": "^2.4.4",
     "webpack-notifier": "^1.5.0",
     "webpack-target-electron-renderer": "^0.4.0",

ui/webpack.config.js

@@ -1,23 +1,23 @@
-const path = require('path');
+const path = require("path");
-const webpack = require('webpack')
+const webpack = require("webpack")
-const appPath = path.resolve(__dirname, 'js');
+const appPath = path.resolve(__dirname, "js");
 
 const PATHS = {
-  app: path.join(__dirname, 'app'),
+  app: path.join(__dirname, "app"),
-  dist: path.join(__dirname, 'dist')
+  dist: path.join(__dirname, "dist")
 };
 
 module.exports = {
-  entry: ['babel-polyfill', './js/main.js'],
+  entry: ["babel-polyfill", "./js/main.js"],
   output: {
-    path: path.join(PATHS.dist, 'js'),
+    path: path.join(PATHS.dist, "js"),
-    publicPath: '/js/',
+    publicPath: "/js/",
     filename: "bundle.js"
   },
-  devtool: 'source-map',
+  devtool: "source-map",
   resolve: {
-    root: appPath,
+    modules: [appPath, "node_modules"],
-    extensions: ['', '.js', '.jsx', '.css'],
+    extensions: [".js", ".jsx", ".css"]
   },
   plugins: [
     new webpack.DefinePlugin({
@@ -25,29 +25,30 @@ module.exports = {
     }),
   ],
   module: {
-    preLoaders: [
+    rules: [
       {
         test: /\.jsx?$/,
-        loaders: ['eslint'],
+        enforce: "pre",
+        loaders: ["eslint"],
         // define an include so we check just the files we need
         include: PATHS.app
-      }
+      },
-    ],
+      {
-    loaders: [
+        test: /\.css$/,
-      { test: /\.css$/, loader: "style!css" },
+        use: ["style-loader", "css-loader"]
+      },
       {
         test: /\.jsx?$/,
-        loader: 'babel',
+        exclude: /node_modules/,
-        query: {
+        use: {
+          loader: "babel-loader",
+          options: {
             cacheDirectory: true,
-          presets:[ 'es2015', 'react', 'stage-2' ]
+            presets: [ "es2015", "react", "stage-2" ]
+          }
+        }
       }
-      },
-      {
-        test: /mime\.json$/,
-        loader: 'json',
-      },
     ]
   },
-  target: 'electron-main',
+  target: "electron-main",
 };

ui/webpack.dev.config.js

@@ -1,59 +1,62 @@
-const path = require('path');
+const path = require("path");
-const webpack = require('webpack')
+const webpack = require("webpack")
-const WebpackNotifierPlugin = require('webpack-notifier')
+const WebpackNotifierPlugin = require("webpack-notifier")
 
-const appPath = path.resolve(__dirname, 'js');
+const appPath = path.resolve(__dirname, "js");
 
 const PATHS = {
-  app: path.join(__dirname, 'app'),
+  app: path.join(__dirname, "app"),
-  dist: path.join(__dirname, '..', 'app', 'dist')
+  dist: path.join(__dirname, "..", "app", "dist")
 };
 
 module.exports = {
-  entry: ['babel-polyfill', './js/main.js'],
+  entry: ["babel-polyfill", "./js/main.js"],
   output: {
-    path: path.join(PATHS.dist, 'js'),
+    path: path.join(PATHS.dist, "js"),
-    publicPath: '/js/',
+    publicPath: "/js/",
     filename: "bundle.js",
     pathinfo: true
   },
-  debug: true,
   cache: true,
-  devtool: 'eval',
+  devtool: "eval",
   resolve: {
-    root: appPath,
+    modules: [appPath, "node_modules"],
-    extensions: ['', '.js', '.jsx', '.css'],
+    extensions: [".js", ".jsx", ".css"]
   },
   plugins: [
     new WebpackNotifierPlugin(),
     new webpack.DefinePlugin({
       ENV: JSON.stringify("development"),
     }),
+    new webpack.LoaderOptionsPlugin({
+      debug: true
+    })
   ],
   module: {
-    preLoaders: [
+    rules: [
       {
         test: /\.jsx?$/,
-        loaders: ['eslint'],
+        enforce: "pre",
+        loaders: ["eslint"],
         // define an include so we check just the files we need
         include: PATHS.app
-      }
+      },
-    ],
+      {
-    loaders: [
+        test: /\.css$/,
-      { test: /\.css$/, loader: "style!css" },
+        use: ["style-loader", "css-loader"]
+      },
       {
         test: /\.jsx?$/,
-        loader: 'babel',
+        exclude: /node_modules/,
-        query: {
+        use: {
+          loader: "babel-loader",
+          options: {
             cacheDirectory: true,
-          presets:[ 'es2015', 'react', 'stage-2' ]
+            presets: [ "es2015", "react", "stage-2" ]
+          }
+        }
       }
-      },
-      {
-        test: /mime\.json$/,
-        loader: 'json',
-      },
     ]
   },
-  target: 'electron-main',
+  target: "electron-main",
 };