[Glitch+Emoji reactions] Use modern React context for for identity for emoji reaction code

CHANGELOG.md

@@ -7,6 +7,7 @@ All changes to Catstodon that aren't Mastodon or glitch-soc Mastodon changes wil
 - Upstream changes, once again (including, but not limited to:)
   - Only uses a maximum of 1 megabyte of response body for link previews
   - Allow multiple `redirect_uri`s for OAuth 2.0 Applications
+- Adjust emoji reactions patch to use modern React context for identity instead of an identity consumer
 
 ## [v4.3.0-alpha.3+glitch+cat+1.2.2] - 2024-05-17
 

app/javascript/flavours/glitch/components/status.jsx

@@ -3,15 +3,18 @@ import PropTypes from 'prop-types';
 import { injectIntl, FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
+import { withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
 
 import { HotKeys } from 'react-hotkeys';
 
 import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
 import PollContainer from 'flavours/glitch/containers/poll_container';
 import NotificationOverlayContainer from 'flavours/glitch/features/notifications/containers/overlay_container';
+import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning';
 import { withOptionalRouter, WithOptionalRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
@@ -20,7 +23,6 @@ import Card from '../features/status/components/card';
 // to use the progress bar to show download progress
 import Bundle from '../features/ui/components/bundle';
 import { MediaGallery, Video, Audio } from '../features/ui/util/async-components';
-import { IdentityConsumer } from '../features/ui/util/identity_consumer';
 import { SensitiveMediaContext } from '../features/ui/util/sensitive_media_context';
 import { displayMedia, visibleReactions } from '../initial_state';
 
@@ -78,6 +80,7 @@ class Status extends ImmutablePureComponent {
   static contextType = SensitiveMediaContext;
 
   static propTypes = {
+    identity: identityContextPropShape,
     containerId: PropTypes.string,
     id: PropTypes.string,
     status: ImmutablePropTypes.map,
@@ -545,6 +548,7 @@ class Status extends ImmutablePureComponent {
       nextInReplyToId,
       rootId,
       history,
+      identity,
       ...other
     } = this.props;
     const { isCollapsed } = this.state;
@@ -846,18 +850,14 @@ class Status extends ImmutablePureComponent {
               {...statusContentProps}
             />
 
-            <IdentityConsumer>
+            <StatusReactions
-              {identity => (
+              statusId={status.get('id')}
-                <StatusReactions
+              reactions={status.get('reactions')}
-                  statusId={status.get('id')}
+              numVisible={visibleReactions}
-                  reactions={status.get('reactions')}
+              addReaction={this.props.onReactionAdd}
-                  numVisible={visibleReactions}
+              removeReaction={this.props.onReactionRemove}
-                  addReaction={this.props.onReactionAdd}
+              canReact={this.props.identity.signedIn}
-                  removeReaction={this.props.onReactionRemove}
+            />
-                  canReact={identity.signedIn}
-                />
-              )}
-            </IdentityConsumer>
 
             {(!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar']))) && (
               <StatusActionBar
@@ -881,4 +881,4 @@ class Status extends ImmutablePureComponent {
 
 }
 
-export default withOptionalRouter(injectIntl(Status));
+export default withOptionalRouter(injectIntl((withIdentity(Status))));

app/javascript/flavours/glitch/features/status/components/detailed_status.jsx

@@ -15,6 +15,7 @@ import { getHashtagBarForStatus } from 'flavours/glitch/components/hashtag_bar';
 import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
 import { VisibilityIcon } from 'flavours/glitch/components/visibility_icon';
 import PollContainer from 'flavours/glitch/containers/poll_container';
+import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
 import { Avatar } from '../../../components/avatar';
@@ -29,12 +30,8 @@ import Video from '../../video';
 import Card from './card';
 
 class DetailedStatus extends ImmutablePureComponent {
-
-  static contextTypes = {
-    identity: PropTypes.object,
-  };
-
   static propTypes = {
+    identity: identityContextPropShape,
     status: ImmutablePropTypes.map,
     settings: ImmutablePropTypes.map.isRequired,
     onOpenMedia: PropTypes.func.isRequired,
@@ -319,7 +316,7 @@ class DetailedStatus extends ImmutablePureComponent {
             reactions={status.get('reactions')}
             addReaction={this.props.onReactionAdd}
             removeReaction={this.props.onReactionRemove}
-            canReact={this.context.identity.signedIn}
+            canReact={this.props.identity.signedIn}
           />
 
           <div className='detailed-status__meta'>
@@ -348,4 +345,4 @@ class DetailedStatus extends ImmutablePureComponent {
 
 }
 
-export default withRouter(DetailedStatus);
+export default withRouter(withIdentity(DetailedStatus));

app/javascript/flavours/glitch/features/status/index.jsx

@@ -307,8 +307,8 @@ class Status extends ImmutablePureComponent {
   };
 
   handleReactionAdd = (statusId, name, url) => {
-    const { dispatch } = this.props;
+    const { dispatch, identity } = this.props;
-    const { signedIn } = this.context.identity;
+    const { signedIn } = identity.signedIn;
 
     if (signedIn) {
       dispatch(addReaction(statusId, name, url));

app/javascript/flavours/glitch/features/ui/util/identity_consumer.jsx

@@ -1,16 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-export class IdentityConsumer extends PureComponent {
-  static contextTypes = {
-    identity: PropTypes.object
-  };
-
-  static propTypes = {
-    children: PropTypes.func.isRequired
-  };
-
-  render() {
-    return this.props.children(this.context.identity);
-  }
-}