Add requested review changes

ui/component/claimList/view.jsx

@@ -60,7 +60,7 @@ type Props = {
   droppableProvided?: any,
   unavailableUris?: Array<string>,
   showMemberBadge?: boolean,
-  inHistory?: boolean,
+  inWatchHistory?: boolean,
 };
 
 export default function ClaimList(props: Props) {
@@ -101,7 +101,7 @@ export default function ClaimList(props: Props) {
     droppableProvided,
     unavailableUris,
     showMemberBadge,
-    inHistory,
+    inWatchHistory,
   } = props;
 
   const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
@@ -204,7 +204,7 @@ export default function ClaimList(props: Props) {
       dragHandleProps={draggableProvided && draggableProvided.dragHandleProps}
       unavailableUris={unavailableUris}
       showMemberBadge={showMemberBadge}
-      inHistory={inHistory}
+      inWatchHistory={inWatchHistory}
     />
   );
 

ui/component/claimPreview/view.jsx

@@ -97,7 +97,7 @@ type Props = {
   dragHandleProps?: any,
   unavailableUris?: Array<string>,
   showMemberBadge?: boolean,
-  inHistory?: boolean,
+  inWatchHistory?: boolean,
 };
 
 const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
@@ -163,7 +163,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     dragHandleProps,
     unavailableUris,
     showMemberBadge,
-    inHistory,
+    inWatchHistory,
   } = props;
 
   const isMobile = useIsMobile();
@@ -214,7 +214,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
       ? claim.permanent_url || claim.canonical_url
       : undefined;
   const repostedContentUri = claim && (claim.reposted_claim ? claim.reposted_claim.permanent_url : claim.permanent_url);
-  const [watchHistory, setHistory] = usePersistedState('watch-history', []);
+  const [watchHistory, setWatchHistory] = usePersistedState('watch-history', []);
 
   // Get channel title ( use name as fallback )
   let channelTitle = null;
@@ -285,7 +285,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
 
   function handleOnClick(e) {
     if (onClick) {
-      console.log('click: ', e);
       onClick(e, claim, indexInContainer);
     }
 
@@ -301,7 +300,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     e.stopPropagation();
     if (watchHistory.find((entry) => entry === uri)) {
       watchHistory.splice(watchHistory.indexOf(uri), 1);
-      setHistory(watchHistory);
+      setWatchHistory(watchHistory);
     }
   }
 
@@ -499,7 +498,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
             )}
           </div>
         </div>
-        {inHistory && (
+        {inWatchHistory && (
           <div onClick={(e) => removeFromHistory(e, uri)} className="claim-preview__history-remove">
             <Icon icon={ICONS.REMOVE} />
           </div>

ui/component/common/icon-custom.jsx

@@ -3297,7 +3297,7 @@ export const icons = {
       </g>
     </svg>
   ),
-  [ICONS.WATCHHISTORY]: buildIcon(
+  [ICONS.WATCH_HISTORY]: buildIcon(
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
       <path d="M0.6,11.8c0-6,5-11,11-11 M9.6,7.2v9.5l6.9-4.7L9.6,7.2z M-2.1,9.5l2.9,2.9l3.2-2.7 M11.4,23.2 v-0.9 M5.6,21.5L6,20.6 M2.1,16.4l-0.8,0.4 M17,20.8l0.5,0.8 M20.9,16.7l0.8,0.5 M23.1,11l-0.9,0.1 M21,5.2l-0.7,0.5 M16.2,1.2 L15.8,2" />
     </svg>

ui/component/router/view.jsx

@@ -70,7 +70,7 @@ const LibraryPage = lazyImport(() => import('page/library' /* webpackChunkName:
 const ListBlockedPage = lazyImport(() => import('page/listBlocked' /* webpackChunkName: "listBlocked" */));
 const ListsPage = lazyImport(() => import('page/lists' /* webpackChunkName: "lists" */));
 const PlaylistsPage = lazyImport(() => import('page/playlists' /* webpackChunkName: "lists" */));
-const HistoryPage = lazyImport(() => import('page/history' /* webpackChunkName: "history" */));
+const WatchHistoryPage = lazyImport(() => import('page/watchHistory' /* webpackChunkName: "history" */));
 const LiveStreamSetupPage = lazyImport(() => import('page/livestreamSetup' /* webpackChunkName: "livestreamSetup" */));
 const LivestreamCurrentPage = lazyImport(() =>
   import('page/livestreamCurrent' /* webpackChunkName: "livestreamCurrent" */)
@@ -363,7 +363,7 @@ function AppRouter(props: Props) {
         <PrivateRoute {...props} path={`/$/${PAGES.LIBRARY}`} component={LibraryPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.LISTS}`} component={ListsPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.PLAYLISTS}`} component={PlaylistsPage} />
-        <PrivateRoute {...props} path={`/$/${PAGES.HISTORY}`} component={HistoryPage} />
+        <PrivateRoute {...props} path={`/$/${PAGES.WATCH_HISTORY}`} component={WatchHistoryPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.TAGS_FOLLOWING_MANAGE}`} component={TagsFollowingManagePage} />
         <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`} component={ListBlockedPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_CREATOR}`} component={SettingsCreatorPage} />

ui/component/sideNavigation/view.jsx

@@ -87,10 +87,10 @@ const PLAYLISTS: SideNavLink = {
   hideForUnauth: true,
 };
 
-const HISTORY: SideNavLink = {
+const WATCH_HISTORY: SideNavLink = {
-  title: 'History',
+  title: 'Watch History',
-  link: `/$/${PAGES.HISTORY}`,
+  link: `/$/${PAGES.WATCH_HISTORY}`,
-  icon: ICONS.WATCHHISTORY,
+  icon: ICONS.WATCH_HISTORY,
   hideForUnauth: true,
 };
 
@@ -536,7 +536,7 @@ function SideNavigation(props: Props) {
               {!showMicroMenu && getLink(WATCH_LATER)}
               {!showMicroMenu && getLink(FAVORITES)}
               {getLink(PLAYLISTS)}
-              {getLink(HISTORY)}
+              {!showMicroMenu && getLink(WATCH_HISTORY)}
             </ul>
 
             <ul

ui/component/viewers/videoViewer/view.jsx

@@ -152,19 +152,20 @@ function VideoViewer(props: Props) {
   const isFirstRender = React.useRef(true);
   const playerRef = React.useRef(null);
 
-  const [history, setHistory] = usePersistedState('watch-history', []);
+  const [watchHistory, setWatchHistory] = usePersistedState('watch-history', []);
   React.useEffect(() => {
-    if (!history[0] || !history[0].indexOf(claim.permanent_url) !== -1) {
+    if (!watchHistory[0] || !watchHistory[0].indexOf(claim.permanent_url) !== -1) {
-      if (!history || !history.length) {
+      if (!watchHistory || !watchHistory.length) {
-        setHistory([claim.permanent_url]);
+        setWatchHistory([claim.permanent_url]);
       } else {
-        if (history.find((entry) => entry === claim.permanent_url)) {
+        let newWatchHistory = watchHistory;
-          history.splice(history.indexOf(claim.permanent_url), 1);
+        if (newWatchHistory.find((entry) => entry === claim.permanent_url)) {
-          history.unshift(claim.permanent_url);
+          newWatchHistory.splice(newWatchHistory.indexOf(claim.permanent_url), 1);
+          newWatchHistory.unshift(claim.permanent_url);
         } else {
-          history.unshift(claim.permanent_url);
+          newWatchHistory.unshift(claim.permanent_url);
         }
-        setHistory(history);
+        setWatchHistory(newWatchHistory);
       }
     }
   }, [isPlaying]);

ui/constants/icons.js

@@ -25,7 +25,7 @@ export const FEEDBACK = 'MessageSquare';
 export const SEARCH = 'Search';
 export const CHANNEL = 'AtSign';
 export const REFRESH = 'RefreshCw';
-export const WATCHHISTORY = 'WatchHistory';
+export const WATCH_HISTORY = 'WatchHistory';
 export const HOME = 'Home';
 export const OVERVIEW = 'Activity';
 export const WALLET = 'List';

ui/constants/pages.js

@@ -34,7 +34,7 @@ exports.HELP = 'help';
 exports.LIBRARY = 'library';
 exports.LISTS = 'lists';
 exports.PLAYLISTS = 'playlists';
-exports.HISTORY = 'history';
+exports.WATCH_HISTORY = 'watchhistory';
 exports.INVITE = 'invite';
 exports.DEPRECATED__DOWNLOADED = 'downloaded';
 exports.DEPRECATED__PUBLISH = 'publish';

ui/page/collection/view.jsx

@@ -64,9 +64,6 @@ export default function CollectionPage(props: Props) {
     deleteCollection,
   } = props;
 
-  console.log('collection: ', props.collection);
-  console.log('collectionUrls: ', props.collectionUrls);
-
   const {
     replace,
     location: { search },

ui/page/watchHistory/index.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 
 import { withRouter } from 'react-router-dom';
-import HistoryPage from './view';
+import WatchHistoryPage from './view';
 import {
   selectTitleForUri,
   selectClaimIsMine,
@@ -56,4 +56,4 @@ const perform = (dispatch) => ({
   editCollection: (id, params) => dispatch(doCollectionEdit(id, params)),
 });
 
-export default withRouter(connect(select, perform)(HistoryPage));
+export default withRouter(connect(select, perform)(WatchHistoryPage));

ui/page/watchHistory/view.jsx

@@ -8,11 +8,9 @@ import Icon from 'component/common/icon';
 import * as ICONS from 'constants/icons';
 import { YRBL_SAD_IMG_URL } from 'config';
 import Tooltip from 'component/common/tooltip';
-
 import usePersistedState from 'effects/use-persisted-state';
 
 export const PAGE_VIEW_QUERY = 'view';
-// export const EDIT_PAGE = 'edit';
 
 type Props = {
   collectionId: string,
@@ -21,24 +19,18 @@ type Props = {
   thumbnail: string,
   collectionUrls: Array<string>,
   isResolvingCollection: boolean,
-  // isMyClaim: boolean,
-  // isMyCollection: boolean,
-  // claimIsPending: boolean,
-  // collectionHasEdits: boolean,
-  // deleteCollection: (string, string) => void,
-  // editCollection: (string, CollectionEditParams) => void,
   fetchCollectionItems: (string, () => void) => void,
   resolveUris: (string) => void,
   user: ?User,
 };
 
-export default function HistoryPage(props: Props) {
+export default function WatchHistoryPage(props: Props) {
   const { collectionId } = props;
-  const [history, setHistory] = usePersistedState('watch-history', []);
+  const [watchHistory, setWatchHistory] = usePersistedState('watch-history', []);
   const [unavailableUris] = React.useState([]);
 
   function clearHistory() {
-    setHistory([]);
+    setWatchHistory([]);
   }
 
   return (
@@ -46,7 +38,7 @@ export default function HistoryPage(props: Props) {
       <div className={classnames('section card-stack')}>
         <div className="claim-list__header">
           <h1 className="card__title">
-            <Icon icon={ICONS.WATCHHISTORY} style={{ marginRight: 'var(--spacing-s)' }} />
+            <Icon icon={ICONS.WATCH_HISTORY} style={{ marginRight: 'var(--spacing-s)' }} />
             {__('Watch History')}
             <Tooltip title={__('Currently, your watch history is only saved locally.')}>
               <Button className="icon--help" icon={ICONS.HELP} iconSize={14} />
@@ -54,7 +46,7 @@ export default function HistoryPage(props: Props) {
           </h1>
 
           <div className="claim-list__alt-controls--wrap">
-            {history.length > 0 && (
+            {watchHistory.length > 0 && (
               <Button
                 title={__('Clear History')}
                 button="primary"
@@ -64,10 +56,10 @@ export default function HistoryPage(props: Props) {
             )}
           </div>
         </div>
-        {history.length > 0 && (
+        {watchHistory.length > 0 && (
-          <ClaimList uris={history} collectionId={collectionId} unavailableUris={unavailableUris} inHistory />
+          <ClaimList uris={watchHistory} collectionId={collectionId} unavailableUris={unavailableUris} inWatchHistory />
         )}
-        {history.length === 0 && (
+        {watchHistory.length === 0 && (
           <div style={{ textAlign: 'center' }}>
             <img src={YRBL_SAD_IMG_URL} />
             <h2 className="main--empty empty" style={{ marginTop: '0' }}>