From 7349478fe971aeb13e908d3cf680b6f1d5e71d9e Mon Sep 17 00:00:00 2001 From: vchikalkin Date: Mon, 1 Jul 2024 18:10:42 +0300 Subject: [PATCH] fix tabs rerender --- apps/web/Components/Layout/Navigation.jsx | 25 +++++++++-------- apps/web/context/navigation.tsx | 7 ++++- apps/web/pages/index.jsx | 34 +++++++++-------------- 3 files changed, 32 insertions(+), 34 deletions(-) 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(); + }} + /> ); }