Allow renaming collection in view playlist page.

2022-03-28 15:18:03 -03:00 · 2022-03-28 15:18:03 -03:00 · 5a24d6c570
commit 5a24d6c570
parent 1369fbb064
9 changed files with 77 additions and 102 deletions
--- a/ui/component/collectionActions/view.jsx
+++ b/ui/component/collectionActions/view.jsx
@ -29,6 +29,7 @@ type Props = {
  doToggleShuffleList: (string, boolean) => void,
  playNextUri: string,
  firstItem: string,
+  onRenameCollection: () => void,
 };

 function CollectionActions(props: Props) {
@ -48,6 +49,7 @@ function CollectionActions(props: Props) {
    firstItem,
    showEdit,
    setShowEdit,
+    onRenameCollection,
  } = props;
  const [doShuffle, setDoShuffle] = React.useState(false);
  const { push } = useHistory();
@ -120,6 +122,17 @@ function CollectionActions(props: Props) {
      {!isBuiltin &&
        (isMyCollection ? (
          <>
+            {!uri && (
+              <Button
+                title={__('Rename')}
+                label={__('Rename')}
+                className={classnames('button--file-action')}
+                onClick={onRenameCollection}
+                icon={ICONS.EDIT}
+                iconSize={18}
+                disabled={claimIsPending}
+              />
+            )}
            <Button
              title={uri ? __('Update') : __('Publish')}
              label={uri ? __('Update') : __('Publish')}
--- a/ui/component/collectionMenuList/view.jsx
+++ b/ui/component/collectionMenuList/view.jsx
@ -16,19 +16,10 @@ type Props = {
  collectionId: string,
  playNextUri: string,
  doToggleShuffleList: (string) => void,
-  onRenameList: () => void,
 };

 function CollectionMenuList(props: Props) {
-  const {
-    inline = false,
-    collectionId,
-    collectionName,
-    doOpenModal,
-    playNextUri,
-    doToggleShuffleList,
-    onRenameList,
-  } = props;
+  const { inline = false, collectionId, collectionName, doOpenModal, playNextUri, doToggleShuffleList } = props;
  const [doShuffle, setDoShuffle] = React.useState(false);

  const { push } = useHistory();
@ -95,12 +86,6 @@ function CollectionMenuList(props: Props) {
                {__('Delete List')}
              </div>
            </MenuItem>
-            <MenuItem onSelect={onRenameList}>
-              <div className="menu__link">
-                <Icon aria-hidden icon={ICONS.EDIT} />
-                {__('Rename List')}
-              </div>
-            </MenuItem>
          </>
        )}
      </MenuList>
--- a/ui/component/collectionPreviewTile/index.js
+++ b/ui/component/collectionPreviewTile/index.js
@ -16,7 +16,7 @@ import {
  makeSelectCountForCollectionId,
  makeSelectIsResolvingCollectionForId,
 } from 'redux/selectors/collections';
-import { doFetchItemsInCollection, doCollectionDelete, doCollectionRename } from 'redux/actions/collections';
+import { doFetchItemsInCollection, doCollectionDelete } from 'redux/actions/collections';
 import { doResolveUri } from 'redux/actions/claims';
 import { selectMutedChannels } from 'redux/selectors/blocked';
 import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
@ -54,7 +54,6 @@ const perform = (dispatch) => ({
  resolveUri: (uri) => dispatch(doResolveUri(uri)),
  resolveCollectionItems: (options) => doFetchItemsInCollection(options),
  deleteCollection: (id) => dispatch(doCollectionDelete(id)),
-  renameCollection: (id, name) => dispatch(doCollectionRename(id, name)),
 });

 export default connect(select, perform)(CollectionPreviewTile);
--- a/ui/component/collectionPreviewTile/view.jsx
+++ b/ui/component/collectionPreviewTile/view.jsx
@ -1,10 +1,7 @@
 // @flow
 import React from 'react';
 import classnames from 'classnames';
-import * as ICONS from 'constants/icons';
 import { NavLink, useHistory } from 'react-router-dom';
-import { FormField } from 'component/common/form';
-import Button from 'component/button';
 import ClaimPreviewTile from 'component/claimPreviewTile';
 import TruncatedText from 'component/common/truncated-text';
 import CollectionCount from './collectionCount';
@ -43,7 +40,6 @@ type Props = {
  deleteCollection: (string) => void,
  resolveCollectionItems: (any) => void,
  isResolvingCollectionClaims: boolean,
-  renameCollection: (string, string) => void,
 };

 function CollectionPreviewTile(props: Props) {
@ -57,15 +53,10 @@ function CollectionPreviewTile(props: Props) {
    collectionItemUrls,
    claim,
    resolveCollectionItems,
-    renameCollection,
  } = props;

  const { push } = useHistory();
  const hasClaim = Boolean(claim);
-
-  const [isRenamingList, setIsRenamingList] = React.useState(false);
-  const [newName, setNewName] = React.useState(collectionName);
-
  React.useEffect(() => {
    if (collectionId && hasClaim && resolveCollectionItems) {
      resolveCollectionItems({ collectionId, page_size: 5 });
@ -78,16 +69,11 @@ function CollectionPreviewTile(props: Props) {
    formatLbryUrlForWeb(collectionItemUrls[0] || '/') + (collectionId ? generateListSearchUrlParams(collectionId) : '');

  function handleClick(e) {
-    if (navigateUrl && !isRenamingList) {
+    if (navigateUrl) {
      push(navigateUrl);
    }
  }

-  function handleRenameCollection() {
-    renameCollection(collectionId, newName);
-    setIsRenamingList(false);
-  }
-
  const navLinkProps = {
    to: navigateUrl,
    onClick: (e) => e.stopPropagation(),
@ -158,44 +144,12 @@ function CollectionPreviewTile(props: Props) {
          </React.Fragment>
        </FileThumbnail>
      </NavLink>
-      {isRenamingList && (
-        <FormField
-          autoFocus
-          type="text"
-          name="rename_collection"
-          value={newName}
-          label={__('New Name')}
-          inputButton={
-            <>
-              <Button
-                button={'alt'}
-                icon={ICONS.COMPLETE}
-                className={'button-toggle'}
-                disabled={collectionName === newName}
-                onClick={handleRenameCollection}
-              />
-              <Button
-                button={'alt'}
-                className={'button-toggle'}
-                icon={ICONS.REMOVE}
-                onClick={() => {
-                  setIsRenamingList(false);
-                  setNewName(collectionName);
-                }}
-              />
-            </>
-          }
-          onChange={(e) => setNewName(e.target.value)}
-        />
-      )}
-      {!isRenamingList && (
      <NavLink {...navLinkProps}>
        <h2 className="claim-tile__title">
          <TruncatedText text={collectionName} lines={1} />
-            <CollectionMenuList collectionId={collectionId} onRenameList={() => setIsRenamingList(true)} />
+          <CollectionMenuList collectionId={collectionId} />
        </h2>
      </NavLink>
-      )}
      <div>
        <div className="claim-tile__info">
          <React.Fragment>
--- a/ui/constants/action_types.js
+++ b/ui/constants/action_types.js
@ -195,7 +195,6 @@ export const COLLECTION_ITEMS_RESOLVE_STARTED = 'COLLECTION_ITEMS_RESOLVE_STARTE
 export const COLLECTION_ITEMS_RESOLVE_COMPLETED = 'COLLECTION_ITEMS_RESOLVE_COMPLETED';
 export const COLLECTION_ITEMS_RESOLVE_FAILED = 'COLLECTION_ITEMS_RESOLVE_FAILED';
 export const COLLECTION_NEW = 'COLLECTION_NEW';
-export const COLLECTION_RENAME = 'COLLECTION_RENAME';
 export const COLLECTION_DELETE = 'COLLECTION_DELETE';
 export const COLLECTION_PENDING = 'COLLECTION_PENDING';
 export const COLLECTION_EDIT = 'COLLECTION_EDIT';
--- a/ui/page/collection/index.js
+++ b/ui/page/collection/index.js
@ -54,6 +54,7 @@ const perform = (dispatch) => ({
  fetchCollectionItems: (claimId, cb) => dispatch(doFetchItemsInCollection({ collectionId: claimId }, cb)), // if this collection is not resolved, resolve it
  deleteCollection: (id, colKey) => dispatch(doCollectionDelete(id, colKey)),
  editCollection: (id, params) => dispatch(doCollectionEdit(id, params)),
+  renameCollection: (id, name) => dispatch(doCollectionEdit(id, { name })),
 });

 export default withRouter(connect(select, perform)(CollectionPage));
--- a/ui/page/collection/view.jsx
+++ b/ui/page/collection/view.jsx
@ -19,6 +19,7 @@ import * as COLLECTIONS_CONSTS from 'constants/collections';
 import Icon from 'component/common/icon';
 import * as ICONS from 'constants/icons';
 import Spinner from 'component/spinner';
+import { FormField } from 'component/common/form';

 export const PAGE_VIEW_QUERY = 'view';
 export const EDIT_PAGE = 'edit';
@ -42,6 +43,7 @@ type Props = {
  fetchCollectionItems: (string, () => void) => void,
  resolveUris: (string) => void,
  user: ?User,
+  renameCollection: (string, string) => void,
 };

 export default function CollectionPage(props: Props) {
@ -58,6 +60,7 @@ export default function CollectionPage(props: Props) {
    editCollection,
    fetchCollectionItems,
    deleteCollection,
+    renameCollection,
  } = props;

  const {
@ -70,6 +73,11 @@ export default function CollectionPage(props: Props) {
  const [showEdit, setShowEdit] = React.useState(false);
  const [unavailableUris, setUnavailable] = React.useState([]);

+  const collectionName = claim ? claim.value.title || claim.name : collection && collection.name;
+
+  const [isRenamingList, setIsRenamingList] = React.useState(false);
+  const [newName, setNewName] = React.useState(collectionName);
+
  const { name, totalItems } = collection || {};
  const isBuiltin = COLLECTIONS_CONSTS.BUILTIN_LISTS.includes(collectionId);

@ -84,6 +92,11 @@ export default function CollectionPage(props: Props) {
    editCollection(collectionId, { order: { from, to } });
  }

+  function handleRenameCollection() {
+    renameCollection(collectionId, newName);
+    setIsRenamingList(false);
+  }
+
  const urlParams = new URLSearchParams(search);
  const editing = urlParams.get(PAGE_VIEW_QUERY) === EDIT_PAGE;

@ -142,6 +155,36 @@ export default function CollectionPage(props: Props) {
  const info = (
    <Card
      title={
+        isRenamingList ? (
+          <FormField
+            autoFocus
+            type="text"
+            name="rename_collection"
+            value={newName}
+            label={__('New Collection Name')}
+            inputButton={
+              <>
+                <Button
+                  button={'alt'}
+                  icon={ICONS.COMPLETE}
+                  className={'button-toggle'}
+                  disabled={!(newName || '').trim() || collectionName === newName}
+                  onClick={handleRenameCollection}
+                />
+                <Button
+                  button={'alt'}
+                  className={'button-toggle'}
+                  icon={ICONS.REMOVE}
+                  onClick={() => {
+                    setIsRenamingList(false);
+                    setNewName(collectionName);
+                  }}
+                />
+              </>
+            }
+            onChange={(e) => setNewName(e.target.value)}
+          />
+        ) : (
          <span>
            <Icon
              icon={
@ -151,8 +194,9 @@ export default function CollectionPage(props: Props) {
              }
              className="icon--margin-right"
            />
-          {claim ? claim.value.title || claim.name : collection && collection.name}
+            {collectionName}
          </span>
+        )
      }
      titleActions={unavailableUris.length > 0 ? removeUnavailable : titleActions}
      subtitle={subTitle}
@ -166,6 +210,7 @@ export default function CollectionPage(props: Props) {
          collectionUrls={collectionUrls}
          setShowEdit={setShowEdit}
          showEdit={showEdit}
+          onRenameCollection={() => setIsRenamingList(true)}
        />
      }
      actions={
--- a/ui/redux/actions/collections.js
+++ b/ui/redux/actions/collections.js
@ -40,14 +40,6 @@ export const doLocalCollectionCreate = (
  });
 };

-export const doCollectionRename = (id: string, newName: string) => ({
-  type: ACTIONS.COLLECTION_RENAME,
-  data: {
-    id,
-    newName,
-  },
-});
-
 export const doCollectionDelete = (id: string, colKey: ?string = undefined) => (
  dispatch: Dispatch,
  getState: GetState
--- a/ui/redux/reducers/collections.js
+++ b/ui/redux/reducers/collections.js
@ -58,19 +58,6 @@ const collectionsReducer = handleActions(
      };
    },

-    [ACTIONS.COLLECTION_RENAME]: (state, action) => {
-      const { unpublished } = state;
-      const { id, newName } = action.data;
-      const newUnpublished = { ...unpublished };
-      if (newUnpublished[id]) {
-        newUnpublished[id].name = newName;
-      }
-      return {
-        ...state,
-        unpublished: newUnpublished,
-      };
-    },
-
    [ACTIONS.COLLECTION_DELETE]: (state, action) => {
      const { lastUsedCollection } = state;
      const { id, collectionKey } = action.data;