Merge pull request #1365 from lbryio/bug-fixes

Bug fixes

.gitignore

@@ -3,3 +3,4 @@
 /static/daemon/lbrynet*
 /static/locales
 yarn-error.log
+/build/daemon*

src/renderer/component/rewardLink/view.jsx

@@ -12,17 +12,18 @@ type Props = {
   label: ?string,
   errorMessage: ?string,
   reward: Reward,
+  button: ?boolean,
   clearError: Reward => void,
   claimReward: Reward => void,
 };
 
 const RewardLink = (props: Props) => {
-  const { reward, claimReward, clearError, errorMessage, label, isPending } = props;
+  const { reward, claimReward, clearError, errorMessage, label, isPending, button } = props;
 
   return !reward ? null : (
     <div className="reward-link">
       <Button
-        button="link"
+        button={button ? 'primary' : 'link'}
         disabled={isPending}
         label={isPending ? __('Claiming...') : label || `${__('Get')} ${reward.reward_amount} LBC`}
         onClick={() => {

src/renderer/component/rewardTile/view.jsx

@@ -36,7 +36,7 @@ const RewardTile = (props: Props) => {
               <Icon icon={icons.CHECK} /> {__('Reward claimed.')}
             </span>
           ) : (
-            <RewardLink reward_type={reward.reward_type} />
+            <RewardLink button reward_type={reward.reward_type} />
           ))}
       </div>
     </section>

src/renderer/component/sideBar/view.jsx

@@ -2,7 +2,6 @@
 import * as React from 'react';
 import Button from 'component/button';
 import classnames from 'classnames';
-import { CSSTransitionGroup } from 'react-transition-group';
 import * as icons from 'constants/icons';
 import * as NOTIFICATION_TYPES from 'constants/notification_types';
 
@@ -20,11 +19,13 @@ type Props = {
   forward: any => void,
   isBackDisabled: boolean,
   isForwardDisabled: boolean,
-  isHome: boolean,
   navLinks: {
     primary: Array<SideBarLink>,
     secondary: Array<SideBarLink>,
   },
+  notifications: {
+    type: string,
+  },
 };
 
 const SideBar = (props: Props) => {
@@ -100,33 +101,30 @@ const SideBar = (props: Props) => {
             >
               <Button navigate={path} label={label} icon={icon} />
 
+              {
+                // The sublinks should be animated on open close
+                // Removing it because the current implementation with CSSTransitionGroup
+                // was really slow and looked pretty bad. Possible fix is upgrading to v2
+                // Not sure if that has better performance
+              }
               {!!subLinks.length &&
                 active && (
-                  <CSSTransitionGroup
-                    transitionAppear
-                    transitionLeave
-                    transitionAppearTimeout={300}
-                    transitionEnterTimeout={300}
-                    transitionLeaveTimeout={300}
-                    transitionName="nav__sub"
-                  >
-                    <ul key="0" className="nav__sub-links">
-                      {subLinks.map(({ label: subLabel, path: subPath, active: subLinkActive }) => (
-                        <li
-                          key={subPath}
-                          className={classnames('nav__link nav__link--sub', {
-                            'nav__link--active': subLinkActive,
-                          })}
-                        >
-                          {subPath ? (
-                            <Button navigate={subPath} label={subLabel} />
-                          ) : (
-                            <span>{subLabel}</span>
-                          )}
-                        </li>
-                      ))}
-                    </ul>
-                  </CSSTransitionGroup>
+                  <ul key="0" className="nav__sub-links">
+                    {subLinks.map(({ label: subLabel, path: subPath, active: subLinkActive }) => (
+                      <li
+                        key={subPath}
+                        className={classnames('nav__link nav__link--sub', {
+                          'nav__link--active': subLinkActive,
+                        })}
+                      >
+                        {subPath ? (
+                          <Button navigate={subPath} label={subLabel} />
+                        ) : (
+                          <span>{subLabel}</span>
+                        )}
+                      </li>
+                    ))}
+                  </ul>
                 )}
             </li>
           ))}

src/renderer/component/splash/index.js

@@ -1,10 +1,11 @@
 import { connect } from 'react-redux';
-import { selectCurrentModal, selectDaemonVersionMatched } from 'redux/selectors/app';
+import { selectDaemonVersionMatched } from 'redux/selectors/app';
+import { selectNotification } from 'lbry-redux';
 import { doCheckDaemonVersion } from 'redux/actions/app';
 import SplashScreen from './view';
 
 const select = state => ({
-  modal: selectCurrentModal(state),
+  notification: selectNotification(state),
   daemonVersionMatched: selectDaemonVersionMatched(state),
 });
 

src/renderer/component/splash/view.jsx

@@ -8,7 +8,9 @@ import * as modals from 'constants/modal_types';
 
 type Props = {
   checkDaemonVersion: () => Promise<any>,
-  modal: string,
+  notification: ?{
+    id: string,
+  },
 };
 
 type State = {
@@ -100,9 +102,11 @@ export class SplashScreen extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { modal } = this.props;
+    const { notification } = this.props;
     const { message, details, isLagging, isRunning } = this.state;
 
+    const notificationId = notification && notification.id;
+
     return (
       <React.Fragment>
         <LoadScreen message={message} details={details} isWarning={isLagging} />
@@ -111,9 +115,9 @@ export class SplashScreen extends React.PureComponent<Props, State> {
             in the modals won't work. */}
         {isRunning && (
           <React.Fragment>
-            {modal === modals.INCOMPATIBLE_DAEMON && <ModalIncompatibleDaemon />}
-            {modal === modals.UPGRADE && <ModalUpgrade />}
-            {modal === modals.DOWNLOADING && <ModalDownloading />}
+            {notificationId === modals.INCOMPATIBLE_DAEMON && <ModalIncompatibleDaemon />}
+            {notificationId === modals.UPGRADE && <ModalUpgrade />}
+            {notificationId === modals.DOWNLOADING && <ModalDownloading />}
           </React.Fragment>
         )}
       </React.Fragment>

src/renderer/component/transactionList/internal/transaction-list-item.jsx

@@ -7,6 +7,7 @@ import Button from 'component/button';
 import { buildURI } from 'lbry-redux';
 import * as txnTypes from 'constants/transaction_types';
 import type { Transaction } from '../view';
+import * as ICONS from 'constants/icons';
 
 type Props = {
   transaction: Transaction,
@@ -32,9 +33,9 @@ class TransactionListItem extends React.PureComponent<Props> {
 
   getLink(type: string) {
     if (type === txnTypes.TIP) {
-      return <Button button="link" onClick={this.abandonClaim} label={__('Unlock Tip')} />;
+      return <Button icon={ICONS.UNLOCK} onClick={this.abandonClaim} title={__('Unlock Tip')} />;
     }
-    return <Button button="link" onClick={this.abandonClaim} label={__('Abandon Claim')} />;
+    return <Button icon={ICONS.TRASH} onClick={this.abandonClaim} title={__('Abandon Claim')} />;
   }
 
   capitalize(string: string) {

src/renderer/component/transactionList/view.jsx

@@ -100,8 +100,9 @@ class TransactionList extends React.PureComponent<Props, State> {
               postfix={
                 <Button
                   button="link"
+                  icon={icons.HELP}
                   href="https://lbry.io/faq/transaction-types"
-                  label={__('Help')}
+                  title={__('Help')}
                 />
               }
             >

src/renderer/component/userVerify/index.js

@@ -8,7 +8,6 @@ import {
   selectIdentityVerifyErrorMessage,
 } from 'redux/selectors/user';
 import UserVerify from './view';
-import { selectCurrentModal } from 'redux/selectors/app';
 import { doNotify } from 'lbry-redux';
 import { PHONE_COLLECTION } from 'constants/modal_types';
 
@@ -19,7 +18,6 @@ const select = (state, props) => {
     isPending: selectIdentityVerifyIsPending(state),
     errorMessage: selectIdentityVerifyErrorMessage(state),
     reward: selectReward(state, { reward_type: rewards.TYPE_NEW_USER }),
-    modal: selectCurrentModal(state),
   };
 };
 

src/renderer/constants/icons.js

@@ -23,3 +23,4 @@ export const HOME = 'Home';
 export const PHONE = 'Phone';
 export const CHECK = 'CheckCircle';
 export const HEART = 'Heart';
+export const UNLOCK = 'Unlock';

src/renderer/modal/modal.jsx

@@ -129,7 +129,7 @@ export class ExpandableModal extends React.PureComponent<ModalProps, State> {
             onClick={this.props.onConfirmed}
           />
           <Button
-            button="alt"
+            button="link"
             label={!this.state.expanded ? this.props.expandButtonLabel : this.props.hideButtonLabel}
             className="modal__button"
             onClick={() => {

src/renderer/modal/modalRouter/index.js

@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
 import * as settings from 'constants/settings';
-import { selectCurrentModal, selectModalProps, selectModalsAllowed } from 'redux/selectors/app';
 import {
   doNotify,
   selectCostForCurrentPageUri,
@@ -17,8 +16,6 @@ import ModalRouter from './view';
 const select = state => ({
   balance: selectBalance(state),
   showPageCost: selectCostForCurrentPageUri(state),
-  modal: selectCurrentModal(state),
-  modalProps: selectModalProps(state),
   page: selectCurrentPage(state),
   isVerificationCandidate: selectUserIsVerificationCandidate(state),
   isCreditIntroAcknowledged: makeSelectClientSetting(settings.CREDIT_REQUIRED_ACKNOWLEDGED)(state),
@@ -27,7 +24,6 @@ const select = state => ({
   ),
   isWelcomeAcknowledged: makeSelectClientSetting(settings.NEW_USER_ACKNOWLEDGED)(state),
   user: selectUser(state),
-  modalsAllowed: selectModalsAllowed(state),
   notification: selectNotification(state),
   notificationProps: selectNotificationProps(state),
 });

src/renderer/modal/modalRouter/view.jsx

@@ -107,6 +107,11 @@ class ModalRouter extends React.PureComponent {
     if (!notification) {
       return null;
     }
+
+    if (notification.error) {
+      return <ModalError {...notification} {...notificationProps} />;
+    }
+
     switch (notification.id) {
       case modals.UPGRADE:
         return <ModalUpgrade {...notificationProps} />;

src/renderer/page/channel/view.jsx

@@ -67,7 +67,7 @@ class ChannelPage extends React.PureComponent<Props> {
     } else {
       contentList =
         claimsInChannel && claimsInChannel.length ? (
-          <FileList hideFilter fileInfos={claimsInChannel} />
+          <FileList sortByHeight hideFilter fileInfos={claimsInChannel} />
         ) : (
           <span className="empty">{__('No content found.')}</span>
         );

src/renderer/page/fileListPublished/index.js

@@ -1,13 +1,13 @@
 import { connect } from 'react-redux';
 import { selectMyClaimsWithoutChannels } from 'lbry-redux';
-import { selectPendingPublishesLessEdits } from 'redux/selectors/publish';
+import { selectPendingPublishes } from 'redux/selectors/publish';
 import { doNavigate } from 'redux/actions/navigation';
 import { doCheckPendingPublishes } from 'redux/actions/publish';
 import FileListPublished from './view';
 
 const select = state => ({
   claims: selectMyClaimsWithoutChannels(state),
-  pendingPublishes: selectPendingPublishesLessEdits(state),
+  pendingPublishes: selectPendingPublishes(state),
 });
 
 const perform = dispatch => ({

src/renderer/redux/actions/app.js

@@ -3,7 +3,14 @@ import isDev from 'electron-is-dev';
 import path from 'path';
 import * as MODALS from 'constants/modal_types';
 import { ipcRenderer, remote } from 'electron';
-import { ACTIONS, Lbry, doBalanceSubscribe, doFetchFileInfosAndPublishedClaims } from 'lbry-redux';
+import {
+  ACTIONS,
+  Lbry,
+  doBalanceSubscribe,
+  doFetchFileInfosAndPublishedClaims,
+  doNotify,
+  selectNotification,
+} from 'lbry-redux';
 import Native from 'native';
 import { doFetchRewardedContent } from 'redux/actions/content';
 import { doFetchDaemonSettings } from 'redux/actions/settings';
@@ -12,7 +19,6 @@ import { doAuthenticate } from 'redux/actions/user';
 import { doPause } from 'redux/actions/media';
 import { doCheckSubscriptions } from 'redux/actions/subscriptions';
 import {
-  selectCurrentModal,
   selectIsUpgradeSkipped,
   selectUpdateUrl,
   selectUpgradeDownloadItem,
@@ -83,12 +89,11 @@ export function doDownloadUpgrade() {
     dispatch({
       type: ACTIONS.UPGRADE_DOWNLOAD_STARTED,
     });
-    dispatch({
-      type: ACTIONS.CREATE_NOTIFICATION,
-      data: {
-        modal: MODALS.DOWNLOADING,
-      },
-    });
+    dispatch(
+      doNotify({
+        id: MODALS.DOWNLOADING,
+      })
+    );
   };
 }
 
@@ -110,17 +115,19 @@ export function doDownloadUpgradeRequested() {
       // electron-updater behavior
       if (autoUpdateDeclined) {
         // The user declined an update before, so show the "confirm" dialog
-        dispatch({
-          type: ACTIONS.CREATE_NOTIFICATION,
-          data: { modal: MODALS.AUTO_UPDATE_CONFIRM },
-        });
+        dispatch(
+          doNotify({
+            id: MODALS.AUTO_UPDATE_CONFIRM,
+          })
+        );
       } else {
         // The user was never shown the original update dialog (e.g. because they were
         // watching a video). So show the inital "update downloaded" dialog.
-        dispatch({
-          type: ACTIONS.CREATE_NOTIFICATION,
-          data: { modal: MODALS.AUTO_UPDATE_DOWNLOADED },
-        });
+        dispatch(
+          doNotify({
+            id: MODALS.AUTO_UPDATE_DOWNLOADED,
+          })
+        );
       }
     } else {
       // Old behavior for Linux
@@ -135,10 +142,11 @@ export function doAutoUpdate() {
       type: ACTIONS.AUTO_UPDATE_DOWNLOADED,
     });
 
-    dispatch({
-      type: ACTIONS.CREATE_NOTIFICATION,
-      data: { modal: MODALS.AUTO_UPDATE_DOWNLOADED },
-    });
+    dispatch(
+      doNotify({
+        id: MODALS.AUTO_UPDATE_DOWNLOADED,
+      })
+    );
   };
 }
 
@@ -203,15 +211,14 @@ export function doCheckUpgradeAvailable() {
 
       if (
         upgradeAvailable &&
-        !selectCurrentModal(state) &&
+        !selectNotification(state) &&
         (!selectIsUpgradeSkipped(state) || remoteVersion !== selectRemoteVersion(state))
       ) {
-        dispatch({
-          type: ACTIONS.CREATE_NOTIFICATION,
-          data: {
-            modal: MODALS.UPGRADE,
-          },
-        });
+        dispatch(
+          doNotify({
+            id: MODALS.UPGRADE,
+          })
+        );
       }
     };
 
@@ -256,13 +263,12 @@ export function doCheckDaemonVersion() {
 
 export function doAlertError(errorList) {
   return dispatch => {
-    dispatch({
-      type: ACTIONS.CREATE_NOTIFICATION,
-      data: {
-        modal: MODALS.ERROR,
-        modalProps: { error: errorList },
-      },
-    });
+    dispatch(
+      doNotify({
+        id: MODALS.ERROR,
+        error: errorList,
+      })
+    );
   };
 }
 
@@ -328,7 +334,9 @@ export function doChangeVolume(volume) {
 export function doConditionalAuthNavigate(newSession) {
   return (dispatch, getState) => {
     const state = getState();
-    if (newSession || selectCurrentModal(state) !== 'email_collection') {
+    const notification = selectNotification(state);
+
+    if (newSession || (notification && notification.id !== 'email_collection')) {
       dispatch(doAuthNavigate());
     }
   };

src/renderer/redux/actions/publish.js

@@ -150,7 +150,7 @@ export const doPublish = (params: PublishParams) => (dispatch: Dispatch, getStat
 
   const failure = error => {
     dispatch({ type: ACTIONS.PUBLISH_FAIL });
-    dispatch(doNotify({ id: MODALS.ERROR }, { error: error.message }));
+    dispatch(doNotify({ id: MODALS.ERROR, error: error.message }));
   };
 
   return Lbry.publish(publishPayload).then(success, failure);

src/renderer/redux/reducers/publish.js

@@ -136,8 +136,12 @@ export default handleActions(
     [ACTIONS.PUBLISH_SUCCESS]: (state: PublishState, action): PublishState => {
       const { pendingPublish } = action.data;
 
+      // If it's an edit, don't create a pending publish
+      // It will take some more work to know when an edit is confirmed
       const newPendingPublishes = state.pendingPublishes.slice();
-      newPendingPublishes.push(pendingPublish);
+      if (!pendingPublish.isEdit) {
+        newPendingPublishes.push(pendingPublish);
+      }
 
       return {
         ...state,

src/renderer/redux/selectors/app.js

@@ -41,8 +41,6 @@ export const selectUpgradeFilename = createSelector(
   }
 );
 
-export const selectCurrentModal = createSelector(selectState, state => state.modal);
-
 export const selectDownloadProgress = createSelector(selectState, state => state.downloadProgress);
 
 export const selectDownloadComplete = createSelector(
@@ -66,10 +64,6 @@ export const selectAutoUpdateDeclined = createSelector(
   state => state.autoUpdateDeclined
 );
 
-export const selectModalsAllowed = createSelector(selectState, state => state.modalsAllowed);
-
-export const selectModalProps = createSelector(selectState, state => state.modalProps);
-
 export const selectDaemonVersionMatched = createSelector(
   selectState,
   state => state.daemonVersionMatched

src/renderer/redux/selectors/publish.js

@@ -8,11 +8,6 @@ export const selectPendingPublishes = createSelector(
   state => state.pendingPublishes.map(pendingClaim => ({ ...pendingClaim, pending: true })) || []
 );
 
-export const selectPendingPublishesLessEdits = createSelector(
-  selectPendingPublishes,
-  pendingPublishes => pendingPublishes.filter(pendingPublish => !pendingPublish.isEdit)
-);
-
 export const selectPublishFormValues = createSelector(selectState, state => {
   const { pendingPublish, ...formValues } = state;
   return formValues;
@@ -27,6 +22,6 @@ export const selectPendingPublish = uri =>
     }
 
     return pendingPublishes.filter(
-      publish => publish.name === claimName || publish.name === contentName
+      publish => (publish.name === claimName || publish.name === contentName) && !publish.isEdit
     )[0];
   });

src/renderer/scss/_gui.scss

@@ -160,6 +160,7 @@ p {
     'nav header'
     'nav content';
   background-color: var(--color-bg);
+  height: 100vh;
 
   @media only screen and (min-width: $medium-breakpoint) {
     grid-template-columns: var(--side-nav-width-m) auto;
@@ -246,7 +247,7 @@ p {
 
 /* Custom text selection */
 *::selection {
-  background: var(--text-selection-bg);
+  background: var(--color-primary-light);
   color: var(--text-selection-color);
 }
 

src/renderer/scss/_vars.scss

@@ -34,6 +34,7 @@ $large-breakpoint: 1760px;
   --color-green: #399483;
   --color-green-light: #effbe4;
   --color-green-blue: #2ec1a8;
+  --color-purple: #8165b0;
 
   /* Colors */
   --color-divider: #e3e3e3;
@@ -57,7 +58,7 @@ $large-breakpoint: 1760px;
   --text-help-color: var(--color-help);
   --text-max-width: 660px;
   --text-link-padding: 4px;
-  --text-selection-bg: rgba(saturate(lighten(#155b4a, 20%), 20%), 1); // temp color
+  --text-selection-bg: var(--color-purple);
   --text-selection-color: #fff;
 
   /* Form */
@@ -111,7 +112,7 @@ $large-breakpoint: 1760px;
   --header-bg: var(--color-white);
   --header-color: var(--color-text);
   --header-active-color: rgba(0, 0, 0, 0.85);
-  --header-height: $spacing-width * 3;
+  --header-height: 75px;
   --header-button-bg: transparent;
   --header-button-hover-bg: rgba(100, 100, 100, 0.15);
   --header-primary-color: var(--color-primary);
@@ -139,7 +140,6 @@ $large-breakpoint: 1760px;
   --card-bg: var(--color-white);
   --card-text-color: var(--color-grey-dark);
   --card-radius: 2px;
-  --card-margin: $spacing-vertical * 2/3;
   --card-wallet-color: var(--text-color-inverse);
   --success-msg-color: var(--color-green);
   --success-msg-border: var(--color-green-blue);

src/renderer/scss/component/_button.scss

@@ -169,15 +169,11 @@ button:disabled {
 
 .btn.btn--header-balance {
   font-family: 'metropolis-medium';
-  font-size: 13px;
+  font-size: 14px;
   color: var(--header-primary-color);
 
-  @media only screen and (min-width: $medium-breakpoint) {
-    font-size: 18px;
-  }
-
   @media only screen and (min-width: $large-breakpoint) {
-    font-size: 21px;
+    font-size: 18px;
   }
 
   .btn__label--balance {

src/renderer/scss/component/_card.scss

@@ -177,7 +177,7 @@
 }
 
 .card__content {
-  margin-top: var(--card-margin);
+  margin-top: $spacing-vertical * 2/3;
 }
 
 .card__subtext-title {
@@ -198,7 +198,7 @@
 }
 
 .card__actions {
-  margin-top: var(--card-margin);
+  margin-top: $spacing-vertical * 2/3;
   display: flex;
 
   &:not(.card__actions--vertical) .btn:nth-child(n + 2) {

src/renderer/scss/component/_modal.scss

@@ -86,7 +86,12 @@
 }
 
 .modal__button {
-  margin: 0px 6px;
+  margin: 0px $spacing-vertical * 1/3;
+
+  &.btn--link {
+    // So the text isn't bigger than the text inside the button
+    font-size: 0.8em;
+  }
 }
 
 .error-modal-overlay {
@@ -119,7 +124,7 @@
   list-style: none;
   max-height: 400px;
   max-width: var(--modal-width);
-  overflow-y: hidden;
+  overflow-y: scroll;
 }
 
 .error-modal__content p {

src/renderer/scss/component/_table.scss

@@ -82,10 +82,10 @@ table.table--help {
 
 table.table--transactions {
   td:nth-of-type(1) {
-    width: 17.5%;
+    width: 25%;
   }
   td:nth-of-type(2) {
-    width: 27.5%;
+    width: 20%;
   }
   td:nth-of-type(3) {
     width: 22.5%;

static/themes/dark.css

@@ -48,7 +48,7 @@
   --header-active-color: rgba(0, 0, 0, 0.85);
   --header-button-bg: transparent;
   --header-button-hover-bg: rgba(100, 100, 100, 0.15);
-  --header-primary-color: #8165B0;
+  --header-primary-color: var(--color-purple);
 
   /* Header */
   --header-color: #CCC;