evo/EvoCalculator.Client2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix tabs rerender

Browse Source
This commit is contained in:
vchikalkin 2024-07-01 18:10:42 +03:00
parent 359a9d4921
commit 7349478fe9
3 changed files with 32 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/web/Components/Layout/Navigation.jsx
View File

@ -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 }) => (
<Display key={key} visible={key === currentTab}>
<Component key={key} />
</Display>
));
},
(prevProps, nextProps) => prevProps.tabs.length === nextProps.tabs.length
);
useEffect(() => {
setTabsList(tabs);
}, [setTabsList, tabs]);
return tabs.map(({ Component, key }) => (
<Display key={key} visible={key === currentTab}>
<Component key={key} />
</Display>
));
}

7
apps/web/context/navigation.tsx
View File

@ -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<Tab[]>([]);
useEffect(() => {
const defaultTab = tabsList.at(0);
if (defaultTab) setCurrentTab(defaultTab.key);
}, [tabsList]);
const value = useMemo(
() => ({ currentTab, setCurrentTab, setTabsList, tabsList }),
[currentTab, setCurrentTab, setTabsList, tabsList]

34
apps/web/pages/index.jsx
View File

@ -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 (
<>
<Head>
<title>{getPageTitle(title)}</title>
</Head>
<Media lessThan="laptop">
<Tabs tabs={tabs} />
<NavigationBar />
<NavigationProvider>
<Tabs tabs={tabs} />
<NavigationBar />
</NavigationProvider>
</Media>
<Media greaterThanOrEqual="laptop">
<Calculation.Layout>
@ -63,16 +57,14 @@ export default function Page(props) {
if (props.statusCode !== 200) return <Error {...props} />;
return (
<NavigationProvider>
<Content
initHooks={() => {
hooks.useSentryScope();
hooks.useMainData();
hooks.useInsuranceData();
hooks.useReactions();
}}
/>
</NavigationProvider>
<Content
initHooks={() => {
hooks.useSentryScope();
hooks.useMainData();
hooks.useInsuranceData();
hooks.useReactions();
}}
/>
);
}