~Final~ Discovery fixes/cleanup #2599

Merged
neb-b merged 16 commits from discovery-fixes into master 2019-07-05 20:03:12 +02:00
3 changed files with 35 additions and 26 deletions
Showing only changes of commit 9ca18433ff - Show all commits

View file

@ -1,9 +1,10 @@
// @flow
import * as MODALS from 'constants/modal_types';
import * as ICONS from 'constants/icons';
import React, { useState, useRef, useEffect } from 'react';
import React, { useRef } from 'react';
import { parseURI } from 'lbry-redux';
import Button from 'component/button';
import useHover from 'util/use-hover';
type SubscribtionArgs = {
channelName: string,
@ -33,28 +34,12 @@ export default function SubscribeButton(props: Props) {
doToast,
} = props;
const buttonRef = useRef();
const [isHovering, setIsHovering] = useState(false);
const isHovering = useHover(buttonRef);
const { claimName } = parseURI(uri);
const subscriptionHandler = isSubscribed ? doChannelUnsubscribe : doChannelSubscribe;
const subscriptionLabel = isSubscribed ? __('Following') : __('Follow');
const unfollowOverride = isSubscribed && isHovering && __('Unfollow');
useEffect(() => {
function handleHover() {
setIsHovering(!isHovering);
}
const button = buttonRef.current;
if (button) {
button.addEventListener('mouseover', handleHover);
button.addEventListener('mouseleave', handleHover);
return () => {
button.removeEventListener('mouseover', handleHover);
button.removeEventListener('mouseleave', handleHover);
};
}
}, [buttonRef, isHovering]);
return (
<Button
ref={buttonRef}

View file

@ -1,8 +1,9 @@
// @flow
import React from 'react';
import React, { createRef } from 'react';
import Page from 'component/page';
import ClaimListDiscover from 'component/claimListDiscover';
import Button from 'component/button';
import useHover from 'util/use-hover';
type Props = {
location: { search: string },
@ -16,6 +17,8 @@ function TagsPage(props: Props) {
followedTags,
doToggleTagFollow,
} = props;
const buttonRef = createRef();
const isHovering = useHover(buttonRef);
const urlParams = new URLSearchParams(search);
const tagsQuery = urlParams.get('t') || '';
@ -25,18 +28,16 @@ function TagsPage(props: Props) {
const tag = tags[0];
const isFollowing = followedTags.map(({ name }) => name).includes(tag);
let label = isFollowing ? __('Following') : __('Follow');
if (isHovering && isFollowing) {
label = __('Unfollow');
}
return (
<Page>
<ClaimListDiscover
tags={tags}
meta={
<Button
button="link"
onClick={() => doToggleTagFollow(tag)}
label={isFollowing ? __('Following') : __('Follow')}
/>
}
meta={<Button ref={buttonRef} button="link" onClick={() => doToggleTagFollow(tag)} label={label} />}
/>
</Page>
);

23
src/ui/util/use-hover.js Normal file
View file

@ -0,0 +1,23 @@
import { useEffect, useState } from 'react';
kauffj commented 2019-07-03 18:24:41 +02:00 (Migrated from github.com)
Review

No need to do this now, but I suspect these should end up with their own folder or another organizational method rather than being dumped in util.

No need to do this now, but I suspect these should end up with their own folder or another organizational method rather than being dumped in `util`.
export default function useHover(ref) {
const [isHovering, setIsHovering] = useState(false);
useEffect(() => {
function handleHover() {
setIsHovering(!isHovering);
}
const refElement = ref.current;
if (refElement) {
refElement.addEventListener('mouseover', handleHover);
refElement.addEventListener('mouseleave', handleHover);
return () => {
refElement.removeEventListener('mouseover', handleHover);
refElement.removeEventListener('mouseleave', handleHover);
};
}
}, [ref, isHovering]);
return isHovering;
}