diff --git a/src/ui/analytics.js b/src/ui/analytics.js index b4c6f4f80..2c887eeaa 100644 --- a/src/ui/analytics.js +++ b/src/ui/analytics.js @@ -89,6 +89,14 @@ const analytics: Analytics = { }); } }, + channelBlockEvent: (uri, blocked, location) => { + if (analyticsEnabled) { + ReactGA.event({ + category: blocked ? 'Channel-Hidden' : 'Channel-Unhidden', + action: uri, + }); + } + }, }; // Initialize google analytics diff --git a/src/ui/component/blockButton/index.js b/src/ui/component/blockButton/index.js new file mode 100644 index 000000000..f641ef9f1 --- /dev/null +++ b/src/ui/component/blockButton/index.js @@ -0,0 +1,15 @@ +import { connect } from 'react-redux'; +import { selectChannelIsBlocked, doToggleBlockChannel, doToast } from 'lbry-redux'; +import BlockButton from './view'; + +const select = (state, props) => ({ + channelIsBlocked: selectChannelIsBlocked(props.uri)(state), +}); + +export default connect( + select, + { + toggleBlockChannel: doToggleBlockChannel, + doToast, + } +)(BlockButton); diff --git a/src/ui/component/blockButton/view.jsx b/src/ui/component/blockButton/view.jsx new file mode 100644 index 000000000..912742b59 --- /dev/null +++ b/src/ui/component/blockButton/view.jsx @@ -0,0 +1,40 @@ +// @flow +import * as ICONS from 'constants/icons'; +import * as PAGES from 'constants/pages'; +import React, { useRef } from 'react'; +import Button from 'component/button'; +import useHover from 'util/use-hover'; + +type Props = { + uri: string, + isSubscribed: boolean, + toggleBlockChannel: (uri: string) => void, + channelIsBlocked: boolean, + doToast: ({ message: string, linkText: string, linkTarget: string }) => void, +}; + +export default function BlockButton(props: Props) { + const { uri, toggleBlockChannel, channelIsBlocked, doToast } = props; + + const blockRef = useRef(); + const isHovering = useHover(blockRef); + const blockLabel = channelIsBlocked ? __('Blocked') : __('Block'); + const blockedOverride = channelIsBlocked && isHovering && __('Unblock'); + + return ( +