move NavigationBar to page

export Content function from root page -> use in /unlimited
This commit is contained in:
vchikalkin 2024-06-20 16:17:13 +03:00
parent e3961af777
commit 359a9d4921
3 changed files with 46 additions and 70 deletions

View File

@ -1,8 +1,5 @@
import Header from './Header';
import { AppMenu } from './Menu';
import { NavigationBar } from './Navigation';
import { NavigationProvider } from '@/context/navigation';
import { Media } from '@/styles/media';
import { max, min } from '@/styles/mq';
import styled from 'styled-components';
@ -20,13 +17,10 @@ const Main = styled.main`
export default function Layout({ children, user }) {
return (
<NavigationProvider>
<>
<Header />
{user?.admin ? <AppMenu /> : false}
<Main>{children}</Main>
<Media lessThan="laptop">
<NavigationBar />
</Media>
</NavigationProvider>
</>
);
}

View File

@ -1,8 +1,8 @@
import initializeApollo from '@/apollo/client';
import * as Calculation from '@/Components/Calculation';
import { Error } from '@/Components/Common/Error';
import { Tabs } from '@/Components/Layout/Navigation';
import { NavigationContext } from '@/context/navigation';
import { NavigationBar, Tabs } from '@/Components/Layout/Navigation';
import { NavigationContext, NavigationProvider } from '@/context/navigation';
import * as hooks from '@/process/hooks';
import { Media } from '@/styles/media';
import { getPageTitle } from '@/utils/page';
@ -13,28 +13,24 @@ import { useContext, useEffect } from 'react';
export const tabs = [
{
Component: () => <Calculation.Settings />,
Component: Calculation.Form,
key: 'form',
title: 'Параметры',
},
{
Component: Calculation.Settings,
key: 'settings',
title: 'Расчет',
},
{
Component: () => <Calculation.Form />,
key: 'form',
title: 'Параметры',
},
{
Component: () => <Calculation.Output />,
Component: Calculation.Output,
key: 'output',
title: 'Результаты',
},
];
function Content() {
hooks.useSentryScope();
hooks.useMainData();
hooks.useInsuranceData();
hooks.useReactions();
export function Content({ initHooks, title }) {
initHooks();
const { setCurrentTab, setTabsList } = useContext(NavigationContext);
@ -46,16 +42,17 @@ function Content() {
return (
<>
<Head>
<title>{getPageTitle()}</title>
<title>{getPageTitle(title)}</title>
</Head>
<Media lessThan="laptop">
<Tabs tabs={tabs} />
<NavigationBar />
</Media>
<Media greaterThanOrEqual="laptop">
<Calculation.Layout>
<Calculation.Form />
<Calculation.Settings />
<Calculation.Output />
{tabs.map(({ Component, key }) => (
<Component key={key} />
))}
</Calculation.Layout>
</Media>
</>
@ -65,7 +62,18 @@ function Content() {
export default function Page(props) {
if (props.statusCode !== 200) return <Error {...props} />;
return <Content />;
return (
<NavigationProvider>
<Content
initHooks={() => {
hooks.useSentryScope();
hooks.useMainData();
hooks.useInsuranceData();
hooks.useReactions();
}}
/>
</NavigationProvider>
);
}
/** @type {import('next').GetServerSideProps} */

View File

@ -1,54 +1,28 @@
import { tabs } from '.';
import { Content } from '.';
import initializeApollo from '@/apollo/client';
import * as Calculation from '@/Components/Calculation';
import { Error } from '@/Components/Common/Error';
import { Tabs } from '@/Components/Layout/Navigation';
import { NavigationContext } 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';
function Content() {
hooks.useSentryScope();
hooks.useMainData();
hooks.useGetUsers();
hooks.useInsuranceData();
hooks.useReactions();
const { setCurrentTab, setTabsList } = useContext(NavigationContext);
useEffect(() => {
setTabsList(tabs);
setCurrentTab('settings');
}, [setCurrentTab, setTabsList]);
return (
<>
<Head>
<title>{getPageTitle('Без ограничений')}</title>
</Head>
<Media lessThan="laptop">
<Tabs tabs={tabs} />
</Media>
<Media greaterThanOrEqual="laptop">
<Calculation.Layout>
<Calculation.Form />
<Calculation.Settings />
<Calculation.Output />
</Calculation.Layout>
</Media>
</>
);
}
export default function Page(props) {
if (props.statusCode !== 200) return <Error {...props} />;
return <Content />;
return (
<NavigationProvider>
<Content
title="Без ограничений"
initHooks={() => {
hooks.useSentryScope();
hooks.useMainData();
hooks.useGetUsers();
hooks.useInsuranceData();
hooks.useReactions();
}}
/>
</NavigationProvider>
);
}
/** @type {import('next').GetServerSideProps} */