lbry-desktop/ui/component/collectionPreviewTile/view.jsx

// @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';
import CollectionPrivate from './collectionPrivate';
import CollectionMenuList from 'component/collectionMenuList';
import { formatLbryUrlForWeb, generateListSearchUrlParams } from 'util/url';
import FileThumbnail from 'component/fileThumbnail';

type Props = {
  uri: string,
  collectionId: string,
  collectionName: string,
  collectionCount: number,
  editedCollection?: Collection,
  pendingCollection?: Collection,
  claim: ?Claim,
  channelClaim: ?ChannelClaim,
  collectionItemUrls: Array<string>,
  resolveUri: (string) => void,
  isResolvingUri: boolean,
  thumbnail?: string,
  title?: string,
  placeholder: boolean,
  blackListedOutpoints: Array<{
    txid: string,
    nout: number,
  }>,
  filteredOutpoints: Array<{
    txid: string,
    nout: number,
  }>,
  blockedChannelUris: Array<string>,
  isMature?: boolean,
  showMature: boolean,
  collectionId: string,
  deleteCollection: (string) => void,
  resolveCollectionItems: (any) => void,
  isResolvingCollectionClaims: boolean,
  renameCollection: (string, string) => void,
};

function CollectionPreviewTile(props: Props) {
  const {
    uri,
    collectionId,
    collectionName,
    collectionCount,
    isResolvingUri,
    isResolvingCollectionClaims,
    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 });
    }
  }, [collectionId, hasClaim, resolveCollectionItems]);

  // const signingChannel = claim && claim.signing_channel;

  const navigateUrl =
    formatLbryUrlForWeb(collectionItemUrls[0] || '/') + (collectionId ? generateListSearchUrlParams(collectionId) : '');

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

  function handleRenameCollection() {
    renameCollection(collectionId, newName);
    setIsRenamingList(false);
  }

  const navLinkProps = {
    to: navigateUrl,
    onClick: (e) => e.stopPropagation(),
  };

  /* REMOVE IF WORKS
  let shouldHide = false;

  if (isMature && !showMature) {
    // Unfortunately needed until this is resolved
    // https://github.com/lbryio/lbry-sdk/issues/2785
    shouldHide = true;
  }

  // This will be replaced once blocking is done at the wallet server level
  if (claim && !shouldHide && blackListedOutpoints) {
    shouldHide = blackListedOutpoints.some(
      (outpoint) =>
        (signingChannel && outpoint.txid === signingChannel.txid && outpoint.nout === signingChannel.nout) ||
        (outpoint.txid === claim.txid && outpoint.nout === claim.nout)
    );
  }
  // We're checking to see if the stream outpoint
  // or signing channel outpoint is in the filter list
  if (claim && !shouldHide && filteredOutpoints) {
    shouldHide = filteredOutpoints.some(
      (outpoint) =>
        (signingChannel && outpoint.txid === signingChannel.txid && outpoint.nout === signingChannel.nout) ||
        (outpoint.txid === claim.txid && outpoint.nout === claim.nout)
    );
  }

  // block stream claims
  if (claim && !shouldHide && blockedChannelUris.length && signingChannel) {
    shouldHide = blockedChannelUris.some((blockedUri) => blockedUri === signingChannel.permanent_url);
  }
  // block channel claims if we can't control for them in claim search
  // e.g. fetchRecommendedSubscriptions

  if (shouldHide) {
    return null;
  }
   */

  if (isResolvingUri || isResolvingCollectionClaims) {
    return (
      <li className={classnames('claim-preview--tile', {})}>
        <div className="placeholder media__thumb" />
        <div className="placeholder__wrapper">
          <div className="placeholder claim-tile__title" />
          <div className="placeholder claim-tile__info" />
        </div>
      </li>
    );
  }
  if (uri) {
    return <ClaimPreviewTile uri={uri} />;
  }

  return (
    <li role="link" onClick={handleClick} className={'card claim-preview--tile'}>
      <NavLink {...navLinkProps}>
        <FileThumbnail uri={collectionItemUrls && collectionItemUrls.length && collectionItemUrls[0]}>
          <React.Fragment>
            <div className="claim-preview__claim-property-overlay">
              <CollectionCount count={collectionCount} />
            </div>
          </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)} />
          </h2>
        </NavLink>
      )}
      <div>
        <div className="claim-tile__info">
          <React.Fragment>
            <div className="claim-tile__about">
              <CollectionPrivate />
            </div>
          </React.Fragment>
        </div>
      </div>
    </li>
  );
}

export default CollectionPreviewTile;