refactor: removed local state from background selector component

src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx

@@ -31,12 +31,12 @@ export const MapNavigation = (): JSX.Element => {
   };
 
   return (
-    <div className="flex h-10 w-full flex-row flex-nowrap justify-start overflow-y-auto bg-white-pearl shadow-map-navigation-bar">
+    <div className="flex h-10 w-full flex-row flex-nowrap justify-start overflow-y-auto bg-white-pearl text-xs  shadow-primary">
       {openedMaps.map(map => (
         <Button
           key={map.modelId}
           className={twMerge(
-            'h-10 whitespace-nowrap	',
+            'h-10 whitespace-nowrap',
             isActive(map.modelId) ? 'bg-[#EBF4FF]' : 'font-normal',
           )}
           variantStyles={isActive(map.modelId) ? 'secondary' : 'ghost'}

src/components/Map/MapAdditionalOptions/BackgroundsSelector/BackgroundsSelector.component.test.tsx

 /* eslint-disable no-magic-numbers */
 import { StoreType } from '@/redux/store';
-import { useRouter } from 'next/router';
 import { render, screen } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
-import { initialMapStateFixture } from '@/redux/map/map.fixtures';
+import { initialMapDataFixture, initialMapStateFixture } from '@/redux/map/map.fixtures';
 import {
   InitialStoreState,
   getReduxWrapperWithStore,
@@ -29,14 +28,6 @@ const renderComponent = (initialStoreState: InitialStoreState = {}): { store: St
   );
 };
 
-jest.mock('next/router', () => ({
-  useRouter: jest.fn(),
-}));
-
-(useRouter as jest.Mock).mockReturnValue({
-  query: {},
-});
-
 describe('BackgroundSelector - component', () => {
   it('should initialy display default value', () => {
     renderComponent();
@@ -88,11 +79,8 @@ describe('BackgroundSelector - component', () => {
 
   describe('query params', () => {
     it('should display default value when main background id is in query params', async () => {
-      (useRouter as jest.Mock).mockReturnValue({
-        query: { backgroundId: '13' },
-      });
       await renderComponent({
-        map: initialMapStateFixture,
+        map: { ...initialMapStateFixture, data: { ...initialMapDataFixture, backgroundId: 13 } },
         backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
       });
 
@@ -100,11 +88,8 @@ describe('BackgroundSelector - component', () => {
       expect(buttonName.textContent).toBe('Background');
     });
     it('should display correct background when background id is in query params', async () => {
-      (useRouter as jest.Mock).mockReturnValue({
-        query: { backgroundId: '15' },
-      });
       await renderComponent({
-        map: initialMapStateFixture,
+        map: { ...initialMapStateFixture, data: { ...initialMapDataFixture, backgroundId: 15 } },
         backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
       });
 

src/components/Map/MapAdditionalOptions/BackgroundsSelector/BackgroundsSelector.component.tsx

-import { useEffect, useState } from 'react';
 import { useSelect } from 'downshift';
 import {
   backgroundsDataSelector,
+  currentBackgroundSelector,
   mainBackgroundIdSelector,
 } from '@/redux/backgrounds/background.selectors';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
@@ -10,69 +10,56 @@ import { Icon } from '@/shared/Icon';
 import { MapBackground } from '@/types/models';
 import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { setMapBackground } from '@/redux/map/map.slice';
-import { useRouter } from 'next/router';
-import { parseQueryToTypes } from '@/utils/parseQueryToTypes';
 
 const DEFAULT_TOGGLE_BUTTON_TEXT = 'Background';
 
 export const BackgroundSelector = (): JSX.Element => {
-  const [selectedItem, setSelectedItem] = useState<MapBackground | undefined>(undefined);
+  const selectedBackground = useAppSelector(currentBackgroundSelector);
   const dispatch = useAppDispatch();
-  const { query } = useRouter();
   const backgrounds = useAppSelector(backgroundsDataSelector);
   const mainBackgroundId = useAppSelector(mainBackgroundIdSelector);
 
-  useEffect(() => {
-    const onApplicationLoadSetInitialSelectedItem = (): void => {
-      const backgroundId = parseQueryToTypes(query)?.backgroundId;
-      const initialBackground = backgrounds?.find(({ id }) => id === backgroundId);
-      setSelectedItem(initialBackground);
-    };
-
-    if (!selectedItem) {
-      onApplicationLoadSetInitialSelectedItem();
-    }
-  }, [selectedItem, query, backgrounds]);
-
   const onItemSelect = (background: MapBackground | undefined | null): void => {
     if (background) {
       dispatch(setMapBackground(background.id));
-      setSelectedItem(background);
     }
   };
 
   const { isOpen, getToggleButtonProps, getMenuProps, highlightedIndex, getItemProps } = useSelect({
     items: backgrounds || [],
-    selectedItem,
+    selectedItem: selectedBackground,
     onSelectedItemChange: ({ selectedItem: newSelectedItem }) => onItemSelect(newSelectedItem),
   });
 
   const getToggleButtonName = (): string => {
-    const isSelectedBackgroundMainBackground = selectedItem?.id === mainBackgroundId;
-    if (!selectedItem || isSelectedBackgroundMainBackground) {
+    const isSelectedBackgroundMainBackground = selectedBackground?.id === mainBackgroundId;
+    if (!selectedBackground || isSelectedBackgroundMainBackground) {
       return DEFAULT_TOGGLE_BUTTON_TEXT;
     }
-    return selectedItem.name;
+    return selectedBackground.name;
   };
 
   return (
-    <div data-testid="background-selector">
-      <div className="flex w-72 flex-col gap-1">
+    <div
+      data-testid="background-selector"
+      className={twMerge('rounded-t bg-white text-xs shadow-primary', !isOpen && 'rounded-b')}
+    >
+      <div className={twMerge('flex w-72 flex-col rounded-t py-2 pl-4 pr-3')}>
         <div
-          className="flex cursor-pointer justify-between bg-white p-2"
+          className="flex cursor-pointer flex-row items-center justify-between bg-white"
           {...getToggleButtonProps()}
         >
-          <span data-testid="background-dropdown-button-name">{getToggleButtonName()}</span>
-          <span className="px-2">
-            <Icon
-              name="chevron-down"
-              className={twMerge('arrow-button h-6 w-6 fill-font-500', isOpen && 'rotate-180')}
-            />
+          <span data-testid="background-dropdown-button-name" className="font-medium">
+            {getToggleButtonName()}
           </span>
+          <Icon
+            name="chevron-down"
+            className={twMerge('arrow-button h-6 w-6 fill-primary-500', isOpen && 'rotate-180')}
+          />
         </div>
       </div>
       <ul
-        className={`absolute z-10 mt-1 max-h-80 w-72 overflow-scroll bg-white p-0 shadow-md ${
+        className={`absolute z-10 max-h-80 w-72 overflow-scroll rounded-b bg-white p-0 ${
           !isOpen && 'hidden'
         }`}
         {...getMenuProps()}
@@ -82,9 +69,10 @@ export const BackgroundSelector = (): JSX.Element => {
           backgrounds.map((item, index) => (
             <li
               className={twMerge(
-                highlightedIndex === index && 'bg-blue-300',
-                selectedItem === item && 'font-bold',
-                'flex flex-col px-3 py-2 shadow-sm',
+                'border-t',
+                highlightedIndex === index && 'text-primary-500',
+                selectedBackground === item && 'font-bold',
+                'flex flex-col px-4 py-2 shadow-sm',
               )}
               key={item.id}
               {...getItemProps({ item, index })}

tailwind.config.ts

@@ -33,7 +33,7 @@ const config: Config = {
         'calc-drawer': 'calc(100% - 104px)',
       },
       boxShadow: {
-        'map-navigation-bar': '4px 8px 32px 0px rgba(0, 0, 0, 0.12)',
+        primary: '4px 8px 32px 0px rgba(0, 0, 0, 0.12)',
       },
     },
     fontFamily: {