116 lines
2.8 KiB
TypeScript
116 lines
2.8 KiB
TypeScript
import { gql, useApolloClient } from '@apollo/client';
|
||
import initializeApollo from 'apollo/client';
|
||
import * as Calculation from 'Components/Calculation';
|
||
import Output from 'Components/Output';
|
||
import type { GetServerSideProps } from 'next';
|
||
import Head from 'next/head';
|
||
import leadOpportunityUrlsReactions from 'process/lead-opportunity/reactions/urls';
|
||
import { fetchUser } from 'services/user';
|
||
import { getDomainName } from 'services/user/tools';
|
||
import { useStore } from 'stores/hooks';
|
||
import styled from 'styled-components';
|
||
import { convertEntitiesToOptions } from 'tools/entity';
|
||
import type { BasePageProps } from 'types/page';
|
||
import { Box } from 'UIKit/grid';
|
||
import { min } from 'UIKit/mq';
|
||
import type { GetOwnerData, GetOwnerDataVariables } from './__generated__/GetOwnerData';
|
||
|
||
const Grid = styled(Box)`
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
|
||
${min('laptop')} {
|
||
display: grid;
|
||
align-items: flex-start;
|
||
grid-template-columns: 2fr 1fr;
|
||
}
|
||
|
||
${min('desktop')} {
|
||
grid-template-columns: 2fr 1fr 1.5fr;
|
||
margin: 8px 5%;
|
||
}
|
||
|
||
${min('desktop-xl')} {
|
||
margin: 8px 10%;
|
||
}
|
||
`;
|
||
|
||
function Home({ data }: PageProps) {
|
||
const store = useStore();
|
||
const apolloClient = useApolloClient();
|
||
|
||
/**
|
||
* add reactions to store
|
||
*/
|
||
leadOpportunityUrlsReactions(store, apolloClient);
|
||
|
||
/**
|
||
* set initial data to store
|
||
*/
|
||
const leads = data.leads ? convertEntitiesToOptions(data.leads) : [];
|
||
const opportunities = data.opportunities ? convertEntitiesToOptions(data.opportunities) : [];
|
||
|
||
const { $calculation } = store;
|
||
|
||
$calculation.$options.setOptions({
|
||
selectLead: leads,
|
||
selectOpportunity: opportunities,
|
||
});
|
||
|
||
return (
|
||
<Grid>
|
||
<Head>
|
||
<title>Лизинговый калькулятор - Эволюция</title>
|
||
</Head>
|
||
<Calculation.Form />
|
||
<Calculation.Settings />
|
||
<Output />
|
||
</Grid>
|
||
);
|
||
}
|
||
|
||
type PageProps = BasePageProps & { data: GetOwnerData };
|
||
|
||
export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) => {
|
||
const user = await fetchUser({
|
||
headers: ctx?.req?.headers?.cookie
|
||
? {
|
||
cookie: ctx.req.headers.cookie,
|
||
}
|
||
: undefined,
|
||
});
|
||
|
||
const apolloClient = initializeApollo();
|
||
|
||
const { data: ownerData } = await apolloClient.query<GetOwnerData, GetOwnerDataVariables>({
|
||
query: gql`
|
||
query GetOwnerData($domainname: String) {
|
||
leads(owner_domainname: $domainname) {
|
||
fullname
|
||
leadid
|
||
}
|
||
opportunities(owner_domainname: $domainname) {
|
||
name
|
||
opportunityid
|
||
}
|
||
}
|
||
`,
|
||
variables: {
|
||
domainname: getDomainName(user),
|
||
},
|
||
});
|
||
|
||
return {
|
||
props: {
|
||
user,
|
||
data: {
|
||
...ownerData,
|
||
},
|
||
initialApolloState: apolloClient.cache.extract(),
|
||
},
|
||
};
|
||
};
|
||
|
||
export default Home;
|