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

add Errors tab

Browse Source 
move calculation content to file
This commit is contained in:
vchikalkin 2024-07-02 17:38:19 +03:00
parent 65b4c95779
commit 29fdb70509
5 changed files with 90 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/Components/Calculation/index.ts
View File

@ -1,4 +0,0 @@
export * from './Form';
export * from './Layout';
export * from './Output';
export * from './Settings';

77
apps/web/Components/Calculation/index.tsx Normal file
View File

@ -0,0 +1,77 @@
import { Form } from './Form';
import { Layout } from './Layout';
import { Output } from './Output';
import Validation from './Output/Validation';
import { Settings } from './Settings';
import { Notification } from '@/Components/Common';
import { NavigationBar, Tabs } from '@/Components/Layout/Navigation';
import { NavigationProvider } from '@/context/navigation';
import { Media } from '@/styles/media';
import { getPageTitle } from '@/utils/page';
import Head from 'next/head';
import {
BarChartOutlined,
CalculatorOutlined,
ProfileOutlined,
WarningOutlined,
} from 'ui/elements/icons';
const defaultIconStyle = { fontSize: '1.2rem' };
export const tabs = [
{
Component: Settings,
icon: <ProfileOutlined style={defaultIconStyle} />,
key: 'settings',
title: 'Интерес/Расчет',
},
{
Component: Form,
icon: <CalculatorOutlined style={defaultIconStyle} />,
key: 'form',
title: 'Параметры',
},
{
Component: Output,
icon: <BarChartOutlined style={defaultIconStyle} />,
key: 'output',
title: 'Результаты',
},
{
Component: Validation.Component,
icon: <WarningOutlined style={defaultIconStyle} />,
key: Validation.id,
title: Validation.title,
},
];
type ContentProps = {
readonly initHooks: () => void;
readonly title: string;
};
export function Content({ initHooks, title }: ContentProps) {
initHooks();
return (
<>
<Head>
<title>{getPageTitle(title)}</title>
</Head>
<Notification />
<Media lessThan="laptop">
<NavigationProvider>
<Tabs tabs={tabs} />
<NavigationBar />
</NavigationProvider>
</Media>
<Media greaterThanOrEqual="laptop">
<Layout>
{tabs.map(({ Component, key }) => (
<Component key={key} />
))}
</Layout>
</Media>
</>
);
}

2
apps/web/Components/Common/Notification.tsx
View File

@ -8,7 +8,7 @@ import { message as antdMessage, notification as antdNotification } from 'ui/ele
export let message: Readonly<MessageInstance>; export let message: Readonly<MessageInstance>;
export let notification: Readonly<NotificationInstance>; export let notification: Readonly<NotificationInstance>;
export function Notification({ children }: { readonly children: ReactNode }) { export function Notification({ children }: { readonly children?: ReactNode }) {
const [messageApi, messageContextHolder] = antdMessage.useMessage({ const [messageApi, messageContextHolder] = antdMessage.useMessage({
duration: 1.2, duration: 1.2,
maxCount: 3, maxCount: 3,

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

@ -1,65 +1,9 @@
import initializeApollo from '@/apollo/client'; import initializeApollo from '@/apollo/client';
import * as Calculation from '@/Components/Calculation'; import { Content } from '@/Components/Calculation';
import { Notification } from '@/Components/Common';
import { Error } from '@/Components/Common/Error'; import { Error } from '@/Components/Common/Error';
import { NavigationBar, Tabs } from '@/Components/Layout/Navigation';
import { NavigationProvider } from '@/context/navigation';
import * as hooks from '@/process/hooks'; import * as hooks from '@/process/hooks';
import { Media } from '@/styles/media';
import { getPageTitle } from '@/utils/page';
import { makeGetUserType } from '@/utils/user'; import { makeGetUserType } from '@/utils/user';
import { dehydrate, QueryClient } from '@tanstack/react-query'; import { dehydrate, QueryClient } from '@tanstack/react-query';
import Head from 'next/head';
import { AreaChartOutlined, CalculatorOutlined, ProfileOutlined } from 'ui/elements/icons';
const defaultIconStyle = { fontSize: '1.2rem' };
export const tabs = [
{
Component: Calculation.Settings,
icon: <ProfileOutlined style={defaultIconStyle} />,
key: 'settings',
title: 'Интерес/Расчет',
},
{
Component: Calculation.Form,
icon: <CalculatorOutlined style={defaultIconStyle} />,
key: 'form',
title: 'Параметры',
},
{
Component: Calculation.Output,
icon: <AreaChartOutlined style={defaultIconStyle} />,
key: 'output',
title: 'Результаты',
},
];
export function Content({ initHooks, title }) {
initHooks();
return (
<>
<Head>
<title>{getPageTitle(title)}</title>
</Head>
<Notification />
<Media lessThan="laptop">
<NavigationProvider>
<Tabs tabs={tabs} />
<NavigationBar />
</NavigationProvider>
</Media>
<Media greaterThanOrEqual="laptop">
<Calculation.Layout>
{tabs.map(({ Component, key }) => (
<Component key={key} />
))}
</Calculation.Layout>
</Media>
</>
);
}
export default function Page(props) { export default function Page(props) {
if (props.statusCode !== 200) return <Error {...props} />; if (props.statusCode !== 200) return <Error {...props} />;

25
apps/web/pages/unlimited.jsx
View File

@ -1,7 +1,6 @@
import { Content } from '.';
import initializeApollo from '@/apollo/client'; import initializeApollo from '@/apollo/client';
import { Content } from '@/Components/Calculation';
import { Error } from '@/Components/Common/Error'; import { Error } from '@/Components/Common/Error';
import { NavigationProvider } from '@/context/navigation';
import * as hooks from '@/process/hooks'; import * as hooks from '@/process/hooks';
import { makeGetUserType } from '@/utils/user'; import { makeGetUserType } from '@/utils/user';
import { dehydrate, QueryClient } from '@tanstack/react-query'; import { dehydrate, QueryClient } from '@tanstack/react-query';
@ -10,18 +9,16 @@ export default function Page(props) {
if (props.statusCode !== 200) return <Error {...props} />; if (props.statusCode !== 200) return <Error {...props} />;
return ( return (
<NavigationProvider> <Content
<Content title="Без ограничений"
title="Без ограничений" initHooks={() => {
initHooks={() => { hooks.useSentryScope();
hooks.useSentryScope(); hooks.useMainData();
hooks.useMainData(); hooks.useGetUsers();
hooks.useGetUsers(); hooks.useInsuranceData();
hooks.useInsuranceData(); hooks.useReactions();
hooks.useReactions(); }}
}} />
/>
</NavigationProvider>
); );
} }