chore(): move routing plugin, refactor it, cleanup

extensions/apps/antenna/src/components/pages/editor-page/editor-page.tsx

@@ -11,8 +11,8 @@ const EditorPage: React.FC<unknown> = () => {
   const {
     data: { authenticatedDID },
   } = useAkashaStore();
-  const { getRoutingPlugin } = useRootComponentProps();
-  const navigateTo = React.useRef(getRoutingPlugin().navigateTo);
+  const { getCorePlugins } = useRootComponentProps();
+  const navigateTo = React.useRef(getCorePlugins().routing.navigateTo);
   const { t } = useTranslation();
 
   return (

extensions/apps/antenna/src/components/pages/my-antenna-page/index.tsx

@@ -22,12 +22,12 @@ const MY_ANTENNA_OVERSCAN = 10;
 
 const MyAntennaPage: React.FC<unknown> = () => {
   const { t } = useTranslation('app-antenna');
-  const { getRoutingPlugin, navigateToModal, worldConfig } = useRootComponentProps();
+  const { getCorePlugins, navigateToModal, worldConfig } = useRootComponentProps();
   const { showNsfw } = useNsfwToggling();
   const {
     data: { authenticatedProfile },
   } = useAkashaStore();
-  const navigateTo = React.useRef(getRoutingPlugin().navigateTo);
+  const navigateTo = React.useRef(getCorePlugins().routing.navigateTo);
   const _navigateToModal = React.useRef(navigateToModal);
   const showLoginModal = React.useCallback(
     (redirectTo?: { modal: IModalNavigationOptions }, message?: string) => {

extensions/apps/antenna/src/extensions/beam-editor/beam-editor.tsx

@@ -32,7 +32,7 @@ export const BeamEditor: React.FC = () => {
 
   const { t } = useTranslation('app-antenna');
 
-  const { getRoutingPlugin } = useRootComponentProps();
+  const { getCorePlugins } = useRootComponentProps();
   /*
    * get the logged-in user info and info about their profile's NSFW property
    */
@@ -61,7 +61,7 @@ export const BeamEditor: React.FC = () => {
     updateBlockDisablePublishState,
   } = useBlocksPublishing({
     onComplete: beamData => {
-      getRoutingPlugin().navigateTo({
+      getCorePlugins().routing.navigateTo({
         appName: '@akashaorg/app-antenna',
         getNavigationUrl: navRoutes => `${navRoutes.Beam}/${beamData.document.id}`,
       });
@@ -85,6 +85,7 @@ export const BeamEditor: React.FC = () => {
     }
     // blocksInUse changes when you type due to checking for disablePublishing state
     // that's why we only care about the length here
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [blocksInUse.length]);
 
   useEffect(() => {

extensions/apps/antenna/src/extensions/slate-block/slate-readonly-block.tsx

@@ -9,9 +9,9 @@ export const SlateReadonlyBlock = (
 ) => {
   const content = decodeb64SlateContent(props.content.value, props.logger);
 
-  const { getRoutingPlugin } = useRootComponentProps();
+  const { getCorePlugins } = useRootComponentProps();
 
-  const navigateTo = React.useRef(getRoutingPlugin().navigateTo);
+  const navigateTo = React.useRef(getCorePlugins().routing.navigateTo);
 
   const handleMentionClick = profileDID => {
     navigateTo?.current({

extensions/apps/auth-app/src/components/pages/main-page.tsx

@@ -4,14 +4,14 @@ import Card from '@akashaorg/design-system-core/lib/components/Card';
 import { Outlet } from '@tanstack/react-router';
 
 const MainPage: React.FC = () => {
-  const { worldConfig, getRoutingPlugin } = useRootComponentProps();
+  const { worldConfig, getCorePlugins } = useRootComponentProps();
 
   const {
     data: { authenticatedDID, authenticatedProfile },
   } = useAkashaStore();
   const isLoggedIn = !!authenticatedDID;
 
-  const routingPlugin = useRef(getRoutingPlugin());
+  const routingPlugin = useRef(getCorePlugins().routing);
   useEffect(() => {
     const searchParam = new URLSearchParams(location.search);
 

extensions/apps/auth-app/src/extensions/login-bolt-button.tsx

@@ -11,8 +11,8 @@ import type { IRootComponentProps } from '@akashaorg/typings/lib/ui';
 import Icon from '@akashaorg/design-system-core/lib/components/Icon';
 
 const LoginBoltButton = () => {
-  const { getRoutingPlugin } = useRootComponentProps();
-  const navigateTo = React.useRef(getRoutingPlugin().navigateTo);
+  const { getCorePlugins } = useRootComponentProps();
+  const navigateTo = React.useRef(getCorePlugins().routing.navigateTo);
 
   const onLoginClick = React.useCallback(() => {
     navigateTo.current({

extensions/apps/extensions/src/components/pages/developer-mode.tsx

@@ -19,12 +19,12 @@ export enum DevMode {
 
 export const DeveloperModePage: React.FC<unknown> = () => {
   const navigate = useNavigate();
-  const { baseRouteName, uiEvents, getRoutingPlugin } = useRootComponentProps();
+  const { baseRouteName, uiEvents, getCorePlugins } = useRootComponentProps();
   const { t } = useTranslation('app-extensions');
   const {
     data: { authenticatedProfile },
   } = useAkashaStore();
-  const navigateTo = getRoutingPlugin().navigateTo;
+  const navigateTo = getCorePlugins().routing.navigateTo;
   // get the dev mode preference, if any, from local storage
   const localValue = window.localStorage.getItem(DEV_MODE_KEY);
 

extensions/apps/extensions/src/components/pages/explore.tsx

@@ -10,8 +10,8 @@ import routes, { DEVELOPER_MODE, EXTENSIONS } from '../../routes';
 export const ExplorePage: React.FC<unknown> = () => {
   const navigate = useNavigate();
   const { t } = useTranslation('app-extensions');
-  const { getRoutingPlugin, encodeAppName } = useRootComponentProps();
-  const navigateTo = getRoutingPlugin().navigateTo;
+  const { getCorePlugins, encodeAppName } = useRootComponentProps();
+  const navigateTo = getCorePlugins().routing.navigateTo;
 
   const isInstalled = false;
 

extensions/apps/extensions/src/components/pages/extension-creation-page.tsx

@@ -18,9 +18,9 @@ export const ExtensionCreationPage: React.FC<unknown> = () => {
   const { t } = useTranslation('app-extensions');
   const { uiEvents } = useRootComponentProps();
 
-  const { baseRouteName, getRoutingPlugin } = useRootComponentProps();
+  const { baseRouteName, getCorePlugins } = useRootComponentProps();
 
-  const navigateTo = getRoutingPlugin().navigateTo;
+  const navigateTo = getCorePlugins().routing.navigateTo;
 
   // const [createAppMutation, { loading }] = useCreateAppMutation({
   //   context: { source: sdk.current.services.gql.contextSources.composeDB },

extensions/apps/extensions/src/components/pages/extension-edit-page/main-page.tsx

@@ -36,9 +36,9 @@ type ExtensionEditMainPageProps = {
 export const ExtensionEditMainPage: React.FC<ExtensionEditMainPageProps> = ({ extensionId }) => {
   const { t } = useTranslation('app-extensions');
 
-  const { baseRouteName, getRoutingPlugin } = useRootComponentProps();
+  const { baseRouteName, getCorePlugins } = useRootComponentProps();
 
-  const navigateTo = getRoutingPlugin().navigateTo;
+  const navigateTo = getCorePlugins().routing.navigateTo;
 
   const {
     data: { authenticatedDID },

extensions/apps/extensions/src/components/pages/install-extension/install-extension-page.tsx

@@ -14,7 +14,7 @@ import { getReportedError, getReportedProgress } from './utils';
 
 export const InstallExtensionPage = ({ appId }: { appId: string }) => {
   const { t } = useTranslation('app-extensions');
-  const { getCorePlugins, decodeAppName, getRoutingPlugin } = useRootComponentProps();
+  const { decodeAppName, getCorePlugins } = useRootComponentProps();
   const decodeName = React.useRef(decodeAppName);
   const installer = useRef(getCorePlugins().extensionInstaller);
   const installerStatusCodes = React.useRef(installer.current.getStaticStatusCodes());
@@ -51,15 +51,15 @@ export const InstallExtensionPage = ({ appId }: { appId: string }) => {
   );
 
   const handleLoginClick = useCallback(() => {
-    getRoutingPlugin().navigateTo({
+    getCorePlugins().routing.navigateTo({
       appName: '@akashaorg/app-auth-ewa',
       getNavigationUrl: (appRoutes: Record<string, string>) => {
         return `${appRoutes.Connect}?${new URLSearchParams({
           redirectTo: location.pathname,
         })}`;
       },
     });
-  }, [getRoutingPlugin]);
+  }, [getCorePlugins]);
 
   const triggerResourceRegistration = useCallback(() => {
     // handle signature;
@@ -164,7 +164,7 @@ export const InstallExtensionPage = ({ appId }: { appId: string }) => {
       return {
         label: t('Open the app'),
         onClick: () => {
-          getRoutingPlugin().navigateTo({
+          getCorePlugins().routing.navigateTo({
             appName: decodeName.current(appId),
           });
         },
@@ -178,9 +178,9 @@ export const InstallExtensionPage = ({ appId }: { appId: string }) => {
     }
     return {
       label: t('Cancel installation'),
-      onClick: () => installer.current.cancelInstallation(reportedStatus),
+      onClick: () => installer.current.cancelInstallation(),
     };
-  }, [appId, getRoutingPlugin, isInstalled, reportedError, reportedStatus, t]);
+  }, [appId, getCorePlugins, isInstalled, reportedError, reportedStatus, t]);
 
   if (error) {
     return (

extensions/apps/extensions/src/components/pages/installed-extensions.tsx

@@ -8,11 +8,11 @@ import routes, { EXTENSIONS } from '../../routes';
 
 export const InstalledExtensionsPage: React.FC<unknown> = () => {
   const navigate = useNavigate();
-  const { getRoutingPlugin } = useRootComponentProps();
+  const { getCorePlugins } = useRootComponentProps();
   const { t } = useTranslation('app-extensions');
 
   const handleAppClick = (appName: string) => {
-    getRoutingPlugin().navigateTo({
+    getCorePlugins().routing.navigateTo({
       appName,
     });
   };

extensions/apps/extensions/src/components/pages/my-extensions/my-extensions.tsx

@@ -26,11 +26,11 @@ import { DRAFT_EXTENSIONS } from '../../../constants';
 const ENTRY_HEIGHT = 92;
 
 export const MyExtensionsPage: React.FC<unknown> = () => {
-  const { baseRouteName, getRoutingPlugin } = useRootComponentProps();
+  const { baseRouteName, getCorePlugins } = useRootComponentProps();
   const { t } = useTranslation('app-extensions');
 
   const navigate = useNavigate();
-  const navigateTo = getRoutingPlugin().navigateTo;
+  const navigateTo = getCorePlugins().routing.navigateTo;
 
   const {
     data: { authenticatedDID },

extensions/apps/notifications/src/components/pages/customise-notification-page.tsx

@@ -1,7 +1,19 @@
-import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useCallback,
+  useSyncExternalStore,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { MenuItemAreaType, NotificationEvents, NotificationTypes } from '@akashaorg/typings/lib/ui';
+import {
+  IMenuItem,
+  MenuItemAreaType,
+  NotificationEvents,
+  NotificationTypes,
+} from '@akashaorg/typings/lib/ui';
 import {
   useRootComponentProps,
   useSaveSettings,
@@ -40,7 +52,7 @@ const CustomiseNotificationPage: React.FC<CustomiseNotificationPageProps> = ({
   initial = true,
 }) => {
   const { t } = useTranslation('app-notifications');
-  const { uiEvents, getRoutingPlugin } = useRootComponentProps();
+  const { uiEvents, getCorePlugins } = useRootComponentProps();
 
   const navigate = useNavigate();
 
@@ -55,9 +67,10 @@ const CustomiseNotificationPage: React.FC<CustomiseNotificationPageProps> = ({
 
   const { saveNotificationSettings } = useSaveSettings();
 
-  const [routeData, setRouteData] = useState(null);
-
-  const routing = getRoutingPlugin();
+  const routeData = useSyncExternalStore(
+    getCorePlugins().routing.subscribe,
+    getCorePlugins().routing.getSnapshot,
+  );
 
   const [appNames, setAppNames] = useState<string[]>([]);
 
@@ -66,24 +79,8 @@ const CustomiseNotificationPage: React.FC<CustomiseNotificationPageProps> = ({
     [],
   );
 
-  useEffect(() => {
-    let sub;
-    if (routing) {
-      sub = routing.routeObserver.subscribe({
-        next: routeData => {
-          setRouteData({ ...routeData.byArea });
-        },
-      });
-    }
-    return () => {
-      if (sub) {
-        sub.unsubscribe();
-      }
-    };
-  }, [routing]);
-
   const defaultInstalledApps = useMemo(() => {
-    return routeData?.[MenuItemAreaType.AppArea];
+    return routeData?.byArea?.[MenuItemAreaType.AppArea];
   }, [routeData]);
 
   React.useEffect(() => {

extensions/apps/notifications/src/components/pages/notifications-page.tsx

@@ -39,9 +39,9 @@ const NotificationsPage: React.FC = () => {
   const { data, isLoading } = useGetSettings('@akashaorg/app-notifications');
 
   const { t } = useTranslation('app-notifications');
-  const { getRoutingPlugin, uiEvents } = useRootComponentProps();
+  const { getCorePlugins, uiEvents } = useRootComponentProps();
 
-  const navigateTo = getRoutingPlugin().navigateTo;
+  const navigateTo = getCorePlugins().routing.navigateTo;
 
   const _uiEvents = useRef(uiEvents);
 

extensions/apps/notifications/src/components/pages/welcome-page.tsx

@@ -20,13 +20,13 @@ const WelcomePage: React.FC<WelcomePageProps> = props => {
   const { finalStep = false } = props;
 
   const navigate = useNavigate();
-  const { baseRouteName, name: appName, uiEvents, getRoutingPlugin } = useRootComponentProps();
+  const { baseRouteName, name: appName, uiEvents, getCorePlugins } = useRootComponentProps();
   const {
     data: { authenticatedProfile },
   } = useAkashaStore();
   const _uiEvents = useRef(uiEvents);
   const { t } = useTranslation('app-notifications');
-  const navigateTo = getRoutingPlugin().navigateTo;
+  const navigateTo = getCorePlugins().routing.navigateTo;
 
   const { saveNotificationSettings } = useSaveSettings();
 

extensions/apps/notifications/src/extensions/rounded-notification-button.tsx

@@ -17,8 +17,8 @@ import Icon from '@akashaorg/design-system-core/lib/components/Icon';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 
 const RoundedNotificationButton = () => {
-  const { getRoutingPlugin, uiEvents } = useRootComponentProps();
-  const navigateTo = React.useRef(getRoutingPlugin().navigateTo);
+  const { getCorePlugins, uiEvents } = useRootComponentProps();
+  const navigateTo = React.useRef(getCorePlugins().routing.navigateTo);
   const uiEventsRef = React.useRef(uiEvents);
   const [snoozeNotifications, setSnoozeNotifications] = React.useState(false);
   // Not implemented yet.