From 04eac8a95e987e27812b11b0f415c0030fb73b2b Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 21 Apr 2022 11:47:28 -0500 Subject: [PATCH] SoapboxMount: convert to React.FC --- app/soapbox/containers/soapbox.js | 247 ++++++++++++------------------ 1 file changed, 96 insertions(+), 151 deletions(-) diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js index 413160092..15984bb09 100644 --- a/app/soapbox/containers/soapbox.js +++ b/app/soapbox/containers/soapbox.js @@ -1,19 +1,15 @@ 'use strict'; import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; +import React, { useState, useEffect } from 'react'; import { IntlProvider } from 'react-intl'; -import { Provider, connect } from 'react-redux'; +import { Provider, useDispatch } from 'react-redux'; import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom'; import { ScrollContext } from 'react-router-scroll-4'; import { loadInstance } from 'soapbox/actions/instance'; import { fetchMe } from 'soapbox/actions/me'; -import { getSettings } from 'soapbox/actions/settings'; import { loadSoapboxConfig } from 'soapbox/actions/soapbox'; -import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import { fetchVerificationConfig } from 'soapbox/actions/verification'; import { FE_SUBDIRECTORY } from 'soapbox/build_config'; import Helmet from 'soapbox/components/helmet'; @@ -23,10 +19,9 @@ import PublicLayout from 'soapbox/features/public_layout'; import NotificationsContainer from 'soapbox/features/ui/containers/notifications_container'; import WaitlistPage from 'soapbox/features/verification/waitlist_page'; import { createGlobals } from 'soapbox/globals'; -import messages from 'soapbox/locales/messages'; -import { makeGetAccount } from 'soapbox/selectors'; +import { useAppSelector, useOwnAccount, useSoapboxConfig, useSettings } from 'soapbox/hooks'; +import MESSAGES from 'soapbox/locales/messages'; import { getFeatures } from 'soapbox/utils/features'; -import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types'; import { generateThemeCss } from 'soapbox/utils/theme'; import { ONBOARDING_VERSION } from '../actions/onboarding'; @@ -35,7 +30,8 @@ import ErrorBoundary from '../components/error_boundary'; import UI from '../features/ui'; import { store } from '../store'; -const validLocale = locale => Object.keys(messages).includes(locale); +/** Ensure the given locale exists in our codebase */ +const validLocale = locale => Object.keys(MESSAGES).includes(locale); // Configure global functions for developers createGlobals(store); @@ -66,175 +62,124 @@ const loadInitial = () => { }; }; -const makeAccount = makeGetAccount(); +const SoapboxMount = () => { + const dispatch = useDispatch(); + + const me = useAppSelector(state => state.me); + const account = useOwnAccount(); + const settings = useSettings(); + const soapboxConfig = useSoapboxConfig(); + + const locale = validLocale(settings.get('locale')) ? settings.get('locale') : 'en'; -const mapStateToProps = (state) => { - const me = state.get('me'); - const account = makeAccount(state, me); - const settings = getSettings(state); const needsOnboarding = settings.get('onboardingVersion') < ONBOARDING_VERSION; - const soapboxConfig = getSoapboxConfig(state); - const locale = settings.get('locale'); + const singleUserMode = soapboxConfig.singleUserMode && soapboxConfig.singleUserModeProfile; - const singleUserMode = soapboxConfig.get('singleUserMode') && soapboxConfig.get('singleUserModeProfile'); + const [messages, setMessages] = useState({}); + const [localeLoading, setLocaleLoading] = useState(true); + const [isLoaded, setIsLoaded] = useState(false); - return { - me, - account, - reduceMotion: settings.get('reduceMotion'), - underlineLinks: settings.get('underlineLinks'), - systemFont: settings.get('systemFont'), - dyslexicFont: settings.get('dyslexicFont'), - demetricator: settings.get('demetricator'), - locale: validLocale(locale) ? locale : 'en', - themeCss: generateThemeCss(soapboxConfig), - brandColor: soapboxConfig.get('brandColor'), - appleAppId: soapboxConfig.get('appleAppId'), - themeMode: settings.get('themeMode'), - singleUserMode, - needsOnboarding, - }; -}; + const themeCss = generateThemeCss(soapboxConfig); -@connect(mapStateToProps) -class SoapboxMount extends React.PureComponent { - - static propTypes = { - me: SoapboxPropTypes.me, - account: ImmutablePropTypes.record, - reduceMotion: PropTypes.bool, - underlineLinks: PropTypes.bool, - systemFont: PropTypes.bool, - needsOnboarding: PropTypes.bool, - dyslexicFont: PropTypes.bool, - demetricator: PropTypes.bool, - locale: PropTypes.string.isRequired, - themeCss: PropTypes.string, - themeMode: PropTypes.string, - brandColor: PropTypes.string, - appleAppId: PropTypes.string, - dispatch: PropTypes.func, - singleUserMode: PropTypes.bool, - }; - - state = { - messages: {}, - localeLoading: true, - isLoaded: false, - } - - setMessages = () => { - messages[this.props.locale]().then(messages => { - this.setState({ messages, localeLoading: false }); + // Load the user's locale + useEffect(() => { + MESSAGES[locale]().then(messages => { + setMessages(messages); + setLocaleLoading(false); }).catch(() => {}); - } + }, [locale]); - maybeUpdateMessages = prevProps => { - if (this.props.locale !== prevProps.locale) { - this.setMessages(); - } - } - - componentDidMount() { - this.setMessages(); - - this.props.dispatch(loadInitial()).then(() => { - this.setState({ isLoaded: true }); + // Load initial data from the API + useEffect(() => { + dispatch(loadInitial()).then(() => { + setIsLoaded(true); }).catch(() => { - this.setState({ isLoaded: false }); + setIsLoaded(false); }); - } + }); - componentDidUpdate(prevProps) { - this.maybeUpdateMessages(prevProps); - } - - shouldUpdateScroll(prevRouterProps, { location }) { + const shouldUpdateScroll = (prevRouterProps, { location }) => { return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey); - } + }; - render() { - const { me, account, themeCss, locale, needsOnboarding, singleUserMode } = this.props; - if (me === null) return null; - if (me && !account) return null; - if (!this.state.isLoaded) return null; - if (this.state.localeLoading) return null; + if (me === null) return null; + if (me && !account) return null; + if (!isLoaded) return null; + if (localeLoading) return null; - const waitlisted = account && !account.getIn(['source', 'approved'], true); - - if (account && !waitlisted && needsOnboarding) { - return ( - - - - - {themeCss && } - - - - - - - - - - - ); - } - - const bodyClass = classNames('bg-white dark:bg-slate-900 text-base', { - 'no-reduce-motion': !this.props.reduceMotion, - 'underline-links': this.props.underlineLinks, - 'dyslexic': this.props.dyslexicFont, - 'demetricator': this.props.demetricator, - }); + const waitlisted = account && !account.getIn(['source', 'approved'], true); + if (account && !waitlisted && needsOnboarding) { return ( - + - + {themeCss && } - - - {this.props.appleAppId && ( - - )} + - <> - - - - - {waitlisted && } />} - - {!me && (singleUserMode - ? - : )} - - {!me && } - - - - - - - - - - - - + + ); } -} + const bodyClass = classNames('bg-white dark:bg-slate-900 text-base', { + 'no-reduce-motion': !settings.get('reduceMotion'), + 'underline-links': settings.get('underlineLinks'), + 'dyslexic': settings.get('dyslexicFont'), + 'demetricator': settings.get('demetricator'), + }); + + return ( + + + + + {themeCss && } + + + {soapboxConfig.appleAppId && ( + + )} + + + + + <> + + + + + {waitlisted && } />} + + {!me && (singleUserMode + ? + : )} + + {!me && } + + + + + + + + + + + + + + + + ); +}; const Soapbox = () => { return (