http: speed up loading page

pages/index.jsx

@@ -3,16 +3,13 @@ import { useApolloClient } from '@apollo/client';
 import initializeApollo from 'apollo/client';
 import * as Calculation from 'Components/Calculation';
 import Output from 'Components/Output';
-import defaultOptions from 'config/default-options';
-import * as InsuranceTableConfig from 'config/tables/insurance-table';
-import { merge } from 'lodash-es';
-import type { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import * as agentsReactions from 'process/agents/reactions';
 import * as calculateReactions from 'process/calculate/reactions';
-import { getCRMData } from 'process/init/get-data';
+import { getInsuranceData, getMainData, getOwnerData } from 'process/init/get-data';
 import * as leadOpportunityReactions from 'process/lead-opportunity/reactions';
 import paymentsReactions from 'process/payments/reactions';
+import { useEffect } from 'react';
 import { fetchUser } from 'services/user';
 import { useStore } from 'stores/hooks';
 import styled from 'styled-components';
@@ -43,21 +40,29 @@ const Grid = styled(Box)`
   }
 `;
 
+function injectReactions(store, apolloClient) {
+  leadOpportunityReactions.common(store, apolloClient);
+  leadOpportunityReactions.urls(store, apolloClient);
+  paymentsReactions(store, apolloClient);
+  calculateReactions.validation(store, apolloClient);
+  agentsReactions.common(store, apolloClient);
+}
+
 function Home() {
   const store = useStore();
   const apolloClient = useApolloClient();
 
-  /**
-   * add reactions to store
-   */
+  useEffect(() => {
+    getMainData(apolloClient).then(({ options }) => {
+      store.$calculation.$options.setManyOptions(options);
+    });
 
-  setTimeout(() => {
-    leadOpportunityReactions.common(store, apolloClient);
-    leadOpportunityReactions.urls(store, apolloClient);
-    paymentsReactions(store, apolloClient);
-    calculateReactions.validation(store, apolloClient);
-    agentsReactions.common(store, apolloClient);
-  });
+    getInsuranceData(apolloClient).then(({ tables }) => {
+      store.$tables.insurance.setManyRowOptions(tables.insurance);
+    });
+
+    injectReactions(store, apolloClient);
+  }, []);
 
   return (
     <Grid>
@@ -71,7 +76,7 @@ function Home() {
   );
 }
 
-export const getServerSideProps: GetServerSideProps = async ({ req }) => {
+export const getServerSideProps = async ({ req }) => {
   const { cookie = '' } = req.headers;
 
   const user = await fetchUser({
@@ -81,18 +86,14 @@ export const getServerSideProps: GetServerSideProps = async ({ req }) => {
   });
 
   const apolloClient = initializeApollo();
-  const { options, tables } = await getCRMData(apolloClient, user);
+
+  const { options: ownerOptions } = await getOwnerData(apolloClient, user);
 
   return {
     props: {
       user,
       calculation: {
-        options: merge(defaultOptions, options),
-      },
-      tables: {
-        insurance: {
-          options: merge(InsuranceTableConfig.defaultOptions, tables.insurance),
-        },
+        options: ownerOptions,
       },
 
       initialApolloState: apolloClient.cache.extract(),

process/init/get-data.ts

@@ -5,7 +5,6 @@ import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { getDomainName } from 'services/user/tools';
 import type { User } from 'services/user/types';
-import { normalizeOptions } from 'tools/entity';
 import type { GetAddproductTypes } from './__generated__/GetAddproductTypes';
 import type { GetInsuranceData } from './__generated__/GetInsuranceData';
 import type { GetMainOptions } from './__generated__/GetMainOptions';
@@ -133,7 +132,7 @@ const QUERY_GET_INSURANCE_DATA = gql`
   }
 `;
 
-export async function getCRMData(apolloClient: ApolloClient<NormalizedCache>, user: User) {
+export async function getOwnerData(apolloClient: ApolloClient<NormalizedCache>, user: User) {
   const { data: ownerData } = await apolloClient.query<GetOwnerData, GetOwnerDataVariables>({
     query: QUERY_GET_OWNER_DATA,
     variables: {
@@ -141,30 +140,20 @@ export async function getCRMData(apolloClient: ApolloClient<NormalizedCache>, us
     },
   });
 
+  return {
+    options: ownerData,
+  };
+}
+
+export async function getMainData(apolloClient: ApolloClient<object>) {
   // prettier-ignore
-  const { data: options } = await apolloClient.query<GetMainOptions>({
+  const { data: mainOptions } = await apolloClient.query<GetMainOptions>({
         query: QUERY_GET_MAIN_OPTIONS,
         variables: {
           currentDate: dayjs().utc().toISOString()
         }
       });
 
-  const { data: insuranceData } = await apolloClient.query<GetInsuranceData>({
-    query: QUERY_GET_INSURANCE_DATA,
-  });
-
-  const insurance = {
-    osago: {
-      insuranceCompany: normalizeOptions(insuranceData.osago),
-    },
-    kasko: {
-      insuranceCompany: normalizeOptions(insuranceData.kasko),
-    },
-    fingap: {
-      insuranceCompany: normalizeOptions(insuranceData.fingap),
-    },
-  };
-
   const { data: subsidies } = await apolloClient.query<GetSubsidies>({
     query: QUERY_GET_SUBSIDIES,
     variables: {
@@ -226,8 +215,7 @@ export async function getCRMData(apolloClient: ApolloClient<NormalizedCache>, us
 
   return {
     options: {
-      ...ownerData,
-      ...options,
+      ...mainOptions,
       selectSubsidy,
       selectImportProgram,
       selectRegionRegistration,
@@ -239,6 +227,27 @@ export async function getCRMData(apolloClient: ApolloClient<NormalizedCache>, us
       selectTracker,
       selectInsNSIB,
     },
+  };
+}
+
+export async function getInsuranceData(apolloClient: ApolloClient<object>) {
+  const { data: insuranceData } = await apolloClient.query<GetInsuranceData>({
+    query: QUERY_GET_INSURANCE_DATA,
+  });
+
+  const insurance = {
+    osago: {
+      insuranceCompany: insuranceData.osago,
+    },
+    kasko: {
+      insuranceCompany: insuranceData.kasko,
+    },
+    fingap: {
+      insuranceCompany: insuranceData.fingap,
+    },
+  };
+
+  return {
     tables: {
       insurance,
     },

stores/calculation/options/index.ts

@@ -3,6 +3,7 @@
 import type { Elements, ElementsTypes } from 'Components/Calculation/config/map/values';
 import defaultOptions from 'config/default-options';
 import type { BaseOption } from 'Elements/types';
+import { merge } from 'lodash-es';
 import { makeAutoObservable } from 'mobx';
 import type RootStore from 'stores/root';
 import type { CalculationOptions } from './types';
@@ -17,7 +18,7 @@ export default class OptionsStore {
   }
 
   hydrate = (initialOptions: CalculationOptions) => {
-    this.options = initialOptions;
+    this.options = merge(defaultOptions, initialOptions);
   };
 
   getOptions<T extends Elements>(elementName: T) {

stores/tables/insurance/index.ts

@@ -56,10 +56,14 @@ export default class InsuranceTable {
     return this.options[key];
   }
 
-  setRowOptions = (key: Insurance.Keys, rowOptions: Partial<Insurance.RowOptions>) => {
+  setRowOptions = (key: Insurance.Keys, rowOptions: Insurance.RowOptions) => {
     mergeWith(this.options[key], rowOptions);
   };
 
+  setManyRowOptions = (options: Partial<Record<Insurance.Keys, Insurance.RowOptions>>) => {
+    mergeWith(this.options, options);
+  };
+
   getRowStatuses(key: Insurance.Keys) {
     return this.statuses[key];
   }