~Final~ Discovery fixes/cleanup #2599
3 changed files with 35 additions and 26 deletions
|
@ -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}
|
||||
|
|
|
@ -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
23
src/ui/util/use-hover.js
Normal file
|
@ -0,0 +1,23 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
|
||||
|
||||
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;
|
||||
}
|
Loading…
Reference in a new issue
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
.