LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Add Channel Mention selection ability #7151

Merged
saltrafael merged 9 commits from channel-mention into master 2021-09-30 23:30:32 +02:00
Conversation 2 Commits 9 Files changed 19 +11 -9
2 changed files with 11 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 23a5aa2751 - Show all commits

2
ui/component/channelMentionSuggestions/index.js
View file

@ -10,7 +10,7 @@ const select = (state, props) => {
const subscriptionUris = selectSubscriptions(state).map(({ uri }) => uri); const subscriptionUris = selectSubscriptions(state).map(({ uri }) => uri);
const topLevelComments = makeSelectTopLevelCommentsForUri(props.uri)(state); const topLevelComments = makeSelectTopLevelCommentsForUri(props.uri)(state);
let commentorUris = []; const commentorUris = [];
topLevelComments.map(({ channel_url }) => !commentorUris.includes(channel_url) && commentorUris.push(channel_url)); topLevelComments.map(({ channel_url }) => !commentorUris.includes(channel_url) && commentorUris.push(channel_url));
const getUnresolved = (uris) => const getUnresolved = (uris) =>

18
ui/component/channelMentionSuggestions/view.jsx
View file

@ -1,7 +1,7 @@
// @flow // @flow
import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList } from '@reach/combobox'; import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList } from '@reach/combobox';
import { Form } from 'component/common/form'; import { Form } from 'component/common/form';
import { parseURI } from 'lbry-redux'; import { parseURI, regexInvalidURI } from 'lbry-redux';
import { SEARCH_OPTIONS } from 'constants/search'; import { SEARCH_OPTIONS } from 'constants/search';
import * as KEYCODES from 'constants/keycodes'; import * as KEYCODES from 'constants/keycodes';
import ChannelMentionSuggestion from 'component/channelMentionSuggestion'; import ChannelMentionSuggestion from 'component/channelMentionSuggestion';
@ -46,10 +46,10 @@ export default function ChannelMentionSuggestions(props: Props) {
const comboboxListRef: ElementRef<any> = React.useRef(); const comboboxListRef: ElementRef<any> = React.useRef();
const [debouncedTerm, setDebouncedTerm] = React.useState(''); const [debouncedTerm, setDebouncedTerm] = React.useState('');
const isRefFocused = (ref) => ref && ref.current && ref.current === document.activeElement; const isRefFocused = (ref) => ref && ref.current === document.activeElement;
let subscriptionUris = props.subscriptionUris.filter((uri) => uri !== creatorUri); const subscriptionUris = props.subscriptionUris.filter((uri) => uri !== creatorUri);
let commentorUris = props.commentorUris.filter((uri) => uri !== creatorUri && !subscriptionUris.includes(uri)); const commentorUris = props.commentorUris.filter((uri) => uri !== creatorUri && !subscriptionUris.includes(uri));
const termToMatch = mentionTerm && mentionTerm.replace('@', '').toLowerCase(); const termToMatch = mentionTerm && mentionTerm.replace('@', '').toLowerCase();
const allShownUris = [creatorUri, ...subscriptionUris, ...commentorUris]; const allShownUris = [creatorUri, ...subscriptionUris, ...commentorUris];
@ -74,6 +74,8 @@ export default function ChannelMentionSuggestions(props: Props) {
const isTyping = debouncedTerm !== mentionTerm; const isTyping = debouncedTerm !== mentionTerm;
const showPlaceholder = isTyping || loading; const showPlaceholder = isTyping || loading;
const isUriFromTermValid = !regexInvalidURI.test(mentionTerm.substring(1));
const handleSelect = React.useCallback( const handleSelect = React.useCallback(
(value, key) => { (value, key) => {
if (customSelectAction) { if (customSelectAction) {
@ -95,12 +97,12 @@ export default function ChannelMentionSuggestions(props: Props) {
React.useEffect(() => { React.useEffect(() => {
if (!inputRef) return; if (!inputRef) return;
jessopb commented 2021-09-22 21:42:54 +02:00 (Migrated from github.com)
Review
Copy link

https://github.com/lbryio/lbry-desktop/blob/master/ui/effects/use-throttle.js would this work here?

https://github.com/lbryio/lbry-desktop/blob/master/ui/effects/use-throttle.js would this work here?
if (mentionTerm) { if (mentionTerm && isUriFromTermValid) {
inputRef.current.classList.add('textarea-mention'); inputRef.current.classList.add('textarea-mention');
} else { } else {
inputRef.current.classList.remove('textarea-mention'); inputRef.current.classList.remove('textarea-mention');
} }
}, [inputRef, mentionTerm]); }, [inputRef, isUriFromTermValid, mentionTerm]);
React.useEffect(() => { React.useEffect(() => {
if (!inputRef || !comboboxInputRef || !mentionTerm) return; if (!inputRef || !comboboxInputRef || !mentionTerm) return;
@ -155,7 +157,7 @@ export default function ChannelMentionSuggestions(props: Props) {
React.useEffect(() => { React.useEffect(() => {
if (isTyping) return; if (isTyping) return;
let urisToResolve = []; const urisToResolve = [];
subscriptionUris.map( subscriptionUris.map(
(uri) => (uri) =>
hasMinLength && hasMinLength &&
@ -189,7 +191,7 @@ export default function ChannelMentionSuggestions(props: Props) {
<Form onSubmit={() => handleSelect(mentionTerm)}> <Form onSubmit={() => handleSelect(mentionTerm)}>
<Combobox className="channel-mention" onSelect={handleSelect}> <Combobox className="channel-mention" onSelect={handleSelect}>
<ComboboxInput ref={comboboxInputRef} className="channel-mention__input--none" value={mentionTerm} /> <ComboboxInput ref={comboboxInputRef} className="channel-mention__input--none" value={mentionTerm} />
{mentionTerm && ( {mentionTerm && isUriFromTermValid && (
<ComboboxPopover portal={false} className="channel-mention__suggestions"> <ComboboxPopover portal={false} className="channel-mention__suggestions">
<ComboboxList ref={comboboxListRef}> <ComboboxList ref={comboboxListRef}>
{creatorUri && {creatorUri &&