new homepage searches, always show sidebar

2020-04-02 13:02:12 -04:00 · 2020-04-02 13:02:12 -04:00 · 2b042d1d97
parent 3e8745be90
commit 2b042d1d97
5 changed files with 140 additions and 143 deletions
--- a/ui/component/page/index.js
+++ b/ui/component/page/index.js
@ -1,9 +1,4 @@
 import { connect } from 'react-redux';
-import { selectUserVerifiedEmail } from 'lbryinc';
 import Page from './view';

-const select = state => ({
-  authenticated: Boolean(selectUserVerifiedEmail(state)),
-});
-
-export default connect(select)(Page);
+export default connect()(Page);
--- a/ui/component/page/view.jsx
+++ b/ui/component/page/view.jsx
@ -12,20 +12,18 @@ type Props = {
  autoUpdateDownloaded: boolean,
  isUpgradeAvailable: boolean,
  authPage: boolean,
-  authenticated: boolean,
  noHeader: boolean,
 };

 function Page(props: Props) {
-  const { children, className, authPage = false, authenticated, noHeader } = props;
-  const obscureSideNavigation = IS_WEB ? !authenticated : false;
+  const { children, className, authPage = false, noHeader } = props;

  return (
    <Fragment>
      {!noHeader && <Header authHeader={authPage} />}
      <div className={classnames('main-wrapper__inner')}>
        <main className={classnames(MAIN_CLASS, className, { 'main--full-width': authPage })}>{children}</main>
-        {!authPage && !noHeader && <SideNavigation obscureSideNavigation={obscureSideNavigation} />}
+        {!authPage && !noHeader && <SideNavigation />}
      </div>
    </Fragment>
  );
--- a/ui/component/sideNavigation/view.jsx
+++ b/ui/component/sideNavigation/view.jsx
@ -19,7 +19,6 @@ type Props = {
  subscriptions: Array<Subscription>,
  followedTags: Array<Tag>,
  email: ?string,
-  obscureSideNavigation: boolean,
  uploadCount: number,
  sticky: boolean,
  expanded: boolean,
@ -31,7 +30,6 @@ function SideNavigation(props: Props) {
  const {
    subscriptions,
    followedTags,
-    obscureSideNavigation,
    uploadCount,
    doSignOut,
    email,
@ -46,6 +44,9 @@ function SideNavigation(props: Props) {
    getSideInformation(pathname)
  );

+  const isPersonalized = !IS_WEB || isAuthenticated;
+  const requireAuthOnPersonalizedActions = IS_WEB;
+
  function getSideInformation(path) {
    switch (path) {
      case `/$/${PAGES.CHANNELS_FOLLOWING}`:
@ -64,12 +65,13 @@ function SideNavigation(props: Props) {
    setSideInformation(sideInfo);
  }, [pathname, setSideInformation]);

-  function buildLink(path, label, icon, onClick) {
+  function buildLink(path, label, icon, onClick, requiresAuth = false) {
    return {
      navigate: path ? `$/${path}` : '/',
      label,
      icon,
      onClick,
+      requiresAuth,
    };
  }

@ -82,12 +84,6 @@ function SideNavigation(props: Props) {
      <div>{children}</div>
    );

-  // @if TARGET='web'
-  if (obscureSideNavigation) {
-    return <Ads />;
-  }
-  // @endif
-
  return (
    <Wrapper>
      <nav className="navigation">
@ -100,10 +96,16 @@ function SideNavigation(props: Props) {
              ...buildLink(null, __('Home'), ICONS.HOME),
            },
            {
-              ...buildLink(PAGES.CHANNELS_FOLLOWING, __('Following'), ICONS.SUBSCRIBE),
+              ...buildLink(
+                PAGES.CHANNELS_FOLLOWING,
+                __('Following'),
+                ICONS.SUBSCRIBE,
+                null,
+                requireAuthOnPersonalizedActions
+              ),
            },
            {
-              ...buildLink(PAGES.TAGS_FOLLOWING, __('Your Tags'), ICONS.TAG),
+              ...buildLink(PAGES.TAGS_FOLLOWING, __('Your Tags'), ICONS.TAG, null, requireAuthOnPersonalizedActions),
            },
            {
              ...buildLink(PAGES.DISCOVER, __('All Content'), ICONS.DISCOVER),
@ -123,6 +125,7 @@ function SideNavigation(props: Props) {
          )}

          {expanded &&
+            isPersonalized &&
            [
              {
                ...buildLink(PAGES.CHANNELS, __('Channels'), ICONS.CHANNEL),
@ -176,7 +179,7 @@ function SideNavigation(props: Props) {
            )}
        </ul>

-        {sideInformation === SHOW_TAGS && (
+        {sideInformation === SHOW_TAGS && !expanded && isPersonalized && (
          <ul className="navigation__secondary navigation-links--small tags--vertical">
            {followedTags.map(({ name }, key) => (
              <li className="navigation-link__wrapper" key={name}>
@ -186,7 +189,7 @@ function SideNavigation(props: Props) {
          </ul>
        )}

-        {sideInformation === SHOW_CHANNELS && (
+        {sideInformation === SHOW_CHANNELS && !expanded && isPersonalized && (
          <ul className="navigation__secondary navigation-links--small">
            {subscriptions.map(({ uri, channelName }, index) => (
              <li key={uri} className="navigation-link__wrapper">
@ -201,6 +204,9 @@ function SideNavigation(props: Props) {
          </ul>
        )}
      </nav>
+      // @if TARGET='web'
+      {!isAuthenticated && !expanded && <Ads />}
+      // @endif
    </Wrapper>
  );
 }
--- a/ui/page/home/view.jsx
+++ b/ui/page/home/view.jsx
@ -27,71 +27,62 @@ type RowDataItem = {

 function HomePage(props: Props) {
  const { followedTags, subscribedChannels, authenticated } = props;
-  const showAuthenticatedRows = authenticated || !IS_WEB;
+  const showPersonalizedChannels = (authenticated || !IS_WEB) && subscribedChannels && subscribedChannels.length > 0;
+  const showPersonalizedTags = (authenticated || !IS_WEB) && followedTags && followedTags.length > 0;
+  const showIndividualTags = showPersonalizedTags && followedTags.length < 5;
  let rowData: Array<RowDataItem> = [];

-  if (!showAuthenticatedRows) {
+  // if you are following channels, always show that first
+  if (showPersonalizedChannels) {
+    let releaseTime = `>${Math.floor(
+      moment()
+        .subtract(1, 'year')
+        .startOf('week')
+        .unix()
+    )}`;
+
+    // Warning - hack below
+    // If users are following more than 20 channels or tags, limit results to stuff less than 6 months old
+    // This helps with timeout issues for users that are following a ton of stuff
+    // https://github.com/lbryio/lbry-sdk/issues/2420
+    if (subscribedChannels.length > 20) {
+      releaseTime = `>${Math.floor(
+        moment()
+          .subtract(6, 'months')
+          .startOf('week')
+          .unix()
+      )}`;
+    }
+
    rowData.push({
-      title: 'Top Channels On LBRY',
-      link: `/$/${PAGES.DISCOVER}?claim_type=channel&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${
-        CS.FRESH_ALL
-      }`,
+      title: 'Recent From Following',
+      link: `/$/${PAGES.CHANNELS_FOLLOWING}`,
      options: {
-        orderBy: ['effective_amount'],
-        claimType: ['channel'],
+        orderBy: ['release_time'],
+        releaseTime: releaseTime,
+        pageSize: subscribedChannels.length > 3 ? 8 : 4,
+        channelIds: subscribedChannels.map(subscription => {
+          const { channelClaimId } = parseURI(subscription.uri);
+          return channelClaimId;
+        }),
      },
    });
  }

-  if (showAuthenticatedRows) {
-    if (subscribedChannels && subscribedChannels.length > 0) {
-      let releaseTime = `>${Math.floor(
-        moment()
-          .subtract(1, 'year')
-          .startOf('week')
-          .unix()
-      )}`;
-
-      // Warning - hack below
-      // If users are following more than 20 channels or tags, limit results to stuff less than 6 months old
-      // This helps with timeout issues for users that are following a ton of stuff
-      // https://github.com/lbryio/lbry-sdk/issues/2420
-      if (subscribedChannels.length > 20) {
-        releaseTime = `>${Math.floor(
-          moment()
-            .subtract(6, 'months')
-            .startOf('week')
-            .unix()
-        )}`;
-      }
+  if (showPersonalizedTags && !showIndividualTags) {
+    rowData.push({
+      title: 'Trending For Your Tags',
+      link: `/$/${PAGES.TAGS_FOLLOWING}`,
+      options: {
+        tags: followedTags.map(tag => tag.name),
+        claimType: ['stream'],
+      },
+    });
+  }

+  if (showPersonalizedTags && showIndividualTags) {
+    followedTags.forEach((tag: Tag) => {
      rowData.push({
-        title: 'Recent From Following',
-        link: `/$/${PAGES.CHANNELS_FOLLOWING}`,
-        options: {
-          orderBy: ['release_time'],
-          releaseTime: releaseTime,
-          pageSize: subscribedChannels.length > 3 ? 8 : 4,
-          channelIds: subscribedChannels.map(subscription => {
-            const { channelClaimId } = parseURI(subscription.uri);
-            return channelClaimId;
-          }),
-        },
-      });
-    }
-
-    if (followedTags.length === 0) {
-      rowData.push({
-        title: 'Trending On LBRY',
-        link: `/$/${PAGES.DISCOVER}`,
-        options: {
-          pageSize: subscribedChannels.length > 0 ? 4 : 8,
-        },
-      });
-    }
-
-    if (followedTags.length > 0 && followedTags.length < 5) {
-      const followedRows = followedTags.map((tag: Tag) => ({
        title: `Trending for #${toCapitalCase(tag.name)}`,
        link: `/$/${PAGES.DISCOVER}?t=${tag.name}`,
        options: {
@ -99,87 +90,90 @@ function HomePage(props: Props) {
          tags: [tag.name],
          claimType: ['stream'],
        },
-      }));
-      rowData.push(...followedRows);
-    }
-
-    if (followedTags.length > 4) {
-      rowData.push({
-        title: 'Trending For Your Tags',
-        link: `/$/${PAGES.TAGS_FOLLOWING}`,
-        options: {
-          tags: followedTags.map(tag => tag.name),
-          claimType: ['stream'],
-        },
      });
-    }
+    });
+  }
+
+  rowData.push({
+    title: 'Top Content from Today',
+    link: `/$/${PAGES.DISCOVER}?${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_DAY}`,
+    options: {
+      pageSize: showPersonalizedChannels || showPersonalizedTags ? 4 : 8,
+      orderBy: ['effective_amount'],
+      claimType: ['stream'],
+      releaseTime: `>${Math.floor(
+        moment()
+          .subtract(1, 'day')
+          .startOf('day')
+          .unix()
+      )}`,
+    },
+  });
+
+  rowData.push({
+    title: 'Trending On LBRY',
+    link: `/$/${PAGES.DISCOVER}`,
+    options: {
+      pageSize: showPersonalizedChannels || showPersonalizedTags ? 4 : 8,
+    },
+  });
+
+  if (!showPersonalizedChannels) {
+    rowData.push({
+      title: 'Top Channels On LBRY',
+      link: `/$/${PAGES.DISCOVER}?claim_type=channel&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_ALL}`,
+      options: {
+        orderBy: ['effective_amount'],
+        claimType: ['channel'],
+      },
+    });
  }

-  // Everyone
  rowData.push(
    {
-      title: 'Top Content Last Week',
-      link: `/$/${PAGES.DISCOVER}?${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_WEEK}`,
+      title: 'Trending Classics',
+      link: `/$/${PAGES.DISCOVER}?${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TRENDING}&${CS.FRESH_KEY}=${CS.FRESH_WEEK}`,
      options: {
-        orderBy: ['effective_amount'],
        pageSize: 4,
        claimType: ['stream'],
-        releaseTime: `>${Math.floor(
+        releaseTime: `<${Math.floor(
          moment()
-            .subtract(1, 'week')
-            .startOf('day')
-            .unix()
-        )}`,
-      },
-    },
-    {
-      title: '#HomePageCageMatch',
-      link: `/$/${PAGES.DISCOVER}?t=homepagecagematch&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${
-        CS.FRESH_ALL
-      }`,
-      help: (
-        <div className="claim-grid__help">
-          <Icon
-            icon={ICONS.HELP}
-            tooltip
-            customTooltipText={__(
-              'This is an experiment, and may be removed in the future. Publish something with the #homepagecagematch tag to battle for the top spot on the home page!'
-            )}
-          />
-        </div>
-      ),
-      options: {
-        tags: ['homepagecagematch'],
-        orderBy: ['effective_amount'],
-        timestamp: `>${Math.floor(
-          moment()
-            .subtract(1, 'week')
+            .subtract(6, 'month')
            .startOf('day')
            .unix()
        )}`,
      },
    }
+    /* the cagematch will return in some form! - Jeremy
+  {
+    title: '#HomePageCageMatch',
+    link: `/$/${PAGES.DISCOVER}?t=homepagecagematch&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${
+      CS.FRESH_ALL
+    }`,
+    help: (
+      <div className="claim-grid__help">
+        <Icon
+          icon={ICONS.HELP}
+          tooltip
+          customTooltipText={__(
+            'This is an experiment, and may be removed in the future. Publish something with the #homepagecagematch tag to battle for the top spot on the home page!'
+          )}
+        />
+      </div>
+    ),
+    options: {
+      tags: ['homepagecagematch'],
+      orderBy: ['effective_amount'],
+      timestamp: `>${Math.floor(
+        moment()
+          .subtract(1, 'week')
+          .startOf('day')
+          .unix()
+      )}`,
+    },
+    } */
  );

-  if (!showAuthenticatedRows) {
-    rowData.push({
-      title: '#lbry',
-      link: `/$/${PAGES.DISCOVER}?t=lbry&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_ALL}`,
-      options: {
-        tags: ['lbry'],
-        orderBy: ['effective_amount'],
-        pageSize: 4,
-      },
-    });
-  }
-
-  if (showAuthenticatedRows) {
-    rowData.push({
-      title: 'Trending On LBRY',
-      link: `/$/${PAGES.DISCOVER}`,
-    });
-  }
-
  rowData.push({
    title: 'Latest From @lbrycast',
    link: `/@lbrycast:4`,
--- a/ui/scss/component/_navigation.scss
+++ b/ui/scss/component/_navigation.scss
@ -9,6 +9,10 @@
  }
 }

+.navigation + .ads-wrapper {
+  margin-top: var(--spacing-large);
+}
+
 .navigation__secondary {
  margin-top: var(--spacing-large);
 }