diff --git a/package.json b/package.json
index 0d7c8eea1..8a886323e 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
"devDependencies": {
"electron": "^1.4.15",
"electron-builder": "^11.7.0",
- "electron-debug": "^1.1.0"
+ "electron-debug": "^1.1.0",
+ "why-did-you-update": "0.0.8"
}
}
diff --git a/ui/js/component/app/view.jsx b/ui/js/component/app/view.jsx
index 176c04785..ff3dea060 100644
--- a/ui/js/component/app/view.jsx
+++ b/ui/js/component/app/view.jsx
@@ -7,7 +7,7 @@ import UpgradeModal from "component/upgradeModal";
import lbry from "lbry";
import { Line } from "rc-progress";
-class App extends React.Component {
+class App extends React.PureComponent {
componentWillMount() {
document.addEventListener("unhandledError", event => {
this.props.alertError(event.detail);
diff --git a/ui/js/component/auth.js b/ui/js/component/auth.js
index 60a9ad9d4..3b5070e8f 100644
--- a/ui/js/component/auth.js
+++ b/ui/js/component/auth.js
@@ -10,7 +10,7 @@ import { CreditAmount, Address } from "../component/common.js";
import { getLocal, setLocal } from "../utils.js";
import rewards from "../rewards";
-class SubmitEmailStage extends React.Component {
+class SubmitEmailStage extends React.PureComponent {
constructor(props) {
super(props);
@@ -94,7 +94,7 @@ class SubmitEmailStage extends React.Component {
}
}
-class ConfirmEmailStage extends React.Component {
+class ConfirmEmailStage extends React.PureComponent {
constructor(props) {
super(props);
@@ -191,7 +191,7 @@ class ConfirmEmailStage extends React.Component {
}
}
-class WelcomeStage extends React.Component {
+class WelcomeStage extends React.PureComponent {
static propTypes = {
endAuth: React.PropTypes.func,
};
@@ -323,7 +323,7 @@ const PendingStage = props => {
);
};
-class CodeRequiredStage extends React.Component {
+class CodeRequiredStage extends React.PureComponent {
constructor(props) {
super(props);
@@ -417,7 +417,7 @@ class CodeRequiredStage extends React.Component {
}
}
-export class AuthOverlay extends React.Component {
+export class AuthOverlay extends React.PureComponent {
constructor(props) {
super(props);
diff --git a/ui/js/component/common.js b/ui/js/component/common.js
index 58f2d1036..38dbf83fd 100644
--- a/ui/js/component/common.js
+++ b/ui/js/component/common.js
@@ -2,7 +2,7 @@ import React from "react";
import lbry from "../lbry.js";
//component/icon.js
-export class Icon extends React.Component {
+export class Icon extends React.PureComponent {
static propTypes = {
icon: React.PropTypes.string.isRequired,
className: React.PropTypes.string,
@@ -21,7 +21,7 @@ export class Icon extends React.Component {
}
}
-export class TruncatedText extends React.Component {
+export class TruncatedText extends React.PureComponent {
static propTypes = {
lines: React.PropTypes.number,
};
@@ -42,7 +42,7 @@ export class TruncatedText extends React.Component {
}
}
-export class BusyMessage extends React.Component {
+export class BusyMessage extends React.PureComponent {
static propTypes = {
message: React.PropTypes.string,
};
@@ -54,13 +54,13 @@ export class BusyMessage extends React.Component {
}
}
-export class CurrencySymbol extends React.Component {
+export class CurrencySymbol extends React.PureComponent {
render() {
return LBC;
}
}
-export class CreditAmount extends React.Component {
+export class CreditAmount extends React.PureComponent {
static propTypes = {
amount: React.PropTypes.number.isRequired,
precision: React.PropTypes.number,
@@ -116,7 +116,7 @@ let addressStyle = {
fontFamily:
'"Consolas", "Lucida Console", "Adobe Source Code Pro", monospace',
};
-export class Address extends React.Component {
+export class Address extends React.PureComponent {
static propTypes = {
address: React.PropTypes.string,
};
@@ -146,7 +146,7 @@ export class Address extends React.Component {
}
}
-export class Thumbnail extends React.Component {
+export class Thumbnail extends React.PureComponent {
static propTypes = {
src: React.PropTypes.string,
};
diff --git a/ui/js/component/downloadingModal/view.jsx b/ui/js/component/downloadingModal/view.jsx
index 4025ea372..0bf612d7f 100644
--- a/ui/js/component/downloadingModal/view.jsx
+++ b/ui/js/component/downloadingModal/view.jsx
@@ -3,7 +3,7 @@ import { Modal } from "component/modal";
import { Line } from "rc-progress";
import Link from "component/link";
-class DownloadingModal extends React.Component {
+class DownloadingModal extends React.PureComponent {
render() {
const {
downloadProgress,
diff --git a/ui/js/component/errorModal/view.jsx b/ui/js/component/errorModal/view.jsx
index 930511b84..57bfe19dc 100644
--- a/ui/js/component/errorModal/view.jsx
+++ b/ui/js/component/errorModal/view.jsx
@@ -2,7 +2,7 @@ import React from "react";
import lbry from "lbry";
import { ExpandableModal } from "component/modal";
-class ErrorModal extends React.Component {
+class ErrorModal extends React.PureComponent {
render() {
const { modal, closeModal, error } = this.props;
diff --git a/ui/js/component/file-selector.js b/ui/js/component/file-selector.js
index 677ba7f71..879ea2665 100644
--- a/ui/js/component/file-selector.js
+++ b/ui/js/component/file-selector.js
@@ -1,7 +1,7 @@
import React from "react";
const { remote } = require("electron");
-class FileSelector extends React.Component {
+class FileSelector extends React.PureComponent {
static propTypes = {
type: React.PropTypes.oneOf(["file", "directory"]),
initPath: React.PropTypes.string,
diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx
index 482ee0d05..b78512be9 100644
--- a/ui/js/component/fileActions/view.jsx
+++ b/ui/js/component/fileActions/view.jsx
@@ -7,7 +7,7 @@ import Link from "component/link";
import { ToolTip } from "component/tooltip";
import { DropDownMenu, DropDownMenuItem } from "component/menu";
-class FileActions extends React.Component {
+class FileActions extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
diff --git a/ui/js/component/fileCard/view.jsx b/ui/js/component/fileCard/view.jsx
index 0dd04b48d..70b8e8132 100644
--- a/ui/js/component/fileCard/view.jsx
+++ b/ui/js/component/fileCard/view.jsx
@@ -6,7 +6,7 @@ import { Thumbnail, TruncatedText, Icon } from "component/common";
import FilePrice from "component/filePrice";
import UriIndicator from "component/uriIndicator";
-class FileCard extends React.Component {
+class FileCard extends React.PureComponent {
componentWillMount() {
this.resolve(this.props);
}
diff --git a/ui/js/component/fileList/view.jsx b/ui/js/component/fileList/view.jsx
index fef4cc574..664ae97d3 100644
--- a/ui/js/component/fileList/view.jsx
+++ b/ui/js/component/fileList/view.jsx
@@ -8,7 +8,7 @@ import rewards from "rewards.js";
import lbryio from "lbryio.js";
import { BusyMessage, Thumbnail } from "component/common.js";
-class FileList extends React.Component {
+class FileList extends React.PureComponent {
constructor(props) {
super(props);
diff --git a/ui/js/component/fileListSearch/view.jsx b/ui/js/component/fileListSearch/view.jsx
index 2a6f2fc96..bd8efeb00 100644
--- a/ui/js/component/fileListSearch/view.jsx
+++ b/ui/js/component/fileListSearch/view.jsx
@@ -47,7 +47,7 @@ const FileListSearchResults = props => {
return
{rows}
;
};
-class FileListSearch extends React.Component {
+class FileListSearch extends React.PureComponent {
componentWillMount() {
this.props.search(this.props.query);
}
diff --git a/ui/js/component/filePrice/view.jsx b/ui/js/component/filePrice/view.jsx
index a807db071..127bf28b0 100644
--- a/ui/js/component/filePrice/view.jsx
+++ b/ui/js/component/filePrice/view.jsx
@@ -1,7 +1,7 @@
import React from "react";
import { CreditAmount } from "component/common";
-class FilePrice extends React.Component {
+class FilePrice extends React.PureComponent {
componentWillMount() {
this.fetchCost(this.props);
}
@@ -11,13 +11,7 @@ class FilePrice extends React.Component {
}
fetchCost(props) {
- const {
- costInfo,
- fetchCostInfo,
- uri,
- fetching,
- claim,
- } = props;
+ const { costInfo, fetchCostInfo, uri, fetching, claim } = props;
if (costInfo === undefined && !fetching && claim) {
fetchCostInfo(uri);
diff --git a/ui/js/component/fileTile/view.jsx b/ui/js/component/fileTile/view.jsx
index 34b1476dd..27511defd 100644
--- a/ui/js/component/fileTile/view.jsx
+++ b/ui/js/component/fileTile/view.jsx
@@ -7,7 +7,7 @@ import { Thumbnail, TruncatedText } from "component/common.js";
import FilePrice from "component/filePrice";
import UriIndicator from "component/uriIndicator";
-class FileTile extends React.Component {
+class FileTile extends React.PureComponent {
static SHOW_EMPTY_PUBLISH = "publish";
static SHOW_EMPTY_PENDING = "pending";
diff --git a/ui/js/component/form.js b/ui/js/component/form.js
index 809f79e7b..8ebbc2861 100644
--- a/ui/js/component/form.js
+++ b/ui/js/component/form.js
@@ -10,7 +10,7 @@ function formFieldId() {
return "form-field-" + ++formFieldCounter;
}
-export class FormField extends React.Component {
+export class FormField extends React.PureComponent {
static propTypes = {
type: React.PropTypes.string.isRequired,
prefix: React.PropTypes.string,
@@ -164,7 +164,7 @@ export class FormField extends React.Component {
}
}
-export class FormRow extends React.Component {
+export class FormRow extends React.PureComponent {
static propTypes = {
label: React.PropTypes.oneOfType([
React.PropTypes.string,
diff --git a/ui/js/component/load_screen.js b/ui/js/component/load_screen.js
index e53a4b6c0..4ca861fd4 100644
--- a/ui/js/component/load_screen.js
+++ b/ui/js/component/load_screen.js
@@ -3,7 +3,7 @@ import lbry from "../lbry.js";
import { BusyMessage, Icon } from "./common.js";
import Link from "component/link";
-class LoadScreen extends React.Component {
+class LoadScreen extends React.PureComponent {
static propTypes = {
message: React.PropTypes.string.isRequired,
details: React.PropTypes.string,
diff --git a/ui/js/component/menu.js b/ui/js/component/menu.js
index 35521d73c..2344aac5b 100644
--- a/ui/js/component/menu.js
+++ b/ui/js/component/menu.js
@@ -2,7 +2,7 @@ import React from "react";
import { Icon } from "./common.js";
import Link from "component/link";
-export class DropDownMenuItem extends React.Component {
+export class DropDownMenuItem extends React.PureComponent {
static propTypes = {
href: React.PropTypes.string,
label: React.PropTypes.string,
@@ -32,7 +32,7 @@ export class DropDownMenuItem extends React.Component {
}
}
-export class DropDownMenu extends React.Component {
+export class DropDownMenu extends React.PureComponent {
constructor(props) {
super(props);
diff --git a/ui/js/component/modal-page.js b/ui/js/component/modal-page.js
index 8bff41853..f63d120f5 100644
--- a/ui/js/component/modal-page.js
+++ b/ui/js/component/modal-page.js
@@ -1,7 +1,7 @@
import React from "react";
import ReactModal from "react-modal";
-export class ModalPage extends React.Component {
+export class ModalPage extends React.PureComponent {
render() {
return (
{
- contextMenu.showContextMenu(
- remote.getCurrentWindow(),
- event.x,
- event.y,
- lbry.getClientSetting('showDeveloperMenu')
- );
- event.preventDefault();
+window.addEventListener("contextmenu", event => {
+ contextMenu.showContextMenu(
+ remote.getCurrentWindow(),
+ event.x,
+ event.y,
+ lbry.getClientSetting("showDeveloperMenu")
+ );
+ event.preventDefault();
});
-window.addEventListener('popstate', (event, param) => {
- const params = event.state;
- const pathParts = document.location.pathname.split('/');
- const route = '/' + pathParts[pathParts.length - 1];
- const queryString = toQueryString(params);
+window.addEventListener("popstate", (event, param) => {
+ const params = event.state;
+ const pathParts = document.location.pathname.split("/");
+ const route = "/" + pathParts[pathParts.length - 1];
+ const queryString = toQueryString(params);
- let action;
- if (route.match(/html$/)) {
- action = doChangePath('/discover');
- } else {
- action = doChangePath(`${route}?${queryString}`);
- }
+ let action;
+ if (route.match(/html$/)) {
+ action = doChangePath("/discover");
+ } else {
+ action = doChangePath(`${route}?${queryString}`);
+ }
- app.store.dispatch(action);
+ app.store.dispatch(action);
});
-ipcRenderer.on('open-uri-requested', (event, uri) => {
- if (uri && uri.startsWith('lbry://')) {
- app.store.dispatch(doNavigate('/show', { uri }));
- }
+ipcRenderer.on("open-uri-requested", (event, uri) => {
+ if (uri && uri.startsWith("lbry://")) {
+ app.store.dispatch(doNavigate("/show", { uri }));
+ }
});
-document.addEventListener('click', event => {
- var target = event.target;
- while (target && target !== document) {
- if (target.matches('a[href^="http"]')) {
- event.preventDefault();
- shell.openExternal(target.href);
- return;
- }
- target = target.parentNode;
- }
+document.addEventListener("click", event => {
+ var target = event.target;
+ while (target && target !== document) {
+ if (target.matches('a[href^="http"]')) {
+ event.preventDefault();
+ shell.openExternal(target.href);
+ return;
+ }
+ target = target.parentNode;
+ }
});
const initialState = app.store.getState();
+if (env === "development") {
+ /*
+ https://github.com/garbles/why-did-you-update
+ "A function that monkey patches React and notifies you in the console when
+ potentially unnecessary re-renders occur."
+
+ Just checks if props change between updates. Can be fixed by manually
+ adding a check in shouldComponentUpdate or using React.PureComponent
+ */
+ whyDidYouUpdate(React);
+}
+
var init = function() {
- function onDaemonReady() {
- window.sessionStorage.setItem('loaded', 'y'); //once we've made it here once per session, we don't need to show splash again
- const actions = [];
+ function onDaemonReady() {
+ window.sessionStorage.setItem("loaded", "y"); //once we've made it here once per session, we don't need to show splash again
+ const actions = [];
- app.store.dispatch(doDaemonReady());
- app.store.dispatch(doChangePath('/discover'));
- app.store.dispatch(doFetchDaemonSettings());
- app.store.dispatch(doFileList());
+ app.store.dispatch(doDaemonReady());
+ app.store.dispatch(doChangePath("/discover"));
+ app.store.dispatch(doFetchDaemonSettings());
+ app.store.dispatch(doFileList());
- ReactDOM.render(
-
-
- ,
- canvas
- );
- }
+ ReactDOM.render(
+
+
+ ,
+ canvas
+ );
+ }
- if (window.sessionStorage.getItem('loaded') == 'y') {
- onDaemonReady();
- } else {
- ReactDOM.render(, canvas);
- }
+ if (window.sessionStorage.getItem("loaded") == "y") {
+ onDaemonReady();
+ } else {
+ ReactDOM.render(, canvas);
+ }
};
init();
diff --git a/ui/js/page/channel/view.jsx b/ui/js/page/channel/view.jsx
index 1c4b7ca7d..db03b19b3 100644
--- a/ui/js/page/channel/view.jsx
+++ b/ui/js/page/channel/view.jsx
@@ -3,7 +3,7 @@ import lbryuri from "lbryuri";
import { BusyMessage } from "component/common";
import FileTile from "component/fileTile";
-class ChannelPage extends React.Component {
+class ChannelPage extends React.PureComponent {
componentDidMount() {
this.fetchClaims(this.props);
}
diff --git a/ui/js/page/developer.js b/ui/js/page/developer.js
index 3a2486733..372796785 100644
--- a/ui/js/page/developer.js
+++ b/ui/js/page/developer.js
@@ -6,7 +6,7 @@ import Link from "../component/link";
const fs = require("fs");
const { ipcRenderer } = require("electron");
-class DeveloperPage extends React.Component {
+class DeveloperPage extends React.PureComponent {
constructor(props) {
super(props);
diff --git a/ui/js/page/discover/view.jsx b/ui/js/page/discover/view.jsx
index 9a2649301..ea51972eb 100644
--- a/ui/js/page/discover/view.jsx
+++ b/ui/js/page/discover/view.jsx
@@ -37,7 +37,7 @@ const FeaturedCategory = props => {
);
};
-class DiscoverPage extends React.Component {
+class DiscoverPage extends React.PureComponent {
componentWillMount() {
this.props.fetchFeaturedUris();
}
diff --git a/ui/js/page/fileListDownloaded/view.jsx b/ui/js/page/fileListDownloaded/view.jsx
index 30198f131..518a5c2f2 100644
--- a/ui/js/page/fileListDownloaded/view.jsx
+++ b/ui/js/page/fileListDownloaded/view.jsx
@@ -10,7 +10,7 @@ import { BusyMessage, Thumbnail } from "component/common.js";
import FileList from "component/fileList";
import SubHeader from "component/subHeader";
-class FileListDownloaded extends React.Component {
+class FileListDownloaded extends React.PureComponent {
componentWillMount() {
this.props.fetchFileInfosDownloaded();
}
diff --git a/ui/js/page/fileListPublished/view.jsx b/ui/js/page/fileListPublished/view.jsx
index e4dc5f3e9..19ac43ec4 100644
--- a/ui/js/page/fileListPublished/view.jsx
+++ b/ui/js/page/fileListPublished/view.jsx
@@ -10,7 +10,7 @@ import { BusyMessage, Thumbnail } from "component/common.js";
import FileList from "component/fileList";
import SubHeader from "component/subHeader";
-class FileListPublished extends React.Component {
+class FileListPublished extends React.PureComponent {
componentWillMount() {
this.props.fetchFileListPublished();
}
diff --git a/ui/js/page/filePage/view.jsx b/ui/js/page/filePage/view.jsx
index 9c535f0ea..9c8095d56 100644
--- a/ui/js/page/filePage/view.jsx
+++ b/ui/js/page/filePage/view.jsx
@@ -33,7 +33,7 @@ const FormatItem = props => {
);
};
-class FilePage extends React.Component {
+class FilePage extends React.PureComponent {
componentDidMount() {
this.fetchFileInfo(this.props);
this.fetchCostInfo(this.props);
diff --git a/ui/js/page/help/view.jsx b/ui/js/page/help/view.jsx
index 00fc2710a..d8d957fc4 100644
--- a/ui/js/page/help/view.jsx
+++ b/ui/js/page/help/view.jsx
@@ -5,7 +5,7 @@ import Link from "component/link";
import SubHeader from "component/subHeader";
import { BusyMessage } from "component/common";
-class HelpPage extends React.Component {
+class HelpPage extends React.PureComponent {
constructor(props) {
super(props);
diff --git a/ui/js/page/publish/view.jsx b/ui/js/page/publish/view.jsx
index 063495d1d..89db3c109 100644
--- a/ui/js/page/publish/view.jsx
+++ b/ui/js/page/publish/view.jsx
@@ -6,7 +6,7 @@ import Link from "component/link";
import rewards from "rewards";
import Modal from "component/modal";
-class PublishPage extends React.Component {
+class PublishPage extends React.PureComponent {
constructor(props) {
super(props);
diff --git a/ui/js/page/report.js b/ui/js/page/report.js
index ded74238b..a81592ad7 100644
--- a/ui/js/page/report.js
+++ b/ui/js/page/report.js
@@ -4,7 +4,7 @@ import { FormRow } from "component/form";
import Modal from "../component/modal.js";
import lbry from "../lbry.js";
-class ReportPage extends React.Component {
+class ReportPage extends React.PureComponent {
constructor(props) {
super(props);
diff --git a/ui/js/page/rewards.js b/ui/js/page/rewards.js
index 31017ccdc..1199ed0df 100644
--- a/ui/js/page/rewards.js
+++ b/ui/js/page/rewards.js
@@ -4,7 +4,7 @@ import { CreditAmount, Icon } from "component/common.js";
import SubHeader from "component/subHeader";
import { RewardLink } from "component/reward-link";
-export class RewardTile extends React.Component {
+export class RewardTile extends React.PureComponent {
static propTypes = {
type: React.PropTypes.string.isRequired,
title: React.PropTypes.string.isRequired,
@@ -34,7 +34,7 @@ export class RewardTile extends React.Component {
}
}
-export class RewardsPage extends React.Component {
+export class RewardsPage extends React.PureComponent {
constructor(props) {
super(props);
diff --git a/ui/js/page/search/view.jsx b/ui/js/page/search/view.jsx
index 3e070e0c4..0843b6141 100644
--- a/ui/js/page/search/view.jsx
+++ b/ui/js/page/search/view.jsx
@@ -5,7 +5,7 @@ import FileListSearch from "component/fileListSearch";
import { ToolTip } from "component/tooltip.js";
import { BusyMessage } from "component/common.js";
-class SearchPage extends React.Component {
+class SearchPage extends React.PureComponent {
render() {
const { query } = this.props;
diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx
index 82d3c7c60..f1476d5d3 100644
--- a/ui/js/page/settings/view.jsx
+++ b/ui/js/page/settings/view.jsx
@@ -3,7 +3,7 @@ import { FormField, FormRow } from "component/form.js";
import SubHeader from "component/subHeader";
import lbry from "lbry.js";
-class SettingsPage extends React.Component {
+class SettingsPage extends React.PureComponent {
constructor(props) {
super(props);
diff --git a/ui/js/page/showPage/view.jsx b/ui/js/page/showPage/view.jsx
index 87ee4c0fb..2ef928c99 100644
--- a/ui/js/page/showPage/view.jsx
+++ b/ui/js/page/showPage/view.jsx
@@ -4,7 +4,7 @@ import { BusyMessage } from "component/common";
import ChannelPage from "page/channel";
import FilePage from "page/filePage";
-class ShowPage extends React.Component {
+class ShowPage extends React.PureComponent {
componentWillMount() {
this.resolve(this.props);
}
diff --git a/ui/js/page/start.js b/ui/js/page/start.js
index f76415ec1..41a796c2c 100644
--- a/ui/js/page/start.js
+++ b/ui/js/page/start.js
@@ -1,7 +1,7 @@
import React from "react";
import lbry from "../lbry.js";
-class StartPage extends React.Component {
+class StartPage extends React.PureComponent {
componentWillMount() {
lbry.stop();
}