pages: add CRM graphql connection error

pages: use fetch data hooks (fetch all gql data on client)
mocks: use process.env variables

Components/Common/Error.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/prefer-default-export */
 import Button from 'Elements/Button';
 import Result from 'Elements/Result';
 
@@ -5,8 +6,8 @@ function handleRetry() {
   window.location.reload();
 }
 
-const retryButton = <Button action={handleRetry} text="Попробовать еще раз" />;
+const RetryButton = <Button action={handleRetry} text="Попробовать еще раз" />;
 
-export default function Error(props) {
-  return <Result extra={retryButton} {...props} />;
+export function CRMError() {
+  return <Result status="500" title="500" subTitle="Ошибка соединения с CRM" extra={RetryButton} />;
 }

mocks/handlers.js

@@ -23,10 +23,10 @@ const users = {
 };
 
 export const handlers = [
-  rest.get('http://auth_service/user', (req, res, ctx) => {
+  rest.get(process.env.NEXT_PUBLIC_URL_GET_USER_DIRECT, (req, res, ctx) => {
     return res(ctx.json(users.vchikalkin));
   }),
-  rest.post('/api/core/fingap', (req, res, ctx) => {
+  rest.post(process.env.NEXT_PUBLIC_URL_CORE_FINGAP_PROXY, (req, res, ctx) => {
     return res(
       ctx.json({
         sum: _.random(100000, 200000),
@@ -34,4 +34,7 @@ export const handlers = [
       })
     );
   }),
+  // rest.post(process.env.NEXT_PUBLIC_URL_CRM_GRAPHQL_PROXY, (req, res, ctx) => {
+  //   return res(ctx.status(503));
+  // }),
 ];

pages/index.jsx

@@ -1,16 +1,13 @@
-import { useApolloClient } from '@apollo/client';
-import { dehydrate, QueryClient, useQueryClient } from '@tanstack/react-query';
+import { dehydrate, QueryClient } from '@tanstack/react-query';
 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 Head from 'next/head';
-import getData, { getOwnerData } from 'process/init/get-data';
-import injectDefaultReactions from 'process/init/inject-reactions/default';
-import { useEffect } from 'react';
-import { useStore } from 'stores/hooks';
+import { useCRMData, useOwnerData } from 'process/init/get-data/hooks';
+import { useReactions } from 'process/init/inject-reactions/hooks';
 import styled from 'styled-components';
-import { trpcPureClient } from 'trpc/client';
 import { Box } from 'UIKit/grid';
 import { min } from 'UIKit/mq';
 
@@ -38,20 +35,12 @@ const Grid = styled(Box)`
   }
 `;
 
-function Home() {
-  const store = useStore();
-  const apolloClient = useApolloClient();
-  const queryClient = useQueryClient();
+function Home({ user }) {
+  const { error } = useOwnerData(user);
+  useReactions();
+  useCRMData(user);
 
-  useEffect(() => {
-    getData(apolloClient, store);
-    injectDefaultReactions({
-      store,
-      apolloClient,
-      queryClient,
-      trpcClient: trpcPureClient,
-    });
-  }, []);
+  if (error) return <CRMError />;
 
   return (
     <Grid>
@@ -78,13 +67,11 @@ export const getServerSideProps = async ({ req }) => {
   const user = await queryClient.fetchQuery(['user'], queryGetUser);
 
   const apolloClient = initializeApollo();
-  const { options: ownerOptions } = await getOwnerData(apolloClient, user);
 
   return {
     props: {
-      calculation: {
-        options: ownerOptions,
-      },
+      user,
+      calculation: null,
       initialApolloState: apolloClient.cache.extract(),
       initialQueryState: dehydrate(queryClient),
     },

process/init/get-data/get-owner-data.ts

@@ -3,7 +3,7 @@ import { gql } from '@apollo/client';
 import type { User } from 'api/user/types';
 import type { GetOwnerDataQuery, GetOwnerDataQueryVariables } from 'graphql/crm.types';
 
-const QUERY_GET_OWNER_DATA = gql`
+export const QUERY_GET_OWNER_DATA = gql`
   query GetOwnerData($domainname: String) {
     selectLead: leads(owner_domainname: $domainname) {
       label: fullname

process/init/get-data/hooks.js

@@ -1,10 +1,16 @@
+/* eslint-disable import/prefer-default-export */
+import { useApolloClient, useQuery } from '@apollo/client';
+import { useStore } from 'stores/hooks';
 import getAddProductTypes from './get-addproduct-types-data';
 import getBrands from './get-brands';
 import getDealers from './get-dealers';
 import getInsuranceData from './get-insurance-data';
 import getMainData from './get-main-data';
+import { QUERY_GET_OWNER_DATA } from './get-owner-data';
 
-export default function getData(apolloClient, store) {
+export function useCRMData() {
+  const store = useStore();
+  const apolloClient = useApolloClient();
   const { $calculation, $tables } = store;
 
   function setManyOptions(options) {
@@ -33,4 +39,36 @@ export default function getData(apolloClient, store) {
   getInsuranceData(apolloClient).then(({ tables }) => setManyRowOptions(tables.insurance));
 }
 
-export { default as getOwnerData } from './get-owner-data';
+export function useOwnerData(user) {
+  const store = useStore();
+  const { $calculation } = store;
+
+  function handleOnStartFetch() {
+    $calculation.$status.setStatus('selectLead', 'Loading');
+    $calculation.$status.setStatus('selectOpportunity', 'Loading');
+  }
+
+  function handleOnCompleted(data) {
+    $calculation.element('selectLead').setOptions(data?.selectLead);
+    $calculation.element('selectOpportunity').setOptions(data?.selectOpportunity);
+
+    $calculation.$status.setStatus('selectLead', 'Default');
+    $calculation.$status.setStatus('selectOpportunity', 'Default');
+  }
+
+  const { loading, error } = useQuery(QUERY_GET_OWNER_DATA, {
+    variables: {
+      domainname: user?.domainName,
+    },
+
+    onCompleted: handleOnCompleted,
+  });
+
+  if (loading) {
+    handleOnStartFetch();
+  }
+
+  return {
+    error,
+  };
+}

process/init/inject-reactions/hooks.js

@@ -0,0 +1,19 @@
+/* eslint-disable import/prefer-default-export */
+import { useApolloClient } from '@apollo/client';
+import { useQueryClient } from '@tanstack/react-query';
+import { useStore } from 'stores/hooks';
+import { trpcPureClient } from 'trpc/client';
+import injectDefaultReactions from './default';
+
+export function useReactions() {
+  const store = useStore();
+  const apolloClient = useApolloClient();
+  const queryClient = useQueryClient();
+
+  injectDefaultReactions({
+    store,
+    apolloClient,
+    queryClient,
+    trpcClient: trpcPureClient,
+  });
+}