84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
/*
|
|
* Copyright (C) 2026 Fluxer Contributors
|
|
*
|
|
* This file is part of Fluxer.
|
|
*
|
|
* Fluxer is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* Fluxer is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with Fluxer. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
import {clsx} from 'clsx';
|
|
import {observer} from 'mobx-react-lite';
|
|
import React from 'react';
|
|
import * as AuthenticationActionCreators from '~/actions/AuthenticationActionCreators';
|
|
import * as ModalActionCreators from '~/actions/ModalActionCreators';
|
|
import {modal} from '~/actions/ModalActionCreators';
|
|
import {SplashScreen} from '~/components/layout/SplashScreen';
|
|
import RequiredActionModal from '~/components/modals/RequiredActionModal';
|
|
import {NewDeviceMonitoringManager} from '~/components/voice/NewDeviceMonitoringManager';
|
|
import {VoiceReconnectionManager} from '~/components/voice/VoiceReconnectionManager';
|
|
import AccountManager from '~/stores/AccountManager';
|
|
import AuthenticationStore from '~/stores/AuthenticationStore';
|
|
import ConnectionStore from '~/stores/ConnectionStore';
|
|
import InitializationStore from '~/stores/InitializationStore';
|
|
import ModalStore from '~/stores/ModalStore';
|
|
import UserStore from '~/stores/UserStore';
|
|
import styles from './AppLayout.module.css';
|
|
import {useAppLayoutState} from './app-layout/hooks';
|
|
|
|
export const AppLayout = observer(({children}: {children: React.ReactNode}) => {
|
|
const isAuthenticated = AuthenticationStore.isAuthenticated;
|
|
const socket = ConnectionStore.socket;
|
|
const user = UserStore.currentUser;
|
|
|
|
const appState = useAppLayoutState();
|
|
|
|
React.useEffect(() => {
|
|
if (InitializationStore.isLoading) {
|
|
return;
|
|
}
|
|
void AuthenticationActionCreators.ensureSessionStarted();
|
|
}, [
|
|
isAuthenticated,
|
|
socket,
|
|
ConnectionStore.isConnected,
|
|
ConnectionStore.isConnecting,
|
|
InitializationStore.isLoading,
|
|
AccountManager.isSwitching,
|
|
]);
|
|
|
|
React.useEffect(() => {
|
|
const hasRequired = !!(user?.requiredActions && user.requiredActions.length > 0);
|
|
const isOpen = ModalStore.getModal()?.key === 'required-actions';
|
|
if (hasRequired && !isOpen) {
|
|
ModalActionCreators.pushWithKey(
|
|
modal(() => <RequiredActionModal mock={false} />),
|
|
'required-actions',
|
|
);
|
|
}
|
|
if (!hasRequired && isOpen) {
|
|
ModalActionCreators.pop();
|
|
}
|
|
}, [user?.requiredActions?.length]);
|
|
|
|
return (
|
|
<>
|
|
{isAuthenticated && <SplashScreen />}
|
|
|
|
{isAuthenticated && socket && <VoiceReconnectionManager />}
|
|
{isAuthenticated && <NewDeviceMonitoringManager />}
|
|
<div className={clsx(styles.appLayout, appState.isStandalone && styles.appLayoutStandalone)}>{children}</div>
|
|
</>
|
|
);
|
|
});
|