fix navbar show error dot for validation tab

apps/web/Components/Calculation/index.tsx

@@ -9,7 +9,10 @@ import { NavigationProvider } from '@/context/navigation';
 import { useErrors } from '@/stores/hooks';
 import { Media } from '@/styles/media';
 import { getPageTitle } from '@/utils/page';
+import { observer } from 'mobx-react-lite';
 import Head from 'next/head';
+import styled from 'styled-components';
+import { Badge } from 'ui/elements';
 import {
   BarChartOutlined,
   CalculatorOutlined,
@@ -19,35 +22,42 @@ import {
 
 const defaultIconStyle = { fontSize: '1.2rem' };
 
+const StyledBadge = styled(Badge)`
+  color: unset !important;
+`;
+
 export const tabs = [
   {
     Component: Settings,
-    icon: <ProfileOutlined style={defaultIconStyle} />,
+    Icon: () => <ProfileOutlined style={defaultIconStyle} />,
     key: 'settings',
     title: 'Интерес/Расчет',
   },
   {
     Component: Form,
-    icon: <CalculatorOutlined style={defaultIconStyle} />,
+    Icon: () => <CalculatorOutlined style={defaultIconStyle} />,
     key: 'form',
     title: 'Параметры',
   },
   {
     Component: Output,
-    icon: <BarChartOutlined style={defaultIconStyle} />,
+    Icon: () => <BarChartOutlined style={defaultIconStyle} />,
     key: 'output',
     title: 'Результаты',
   },
   {
     Component: Validation,
-    icon: <WarningOutlined style={defaultIconStyle} />,
-    key: 'errors',
-    title: 'Ошибки',
-    useShowBadge: () => {
+    Icon: observer(() => {
       const { hasErrors } = useErrors();
 
-      return hasErrors;
-    },
+      return (
+        <StyledBadge dot={hasErrors}>
+          <WarningOutlined style={defaultIconStyle} />
+        </StyledBadge>
+      );
+    }),
+    key: 'errors',
+    title: 'Ошибки',
   },
 ];
 

apps/web/Components/Layout/Navigation.jsx

@@ -1,7 +1,6 @@
 import { NavigationContext } from '@/context/navigation';
 import { useContext, useEffect } from 'react';
 import styled from 'styled-components';
-import { Badge } from 'ui/elements';
 import { Flex } from 'ui/grid';
 
 const Container = styled.div`
@@ -29,19 +28,15 @@ const TabButton = styled.button`
   font-size: 0.75rem;
 `;
 
-const StyledBadge = styled(Badge)`
-  color: unset !important;
-`;
-
 export function NavigationBar() {
   const { currentTab, setCurrentTab, tabsList } = useContext(NavigationContext);
 
   return (
     <Container>
-      {tabsList.map(({ icon, key, title, useShowBadge }) => (
+      {tabsList.map(({ Icon, key, title }) => (
         <TabButton key={key} active={key === currentTab} onClick={() => setCurrentTab(key)}>
           <Flex flexDirection="column" alignItems="center">
-            <StyledBadge dot={useShowBadge?.call()}>{icon}</StyledBadge>
+            <Icon />
             {title}
           </Flex>
         </TabButton>