Feat: Add /logout route, redirect there from logout button

src/components/Logout.tsx

@@ -0,0 +1,37 @@
+import useApollo from '../hooks/useApollo';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useCallback, useContext } from 'react';
+import { WebPushContext } from '@/context/WebPushProvider';
+import { WEBPUSH_ACTIVE } from '@/config';
+import { logError } from '@/log';
+import CenterLoadingSpinner from '@/components/CenterLoadingSpinner';
+
+export default function Logout() {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const locState = location.state as { deactivated?: boolean };
+
+    const useLogout = () => {
+        const { logout } = useApollo();
+        const { unsubscribe } = useContext(WebPushContext);
+        return useCallback(async () => {
+            if (WEBPUSH_ACTIVE) {
+                try {
+                    await unsubscribe();
+                } catch (error) {
+                    logError('WebPush', 'Failed to unsubscribe', error);
+                }
+            }
+            try {
+                await logout();
+            } catch (error) {
+                logError('Authentication', 'Failed to logout', error);
+            }
+        }, []);
+    };
+
+    const logout = useLogout();
+    logout().then(() => navigate('/welcome', { state: locState }));
+
+    return <CenterLoadingSpinner />;
+}

src/modals/DeactivateAccountModal.tsx

@@ -7,7 +7,6 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useUserType } from '../hooks/useApollo';
 import DisableableButton from '../components/DisablebleButton';
-import useLogout from '../hooks/useLogout';
 
 // corresponding dissolve reason ids in translation file
 // for now just loop through 0-5 and 0-6 (+1 in loop)
@@ -25,7 +24,6 @@ const DeactivateAccountModal: React.FC<Props> = ({ isOpen, onCloseModal }) => {
     const { space } = useTheme();
     const navigate = useNavigate();
     const { trackEvent } = useMatomo();
-    const logout = useLogout();
     const { t } = useTranslation();
 
     const userType = useUserType();
@@ -76,15 +74,14 @@ const DeactivateAccountModal: React.FC<Props> = ({ isOpen, onCloseModal }) => {
                     name: 'Account deaktivieren',
                     documentTitle: 'Deactivate',
                 });
-                logout();
-                navigate('/welcome', { state: { deactivated: true } });
+                navigate('/logout', { state: { deactivated: true } });
             } else {
                 showError();
             }
         } catch (e) {
             showError();
         }
-    }, [reason, deactivateAccount, isOther, t, userType, other, onCloseModal, trackEvent, logout, navigate, toast]);
+    }, [reason, deactivateAccount, isOther, t, userType, other, onCloseModal, trackEvent, navigate, toast]);
 
     const isValidInput = useMemo(() => {
         if (!reason) return false;

src/pages/Settings.tsx

@@ -11,14 +11,12 @@ import ProfileSettingRow from '../widgets/ProfileSettingRow';
 import { SwitchLanguageModal } from '../modals/SwitchLanguageModal';
 import { GAMIFICATION_ACTIVE } from '../config';
 import { InstallationContext } from '../context/InstallationProvider';
-import useLogout from '../hooks/useLogout';
 
 const Settings: React.FC = () => {
     const { space, sizes } = useTheme();
     const { t } = useTranslation();
     const navigate = useNavigate();
     const { user } = useApollo();
-    const logout = useLogout();
     const tabspace = 3;
     const { trackPageView, trackEvent } = useMatomo();
     const userType = useUserType();
@@ -112,7 +110,7 @@ const Settings: React.FC = () => {
                                         name: 'Abmelden im Account',
                                         documentTitle: 'Logout',
                                     });
-                                    logout();
+                                    navigate('/logout');
                                 }}
                             />
                         </Column>

src/routing/Navigator.tsx

@@ -10,6 +10,7 @@ import LoginToken from '../pages/LoginToken';
 import { RequireAuth } from '../User';
 import FullPageModal from '../modals/FullPageModal';
 import { lazyWithRetry } from '../lazy';
+import Logout from '../components/Logout';
 
 // All other pages load lazy:
 const NavigatorLazy = lazyWithRetry(() => import('./NavigatorLazy'), { prefetch: true });
@@ -25,7 +26,7 @@ export default function Navigator() {
             <Routes>
                 <Route path="/login" element={<Login />} />
                 <Route path="/login-token" element={<LoginToken />} />
-
+                <Route path="/logout" element={<Logout />} />
                 <Route path="/welcome" element={<Welcome />} />
 
                 <Route

src/widgets/RequireScreeningSettingsDropdown.tsx

@@ -5,14 +5,14 @@ import { useTranslation } from 'react-i18next';
 import NotificationPreferencesModal from '../modals/NotificationPreferencesModal';
 import DeactivateAccountModal from '../modals/DeactivateAccountModal';
 import { ContactSupportModal } from '../modals/ContactSupportModal';
-import useLogout from '../hooks/useLogout';
+import { useNavigate } from 'react-router-dom';
 
 const RequireScreeningSettingsDropdown = () => {
     const { t } = useTranslation();
     const [isNotificationPrefencesOpen, setIsNotificationPreferencesOpen] = useState(false);
     const [isDeactivateAccountOpen, setIsDeactivateAccountOpen] = useState(false);
     const [isContactSupportOpen, setIsContactSupportOpen] = useState(false);
-    const logout = useLogout();
+    const navigate = useNavigate();
     return (
         <>
             <Menu
@@ -30,7 +30,7 @@ const RequireScreeningSettingsDropdown = () => {
                 <Menu.Item onPress={() => setIsContactSupportOpen(true)}>{t('requireScreening.contactSupport')}</Menu.Item>
                 <Divider />
                 <Menu.Item onPress={() => setIsDeactivateAccountOpen(true)}>{t('settings.account.deactivateAccount')}</Menu.Item>
-                <Menu.Item onPress={() => logout()}>{t('logout')}</Menu.Item>
+                <Menu.Item onPress={() => navigate('/logout')}>{t('logout')}</Menu.Item>
             </Menu>
             <DeactivateAccountModal isOpen={isDeactivateAccountOpen} onCloseModal={() => setIsDeactivateAccountOpen(false)} />
             <NotificationPreferencesModal isOpen={isNotificationPrefencesOpen} onClose={() => setIsNotificationPreferencesOpen(false)} />