Merge branch 'next-emoji-reacts' into 'next'

Next: Emoji reacts pt 2

See merge request soapbox-pub/soapbox-fe!1204

.eslintrc.js

@@ -141,6 +141,7 @@ module.exports = {
     'react/jsx-first-prop-new-line': ['error', 'multiline-multiprop'],
     'react/jsx-indent': ['error', 2],
     // 'react/jsx-no-bind': ['error'],
+    'react/jsx-no-comment-textnodes': 'error',
     'react/jsx-no-duplicate-props': 'error',
     'react/jsx-no-undef': 'error',
     'react/jsx-tag-spacing': 'error',

app/soapbox/actions/modals.ts

@@ -1,7 +1,8 @@
 export const MODAL_OPEN  = 'MODAL_OPEN';
 export const MODAL_CLOSE = 'MODAL_CLOSE';
 
-export function openModal(type, props) {
+/** Open a modal of the given type */
+export function openModal(type: string, props?: any) {
   return {
     type: MODAL_OPEN,
     modalType: type,
@@ -9,7 +10,8 @@ export function openModal(type, props) {
   };
 }
 
-export function closeModal(type) {
+/** Close the modal */
+export function closeModal(type: string) {
   return {
     type: MODAL_CLOSE,
     modalType: type,

app/soapbox/components/emoji-button-wrapper.tsx

@@ -0,0 +1,117 @@
+import classNames from 'classnames';
+import React, { useState, useRef } from 'react';
+import { usePopper } from 'react-popper';
+import { useDispatch } from 'react-redux';
+
+import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
+import { openModal } from 'soapbox/actions/modals';
+import EmojiSelector from 'soapbox/components/ui/emoji-selector/emoji-selector';
+import { useAppSelector, useOwnAccount, useSoapboxConfig } from 'soapbox/hooks';
+import { isUserTouching } from 'soapbox/is_mobile';
+import { getReactForStatus } from 'soapbox/utils/emoji_reacts';
+
+interface IEmojiButtonWrapper {
+  statusId: string,
+  children: JSX.Element,
+}
+
+/** Provides emoji reaction functionality to the underlying button component */
+const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children }): JSX.Element | null => {
+  const dispatch = useDispatch();
+  const ownAccount = useOwnAccount();
+  const status = useAppSelector(state => state.statuses.get(statusId));
+  const soapboxConfig = useSoapboxConfig();
+
+  const [visible, setVisible] = useState(false);
+  // const [focused, setFocused] = useState(false);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const popperRef = useRef<HTMLDivElement>(null);
+
+  const { styles, attributes } = usePopper(ref.current, popperRef.current, {
+    placement: 'top-start',
+    strategy: 'fixed',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [-10, 0],
+        },
+      },
+    ],
+  });
+
+  if (!status) return null;
+
+  const handleMouseEnter = () => {
+    setVisible(true);
+  };
+
+  const handleMouseLeave = () => {
+    setVisible(false);
+  };
+
+  const handleReact = (emoji: string): void => {
+    if (ownAccount) {
+      dispatch(simpleEmojiReact(status, emoji));
+    } else {
+      dispatch(openModal('UNAUTHORIZED', {
+        action: 'FAVOURITE',
+        ap_id: status.url,
+      }));
+    }
+
+    setVisible(false);
+  };
+
+  const handleClick: React.EventHandler<React.MouseEvent> = e => {
+    const meEmojiReact = getReactForStatus(status, soapboxConfig.allowedEmoji) || '👍';
+
+    if (isUserTouching()) {
+      if (visible) {
+        handleReact(meEmojiReact);
+      } else {
+        setVisible(true);
+      }
+    } else {
+      handleReact(meEmojiReact);
+    }
+
+    e.stopPropagation();
+  };
+
+  // const handleUnfocus: React.EventHandler<React.KeyboardEvent> = () => {
+  //   setFocused(false);
+  // };
+
+  const selector = (
+    <div
+      className={classNames('fixed z-50 transition-opacity duration-100', {
+        'opacity-0 pointer-events-none': !visible,
+      })}
+      ref={popperRef}
+      style={styles.popper}
+      {...attributes.popper}
+    >
+      <EmojiSelector
+        emojis={soapboxConfig.allowedEmoji}
+        onReact={handleReact}
+        // focused={focused}
+        // onUnfocus={handleUnfocus}
+      />
+    </div>
+  );
+
+  return (
+    <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+      {React.cloneElement(children, {
+        onClick: handleClick,
+        ref,
+      })}
+
+      {selector}
+    </div>
+  );
+};
+
+export default EmojiButtonWrapper;

app/soapbox/components/hoverable.tsx

@@ -1,63 +0,0 @@
-import classNames from 'classnames';
-import React, { useState, useRef } from 'react';
-import { usePopper } from 'react-popper';
-
-interface IHoverable {
-  component: JSX.Element,
-}
-
-/** Wrapper to render a given component when hovered */
-const Hoverable: React.FC<IHoverable> = ({
-  component,
-  children,
-}): JSX.Element => {
-
-  const [portalActive, setPortalActive] = useState(false);
-
-  const ref = useRef<HTMLDivElement>(null);
-  const popperRef = useRef<HTMLDivElement>(null);
-
-  const handleMouseEnter = () => {
-    setPortalActive(true);
-  };
-
-  const handleMouseLeave = () => {
-    setPortalActive(false);
-  };
-
-  const { styles, attributes } = usePopper(ref.current, popperRef.current, {
-    placement: 'top-start',
-    strategy: 'fixed',
-    modifiers: [
-      {
-        name: 'offset',
-        options: {
-          offset: [-10, 0],
-        },
-      },
-    ],
-  });
-
-  return (
-    <div
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      ref={ref}
-    >
-      {children}
-
-      <div
-        className={classNames('fixed z-50 transition-opacity duration-100', {
-          'opacity-0 pointer-events-none': !portalActive,
-        })}
-        ref={popperRef}
-        style={styles.popper}
-        {...attributes.popper}
-      >
-        {component}
-      </div>
-    </div>
-  );
-};
-
-export default Hoverable;

app/soapbox/components/status_action_bar.tsx

@@ -6,8 +6,7 @@ import { connect } from 'react-redux';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
-import EmojiSelector from 'soapbox/components/emoji_selector';
+import EmojiButtonWrapper from 'soapbox/components/emoji-button-wrapper';
-import Hoverable from 'soapbox/components/hoverable';
 import StatusActionButton from 'soapbox/components/status-action-button';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import { isUserTouching } from 'soapbox/is_mobile';
@@ -554,7 +553,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
   }
 
   render() {
-    const { status, intl, allowedEmoji, emojiSelectorFocused, handleEmojiSelectorUnfocus, features, me } = this.props;
+    const { status, intl, allowedEmoji, features, me } = this.props;
 
     const publicStatus = ['public', 'unlisted'].includes(status.visibility);
 
@@ -641,24 +640,15 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
         )}
 
         {features.emojiReacts ? (
-          <Hoverable
+          <EmojiButtonWrapper statusId={status.id}>
-            component={(
-              <EmojiSelector
-                onReact={this.handleReact}
-                focused={emojiSelectorFocused}
-                onUnfocus={handleEmojiSelectorUnfocus}
-              />
-            )}
-          >
             <StatusActionButton
               title={meEmojiTitle}
               icon={require('@tabler/icons/icons/thumb-up.svg')}
               color='accent'
-              onClick={this.handleLikeButtonClick}
               active={Boolean(meEmojiReact)}
               count={emojiReactCount}
             />
-          </Hoverable>
+          </EmojiButtonWrapper>
         ): (
           <StatusActionButton
             title={intl.formatMessage(messages.favourite)}

app/soapbox/components/ui/emoji-selector/emoji-selector.tsx

@@ -19,7 +19,7 @@ const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabInd
 };
 
 interface IEmojiSelector {
-  emojis: string[],
+  emojis: Iterable<string>,
   onReact: (emoji: string) => void,
   visible?: boolean,
   focused?: boolean,
@@ -40,7 +40,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
       space={2}
       className={classNames('bg-white dark:bg-slate-900 p-3 rounded-full shadow-md z-[999] w-max')}
     >
-      {emojis.map((emoji, i) => (
+      {Array.from(emojis).map((emoji, i) => (
         <EmojiButton
           key={i}
           emoji={emoji}

app/soapbox/components/ui/icon/svg-icon.tsx

@@ -30,7 +30,7 @@ const SvgIcon: React.FC<ISvgIcon> = ({ src, alt, size = 24, className }): JSX.El
       loader={loader}
       data-testid='svg-icon'
     >
-      /* If the fetch fails, fall back to displaying the loader */
+      {/* If the fetch fails, fall back to displaying the loader */}
       {loader}
     </InlineSVG>
   );

app/soapbox/features/status/components/action-bar.tsx

@@ -4,6 +4,7 @@ import { defineMessages, injectIntl, WrappedComponentProps as IntlComponentProps
 import { connect } from 'react-redux';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
+import EmojiButtonWrapper from 'soapbox/components/emoji-button-wrapper';
 import { isUserTouching } from 'soapbox/is_mobile';
 import { getReactForStatus } from 'soapbox/utils/emoji_reacts';
 import { getFeatures } from 'soapbox/utils/features';
@@ -574,19 +575,36 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
 
         {reblogButton}
 
-        <IconButton
+        {features.emojiReacts ? (
-          className={classNames({
+          <EmojiButtonWrapper statusId={status.id}>
-            'text-gray-400 hover:text-gray-600': !meEmojiReact,
+            <IconButton
-            'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
+              className={classNames({
-          })}
+                'text-gray-400 hover:text-gray-600': !meEmojiReact,
-          title={meEmojiTitle}
+                'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
-          src={require('@tabler/icons/icons/heart.svg')}
+              })}
-          iconClassName={classNames({
+              title={meEmojiTitle}
-            'fill-accent-300': Boolean(meEmojiReact),
+              src={require('@tabler/icons/icons/heart.svg')}
-          })}
+              iconClassName={classNames({
-          text={meEmojiTitle}
+                'fill-accent-300': Boolean(meEmojiReact),
-          onClick={this.handleLikeButtonClick}
+              })}
-        />
+              text={meEmojiTitle}
+            />
+          </EmojiButtonWrapper>
+        ) : (
+          <IconButton
+            className={classNames({
+              'text-gray-400 hover:text-gray-600': !meEmojiReact,
+              'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
+            })}
+            title={meEmojiTitle}
+            src={require('@tabler/icons/icons/heart.svg')}
+            iconClassName={classNames({
+              'fill-accent-300': Boolean(meEmojiReact),
+            })}
+            text={meEmojiTitle}
+            onClick={this.handleLikeButtonClick}
+          />
+        )}
 
         {canShare && (
           <IconButton

app/soapbox/features/ui/index.js

@@ -229,8 +229,10 @@ class SwitchingColumnsArea extends React.PureComponent {
 
         <WrappedRoute path='/' exact page={HomePage} component={HomeTimeline} content={children} />
 
-        // NOTE: we cannot nest routes in a fragment
+        {/*
-        // https://stackoverflow.com/a/68637108
+          NOTE: we cannot nest routes in a fragment
+          https://stackoverflow.com/a/68637108
+        */}
         {features.federating && <WrappedRoute path='/timeline/local' exact page={HomePage} component={CommunityTimeline} content={children} publicRoute />}
         {features.federating && <WrappedRoute path='/timeline/fediverse' exact page={HomePage} component={PublicTimeline} content={children} publicRoute />}
         {features.federating && <WrappedRoute path='/timeline/:instance' exact page={RemoteInstancePage} component={RemoteTimeline} content={children} />}