Use canonical url

lbryio · Sep 28, 2021 · bb3c979 · bb3c979
1 parent 18bcaed
commit bb3c979
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 17 deletions.
diff --git a/ui/component/channelMentionSuggestions/index.js b/ui/component/channelMentionSuggestions/index.js
@@ -15,12 +15,19 @@ const select = (state, props) => {
 
  const getUnresolved = (uris) =>
  uris.map((uri) => !makeSelectClaimForUri(uri)(state) && uri).filter((uri) => uri !== false);
+ const getCanonical = (uris) =>
+ uris
+ .map((uri) => makeSelectClaimForUri(uri)(state) && makeSelectClaimForUri(uri)(state).canonical_url)
+ .filter((uri) => Boolean(uri));
 
  return {
  commentorUris,
  subscriptionUris,
  unresolvedCommentors: getUnresolved(commentorUris),
  unresolvedSubscriptions: getUnresolved(subscriptionUris),
+ canonicalCreator: getCanonical([props.creatorUri]),
+ canonicalCommentors: getCanonical(commentorUris),
+ canonicalSubscriptions: getCanonical(subscriptionUris),
  showMature: selectShowMatureContent(state),
  };
 };

diff --git a/ui/component/channelMentionSuggestions/view.jsx b/ui/component/channelMentionSuggestions/view.jsx
@@ -25,6 +25,9 @@ type Props = {
  unresolvedCommentors: Array<string>,
  subscriptionUris: Array<string>,
  unresolvedSubscriptions: Array<string>,
+ canonicalCreator: Array<string>,
+ canonicalCommentors: Array<string>,
+ canonicalSubscriptions: Array<string>,
  doResolveUris: (Array<string>) => void,
  isInputFocused: boolean,
  customSelectAction?: (string, number) => void,
@@ -34,6 +37,9 @@ export default function ChannelMentionSuggestions(props: Props) {
  const {
  unresolvedCommentors,
  unresolvedSubscriptions,
+ canonicalCreator,
+ canonicalCommentors,
+ canonicalSubscriptions,
  isLivestream,
  creatorUri,
  inputRef,
@@ -49,6 +55,7 @@ export default function ChannelMentionSuggestions(props: Props) {
  const [debouncedTerm, setDebouncedTerm] = React.useState('');
  const mainEl = document.querySelector('.channel-mention__suggestions');
  const [isFocused, setIsFocused] = React.useState(false);
+ const [canonicalResults, setCanonicalResults] = React.useState([]);
 
  const isRefFocused = (ref) => ref && ref.current === document.activeElement;
 
@@ -57,6 +64,12 @@ export default function ChannelMentionSuggestions(props: Props) {
 
  const termToMatch = mentionTerm && mentionTerm.replace('@', '').toLowerCase();
  const allShownUris = [creatorUri, ...subscriptionUris, ...commentorUris];
+ const allShownCanonical = [
+ canonicalCreator[0],
+ ...canonicalSubscriptions,
+ ...canonicalCommentors,
+ ...canonicalResults,
+ ];
  const possibleMatches = allShownUris.filter((uri) => {
  try {
  const { channelName } = parseURI(uri);
@@ -66,8 +79,6 @@ export default function ChannelMentionSuggestions(props: Props) {
  const hasSubscriptionsResolved =
  subscriptionUris &&
  !subscriptionUris.every((uri) => unresolvedSubscriptions && unresolvedSubscriptions.includes(uri));
- const hasCommentorsShown =
- commentorUris.length > 0 && commentorUris.some((uri) => possibleMatches && possibleMatches.includes(uri));
 
  const searchSize = 5;
  const additionalOptions = { isBackgroundSearch: false, [SEARCH_OPTIONS.CLAIM_TYPE]: SEARCH_OPTIONS.INCLUDE_CHANNELS };
@@ -144,7 +155,8 @@ export default function ChannelMentionSuggestions(props: Props) {
  if (activeValue) {
  handleSelect(activeValue, keyCode);
  } else if (possibleMatches.length) {
- handleSelect(possibleMatches[0], keyCode);
+ const suggest = allShownCanonical.find((matchUri) => possibleMatches.find((uri) => uri.includes(matchUri)));
+ if (suggest) handleSelect(suggest, keyCode);
  } else if (results) {
  handleSelect(mentionTerm, keyCode);
  }
@@ -159,13 +171,22 @@ export default function ChannelMentionSuggestions(props: Props) {
  window.addEventListener('keydown', handleKeyDown);
 
  return () => window.removeEventListener('keydown', handleKeyDown);
- }, [handleSelect, inputRef, mentionTerm, possibleMatches, results]);
+ }, [allShownCanonical, handleSelect, inputRef, mentionTerm, possibleMatches, results]);
 
  React.useEffect(() => {
  if (!stringifiedResults) return;
 
  const arrayResults = JSON.parse(stringifiedResults);
- if (arrayResults && arrayResults.length > 0) doResolveUris(arrayResults);
+ if (arrayResults && arrayResults.length > 0) {
+ // $FlowFixMe
+ doResolveUris(arrayResults).then((response) => {
+ try {
+ // $FlowFixMe
+ const canonical_urls = Object.values(response).map(({ canonical_url }) => canonical_url);
+ setCanonicalResults(canonical_urls);
+ } catch (e) {}
+ });
+ }
  }, [doResolveUris, stringifiedResults]);
 
  // Only resolve commentors on Livestreams if actually mentioning/looking for it
@@ -189,12 +210,24 @@ export default function ChannelMentionSuggestions(props: Props) {
  if (urisToResolve.length > 0) doResolveUris(urisToResolve);
  }, [doResolveUris, hasMinLength, isTyping, possibleMatches, subscriptionUris, unresolvedSubscriptions]);
 
- const suggestionsRow = (label: string, suggestions: Array<string>, hasSuggestionsBelow: boolean) => {
+ const suggestionsRow = (
+ label: string,
+ suggestions: Array<string>,
+ canonical: Array<string>,
+ hasSuggestionsBelow: boolean
+ ) => {
  if (mentionTerm !== '@' && suggestions !== results) {
  suggestions = suggestions.filter((uri) => possibleMatches.includes(uri));
  } else if (suggestions === results) {
  suggestions = suggestions.filter((uri) => !allShownUris.includes(uri));
  }
+ suggestions = suggestions
+ .map((matchUri) =>
+ String(
+ Boolean(canonical.find((uri) => matchUri.includes(uri))) && canonical.find((uri) => matchUri.includes(uri))
+ )
+ )
+ .filter((uri) => Boolean(uri));
 
  return !suggestions.length ? null : (
  <>
@@ -218,18 +251,25 @@ export default function ChannelMentionSuggestions(props: Props) {
  suggestionsRow(
  __('Creator'),
  [creatorUri],
- hasSubscriptionsResolved || hasCommentorsShown || !showPlaceholder
+ canonicalCreator,
+ hasSubscriptionsResolved || canonicalCommentors.length > 0 || !showPlaceholder
  )}
  {hasSubscriptionsResolved &&
- suggestionsRow(__('Following'), subscriptionUris, hasCommentorsShown || !showPlaceholder)}
- {commentorUris.length > 0 && suggestionsRow(__('From comments'), commentorUris, !showPlaceholder)}
+ suggestionsRow(
+ __('Following'),
+ subscriptionUris,
+ canonicalSubscriptions,
+ commentorUris.length > 0 || !showPlaceholder
+ )}
+ {commentorUris.length > 0 &&
+ suggestionsRow(__('From comments'), commentorUris, canonicalCommentors, !showPlaceholder)}
 
  {showPlaceholder
  ? hasMinLength && <Spinner type="small" />
  : results && (
  <>
  {!noTopSuggestion && <ChannelMentionTopSuggestion query={debouncedTerm} />}
- {suggestionsRow(__('From search'), results, false)}
+ {suggestionsRow(__('From search'), results, canonicalResults, false)}
  </>
  )}
  </ComboboxList>

diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx
@@ -86,7 +86,7 @@ export function CommentCreate(props: Props) {
  } = props;
  const formFieldRef: ElementRef<any> = React.useRef();
  const formFieldInputRef = formFieldRef && formFieldRef.current && formFieldRef.current.input;
- const selectionIndex = formFieldInputRef && formFieldInputRef.current.selectionStart;
+ const selectionIndex = formFieldInputRef && formFieldInputRef.current && formFieldInputRef.current.selectionStart;
  const buttonRef: ElementRef<any> = React.useRef();
  const {
  push,
@@ -179,12 +179,7 @@ export function CommentCreate(props: Props) {
 
  function handleSelectMention(mentionValue, key) {
  let newMentionValue = mentionValue.replace('lbry://', '');
- if (newMentionValue.includes('#')) {
- const fullId = newMentionValue.substring(newMentionValue.indexOf('#') + 1, newMentionValue.length);
- newMentionValue = newMentionValue
- .substring(0, newMentionValue.indexOf('#') + (fullId.length > 2 ? 2 : newMentionValue.length))
- .replace('#', ':');
- }
+ if (newMentionValue.includes('#')) newMentionValue = newMentionValue.replace('#', ':');
 
  if (livestream && key !== KEYCODES.TAB) setPauseQuickSend(true);
  setCommentValue(