fix(Map): Add Rally point. Change placement of settings in Map User Settings. Add ability to placement minimap.

assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, forwardRef, useContext, useImperativeHandle, useState } from 'react';
+import React, { createContext, forwardRef, useContext } from 'react';
 import {
   RoutesImperativeHandle,
   RoutesProviderInnerProps,
@@ -15,17 +15,14 @@ const RoutesContext = createContext<RoutesProviderInnerProps>({
   data: {},
 });
 
-export const RoutesProvider = forwardRef<RoutesImperativeHandle, MapProviderProps>(({ children, ...props }, ref) => {
-  const [loading, setLoading] = useState(false);
+// INFO: this component have imperative handler but now it not using.
+export const RoutesProvider = forwardRef<RoutesImperativeHandle, MapProviderProps>(
+  ({ children, ...props } /*, ref*/) => {
+    // useImperativeHandle(ref, () => ({}));
 
-  useImperativeHandle(ref, () => ({
-    stopLoading() {
-      setLoading(false);
-    },
-  }));
-
-  return <RoutesContext.Provider value={{ ...props, loading, setLoading }}>{children}</RoutesContext.Provider>;
-});
+    return <RoutesContext.Provider value={{ ...props /*, loading, setLoading*/ }}>{children}</RoutesContext.Provider>;
+  },
+);
 RoutesProvider.displayName = 'RoutesProvider';
 
 export const useRouteProvider = () => {

assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesWidget.tsx

@@ -3,16 +3,15 @@ import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import {
   LayoutEventBlocker,
   LoadingWrapper,
-  SystemViewStandalone,
+  SystemView,
   TooltipPosition,
   WdCheckbox,
   WdImgButton,
 } from '@/hooks/Mapper/components/ui-kit';
 import { useLoadSystemStatic } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic.ts';
+
 import { forwardRef, MouseEvent, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { getSystemById } from '@/hooks/Mapper/helpers/getSystemById.ts';
 import classes from './RoutesWidget.module.scss';
-import { useLoadRoutes } from './hooks';
 import { RoutesList } from './RoutesList';
 import clsx from 'clsx';
 import { Route } from '@/hooks/Mapper/types/routes.ts';
@@ -42,24 +41,13 @@ export const RoutesWidgetContent = () => {
   const {
     data: { selectedSystems, systems, isSubscriptionActive },
   } = useMapRootState();
-  const { hubs = [], routesList, isRestricted } = useRouteProvider();
+  const { hubs = [], routesList, isRestricted, loading } = useRouteProvider();
 
   const [systemId] = selectedSystems;
 
-  const { loading } = useLoadRoutes();
-
-  const { systems: systemStatics, loadSystems, lastUpdateKey } = useLoadSystemStatic({ systems: hubs ?? [] });
+  const { systems: systemStatics, loadSystems } = useLoadSystemStatic({ systems: hubs ?? [] });
   const { open, ...systemCtxProps } = useContextMenuSystemInfoHandlers();
 
-  const preparedHubs = useMemo(() => {
-    return hubs.map(x => {
-      const sys = getSystemById(systems, x.toString());
-
-      return { ...systemStatics.get(parseInt(x))!, ...(sys && { customName: sys.name ?? '' }) };
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hubs, systems, systemStatics, lastUpdateKey]);
-
   const preparedRoutes: Route[] = useMemo(() => {
     return (
       routesList?.routes
@@ -125,9 +113,7 @@ export const RoutesWidgetContent = () => {
       <LoadingWrapper loading={loading}>
         <div className={clsx(classes.RoutesGrid, 'px-2 py-2')}>
           {preparedRoutes.map(route => {
-            const sys = preparedHubs.find(x => x.solar_system_id === route.destination)!;
-
-            // TODO do not delte this console log
+            // TODO do not delete this console log
             // eslint-disable-next-line no-console
             // console.log('JOipP', `Check sys [${route.destination}]:`, sys);
 
@@ -144,12 +130,12 @@ export const RoutesWidgetContent = () => {
                     }}
                   />
 
-                  <SystemViewStandalone
-                    key={route.destination}
+                  <SystemView
+                    systemId={route.destination.toString()}
                     className={clsx('select-none text-center cursor-context-menu')}
                     hideRegion
                     compact
-                    {...sys}
+                    showCustomName
                   />
                 </div>
                 <div className="text-right pl-1">{route.has_connection ? route.systems?.length ?? 2 : ''}</div>

assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/hooks/useLoadRoutes.ts

@@ -1,7 +1,8 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useRouteProvider } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx';
 import { RoutesType } from '@/hooks/Mapper/mapRootProvider/types.ts';
+import { LoadRoutesCommand } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/types.ts';
+import { RoutesList } from '@/hooks/Mapper/types/routes.ts';
 
 function usePrevious<T>(value: T): T | undefined {
   const ref = useRef<T>();
@@ -13,8 +14,22 @@ function usePrevious<T>(value: T): T | undefined {
   return ref.current;
 }
 
-export const useLoadRoutes = () => {
-  const { data: routesSettings, loadRoutesCommand, hubs, routesList, loading, setLoading } = useRouteProvider();
+type UseLoadRoutesProps = {
+  loadRoutesCommand: LoadRoutesCommand;
+  hubs: string[];
+  routesList: RoutesList | undefined;
+  data: RoutesType;
+  deps?: unknown[];
+};
+
+export const useLoadRoutes = ({
+  data: routesSettings,
+  loadRoutesCommand,
+  hubs,
+  routesList,
+  deps = [],
+}: UseLoadRoutesProps) => {
+  const [loading, setLoading] = useState(false);
 
   const {
     data: { selectedSystems, systems, connections },
@@ -55,7 +70,8 @@ export const useLoadRoutes = () => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
       .map(x => routesSettings[x]),
+    ...deps,
   ]);
 
-  return { loading, loadRoutes };
+  return { loading, loadRoutes, setLoading };
 };

assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/types.ts

@@ -10,17 +10,14 @@ export type RoutesWidgetProps = {
   update: (d: RoutesType) => void;
   hubs: string[];
   routesList: RoutesList | undefined;
+  loading: boolean;
 
-  loadRoutesCommand: LoadRoutesCommand;
   addHubCommand: AddHubCommand;
   toggleHubCommand: ToggleHubCommand;
   isRestricted?: boolean;
 };
 
-export type RoutesProviderInnerProps = RoutesWidgetProps & {
-  loading: boolean;
-  setLoading(loading: boolean): void;
-};
+export type RoutesProviderInnerProps = RoutesWidgetProps;
 
 export type RoutesImperativeHandle = {
   stopLoading: () => void;

assets/js/hooks/Mapper/components/mapInterface/widgets/WRoutesPublic/WRoutesPublic.tsx

@@ -2,7 +2,6 @@ import { Commands, OutCommand } from '@/hooks/Mapper/types';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import {
   AddHubCommand,
-  LoadRoutesCommand,
   RoutesImperativeHandle,
 } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/types.ts';
 import { useCallback, useRef } from 'react';
@@ -13,24 +12,11 @@ export const WRoutesPublic = () => {
   const {
     outCommand,
     storedSettings: { settingsRoutes, settingsRoutesUpdate },
-    data: { hubs, routes },
+    data: { hubs, routes, loadingPublicRoutes },
   } = useMapRootState();
 
   const ref = useRef<RoutesImperativeHandle>(null);
 
-  const loadRoutesCommand: LoadRoutesCommand = useCallback(
-    async (systemId, routesSettings) => {
-      outCommand({
-        type: OutCommand.getRoutes,
-        data: {
-          system_id: systemId,
-          routes_settings: routesSettings,
-        },
-      });
-    },
-    [outCommand],
-  );
-
   const addHubCommand: AddHubCommand = useCallback(
     async systemId => {
       if (hubs.includes(systemId)) {
@@ -72,10 +58,10 @@ export const WRoutesPublic = () => {
       ref={ref}
       title="Routes"
       data={settingsRoutes}
+      loading={loadingPublicRoutes}
       update={settingsRoutesUpdate}
       hubs={hubs}
       routesList={routes}
-      loadRoutesCommand={loadRoutesCommand}
       addHubCommand={addHubCommand}
       toggleHubCommand={toggleHubCommand}
     />

assets/js/hooks/Mapper/components/mapInterface/widgets/WRoutesUser/WRoutesUser.tsx

@@ -8,6 +8,7 @@ import {
 import { useCallback, useRef } from 'react';
 import { RoutesWidget } from '@/hooks/Mapper/components/mapInterface/widgets';
 import { useMapEventListener } from '@/hooks/Mapper/events';
+import { useLoadRoutes } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/hooks';
 
 export const WRoutesUser = () => {
   const {
@@ -61,9 +62,17 @@ export const WRoutesUser = () => {
     [userHubs, outCommand],
   );
 
+  // INFO: User routes loading only if open widget with user routes
+  const { loading, setLoading } = useLoadRoutes({
+    data: settingsRoutes,
+    hubs: userHubs,
+    loadRoutesCommand,
+    routesList: userRoutes,
+  });
+
   useMapEventListener(event => {
     if (event.name === Commands.userRoutes) {
-      ref.current?.stopLoading();
+      setLoading(false);
     }
     return true;
   });
@@ -76,7 +85,7 @@ export const WRoutesUser = () => {
       update={settingsRoutesUpdate}
       hubs={userHubs}
       routesList={userRoutes}
-      loadRoutesCommand={loadRoutesCommand}
+      loading={loading}
       addHubCommand={addHubCommand}
       toggleHubCommand={toggleHubCommand}
       isRestricted