working with electron

src/ui/component/errorBoundary/view.jsx

@@ -45,7 +45,7 @@ export default class ErrorBoundary extends React.Component<Props, State> {
                     button="link"
                     className="load-screen__button"
                     label={__('refreshing the app')}
-                    onClick={() => window.location.reload()}
+                    onClick={() => (window.location.href = '/')}
                   />{' '}
                   {__('to fix it')}.
                 </p>

src/ui/component/header/view.jsx

@@ -53,7 +53,7 @@ const Header = (props: Props) => {
         <Button
           className="header__navigation-item header__navigation-item--back"
           description={__('Navigate back')}
-          disabled={isBackDisabled}
+          onClick={() => window.history.back()}
           icon={ICONS.ARROW_LEFT}
           iconSize={15}
         />
@@ -61,7 +61,7 @@ const Header = (props: Props) => {
         <Button
           className="header__navigation-item header__navigation-item--forward"
           description={__('Navigate forward')}
-          disabled={isForwardDisabled}
+          onClick={() => window.history.forward()}
           icon={ICONS.ARROW_RIGHT}
           iconSize={15}
         />

src/ui/component/transactionList/view.jsx

@@ -105,12 +105,10 @@ class TransactionList extends React.PureComponent<Props> {
             </div>
           )}
         </header>
-        {!transactionList.length && (
-          <p className="card__content">{emptyMessage || __('No transactions to list.')}</p>
-        )}
+        {!transactionList.length && <p>{emptyMessage || __('No transactions to list.')}</p>}
 
         {!!transactionList.length && (
-          <div className="card__content">
+          <React.Fragment>
             <table className="table table--transactions">
               <thead>
                 <tr>
@@ -133,7 +131,7 @@ class TransactionList extends React.PureComponent<Props> {
                 ))}
               </tbody>
             </table>
-          </div>
+          </React.Fragment>
         )}
       </React.Fragment>
     );

src/ui/component/transactionListRecent/view.jsx

@@ -53,6 +53,7 @@ class TransactionListRecent extends React.PureComponent<Props> {
                 transactions={transactions}
                 emptyMessage={__("Looks like you don't have any recent transactions.")}
               />
+            </div>
             <div className="card__actions">
               <Button
                 button="primary"
@@ -61,7 +62,6 @@ class TransactionListRecent extends React.PureComponent<Props> {
                 icon={icons.HISTORY}
               />
             </div>
-            </div>
           </Fragment>
         )}
       </section>

src/ui/component/userHistory/index.js

@@ -4,10 +4,17 @@ import { selectCurrentParams, makeSelectCurrentParam } from 'lbry-redux';
 import { doClearContentHistoryUri } from 'redux/actions/content';
 import UserHistory from './view';
 
-const select = state => ({
+const select = (state, props) => {
+  const { search } = props.location;
+  const urlParams = new URLSearchParams(search);
+  const page = Number(urlParams.get('page')) || 0;
+
+  return {
+    page,
     pageCount: selectHistoryPageCount(state),
-  // history: makeSelectHistoryForPage(paramPage)(state),
-});
+    history: makeSelectHistoryForPage(page)(state),
+  };
+};
 
 const perform = dispatch => ({
   clearHistoryUri: uri => dispatch(doClearContentHistoryUri(uri)),

src/ui/component/userHistory/view.jsx

@@ -4,6 +4,7 @@ import Button from 'component/button';
 import { Form, FormField } from 'component/common/form';
 import ReactPaginate from 'react-paginate';
 import UserHistoryItem from 'component/userHistoryItem';
+import { navigate } from '@reach/router';
 
 type HistoryItem = {
   uri: string,
@@ -51,9 +52,8 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
   }
 
   changePage(pageNumber: number) {
-    const { params } = this.props;
-    const newParams = { ...params, page: pageNumber };
-    // this.props.navigate('/user_history', newParams);
+    console.log('new', pageNumber);
+    navigate(`/$/user_history?page=${pageNumber}`);
   }
 
   paginate(e: SyntheticKeyboardEvent<*>) {
@@ -94,6 +94,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
 
   render() {
     const { history = [], page, pageCount } = this.props;
+    console.log('this.props', this.props);
     const { itemsSelected } = this.state;
     const allSelected = Object.keys(itemsSelected).length === history.length;
     const selectHandler = allSelected ? this.unselectAll : this.selectAll;
@@ -147,6 +148,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
                   onPageChange={e => this.changePage(e.selected)}
                   forcePage={page}
                   initialPage={page}
+                  disableInitialCallback
                   containerClassName="pagination"
                 />
               </fieldset-section>

src/ui/component/walletBalance/view.jsx

@@ -12,7 +12,7 @@ const WalletBalance = (props: Props) => {
   return (
     <section
       className="card card--section card--wallet-balance"
-      style={{ backgroundImage: `url(${BalanceBackground})` }}
+      style={{ backgroundImage: `url(/${BalanceBackground})` }}
     >
       <header className="card__header">
         <h2 className="card__title">{__('Balance')}</h2>

src/ui/index.jsx

@@ -236,7 +236,7 @@ const init = () => {
     window.sessionStorage.setItem('loaded', 'y'); // once we've made it here once per session, we don't need to show splash again
     // @endif
 
-    // app.store.dispatch(doDaemonReady());
+    app.store.dispatch(doDaemonReady());
     ReactDOM.render(
       <Provider store={store}>
         <ErrorBoundary>

src/ui/modal/modalPhoneCollection/index.js

@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import { doHideModal } from 'redux/actions/app';
 import { selectPhoneToVerify, selectUser } from 'lbryinc';
+import { navigate } from '@reach/router';
 import ModalPhoneCollection from './view';
 
 const select = state => ({
@@ -11,6 +12,7 @@ const select = state => ({
 const perform = dispatch => () => ({
   closeModal: () => {
     dispatch(doHideModal());
+    navigate('/$/rewards');
   },
 });
 

src/ui/page/auth/index.js

@@ -1,4 +1,3 @@
-import { selectPathAfterAuth } from 'lbry-redux';
 import { connect } from 'react-redux';
 import {
   selectAuthenticationIsPending,
@@ -16,7 +15,6 @@ const select = state => ({
     selectUserIsPending(state) ||
     selectIdentityVerifyIsPending(state),
   email: selectEmailToVerify(state),
-  pathAfterAuth: selectPathAfterAuth(state),
   user: selectUser(state),
   isVerificationCandidate: selectUserIsVerificationCandidate(state),
 });

src/ui/page/auth/view.jsx

@@ -1,4 +1,5 @@
 // @flow
+import type { UrlLocation } from 'types/location';
 import React from 'react';
 import BusyIndicator from 'component/common/busy-indicator';
 import Button from 'component/button';
@@ -12,6 +13,7 @@ type Props = {
   isPending: boolean,
   email: string,
   pathAfterAuth: string,
+  location: UrlLocation,
   user: ?{
     has_verified_email: boolean,
     is_reward_approved: boolean,
@@ -29,14 +31,18 @@ class AuthPage extends React.PureComponent<Props> {
   }
 
   navigateIfAuthenticated = (props: Props) => {
-    const { isPending, user } = props;
+    const { isPending, user, location } = props;
     if (
       !isPending &&
       user &&
       user.has_verified_email &&
       (user.is_reward_approved || user.is_identity_verified)
     ) {
-      navigate('/');
+      const { search } = location;
+      const urlParams = new URLSearchParams(search);
+      const redirectTo = urlParams.get('redirect');
+      const path = redirectTo ? `/$/${redirectTo}` : '/';
+      navigate(path);
     }
   };
 

src/ui/page/discover/index.js

@@ -14,7 +14,7 @@ const select = state => ({
 });
 
 const perform = dispatch => ({
-  fetchFeaturedUris: () => dispatch(doFetchFeaturedUris(true)),
+  fetchFeaturedUris: () => dispatch(doFetchFeaturedUris()),
   fetchRewardedContent: () => dispatch(doFetchRewardedContent()),
   fetchRewards: () => dispatch(doRewardList()),
 });

src/ui/page/rewards/index.js

@@ -6,7 +6,7 @@ import {
   selectUser,
   doRewardList,
 } from 'lbryinc';
-import { doAuthNavigate } from 'redux/actions/navigation';
+import { navigate } from '@reach/router';
 import { selectDaemonSettings } from 'redux/selectors/settings';
 import RewardsPage from './view';
 
@@ -21,7 +21,7 @@ const select = state => ({
 const perform = dispatch => ({
   fetchRewards: () => dispatch(doRewardList()),
   doAuth: () => {
-    dispatch(doAuthNavigate('/rewards'));
+    navigate('/$/auth?redirect=rewards');
   },
 });
 

src/ui/page/show/index.js

@@ -12,7 +12,6 @@ import ShowPage from './view';
 
 const select = (state, props) => {
   // claimName and claimId come from the url `lbry.tv/{claimName}/{claimId}"
-  console.log('props', props);
   const uri = buildURI({ contentName: props.claimName, claimId: props.claimId });
   return {
     claim: makeSelectClaimForUri(uri)(state),

src/ui/page/userHistory/view.jsx

@@ -9,7 +9,7 @@ class UserHistoryPage extends React.PureComponent<Props> {
   render() {
     return (
       <Page>
-        <UserHistory />
+        <UserHistory {...this.props} />
       </Page>
     );
   }

src/ui/redux/actions/app.js

@@ -317,6 +317,7 @@ export function doDaemonReady() {
     dispatch({ type: ACTIONS.DAEMON_READY });
     dispatch(doFetchDaemonSettings());
     dispatch(doBalanceSubscribe());
+
     // @if TARGET='app'
     dispatch(doFetchFileInfosAndPublishedClaims());
     if (!selectIsUpgradeSkipped(state)) {

src/ui/scss/component/_header.scss

@@ -27,12 +27,12 @@
     // at smaller screen widths
 
     @media (min-width: 601px) {
-      // @if TARGET='app'
+      /* @if TARGET='app' */
       width: 250px;
-      // @endif
-      // @if TARGET='web'
-      width: 170px;
-      // @endif
+      /* @endif */
+      /* @if TARGET='web' */
+      // width: 170px;
+      /* @endif */
     }
 
     @media (max-width: 600px) {
@@ -43,9 +43,9 @@
 
 .header__navigation-item {
   height: var(--header-height);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   &:not(:disabled):hover {
     background-color: $lbry-gray-1;
@@ -68,73 +68,36 @@
   }
 }
 
-.header__navigation-item--lbry {
-  flex: 1;
-  font-weight: 800;
-  font-size: 1.2rem;
-  padding-left: var(--spacing-vertical-large);
-}
-
-.header__navigation-item--back {
-  html[data-mode='dark'] & {
-    svg {
-      stroke: $lbry-white;
-    }
-  }
-}
-
-.header__navigation-item--forward {
-  html[data-mode='dark'] & {
-    svg {
-      stroke: $lbry-white;
-    }
-  }
-}
-
-.header__navigation-item--home {
-  html[data-mode='dark'] & {
-    svg {
-      stroke: $lbry-white;
-    }
-  }
-}
-
-.header__navigation-item--menu {
-  html[data-mode='dark'] & {
-    svg {
-      stroke: $lbry-white;
-    }
-  }
-
-  // This menu button does not need to be seen
-  // at larger screen widths
-
-  @media (min-width: 601px) {
-    display: none;
-  }
-}
 .header__navigation-item--back,
 .header__navigation-item--forward,
 .header__navigation-item--home,
 .header__navigation-item--menu {
   width: var(--header-height);
+  svg {
+    &:only-child {
+      // Header icons are a little different because they are larger
+      top: 0.25rem;
     }
 
-// Currently not used
-// .header__navigation-item--publish,
-// .header__navigation-item--wallet {
-//   // Publish and Wallet links are collapsed
-//   // into a menu at smaller screen widths
-//
-//   @media (max-width: 600px) {
-//     display: none;
-//   }
-// }
+    html[data-mode='dark'] & {
+      stroke: $lbry-white;
+    }
+  }
+}
+
+.header__navigation-item--lbry {
+  flex: 1;
+  font-weight: 800;
+  font-size: 1.2rem;
+  padding-left: var(--spacing-vertical-large);
+
+  .button__content {
+    text-align: left;
+  }
+}
 
 // Publish button
 .header__navigation-item--right-action {
-  display: flex;
-  justify-content: center;
   position: relative;
 
   .button__content {
@@ -170,3 +133,23 @@
     border-color: $lbry-gray-5;
   }
 }
+
+.header__navigation-item--menu {
+  @media (min-width: 601px) {
+    display: none;
+  }
+}
+
+// Hide links that will live in the menu bar
+@media (max-width: 601px) {
+  .header__navigation-item--back,
+  .header__navigation-item--forward,
+  .header__navigation-item--home,
+  .header__navigation-item--right-action {
+    display: none;
+  }
+
+  .header__navigation:first-child {
+    display: none;
+  }
+}

src/ui/scss/component/_media.scss

@@ -140,7 +140,7 @@
 }
 
 .media__uri {
-  font-size: 1.5rem;
+  font-size: 1.1rem;
   padding-bottom: 5px;
   opacity: 0.6;
 }

src/ui/scss/init/_gui.scss

@@ -127,7 +127,7 @@ code {
 }
 
 .help {
-  font-size: 0.9em;
+  font-size: 1rem;
   background-color: rgba($lbry-blue-1, 0.1);
   color: $lbry-gray-5;
   display: block;

webpack.electron.config.js

@@ -24,7 +24,7 @@ let mainConfig = {
   module: {
     rules: [
       {
-        test: /\.jsx?$/,
+        test: /\.(jsx?$|s?css$)/,
         use: [
           {
             loader: 'preprocess-loader',

webpack.web.config.js

@@ -20,7 +20,7 @@ const webConfig = {
   module: {
     rules: [
       {
-        test: /\.jsx?$/,
+        test: /\.(jsx?$|s?css$)/,
         use: [
           {
             loader: 'preprocess-loader',