Pass hover props to extendable tabs in order to support firefox

plugins/talk-plugin-featured-comments/client/actions.js

@@ -1,9 +0,0 @@
-import {SHOW_TOOLTIP, HIDE_TOOLTIP} from './constants';
-
-export const showTooltip = () => ({
-  type: SHOW_TOOLTIP
-});
-
-export const hideTooltip = () => ({
-  type: HIDE_TOOLTIP
-});

plugins/talk-plugin-featured-comments/client/components/InfoIcon.js

@@ -3,9 +3,9 @@ import styles from './InfoIcon.css';
 import cn from 'classnames';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
-export default ({tooltip}) => (
-  <Icon 
+export default ({hover}) => (
+  <Icon
     name="info_outline"
-    className={cn(styles.infoIcon, {[styles.on]: tooltip})}
+    className={cn(styles.infoIcon, {[styles.on]: hover})}
   />
 );

plugins/talk-plugin-featured-comments/client/components/Tab.js

@@ -3,16 +3,23 @@ import {TabCount} from 'plugin-api/beta/client/components/ui';
 import InfoIcon from './InfoIcon';
 import {t} from 'plugin-api/beta/client/services';
 import Tooltip from './Tooltip';
+import PropTypes from 'prop-types';
 
-export default ({active, asset: {featuredCommentsCount}, tooltip, ...props}) => { 
+const Tab = ({active, hover, featuredCommentsCount}) => {
   return (
-    <span 
-      onMouseEnter={props.showTooltip}
-      onMouseLeave={props.hideTooltip} >
+    <span>
       {t('talk-plugin-featured-comments.featured')}
       <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
-      <InfoIcon tooltip={tooltip} /> 
-      {tooltip && <Tooltip />} 
+      <InfoIcon hover={hover} />
+      {hover && <Tooltip />}
     </span>
   );
 };
+
+Tab.propTypes = {
+  active: PropTypes.bool,
+  hover: PropTypes.bool,
+  featuredCommentsCount: PropTypes.number.isRequired,
+};
+
+export default Tab;

plugins/talk-plugin-featured-comments/client/constants.js

@@ -1,4 +0,0 @@
-const prefix = 'TALK_FEATURED_COMMENTS';
-
-export const SHOW_TOOLTIP = `${prefix}_SHOW_TOOLTIP`;
-export const HIDE_TOOLTIP = `${prefix}_HIDE_TOOLTIP`;

plugins/talk-plugin-featured-comments/client/containers/Tab.js

@@ -1,19 +1,9 @@
 import Tab from '../components/Tab';
-import {bindActionCreators} from 'redux';
-import {showTooltip, hideTooltip} from '../actions';
+import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
 import {compose, gql} from 'react-apollo';
-import {withFragments, excludeIf, connect} from 'plugin-api/beta/client/hocs';
-
-const mapStateToProps = ({talkPluginFeaturedComments: state}) => state;
-
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    showTooltip,
-    hideTooltip,
-  }, dispatch);
+import {withProps} from 'recompose';
 
 const enhance = compose(
-  connect(mapStateToProps, mapDispatchToProps),
   withFragments({
     asset: gql`
       fragment TalkFeaturedComments_Tab_asset on Asset {
@@ -21,6 +11,7 @@ const enhance = compose(
       }`,
   }),
   excludeIf((props) => props.asset.featuredCommentsCount === 0),
+  withProps((props) => ({featuredCommentsCount: props.asset.featuredCommentsCount})),
 );
 
 export default enhance(Tab);

plugins/talk-plugin-featured-comments/client/index.js

@@ -3,7 +3,6 @@ import Tag from './containers/Tag';
 import TabPane from './containers/TabPane';
 import translations from './translations.yml';
 import update from 'immutability-helper';
-import reducer from './reducer';
 import ModTag from './containers/ModTag';
 import ModActionButton from './containers/ModActionButton';
 import ModSubscription from './containers/ModSubscription';
@@ -13,7 +12,6 @@ import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';
 import {prependNewNodes} from 'plugin-api/beta/client/utils';
 
 export default {
-  reducer,
   translations,
   slots: {
     streamTabsPrepend: [Tab],

plugins/talk-plugin-featured-comments/client/reducer.js

@@ -1,22 +0,0 @@
-import {SHOW_TOOLTIP, HIDE_TOOLTIP} from './constants';
-
-const initialState = {
-  tooltip: false
-};
-
-export default function featured (state = initialState, action) {
-  switch (action.type) {
-  case SHOW_TOOLTIP: 
-    return {
-      ...state,
-      tooltip: true
-    };
-  case HIDE_TOOLTIP: 
-    return {
-      ...state,
-      tooltip: false
-    };
-  default :
-    return state;
-  }
-}