[Glitch] Use a modern React context for identity in the app

Port a178ba7cd5 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

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

@@ -14,8 +14,10 @@ import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import SettingsIcon from '@/material-icons/400-24px/settings.svg?react';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { ButtonInTabsBar } from 'flavours/glitch/features/ui/util/columns_context';
+import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
+
 import { useAppHistory } from './router';
 
 const messages = defineMessages({
@@ -51,12 +53,8 @@ BackButton.propTypes = {
 };
 
 class ColumnHeader extends PureComponent {
-
-  static contextTypes = {
-    identity: PropTypes.object,
-  };
-
   static propTypes = {
+    identity: identityContextPropShape,
     intl: PropTypes.object.isRequired,
     title: PropTypes.node,
     icon: PropTypes.string,
@@ -171,7 +169,7 @@ class ColumnHeader extends PureComponent {
       );
     }
 
-    if (this.context.identity.signedIn && (children || (multiColumn && this.props.onPin))) {
+    if (this.props.identity.signedIn && (children || (multiColumn && this.props.onPin))) {
       collapseButton = (
         <button
           className={collapsibleButtonClassName}
@@ -232,4 +230,4 @@ class ColumnHeader extends PureComponent {
 
 }
 
-export default injectIntl(withRouter(ColumnHeader));
+export default injectIntl(withIdentity(withRouter(ColumnHeader)));

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

@@ -14,6 +14,7 @@ import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import { Icon }  from 'flavours/glitch/components/icon';
 import emojify from 'flavours/glitch/features/emoji/emoji';
 import Motion from 'flavours/glitch/features/ui/util/optional_motion';
+import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 
 import { RelativeTimestamp } from './relative_timestamp';
 
@@ -38,12 +39,8 @@ const makeEmojiMap = record => record.get('emojis').reduce((obj, emoji) => {
 }, {});
 
 class Poll extends ImmutablePureComponent {
-
-  static contextTypes = {
-    identity: PropTypes.object,
-  };
-
   static propTypes = {
+    identity: identityContextPropShape,
     poll: ImmutablePropTypes.map,
     lang: PropTypes.string,
     intl: PropTypes.object.isRequired,
@@ -235,7 +232,7 @@ class Poll extends ImmutablePureComponent {
         </ul>
 
         <div className='poll__footer'>
-          {!showResults && <button className='button button-secondary' disabled={disabled || !this.context.identity.signedIn} onClick={this.handleVote}><FormattedMessage id='poll.vote' defaultMessage='Vote' /></button>}
+          {!showResults && <button className='button button-secondary' disabled={disabled || !this.props.identity.signedIn} onClick={this.handleVote}><FormattedMessage id='poll.vote' defaultMessage='Vote' /></button>}
           {!showResults && <><button className='poll__link' onClick={this.handleReveal}><FormattedMessage id='poll.reveal' defaultMessage='See results' /></button> · </>}
           {showResults && !this.props.disabled && <><button className='poll__link' onClick={this.handleRefresh}><FormattedMessage id='poll.refresh' defaultMessage='Refresh' /></button> · </>}
           {votesCount}
@@ -247,4 +244,4 @@ class Poll extends ImmutablePureComponent {
 
 }
 
-export default injectIntl(Poll);
+export default injectIntl(withIdentity(Poll));

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

@@ -21,6 +21,7 @@ import RepeatActiveIcon from '@/svg-icons/repeat_active.svg?react';
 import RepeatDisabledIcon from '@/svg-icons/repeat_disabled.svg';
 import RepeatPrivateIcon from '@/svg-icons/repeat_private.svg';
 import RepeatPrivateActiveIcon from '@/svg-icons/repeat_private_active.svg?react';
+import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'flavours/glitch/permissions';
 import { accountAdminLink, statusAdminLink } from 'flavours/glitch/utils/backend_links';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
@@ -67,12 +68,8 @@ const messages = defineMessages({
 });
 
 class StatusActionBar extends ImmutablePureComponent {
-
-  static contextTypes = {
-    identity: PropTypes.object,
-  };
-
   static propTypes = {
+    identity: identityContextPropShape,
     status: ImmutablePropTypes.map.isRequired,
     onReply: PropTypes.func,
     onFavourite: PropTypes.func,
@@ -108,7 +105,7 @@ class StatusActionBar extends ImmutablePureComponent {
   ];
 
   handleReplyClick = () => {
-    const { signedIn } = this.context.identity;
+    const { signedIn } = this.props.identity;
 
     if (signedIn) {
       this.props.onReply(this.props.status, this.props.history);
@@ -124,7 +121,7 @@ class StatusActionBar extends ImmutablePureComponent {
   };
 
   handleFavouriteClick = (e) => {
-    const { signedIn } = this.context.identity;
+    const { signedIn } = this.props.identity;
 
     if (signedIn) {
       this.props.onFavourite(this.props.status, e);
@@ -134,7 +131,7 @@ class StatusActionBar extends ImmutablePureComponent {
   };
 
   handleReblogClick = e => {
-    const { signedIn } = this.context.identity;
+    const { signedIn } = this.props.identity;
 
     if (signedIn) {
       this.props.onReblog(this.props.status, e);
@@ -210,7 +207,7 @@ class StatusActionBar extends ImmutablePureComponent {
 
   render () {
     const { status, intl, withDismiss, withCounters, showReplyCount, scrollKey } = this.props;
-    const { permissions, signedIn } = this.context.identity;
+    const { permissions, signedIn } = this.props.identity;
 
     const mutingConversation = status.get('muted');
     const publicStatus       = ['public', 'unlisted'].includes(status.get('visibility'));
@@ -359,4 +356,4 @@ class StatusActionBar extends ImmutablePureComponent {
 
 }
 
-export default withRouter(injectIntl(StatusActionBar));
+export default withRouter(withIdentity(injectIntl(StatusActionBar)));

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

@@ -15,6 +15,7 @@ import LinkIcon from '@/material-icons/400-24px/link.svg?react';
 import MovieIcon from '@/material-icons/400-24px/movie.svg?react';
 import MusicNoteIcon from '@/material-icons/400-24px/music_note.svg?react';
 import { Icon } from 'flavours/glitch/components/icon';
+import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state';
 import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
 
@@ -126,12 +127,8 @@ const mapStateToProps = state => ({
 });
 
 class StatusContent extends PureComponent {
-
-  static contextTypes = {
-    identity: PropTypes.object,
-  };
-
   static propTypes = {
+    identity: identityContextPropShape,
     status: ImmutablePropTypes.map.isRequired,
     statusContent: PropTypes.string,
     expanded: PropTypes.bool,
@@ -349,7 +346,7 @@ class StatusContent extends PureComponent {
     const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
     const contentLocale = intl.locale.replace(/[_-].*/, '');
     const targetLanguages = this.props.languages?.get(status.get('language') || 'und');
-    const renderTranslate = this.props.onTranslate && this.context.identity.signedIn && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('search_index').trim().length > 0 && targetLanguages?.includes(contentLocale);
+    const renderTranslate = this.props.onTranslate && this.props.identity.signedIn && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('search_index').trim().length > 0 && targetLanguages?.includes(contentLocale);
 
     const content = { __html: statusContent ?? getStatusContent(status) };
     const spoilerContent = { __html: status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml') };
@@ -503,4 +500,4 @@ class StatusContent extends PureComponent {
 
 }
 
-export default withRouter(connect(mapStateToProps)(injectIntl(StatusContent)));
+export default withRouter(withIdentity(connect(mapStateToProps)(injectIntl(StatusContent))));