From f1742eca25c8cf726704feef814173287b68cf29 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 3 Feb 2020 12:23:21 -0500
Subject: [PATCH] Revert "Right Click to Navigate History (#3547)"

This reverts commit 6d88d87ff27c8fcf56991bd3f00dd49110175143.
---
 static/app-strings.json                |  7 +-
 ui/component/header/view.jsx           | 28 ++++----
 ui/component/navigationButton/index.js |  3 -
 ui/component/navigationButton/view.jsx | 91 --------------------------
 ui/component/router/index.js           | 29 ++------
 ui/component/router/view.jsx           | 45 -------------
 ui/page/show/view.jsx                  | 21 +++++-
 ui/scss/component/_header.scss         | 26 --------
 ui/scss/component/menu-button.scss     |  2 -
 ui/store.js                            |  4 +-
 10 files changed, 48 insertions(+), 208 deletions(-)
 delete mode 100644 ui/component/navigationButton/index.js
 delete mode 100644 ui/component/navigationButton/view.jsx

diff --git a/static/app-strings.json b/static/app-strings.json
index 87ed5d91e..67e0ef012 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -915,7 +915,12 @@
   "Support %amount% LBC": "Support %amount% LBC",
   "You deposited %amount% LBC as a support!": "You deposited %amount% LBC as a support!",
   "LBRY Link": "LBRY Link",
+  "Publish to %uri%": "Publish to %uri%",
   "Your wallet": "Your wallet",
   "Publish a file, or create a channel": "Publish a file, or create a channel",
-  "Your account": "Your account"
+  "Your account": "Your account",
+  "Channel profile picture": "Channel profile picture",
+  "refreshing the app": "refreshing the app",
+  "Follower": "Follower",
+  "%repost_channel_link% reposted": "%repost_channel_link% reposted"
 }
\ No newline at end of file
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index ecba00685..343167754 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -11,7 +11,6 @@ import WunderBar from 'component/wunderbar';
 import Icon from 'component/common/icon';
 import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import Tooltip from 'component/common/tooltip';
-import NavigationButton from 'component/navigationButton';
 // @if TARGET='app'
 import { IS_MAC } from 'component/app/view';
 // @endif
@@ -19,15 +18,7 @@ import { IS_MAC } from 'component/app/view';
 type Props = {
   balance: string,
   roundedBalance: number,
-  history: {
-    entities: {}[],
-    goBack: () => void,
-    goForward: () => void,
-    index: number,
-    length: number,
-    location: { pathname: string },
-    push: string => void,
-  },
+  history: { push: string => void, goBack: () => void, goForward: () => void, location: { pathname: string } },
   currentTheme: string,
   automaticDarkModeEnabled: boolean,
   setClientSetting: (string, boolean | string) => void,
@@ -114,8 +105,21 @@ const Header = (props: Props) => {
           {/* @if TARGET='app' */}
           {!authHeader && (
             <div className="header__navigation-arrows">
-              <NavigationButton isBackward history={history} />
-              <NavigationButton isBackward={false} history={history} />
+              <Button
+                className="header__navigation-item header__navigation-item--back"
+                description={__('Navigate back')}
+                onClick={() => history.goBack()}
+                icon={ICONS.ARROW_LEFT}
+                iconSize={18}
+              />
+
+              <Button
+                className="header__navigation-item header__navigation-item--forward"
+                description={__('Navigate forward')}
+                onClick={() => history.goForward()}
+                icon={ICONS.ARROW_RIGHT}
+                iconSize={18}
+              />
             </div>
           )}
           {/* @endif */}
diff --git a/ui/component/navigationButton/index.js b/ui/component/navigationButton/index.js
deleted file mode 100644
index 81cb43a8e..000000000
--- a/ui/component/navigationButton/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import NavigationButton from './view';
-
-export default NavigationButton;
diff --git a/ui/component/navigationButton/view.jsx b/ui/component/navigationButton/view.jsx
deleted file mode 100644
index 72c9cb017..000000000
--- a/ui/component/navigationButton/view.jsx
+++ /dev/null
@@ -1,91 +0,0 @@
-// @flow
-import React, { useState, useCallback } from 'react';
-import * as ICONS from 'constants/icons';
-import Button from 'component/button';
-
-// the maximum length of history to show per button
-const MAX_HISTORY_SIZE = 12;
-
-type Props = {
-  isBackward: boolean,
-  history: {
-    entries: Array<{ key: string, title: string, pathname: string }>,
-    go: number => void,
-    goBack: () => void,
-    goForward: () => void,
-    index: number,
-    length: number,
-    location: { pathname: string },
-    push: string => void,
-  },
-};
-
-// determines which slice of entries should make up the back or forward button drop-downs (isBackward vs !isBackward respectively)
-const sliceEntries = (currentIndex, entries, historyLength, isBackward, maxSize) => {
-  let l = isBackward ? 0 : currentIndex + 1;
-  let r = isBackward ? currentIndex : historyLength;
-  const exceedsMax = maxSize < r - l;
-  if (!exceedsMax) {
-    return entries.slice(l, r);
-  } else if (isBackward) {
-    l = r - maxSize;
-  } else {
-    r = l + maxSize;
-  }
-  return entries.slice(l, r);
-};
-
-const NavigationButton = (props: Props) => {
-  const { isBackward, history } = props;
-  const { entries, go } = history;
-  const currentIndex = history.index;
-  const historyLength = history.length;
-  const [showHistory, setShowHistory] = useState(false);
-
-  // creates an <li> intended for the button's <ul>
-  const makeItem = useCallback(
-    (entry: { pathname: string, title: string, key: string }, index: number) => {
-      // difference between the current index and the index of the entry
-      const backwardDif = index - (currentIndex < MAX_HISTORY_SIZE ? currentIndex : MAX_HISTORY_SIZE);
-      const forwardDif = index + 1;
-      return (
-        <li
-          className="header__navigation-button"
-          role="link"
-          key={entry.key}
-          onMouseDown={() => {
-            setShowHistory(false);
-            go(isBackward ? backwardDif : forwardDif);
-          }}
-        >
-          <span>{entry.title}</span>
-          <span className="header__navigation-button-help">{entry.pathname === '/' ? __('Home') : entry.pathname}</span>
-        </li>
-      );
-    },
-    [currentIndex, isBackward, go]
-  );
-  const slicedEntries = sliceEntries(currentIndex, entries, historyLength, isBackward, MAX_HISTORY_SIZE);
-  return (
-    <div>
-      <Button
-        className={`header__navigation-item header__navigation-item--${isBackward ? 'back' : 'forward'}`}
-        description={isBackward ? __('Navigate back') : __('Navigate forward')}
-        onBlur={() => setShowHistory(false)}
-        onClick={() => (isBackward ? history.goBack() : history.goForward())}
-        onContextMenu={e => {
-          setShowHistory(!showHistory);
-          // the following three lines prevent the regular context menu (right click menu) from appearing
-          e.preventDefault();
-          e.stopPropagation();
-          return false;
-        }}
-        icon={isBackward ? ICONS.ARROW_LEFT : ICONS.ARROW_RIGHT}
-        iconSize={18}
-        disabled={slicedEntries.length === 0}
-      />
-      {showHistory && <ul className={'header__navigation-dropdown'}>{slicedEntries.map(makeItem)}</ul>}
-    </div>
-  );
-};
-export default NavigationButton;
diff --git a/ui/component/router/index.js b/ui/component/router/index.js
index d9107de3d..1d021ff84 100644
--- a/ui/component/router/index.js
+++ b/ui/component/router/index.js
@@ -2,31 +2,10 @@ import { connect } from 'react-redux';
 import { selectUserVerifiedEmail } from 'lbryinc';
 import { selectScrollStartingPosition } from 'redux/selectors/app';
 import Router from './view';
-import { normalizeURI, makeSelectTitleForUri } from 'lbry-redux';
 
-const select = state => {
-  const { pathname, hash } = state.router.location;
-  const urlPath = pathname + hash;
-  // Remove the leading "/" added by the browser
-  const path = urlPath.slice(1).replace(/:/g, '#');
-
-  let uri;
-  try {
-    uri = normalizeURI(path);
-  } catch (e) {
-    const match = path.match(/[#/:]/);
-
-    if (!path.startsWith('$/') && match && match.index) {
-      uri = `lbry://${path.slice(0, match.index)}`;
-    }
-  }
-
-  return {
-    uri,
-    title: makeSelectTitleForUri(uri)(state),
-    currentScroll: selectScrollStartingPosition(state),
-    isAuthenticated: selectUserVerifiedEmail(state),
-  };
-};
+const select = state => ({
+  currentScroll: selectScrollStartingPosition(state),
+  isAuthenticated: selectUserVerifiedEmail(state),
+});
 
 export default connect(select)(Router);
diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index fef7d1c17..117722c90 100644
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@@ -29,8 +29,6 @@ import SignInPage from 'page/signIn';
 import SignInVerifyPage from 'page/signInVerify';
 import ChannelsPage from 'page/channels';
 import EmbedWrapperPage from 'page/embedWrapper';
-import { parseURI } from 'lbry-redux';
-import { SITE_TITLE } from 'config';
 
 // Tell the browser we are handling scroll restoration
 if ('scrollRestoration' in history) {
@@ -63,19 +61,6 @@ type Props = {
   currentScroll: number,
   location: { pathname: string, search: string },
   isAuthenticated: boolean,
-  history: {
-    entries: { title: string }[],
-    goBack: () => void,
-    goForward: () => void,
-    index: number,
-    length: number,
-    location: { pathname: string },
-    push: string => void,
-    state: {},
-    replaceState: ({}, string, string) => void,
-  },
-  uri: string,
-  title: string,
 };
 
 function AppRouter(props: Props) {
@@ -83,37 +68,7 @@ function AppRouter(props: Props) {
     currentScroll,
     location: { pathname },
     isAuthenticated,
-    history,
-    uri,
-    title,
   } = props;
-  const { entries } = history;
-  const entryIndex = history.index;
-
-  useEffect(() => {
-    if (uri) {
-      const { channelName, streamName } = parseURI(uri);
-
-      if (typeof title !== 'undefined' && title !== '') {
-        document.title = title;
-      } else if (streamName) {
-        document.title = streamName;
-      } else if (channelName) {
-        document.title = channelName;
-      } else {
-        document.title = IS_WEB ? SITE_TITLE : 'LBRY';
-      }
-    } else {
-      document.title = IS_WEB ? SITE_TITLE : 'LBRY';
-    }
-
-    // @if TARGET='app'
-    entries[entryIndex].title = document.title;
-    // @endif
-    return () => {
-      document.title = IS_WEB ? SITE_TITLE : 'LBRY';
-    };
-  }, [entries, entryIndex, title, uri]);
 
   useEffect(() => {
     window.scrollTo(0, currentScroll);
diff --git a/ui/page/show/view.jsx b/ui/page/show/view.jsx
index f01ff5592..0bbdd1384 100644
--- a/ui/page/show/view.jsx
+++ b/ui/page/show/view.jsx
@@ -1,10 +1,12 @@
 // @flow
 import React, { useEffect } from 'react';
+import { parseURI } from 'lbry-redux';
 import BusyIndicator from 'component/common/busy-indicator';
 import ChannelPage from 'page/channel';
 import FilePage from 'page/file';
 import Page from 'component/page';
 import Button from 'component/button';
+import { SITE_TITLE } from 'config';
 import Card from 'component/common/card';
 
 type Props = {
@@ -22,7 +24,8 @@ type Props = {
 };
 
 function ShowPage(props: Props) {
-  const { isResolvingUri, resolveUri, uri, claim, blackListedOutpoints, location, claimIsMine } = props;
+  const { isResolvingUri, resolveUri, uri, claim, blackListedOutpoints, location, title, claimIsMine } = props;
+  const { channelName, streamName } = parseURI(uri);
   const signingChannel = claim && claim.signing_channel;
   const canonicalUrl = claim && claim.canonical_url;
   const claimExists = claim !== null && claim !== undefined;
@@ -43,6 +46,22 @@ function ShowPage(props: Props) {
     }
   }, [resolveUri, isResolvingUri, canonicalUrl, uri, claimExists, haventFetchedYet]);
 
+  useEffect(() => {
+    if (title) {
+      document.title = title;
+    } else if (streamName) {
+      document.title = streamName;
+    } else if (channelName) {
+      document.title = channelName;
+    } else {
+      document.title = IS_WEB ? SITE_TITLE : 'LBRY';
+    }
+
+    return () => {
+      document.title = IS_WEB ? SITE_TITLE : 'LBRY';
+    };
+  }, [title, channelName, streamName]);
+
   let innerContent = '';
 
   if (!claim || (claim && !claim.name)) {
diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index ecc7e36b4..93822000a 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -147,29 +147,3 @@
 .header__navigation-item--balance {
   margin: 0 var(--spacing-medium);
 }
-
-.header__navigation-dropdown {
-  @extend .menu__list--header;
-  padding: 0;
-  position: absolute;
-  list-style-type: none;
-  background-color: var(--color-header-background);
-}
-
-.header__navigation-button {
-  margin: 0;
-  padding: var(--spacing-miniscule) var(--spacing-medium);
-  display: flex;
-  align-items: center;
-
-  &:hover {
-    cursor: pointer;
-    background-color: var(--color-menu-background--active);
-  }
-}
-
-.header__navigation-button-help {
-  @extend .help;
-  margin-top: 0;
-  margin-left: var(--spacing-small);
-}
diff --git a/ui/scss/component/menu-button.scss b/ui/scss/component/menu-button.scss
index ed03adcc1..c1f3896bb 100644
--- a/ui/scss/component/menu-button.scss
+++ b/ui/scss/component/menu-button.scss
@@ -55,8 +55,6 @@
   margin-left: calc(var(--spacing-medium) * -1);
   box-shadow: var(--card-box-shadow);
   animation: menu-animate-in var(--animation-duration) var(--animation-style);
-  border-bottom-left-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
 }
 
 .menu__link {
diff --git a/ui/store.js b/ui/store.js
index af642c6cc..25967f822 100644
--- a/ui/store.js
+++ b/ui/store.js
@@ -7,7 +7,7 @@ import { createFilter, createBlacklistFilter } from 'redux-persist-transform-fil
 import localForage from 'localforage';
 import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
-import { createMemoryHistory, createBrowserHistory } from 'history';
+import { createHashHistory, createBrowserHistory } from 'history';
 import { routerMiddleware } from 'connected-react-router';
 import createRootReducer from './reducers';
 import { buildSharedStateMiddleware, ACTIONS as LBRY_REDUX_ACTIONS } from 'lbry-redux';
@@ -96,7 +96,7 @@ const persistOptions = {
 
 let history;
 // @if TARGET='app'
-history = createMemoryHistory();
+history = createHashHistory();
 // @endif
 // @if TARGET='web'
 history = createBrowserHistory();