Add useRegistrationStatus hook

app/soapbox/features/auth-layout/index.tsx

@@ -4,7 +4,7 @@ import { Link, Redirect, Route, Switch, useHistory, useLocation } from 'react-ro
 
 import LandingGradient from 'soapbox/components/landing-gradient';
 import SiteLogo from 'soapbox/components/site-logo';
-import { useAppSelector, useFeatures, useSoapboxConfig, useOwnAccount, useInstance } from 'soapbox/hooks';
+import { useOwnAccount, useInstance, useRegistrationStatus } from 'soapbox/hooks';
 
 import { Button, Card, CardBody } from '../../components/ui';
 import LoginPage from '../auth-login/components/login-page';
@@ -28,14 +28,8 @@ const AuthLayout = () => {
 
   const account = useOwnAccount();
   const instance = useInstance();
-  const features = useFeatures();
-  const soapboxConfig = useSoapboxConfig();
-
-  const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
-  const isOpen = features.accountCreation && instance.registrations;
-  const pepeOpen = useAppSelector(state => state.verification.instance.get('registrations') === true);
+  const { isOpen } = useRegistrationStatus();
   const isLoginPage = history.location.pathname === '/login';
-  const shouldShowRegisterLink = (isLoginPage && (isOpen || (pepeEnabled && pepeOpen)));
 
   return (
     <div className='h-full'>
@@ -50,7 +44,7 @@ const AuthLayout = () => {
               </Link>
             </div>
 
-            {shouldShowRegisterLink && (
+            {(isLoginPage && isOpen) && (
               <div className='relative z-10 ml-auto flex items-center'>
                 <Button
                   theme='tertiary'

app/soapbox/features/landing-page/index.tsx

@@ -6,17 +6,15 @@ import Markup from 'soapbox/components/markup';
 import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification-badge';
 import RegistrationForm from 'soapbox/features/auth-login/components/registration-form';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance, useSoapboxConfig } from 'soapbox/hooks';
+import { useAppDispatch, useFeatures, useInstance, useRegistrationStatus, useSoapboxConfig } from 'soapbox/hooks';
 import { capitalize } from 'soapbox/utils/strings';
 
 const LandingPage = () => {
   const dispatch = useAppDispatch();
   const features = useFeatures();
   const soapboxConfig = useSoapboxConfig();
-  const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
-
+  const { pepeEnabled, pepeOpen } = useRegistrationStatus();
   const instance = useInstance();
-  const pepeOpen = useAppSelector(state => state.verification.instance.get('registrations') === true);
 
   /** Registrations are closed */
   const renderClosed = () => {

app/soapbox/features/public-layout/components/header.tsx

@@ -7,7 +7,7 @@ import { fetchInstance } from 'soapbox/actions/instance';
 import { openModal } from 'soapbox/actions/modals';
 import SiteLogo from 'soapbox/components/site-logo';
 import { Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
-import { useAppSelector, useFeatures, useSoapboxConfig, useOwnAccount, useInstance, useAppDispatch } from 'soapbox/hooks';
+import { useSoapboxConfig, useOwnAccount, useAppDispatch, useRegistrationStatus } from 'soapbox/hooks';
 
 import Sonar from './sonar';
 
@@ -29,14 +29,9 @@ const Header = () => {
 
   const account = useOwnAccount();
   const soapboxConfig = useSoapboxConfig();
-  const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
+  const { isOpen } = useRegistrationStatus();
   const { links } = soapboxConfig;
 
-  const features = useFeatures();
-  const instance = useInstance();
-  const isOpen = features.accountCreation && instance.registrations;
-  const pepeOpen = useAppSelector(state => state.verification.instance.get('registrations') === true);
-
   const [isLoading, setLoading] = React.useState(false);
   const [username, setUsername] = React.useState('');
   const [password, setPassword] = React.useState('');
@@ -111,7 +106,7 @@ const Header = () => {
                   {intl.formatMessage(messages.login)}
                 </Button>
 
-                {(isOpen || pepeEnabled && pepeOpen) && (
+                {isOpen && (
                   <Button
                     to='/signup'
                     theme='primary'

app/soapbox/features/ui/components/cta-banner.tsx

@@ -2,14 +2,15 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Banner, Button, HStack, Stack, Text } from 'soapbox/components/ui';
-import { useAppSelector, useInstance, useSoapboxConfig } from 'soapbox/hooks';
+import { useAppSelector, useInstance, useRegistrationStatus, useSoapboxConfig } from 'soapbox/hooks';
 
 const CtaBanner = () => {
   const instance = useInstance();
+  const { isOpen } = useRegistrationStatus();
   const { displayCta } = useSoapboxConfig();
   const me = useAppSelector((state) => state.me);
 
-  if (me || !displayCta || !instance.registrations) return null;
+  if (me || !displayCta || !isOpen) return null;
 
   return (
     <div data-testid='cta-banner' className='hidden lg:block'>

app/soapbox/features/ui/components/modals/landing-page-modal.tsx

@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import SiteLogo from 'soapbox/components/site-logo';
 import { Text, Button, Icon, Modal } from 'soapbox/components/ui';
-import { useAppSelector, useFeatures, useInstance, useSoapboxConfig } from 'soapbox/hooks';
+import { useRegistrationStatus, useSoapboxConfig } from 'soapbox/hooks';
 
 const messages = defineMessages({
   download: { id: 'landing_page_modal.download', defaultMessage: 'Download' },
@@ -22,15 +22,9 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
   const intl = useIntl();
 
   const soapboxConfig = useSoapboxConfig();
-  const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
+  const { isOpen } = useRegistrationStatus();
   const { links } = soapboxConfig;
 
-  const instance = useInstance();
-  const features = useFeatures();
-
-  const isOpen = features.accountCreation && instance.registrations;
-  const pepeOpen = useAppSelector(state => state.verification.instance.get('registrations') === true);
-
   return (
     <Modal
       title={<SiteLogo alt='Logo' className='h-6 w-auto cursor-pointer' />}
@@ -63,7 +57,7 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
             {intl.formatMessage(messages.login)}
           </Button>
 
-          {(isOpen || pepeEnabled && pepeOpen) && (
+          {isOpen && (
             <Button to='/signup' theme='primary' block>
               {intl.formatMessage(messages.register)}
             </Button>

app/soapbox/features/ui/components/navbar.tsx

@@ -9,7 +9,7 @@ import { openSidebar } from 'soapbox/actions/sidebar';
 import SiteLogo from 'soapbox/components/site-logo';
 import { Avatar, Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
 import Search from 'soapbox/features/compose/components/search';
-import { useAppDispatch, useInstance, useOwnAccount } from 'soapbox/hooks';
+import { useAppDispatch, useOwnAccount, useRegistrationStatus } from 'soapbox/hooks';
 
 import ProfileDropdown from './profile-dropdown';
 
@@ -25,11 +25,9 @@ const messages = defineMessages({
 const Navbar = () => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
-
-  const node = useRef(null);
-
+  const { isOpen } = useRegistrationStatus();
   const account = useOwnAccount();
-  const instance = useInstance();
+  const node = useRef(null);
 
   const [isLoading, setLoading] = useState<boolean>(false);
   const [username, setUsername] = useState<string>('');
@@ -150,7 +148,7 @@ const Navbar = () => {
                     <FormattedMessage id='account.login' defaultMessage='Log In' />
                   </Button>
 
-                  {!instance.registrations && (
+                  {!isOpen && (
                     <Button theme='primary' to='/signup' size='sm'>
                       <FormattedMessage id='account.register' defaultMessage='Sign up' />
                     </Button>

app/soapbox/features/ui/components/panels/sign-up-panel.tsx

@@ -2,13 +2,14 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Button, Stack, Text } from 'soapbox/components/ui';
-import { useAppSelector, useInstance } from 'soapbox/hooks';
+import { useAppSelector, useInstance, useRegistrationStatus } from 'soapbox/hooks';
 
 const SignUpPanel = () => {
   const instance = useInstance();
+  const { isOpen } = useRegistrationStatus();
   const me = useAppSelector((state) => state.me);
 
-  if (me || !instance.registrations) return null;
+  if (me || !isOpen) return null;
 
   return (
     <Stack space={2}>

app/soapbox/hooks/index.ts

@@ -12,7 +12,8 @@ export { useOnScreen } from './useOnScreen';
 export { useOwnAccount } from './useOwnAccount';
 export { usePrevious } from './usePrevious';
 export { useRefEventHandler } from './useRefEventHandler';
+export { useRegistrationStatus } from './useRegistrationStatus';
 export { useSettings } from './useSettings';
 export { useSoapboxConfig } from './useSoapboxConfig';
 export { useSystemTheme } from './useSystemTheme';
-export { useTheme } from './useTheme';
+export { useTheme } from './useTheme';

app/soapbox/hooks/useRegistrationStatus.ts

@@ -0,0 +1,22 @@
+import { useAppSelector } from './useAppSelector';
+import { useFeatures } from './useFeatures';
+import { useInstance } from './useInstance';
+import { useSoapboxConfig } from './useSoapboxConfig';
+
+export const useRegistrationStatus = () => {
+  const instance = useInstance();
+  const features = useFeatures();
+  const soapboxConfig = useSoapboxConfig();
+
+  const pepeOpen = useAppSelector(state => state.verification.instance.get('registrations') === true);
+  const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
+
+  return {
+    /** Registrations are open, either through Pepe or traditional account creation. */
+    isOpen: (features.accountCreation && instance.registrations) || (pepeEnabled && pepeOpen),
+    /** Whether Pepe is open. */
+    pepeOpen,
+    /** Whether Pepe is enabled. */
+    pepeEnabled,
+  };
+};