[Glitch+Emoji reactions] Use modern React context for for identity fo…

…r emoji reaction code
TheEssem · May 21, 2024 · 6c28810 · 6c28810
1 parent 48b9837
commit 6c28810
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 39 deletions.
diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx
@@ -12,6 +12,7 @@ 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 +21,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 +78,7 @@ class Status extends ImmutablePureComponent {
   static contextType = SensitiveMediaContext;
 
   static propTypes = {
+    identity: identityContextPropShape,
     containerId: PropTypes.string,
     id: PropTypes.string,
     status: ImmutablePropTypes.map,
@@ -545,6 +546,7 @@ class Status extends ImmutablePureComponent {
       nextInReplyToId,
       rootId,
       history,
+      identity,
       ...other
     } = this.props;
     const { isCollapsed } = this.state;
@@ -846,18 +848,14 @@ class Status extends ImmutablePureComponent {
               {...statusContentProps}
             />
 
-            <IdentityConsumer>
-              {identity => (
-                <StatusReactions
-                  statusId={status.get('id')}
-                  reactions={status.get('reactions')}
-                  numVisible={visibleReactions}
-                  addReaction={this.props.onReactionAdd}
-                  removeReaction={this.props.onReactionRemove}
-                  canReact={identity.signedIn}
-                />
-              )}
-            </IdentityConsumer>
+            <StatusReactions
+              statusId={status.get('id')}
+              reactions={status.get('reactions')}
+              numVisible={visibleReactions}
+              addReaction={this.props.onReactionAdd}
+              removeReaction={this.props.onReactionRemove}
+              canReact={this.props.identity.signedIn}
+            />
 
             {(!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar']))) && (
               <StatusActionBar
@@ -881,4 +879,4 @@ class Status extends ImmutablePureComponent {
 
 }
 
-export default withOptionalRouter(injectIntl(Status));
+export default withOptionalRouter(injectIntl((withIdentity(Status))));
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx b/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));
diff --git a/app/javascript/flavours/glitch/features/status/index.jsx b/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 { signedIn } = this.context.identity;
+    const { dispatch, identity } = this.props;
+    const { signedIn } = identity;
 
     if (signedIn) {
       dispatch(addReaction(statusId, name, url));

diff --git a/app/javascript/flavours/glitch/features/ui/util/identity_consumer.jsx b/app/javascript/flavours/glitch/features/ui/util/identity_consumer.jsx