diff --git a/apps/web/Components/Layout/Auth.jsx b/apps/web/Components/Layout/Auth.jsx index e1c00b8..696a016 100644 --- a/apps/web/Components/Layout/Auth.jsx +++ b/apps/web/Components/Layout/Auth.jsx @@ -1,4 +1,5 @@ import { getUser } from '@/api/user/query'; +import { STALE_TIME } from '@/constants/request'; import { min } from '@/styles/mq'; import { useQuery } from '@tanstack/react-query'; import styled from 'styled-components'; @@ -19,8 +20,8 @@ const UserText = styled.span` `; function User() { - const { data: user } = useQuery(['user'], () => getUser(), { - enabled: false, + const { data: user } = useQuery(['user'], getUser, { + staleTime: STALE_TIME, }); return {user?.displayName}; diff --git a/apps/web/constants/request.js b/apps/web/constants/request.js index 4882586..c4bdb65 100644 --- a/apps/web/constants/request.js +++ b/apps/web/constants/request.js @@ -1 +1,10 @@ -export const STALE_TIME = Number.POSITIVE_INFINITY; +import dayjs from 'dayjs'; +import duration from 'dayjs/plugin/duration'; + +dayjs.extend(duration); + +export const STALE_TIME = dayjs + .duration({ + days: 1, + }) + .as('milliseconds'); diff --git a/apps/web/pages/index.jsx b/apps/web/pages/index.jsx index 3cb4704..5d9abba 100644 --- a/apps/web/pages/index.jsx +++ b/apps/web/pages/index.jsx @@ -1,12 +1,9 @@ -import { getUser } from '@/api/user/query'; -import initializeApollo from '@/apollo/client'; import * as Calculation from '@/Components/Calculation'; import { CRMError } from '@/Components/Common/Error'; import Output from '@/Components/Output'; import { useDefaultReactions } from '@/config/process'; import * as init from '@/process/init'; import { min } from '@/styles/mq'; -import { dehydrate, QueryClient } from '@tanstack/react-query'; import Head from 'next/head'; import styled from 'styled-components'; import { Box } from 'ui/grid'; @@ -38,6 +35,7 @@ const Grid = styled(Box)` function Home({ error }) { init.useMainData(); init.useInsuranceData(); + init.useInitialData(); useDefaultReactions(); if (error) return ; @@ -53,41 +51,9 @@ function Home({ error }) { ); } -/** @type {import('next').GetServerSideProps} */ -export const getServerSideProps = async ({ req }) => { - const { cookie = '' } = req.headers; - const queryGetUser = () => - getUser({ - headers: { - cookie, - }, - }); - - const queryClient = new QueryClient(); - const user = await queryClient.fetchQuery(['user'], queryGetUser); - - const apolloClient = initializeApollo(); - - try { - const { values, options } = await init.getInitialData(apolloClient, user); - - return { - props: { - calculation: { - options, - values, - }, - initialApolloState: apolloClient.cache.extract(), - initialQueryState: dehydrate(queryClient), - }, - }; - } catch (error) { - return { - props: { - error: JSON.stringify(error), - }, - }; - } -}; +/** @type {import('next').GetStaticProps} */ +export const getStaticProps = async () => ({ + props: {}, +}); export default Home; diff --git a/apps/web/process/init/get-initial-data.js b/apps/web/process/init/get-initial-data.js new file mode 100644 index 0000000..2ee36e7 --- /dev/null +++ b/apps/web/process/init/get-initial-data.js @@ -0,0 +1,69 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +import { getUser } from '@/api/user/query'; +import { STALE_TIME } from '@/constants/request'; +import * as CRMTypes from '@/graphql/crm.types'; +import { useStore } from '@/stores/hooks'; +import { useApolloClient } from '@apollo/client'; +import { useQuery } from '@tanstack/react-query'; +import { useEffect } from 'react'; +import { normalizeOptions } from 'tools'; + +/** + * @param {import('@apollo/client').ApolloClient} apolloClient + * @param {import('@/api/user/types').User } user + * @param {*} onCompleted + */ +export function getInitialData({ query }, user, onCompleted) { + query({ query: CRMTypes.GetLeadsDocument, variables: { domainname: user.domainName } }).then( + ({ data }) => { + onCompleted({ + selectLead: data?.leads, + }); + } + ); + + query({ + query: CRMTypes.GetOpportunitiesDocument, + variables: { domainname: user.domainName }, + }).then(({ data }) => { + onCompleted({ + selectOpportunity: data?.opportunities, + }); + }); + + query({ + query: CRMTypes.GetTransactionCurrenciesDocument, + }).then(({ data }) => { + onCompleted({ + selectSupplierCurrency: data?.transactioncurrencies, + }); + + const transactioncurrency_rub = data?.transactioncurrencies?.find( + (x) => x?.isocurrencycode === 'RUB' + ); + + onCompleted(null, { + supplierCurrency: transactioncurrency_rub?.value, + }); + }); +} + +export function useInitialData() { + const { $calculation } = useStore(); + const apolloClient = useApolloClient(); + const { data: user } = useQuery(['user'], getUser, { staleTime: STALE_TIME }); + + function handleOnCompleted(options, values) { + if (options) + Object.keys(options).forEach((elementName) => { + const elementOptions = options[elementName]; + $calculation.element(elementName).setOptions(normalizeOptions(elementOptions)); + }); + + if (values) $calculation.$values.hydrate(values); + } + + useEffect(() => { + if (user) getInitialData(apolloClient, user, handleOnCompleted); + }, [user]); +} diff --git a/apps/web/process/init/get-initial-data.ts b/apps/web/process/init/get-initial-data.ts deleted file mode 100644 index b585d3d..0000000 --- a/apps/web/process/init/get-initial-data.ts +++ /dev/null @@ -1,44 +0,0 @@ -/* eslint-disable @typescript-eslint/naming-convention */ -import type { User } from '@/api/user/types'; -import * as CRMTypes from '@/graphql/crm.types'; -import type { ApolloClient } from '@apollo/client'; - -export async function getInitialData({ query }: ApolloClient, user: User) { - const { - data: { leads }, - } = await query({ query: CRMTypes.GetLeadsDocument, variables: { domainname: user.domainName } }); - - const { - data: { opportunities }, - } = await query({ - query: CRMTypes.GetOpportunitiesDocument, - variables: { domainname: user.domainName }, - }); - - const { - data: { transactioncurrencies }, - } = await query({ - query: CRMTypes.GetTransactionCurrenciesDocument, - }); - - const transactioncurrency_rub = transactioncurrencies?.find((x) => x?.isocurrencycode === 'RUB'); - - if (transactioncurrency_rub?.transactioncurrencyid) - await query({ - query: CRMTypes.GetTransactionCurrencyDocument, - variables: { - currencyid: transactioncurrency_rub?.transactioncurrencyid, - }, - }); - - return { - options: { - selectLead: leads, - selectOpportunity: opportunities, - selectSupplierCurrency: transactioncurrencies, - }, - values: { - supplierCurrency: transactioncurrency_rub?.transactioncurrencyid ?? null, - }, - }; -} diff --git a/apps/web/trpc/client.ts b/apps/web/trpc/client.ts index 2648b33..7bf1305 100644 --- a/apps/web/trpc/client.ts +++ b/apps/web/trpc/client.ts @@ -26,7 +26,6 @@ export const trpcClient = createTRPCNext({ transformer: SuperJSON, }; }, - ssr: true, }); export const trpcPureClient = createTRPCProxyClient({