diff --git a/apps/web/Components/Layout/Navigation.jsx b/apps/web/Components/Layout/Navigation.jsx
index 484815e..460319a 100644
--- a/apps/web/Components/Layout/Navigation.jsx
+++ b/apps/web/Components/Layout/Navigation.jsx
@@ -1,5 +1,5 @@
import { NavigationContext } from '@/context/navigation';
-import { memo, useContext } from 'react';
+import { useContext, useEffect } from 'react';
import styled from 'styled-components';
const Container = styled.div`
@@ -43,15 +43,16 @@ const Display = styled.div`
display: ${(props) => (props.visible ? 'block' : 'none')};
`;
-export const Tabs = memo(
- ({ tabs }) => {
- const { currentTab } = useContext(NavigationContext);
+export function Tabs({ tabs }) {
+ const { currentTab, setTabsList } = useContext(NavigationContext);
- return tabs.map(({ Component, key }) => (
-
-
-
- ));
- },
- (prevProps, nextProps) => prevProps.tabs.length === nextProps.tabs.length
-);
+ useEffect(() => {
+ setTabsList(tabs);
+ }, [setTabsList, tabs]);
+
+ return tabs.map(({ Component, key }) => (
+
+
+
+ ));
+}
diff --git a/apps/web/context/navigation.tsx b/apps/web/context/navigation.tsx
index b16aa4c..2530d0d 100644
--- a/apps/web/context/navigation.tsx
+++ b/apps/web/context/navigation.tsx
@@ -1,4 +1,4 @@
-import { createContext, useMemo, useState } from 'react';
+import { createContext, useEffect, useMemo, useState } from 'react';
type Tab = {
key: string;
@@ -18,6 +18,11 @@ export function NavigationProvider({ children }: { readonly children: React.Reac
const [currentTab, setCurrentTab] = useState('');
const [tabsList, setTabsList] = useState([]);
+ useEffect(() => {
+ const defaultTab = tabsList.at(0);
+ if (defaultTab) setCurrentTab(defaultTab.key);
+ }, [tabsList]);
+
const value = useMemo(
() => ({ currentTab, setCurrentTab, setTabsList, tabsList }),
[currentTab, setCurrentTab, setTabsList, tabsList]
diff --git a/apps/web/pages/index.jsx b/apps/web/pages/index.jsx
index d57191a..ff05fea 100644
--- a/apps/web/pages/index.jsx
+++ b/apps/web/pages/index.jsx
@@ -2,14 +2,13 @@ import initializeApollo from '@/apollo/client';
import * as Calculation from '@/Components/Calculation';
import { Error } from '@/Components/Common/Error';
import { NavigationBar, Tabs } from '@/Components/Layout/Navigation';
-import { NavigationContext, NavigationProvider } from '@/context/navigation';
+import { NavigationProvider } from '@/context/navigation';
import * as hooks from '@/process/hooks';
import { Media } from '@/styles/media';
import { getPageTitle } from '@/utils/page';
import { makeGetUserType } from '@/utils/user';
import { dehydrate, QueryClient } from '@tanstack/react-query';
import Head from 'next/head';
-import { useContext, useEffect } from 'react';
export const tabs = [
{
@@ -32,21 +31,16 @@ export const tabs = [
export function Content({ initHooks, title }) {
initHooks();
- const { setCurrentTab, setTabsList } = useContext(NavigationContext);
-
- useEffect(() => {
- setTabsList(tabs);
- setCurrentTab('settings');
- }, [setCurrentTab, setTabsList]);
-
return (
<>
{getPageTitle(title)}
-
-
+
+
+
+
@@ -63,16 +57,14 @@ export default function Page(props) {
if (props.statusCode !== 200) return ;
return (
-
- {
- hooks.useSentryScope();
- hooks.useMainData();
- hooks.useInsuranceData();
- hooks.useReactions();
- }}
- />
-
+ {
+ hooks.useSentryScope();
+ hooks.useMainData();
+ hooks.useInsuranceData();
+ hooks.useReactions();
+ }}
+ />
);
}