moved useEffect to router

ui/component/router/index.js

@@ -2,10 +2,31 @@ 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 => ({
-  currentScroll: selectScrollStartingPosition(state),
-  isAuthenticated: selectUserVerifiedEmail(state),
-});
+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),
+  };
+};
 
 export default connect(select)(Router);

ui/component/router/view.jsx

@@ -30,6 +30,8 @@ import SignInVerifyPage from 'page/signInVerify';
 import ChannelsPage from 'page/channels';
 import EmbedWrapperPage from 'page/embedWrapper';
 import TopPage from 'page/top';
+import { parseURI } from 'lbry-redux';
+import { SITE_TITLE } from 'config';
 
 // Tell the browser we are handling scroll restoration
 if ('scrollRestoration' in history) {
@@ -62,6 +64,19 @@ type Props = {
   currentScroll: number,
   isAuthenticated: boolean,
   location: { pathname: string, search: string },
+  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) {
@@ -69,7 +84,30 @@ function AppRouter(props: Props) {
     currentScroll,
     location: { pathname },
     isAuthenticated,
+    history,
+    uri,
+    title,
   } = props;
+  const { channelName, streamName } = parseURI(uri);
+  const { entries } = history;
+  const entryIndex = history.index;
+
+  useEffect(() => {
+    if (typeof title !== 'undefined' && title !== '') {
+      document.title = title;
+    } else if (typeof streamName !== 'undefined' && streamName !== 'undefined' && streamName !== '') {
+      document.title = streamName;
+    } else if (typeof channelName !== 'undefined' && channelName !== '') {
+      document.title = channelName;
+    } else {
+      document.title = IS_WEB ? SITE_TITLE : 'LBRY';
+    }
+
+    entries[entryIndex].title = document.title;
+    return () => {
+      document.title = IS_WEB ? SITE_TITLE : 'LBRY';
+    };
+  }, [channelName, entries, entryIndex, streamName, title]);
 
   useEffect(() => {
     window.scrollTo(0, currentScroll);

ui/page/show/view.jsx

@@ -1,13 +1,11 @@
 // @flow
 import React, { useEffect } from 'react';
 import { Redirect } from 'react-router-dom';
-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';
 import AbandonedChannelPreview from 'component/abandonedChannelPreview';
 import { formatLbryUrlForWeb } from 'util/url';
@@ -46,14 +44,10 @@ function ShowPage(props: Props) {
     claim,
     blackListedOutpoints,
     location,
-    title,
     claimIsMine,
     isSubscribed,
     history,
   } = props;
-  const { channelName, streamName } = parseURI(uri);
-  const { entries } = history;
-  const entryIndex = history.index;
   const signingChannel = claim && claim.signing_channel;
   const canonicalUrl = claim && claim.canonical_url;
   const claimExists = claim !== null && claim !== undefined;
@@ -72,24 +66,7 @@ function ShowPage(props: Props) {
     if ((resolveUri && !isResolvingUri && uri && haventFetchedYet) || (claimExists && !canonicalUrl)) {
       resolveUri(uri);
     }
-  }, [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';
-    }
-
-    entries[entryIndex].title = document.title;
-    return () => {
-      document.title = IS_WEB ? SITE_TITLE : 'LBRY';
-    };
-  }, [channelName, entries, entryIndex, streamName, title]);
+  }, [resolveUri, isResolvingUri, canonicalUrl, uri, claimExists, haventFetchedYet, history]);
 
   // Don't navigate directly to repost urls
   // Always redirect to the actual content