'use strict';
import classNames from 'classnames';
import React, { useState, useEffect } from 'react';
import { IntlProvider } from 'react-intl';
import { Provider } from 'react-redux';
import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom';
// @ts-ignore: it doesn't have types
import { ScrollContext } from 'react-router-scroll-4';
import { loadInstance } from 'soapbox/actions/instance';
import { fetchMe } from 'soapbox/actions/me';
import { loadSoapboxConfig, getSoapboxConfig } from 'soapbox/actions/soapbox';
import { fetchVerificationConfig } from 'soapbox/actions/verification';
import * as BuildConfig from 'soapbox/build_config';
import Helmet from 'soapbox/components/helmet';
import LoadingScreen from 'soapbox/components/loading-screen';
import AuthLayout from 'soapbox/features/auth_layout';
import PublicLayout from 'soapbox/features/public_layout';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import {
ModalContainer,
NotificationsContainer,
OnboardingWizard,
WaitlistPage,
} from 'soapbox/features/ui/util/async-components';
import { createGlobals } from 'soapbox/globals';
import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures, useSoapboxConfig, useSettings, useSystemTheme } from 'soapbox/hooks';
import MESSAGES from 'soapbox/locales/messages';
import { useCachedLocationHandler } from 'soapbox/utils/redirect';
import { generateThemeCss } from 'soapbox/utils/theme';
import { checkOnboardingStatus } from '../actions/onboarding';
import { preload } from '../actions/preload';
import ErrorBoundary from '../components/error_boundary';
import UI from '../features/ui';
import { store } from '../store';
/** Ensure the given locale exists in our codebase */
const validLocale = (locale: string): boolean => Object.keys(MESSAGES).includes(locale);
// Configure global functions for developers
createGlobals(store);
// Preload happens synchronously
store.dispatch(preload() as any);
// This happens synchronously
store.dispatch(checkOnboardingStatus() as any);
/** Load initial data from the backend */
const loadInitial = () => {
// @ts-ignore
return async(dispatch, getState) => {
// Await for authenticated fetch
await dispatch(fetchMe());
// Await for feature detection
await dispatch(loadInstance());
// Await for configuration
await dispatch(loadSoapboxConfig());
const state = getState();
const soapboxConfig = getSoapboxConfig(state);
const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
if (pepeEnabled && !state.me) {
await dispatch(fetchVerificationConfig());
}
};
};
/** Highest level node with the Redux store. */
const SoapboxMount = () => {
useCachedLocationHandler();
const dispatch = useAppDispatch();
const me = useAppSelector(state => state.me);
const instance = useAppSelector(state => state.instance);
const account = useOwnAccount();
const settings = useSettings();
const soapboxConfig = useSoapboxConfig();
const features = useFeatures();
const swUpdating = useAppSelector(state => state.meta.swUpdating);
const locale = validLocale(settings.get('locale')) ? settings.get('locale') : 'en';
const waitlisted = account && !account.source.get('approved', true);
const needsOnboarding = useAppSelector(state => state.onboarding.needsOnboarding);
const showOnboarding = account && !waitlisted && needsOnboarding;
const singleUserMode = soapboxConfig.singleUserMode && soapboxConfig.singleUserModeProfile;
const [messages, setMessages] = useState>({});
const [localeLoading, setLocaleLoading] = useState(true);
const [isLoaded, setIsLoaded] = useState(false);
const systemTheme = useSystemTheme();
const userTheme = settings.get('themeMode');
const darkMode = userTheme === 'dark' || (userTheme === 'system' && systemTheme === 'dark');
const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
const themeCss = generateThemeCss(soapboxConfig);
// Load the user's locale
useEffect(() => {
MESSAGES[locale]().then(messages => {
setMessages(messages);
setLocaleLoading(false);
}).catch(() => { });
}, [locale]);
// Load initial data from the API
useEffect(() => {
dispatch(loadInitial()).then(() => {
setIsLoaded(true);
}).catch(() => {
setIsLoaded(true);
});
}, []);
// @ts-ignore: I don't actually know what these should be, lol
const shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey);
};
/** Whether to display a loading indicator. */
const showLoading = [
me === null,
me && !account,
!isLoaded,
localeLoading,
swUpdating,
].some(Boolean);
const bodyClass = classNames('bg-white dark:bg-slate-900 text-base h-full', {
'no-reduce-motion': !settings.get('reduceMotion'),
'underline-links': settings.get('underlineLinks'),
'dyslexic': settings.get('dyslexicFont'),
'demetricator': settings.get('demetricator'),
});
const helmet = (
{themeCss && }
{darkMode && }
);
/** Render the onboarding flow. */
const renderOnboarding = () => (
{(Component) => }
);
/** Render the auth layout or UI. */
const renderSwitch = () => (
{/* Redirect signup route depending on Pepe enablement. */}
{/* We should prefer using /signup in components. */}
{pepeEnabled ? (
) : (
)}
{waitlisted && (
(
{(Component) => }
)}
/>
)}
{!me && (singleUserMode
?
: )}
{!me && (
)}
{(features.accountCreation && instance.registrations) && (
)}
{pepeEnabled && (
)}
);
/** Render the onboarding flow or UI. */
const renderBody = () => {
if (showOnboarding) {
return renderOnboarding();
} else {
return renderSwitch();
}
};
// intl is part of loading.
// It's important nothing in here depends on intl.
if (showLoading) {
return (
<>
{helmet}
>
);
}
return (
{helmet}
<>
{renderBody()}
{(Component) => }
{Component => }
>
);
};
/** The root React node of the application. */
const Soapbox = () => {
return (
);
};
export default Soapbox;