fix(Map): Unified settings. First part: add one place for storing settings

assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx

@@ -20,7 +20,7 @@ export interface MapRootContentProps {}
 // eslint-disable-next-line no-empty-pattern
 export const MapRootContent = ({}: MapRootContentProps) => {
   const {
-    storedSettings: { interfaceSettings },
+    storedSettings: { interfaceSettings, isReady },
     data,
   } = useMapRootState();
   const { isShowMenu } = interfaceSettings;
@@ -34,7 +34,7 @@ export const MapRootContent = ({}: MapRootContentProps) => {
   const [showTrackingDialog, setShowTrackingDialog] = useState(false);
 
   /* Important Notice - this solution needs for use one instance of MapInterface */
-  const mapInterface = <MapInterface />;
+  const mapInterface = isReady ? <MapInterface /> : null;
 
   const handleShowOnTheMap = useCallback(() => setShowOnTheMap(true), []);
   const handleShowMapSettings = useCallback(() => setShowMapSettings(true), []);

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettingsProvider.tsx

@@ -22,6 +22,7 @@ import { OutCommand } from '@/hooks/Mapper/types';
 import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components';
 import { Dropdown } from 'primereact/dropdown';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { WithChildren } from '@/hooks/Mapper/types/common.ts';
 
 type MapSettingsContextType = {
   renderSettingItem: (item: SettingsListItem) => ReactNode;
@@ -30,7 +31,7 @@ type MapSettingsContextType = {
 
 const MapSettingsContext = createContext<MapSettingsContextType | undefined>(undefined);
 
-export const MapSettingsProvider = ({ children }: { children: ReactNode }) => {
+export const MapSettingsProvider = ({ children }: WithChildren) => {
   const {
     outCommand,
     storedSettings: { interfaceSettings, setInterfaceSettings },

assets/js/hooks/Mapper/components/mapRootContent/components/OnTheMap/OnTheMap.tsx

@@ -7,24 +7,11 @@ import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virt
 import clsx from 'clsx';
 import { CharacterTypeRaw, WithIsOwnCharacter } from '@/hooks/Mapper/types';
 import { CharacterCard, TooltipPosition, WdCheckbox, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
-import useLocalStorageState from 'use-local-storage-state';
 import { useMapCheckPermissions, useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { UserPermission } from '@/hooks/Mapper/types/permissions.ts';
 import { InputText } from 'primereact/inputtext';
 import { IconField } from 'primereact/iconfield';
 
-type WindowLocalSettingsType = {
-  compact: boolean;
-  hideOffline: boolean;
-  version: number;
-};
-
-const STORED_DEFAULT_VALUES: WindowLocalSettingsType = {
-  compact: true,
-  hideOffline: false,
-  version: 0,
-};
-
 const itemTemplate = (item: CharacterTypeRaw & WithIsOwnCharacter, options: VirtualScrollerTemplateOptions) => {
   return (
     <div
@@ -48,14 +35,11 @@ export interface OnTheMapProps {
 export const OnTheMap = ({ show, onHide }: OnTheMapProps) => {
   const {
     data: { characters, userCharacters },
+    storedSettings: { settingsOnTheMap, settingsOnTheMapUpdate },
   } = useMapRootState();
 
   const [searchVal, setSearchVal] = useState('');
 
-  const [settings, setSettings] = useLocalStorageState<WindowLocalSettingsType>('window:onTheMap:settings', {
-    defaultValue: STORED_DEFAULT_VALUES,
-  });
-
   const restrictOfflineShowing = useMapGetOption('restrict_offline_showing');
   const isAdminOrManager = useMapCheckPermissions([UserPermission.MANAGE_MAP]);
 
@@ -107,12 +91,12 @@ export const OnTheMap = ({ show, onHide }: OnTheMapProps) => {
       });
     }
 
-    if (showOffline && !settings.hideOffline) {
+    if (showOffline && !settingsOnTheMap.hideOffline) {
       return out;
     }
 
     return out.filter(x => x.online);
-  }, [showOffline, searchVal, characters, settings.hideOffline, userCharacters]);
+  }, [showOffline, searchVal, characters, settingsOnTheMap.hideOffline, userCharacters]);
 
   return (
     <Sidebar
@@ -153,9 +137,11 @@ export const OnTheMap = ({ show, onHide }: OnTheMapProps) => {
               size="m"
               labelSide="left"
               label={'Hide offline'}
-              value={settings.hideOffline}
+              value={settingsOnTheMap.hideOffline}
               classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300"
-              onChange={() => setSettings(() => ({ ...settings, hideOffline: !settings.hideOffline }))}
+              onChange={() =>
+                settingsOnTheMapUpdate(() => ({ ...settingsOnTheMap, hideOffline: !settingsOnTheMap.hideOffline }))
+              }
             />
           )}
         </div>