[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/features/ui/components/compose_panel.jsx

@@ -7,16 +7,13 @@ import { mountCompose, unmountCompose } from 'flavours/glitch/actions/compose';
 import ServerBanner from 'flavours/glitch/components/server_banner';
 import ComposeFormContainer from 'flavours/glitch/features/compose/containers/compose_form_container';
 import SearchContainer from 'flavours/glitch/features/compose/containers/search_container';
+import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 
 import LinkFooter from './link_footer';
 
 class ComposePanel extends PureComponent {
-
-  static contextTypes = {
-    identity: PropTypes.object.isRequired,
-  };
-
   static propTypes = {
+    identity: identityContextPropShape,
     dispatch: PropTypes.func.isRequired,
   };
 
@@ -31,7 +28,7 @@ class ComposePanel extends PureComponent {
   }
 
   render() {
-    const { signedIn } = this.context.identity;
+    const { signedIn } = this.props.identity;
 
     return (
       <div className='compose-panel'>
@@ -55,4 +52,4 @@ class ComposePanel extends PureComponent {
 
 }
 
-export default connect()(ComposePanel);
+export default connect()(withIdentity(ComposePanel));

app/javascript/flavours/glitch/features/ui/components/header.jsx

@@ -14,6 +14,7 @@ import { Avatar } from 'flavours/glitch/components/avatar';
 import { Icon } from 'flavours/glitch/components/icon';
 import { WordmarkLogo, SymbolLogo } from 'flavours/glitch/components/logo';
 import { Permalink } from 'flavours/glitch/components/permalink';
+import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { registrationsOpen, me, sso_redirect } from 'flavours/glitch/initial_state';
 
 const Account = connect(state => ({
@@ -42,12 +43,8 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 class Header extends PureComponent {
-
-  static contextTypes = {
-    identity: PropTypes.object,
-  };
-
   static propTypes = {
+    identity: identityContextPropShape,
     openClosedRegistrationsModal: PropTypes.func,
     location: PropTypes.object,
     signupUrl: PropTypes.string.isRequired,
@@ -61,7 +58,7 @@ class Header extends PureComponent {
   }
 
   render () {
-    const { signedIn } = this.context.identity;
+    const { signedIn } = this.props.identity;
     const { location, openClosedRegistrationsModal, signupUrl, intl } = this.props;
 
     let content;
@@ -122,4 +119,4 @@ class Header extends PureComponent {
 
 }
 
-export default injectIntl(withRouter(connect(mapStateToProps, mapDispatchToProps)(Header)));
+export default injectIntl(withRouter(withIdentity(connect(mapStateToProps, mapDispatchToProps)(Header))));

app/javascript/flavours/glitch/features/ui/components/link_footer.jsx

@@ -8,6 +8,7 @@ import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 
 import { openModal } from 'flavours/glitch/actions/modal';
+import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { domain, version, source_url, statusPageUrl, profile_directory as profileDirectory } from 'flavours/glitch/initial_state';
 import { PERMISSION_INVITE_USERS } from 'flavours/glitch/permissions';
 import { logOut } from 'flavours/glitch/utils/log_out';
@@ -32,12 +33,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
 });
 
 class LinkFooter extends PureComponent {
-
-  static contextTypes = {
-    identity: PropTypes.object,
-  };
-
   static propTypes = {
+    identity: identityContextPropShape,
     multiColumn: PropTypes.bool,
     onLogout: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
@@ -53,7 +50,7 @@ class LinkFooter extends PureComponent {
   };
 
   render () {
-    const { signedIn, permissions } = this.context.identity;
+    const { signedIn, permissions } = this.props.identity;
     const { multiColumn } = this.props;
 
     const canInvite = signedIn && ((permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS);
@@ -108,4 +105,4 @@ class LinkFooter extends PureComponent {
 
 }
 
-export default injectIntl(connect(null, mapDispatchToProps)(LinkFooter));
+export default injectIntl(withIdentity(connect(null, mapDispatchToProps)(LinkFooter)));

app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx

@@ -30,6 +30,7 @@ import StarIcon from '@/material-icons/400-24px/star.svg?react';
 import { fetchFollowRequests } from 'flavours/glitch/actions/accounts';
 import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge';
 import { NavigationPortal } from 'flavours/glitch/components/navigation_portal';
+import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { timelinePreview, trendsEnabled } from 'flavours/glitch/initial_state';
 import { transientSingleColumn } from 'flavours/glitch/is_mobile';
 import { preferencesLink } from 'flavours/glitch/utils/backend_links';
@@ -98,12 +99,8 @@ const FollowRequestsLink = () => {
 };
 
 class NavigationPanel extends Component {
-
-  static contextTypes = {
-    identity: PropTypes.object.isRequired,
-  };
-
   static propTypes = {
+    identity: identityContextPropShape,
     intl: PropTypes.object.isRequired,
     onOpenSettings: PropTypes.func,
   };
@@ -114,7 +111,7 @@ class NavigationPanel extends Component {
 
   render () {
     const { intl, onOpenSettings } = this.props;
-    const { signedIn, disabledAccountId } = this.context.identity;
+    const { signedIn, disabledAccountId } = this.props.identity;
 
     let banner = undefined;
 
@@ -188,4 +185,4 @@ class NavigationPanel extends Component {
 
 }
 
-export default injectIntl(NavigationPanel);
+export default injectIntl(withIdentity(NavigationPanel));

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

@@ -17,6 +17,7 @@ import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'flavour
 import { INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding';
 import { Permalink } from 'flavours/glitch/components/permalink';
 import { PictureInPicture } from 'flavours/glitch/features/picture_in_picture';
+import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { layoutFromWindow } from 'flavours/glitch/is_mobile';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
@@ -129,12 +130,8 @@ const keyMap = {
 };
 
 class SwitchingColumnsArea extends PureComponent {
-
-  static contextTypes = {
-    identity: PropTypes.object,
-  };
-
   static propTypes = {
+    identity: identityContextPropShape,
     children: PropTypes.node,
     location: PropTypes.object,
     singleColumn: PropTypes.bool,
@@ -169,7 +166,7 @@ class SwitchingColumnsArea extends PureComponent {
 
   render () {
     const { children, singleColumn } = this.props;
-    const { signedIn } = this.context.identity;
+    const { signedIn } = this.props.identity;
     const pathName = this.props.location.pathname;
 
     let redirect;
@@ -262,12 +259,8 @@ class SwitchingColumnsArea extends PureComponent {
 }
 
 class UI extends PureComponent {
-
-  static contextTypes = {
-    identity: PropTypes.object.isRequired,
-  };
-
   static propTypes = {
+    identity: identityContextPropShape,
     dispatch: PropTypes.func.isRequired,
     children: PropTypes.node,
     isWide: PropTypes.bool,
@@ -323,7 +316,7 @@ class UI extends PureComponent {
       this.dragTargets.push(e.target);
     }
 
-    if (e.dataTransfer && Array.from(e.dataTransfer.types).includes('Files') && this.props.canUploadMore && this.context.identity.signedIn) {
+    if (e.dataTransfer && Array.from(e.dataTransfer.types).includes('Files') && this.props.canUploadMore && this.props.identity.signedIn) {
       this.setState({ draggingOver: true });
     }
   };
@@ -351,7 +344,7 @@ class UI extends PureComponent {
     this.setState({ draggingOver: false });
     this.dragTargets = [];
 
-    if (e.dataTransfer && e.dataTransfer.files.length >= 1 && this.props.canUploadMore && this.context.identity.signedIn) {
+    if (e.dataTransfer && e.dataTransfer.files.length >= 1 && this.props.canUploadMore && this.props.identity.signedIn) {
       this.props.dispatch(uploadCompose(e.dataTransfer.files));
     }
   };
@@ -403,7 +396,7 @@ class UI extends PureComponent {
   };
 
   componentDidMount () {
-    const { signedIn } = this.context.identity;
+    const { signedIn } = this.props.identity;
 
     window.addEventListener('beforeunload', this.handleBeforeUnload, false);
     window.addEventListener('resize', this.handleResize, { passive: true });
@@ -649,7 +642,7 @@ class UI extends PureComponent {
 
           <Header />
 
-          <SwitchingColumnsArea location={location} singleColumn={layout === 'mobile' || layout === 'single-column'}>
+          <SwitchingColumnsArea identity={this.props.identity} location={location} singleColumn={layout === 'mobile' || layout === 'single-column'}>
             {children}
           </SwitchingColumnsArea>
 
@@ -665,4 +658,4 @@ class UI extends PureComponent {
 
 }
 
-export default connect(mapStateToProps)(injectIntl(withRouter(UI)));
+export default connect(mapStateToProps)(injectIntl(withRouter(withIdentity(UI))));