project: convert computed values to readonly

Components/Calculation/builders/build-computed.tsx

@@ -1,23 +0,0 @@
-import { observer } from 'mobx-react-lite';
-import type { ComponentType } from 'react';
-import { useStatus } from 'stores/calculation/statuses/hooks';
-import type { ComputedValues } from 'stores/calculation/values/computed';
-import { useComputedValue } from 'stores/calculation/values/hooks';
-import type { Elements } from '../config/map/computed';
-
-type BuilderProps = {
-  elementName: Elements;
-  valueName: ComputedValues;
-};
-
-export default function buildComputedValue<T>(
-  Component: ComponentType<T>,
-  { elementName, valueName: computedValueName }: BuilderProps
-) {
-  return observer((props: T) => {
-    const computedValue = useComputedValue(computedValueName);
-    const status = useStatus(elementName);
-
-    return <Component value={computedValue} status={status} {...props} />;
-  });
-}

Components/Calculation/config/elements-builders.ts

@@ -1,5 +1,4 @@
 import buildAction from '../builders/build-action';
-import buildComputed from '../builders/build-computed';
 import buildOptions from '../builders/build-options';
 import buildReadonly from '../builders/build-readonly';
 import buildValue from '../builders/build-value';
@@ -27,7 +26,6 @@ const builders = wrapElementsBuilders({
   tbxComissionRub: buildValue,
   tbxSaleBonus: buildValue,
   tbxIRR_Perc: buildValue,
-  labelDepreciationGroup: buildValue,
   tbxLeaseObjectCount: buildValue,
   cbxWithTrailer: buildValue,
   cbxLeaseObjectUsed: buildValue,
@@ -69,7 +67,6 @@ const builders = wrapElementsBuilders({
   tbxTotalPayments: buildValue,
   tbxVehicleTaxInYear: buildValue,
   tbxVehicleTaxInLeasingPeriod: buildValue,
-  labelSubsidySum: buildValue,
   tbxMinPriceChange: buildValue,
 
   selectProduct: buildOptions,
@@ -131,10 +128,13 @@ const builders = wrapElementsBuilders({
   radioObjectRegistration: buildOptions,
   radioTypePTS: buildOptions,
 
-  labelLeaseObjectRisk: buildComputed,
-  tbxInsKaskoPriceLeasePeriod: buildComputed,
-  labelIrrInfo: buildComputed,
-  labelRegistrationDescription: buildComputed,
+  labelLeaseObjectRisk: buildReadonly,
+  tbxInsKaskoPriceLeasePeriod: buildReadonly,
+  labelIrrInfo: buildReadonly,
+  labelRegistrationDescription: buildReadonly,
+  labelDepreciationGroup: buildReadonly,
+  labelSubsidySum: buildReadonly,
+
   btnCreateKP: buildAction,
   btnCalculate: buildAction,
 

Components/Calculation/config/elements-components.ts

@@ -10,13 +10,9 @@ import Switch from 'Elements/Switch';
 import Text from 'Elements/Text';
 import type { ComponentProps } from 'react';
 import type { Elements as ActionElements } from './map/actions';
-import type { Elements as ComputedElements } from './map/computed';
 import type { Elements as ValuesElements } from './map/values';
 
-function wrapComponentsMap<
-  C,
-  T extends Record<ValuesElements | ComputedElements | ActionElements, C>
->(arg: T) {
+function wrapComponentsMap<C, T extends Record<ValuesElements | ActionElements, C>>(arg: T) {
   return arg;
 }
 
@@ -49,7 +45,6 @@ const components = wrapComponentsMap({
   selectBrand: Select,
   selectModel: Select,
   selectConfiguration: Select,
-  labelDepreciationGroup: Text,
   cbxLeaseObjectUsed: Checkbox,
   radioDeliveryTime: Segmented,
   tbxLeaseObjectCount: InputNumber,
@@ -139,14 +134,15 @@ const components = wrapComponentsMap({
   selectLegalClientTown: Select,
   selectSubsidy: Select,
   selectFuelCard: Select,
-  labelSubsidySum: Text,
   tbxMinPriceChange: InputNumber,
 
-  /** Computed Elements */
+  /** Readonly Elements */
   labelLeaseObjectRisk: Text,
   tbxInsKaskoPriceLeasePeriod: InputNumber,
   labelIrrInfo: Text,
   labelRegistrationDescription: Text,
+  labelDepreciationGroup: Text,
+  labelSubsidySum: InputNumber,
 
   /** Button Elements */
   btnCreateKP: Button,

Components/Calculation/config/elements-titles.ts

@@ -1,8 +1,7 @@
 import type { Elements as ActionElements } from './map/actions';
-import type { Elements as ComputedElements } from './map/computed';
 import type { Elements as ValuesElements } from './map/values';
 
-const titles: Record<ValuesElements | ComputedElements | ActionElements, string> = {
+const titles: Record<ValuesElements | ActionElements, string> = {
   selectLead: 'Интерес',
   selectOpportunity: 'Лизинговая сделка',
   selectQuote: 'Предложение',
@@ -32,7 +31,6 @@ const titles: Record<ValuesElements | ComputedElements | ActionElements, string>
   tbxIRR_Perc: 'IRR, %',
   selectLeaseObjectType: 'Тип предмета лизинга',
   radioDeliveryTime: 'Срок поставки',
-  labelDepreciationGroup: 'Группа обесценения',
   tbxLeaseObjectCount: 'Кол-во ПЛ в расчете',
   cbxWithTrailer: 'ТС с прицепом',
   cbxLeaseObjectUsed: 'ПЛ БУ',
@@ -117,7 +115,6 @@ const titles: Record<ValuesElements | ComputedElements | ActionElements, string>
   selectLegalClientRegion: 'Регион по юр.адресу клиента',
   selectLegalClientTown: 'Город по юр.адресу клиента',
   selectSubsidy: 'Субсидия',
-  labelSubsidySum: 'Сумма субсидии с НДС',
   selectFuelCard: 'Топливная карта',
   tbxMinPriceChange: 'Мин. возможное изменение стоимости ПЛ',
   tbxEngineHours: 'Моточасы',
@@ -130,11 +127,13 @@ const titles: Record<ValuesElements | ComputedElements | ActionElements, string>
   linkOpportunityUrl: '',
   linkQuoteUrl: '',
 
-  /** Computed Elements */
+  /** Readonly Elements */
   labelIrrInfo: 'Диапазон IRR (Номинал)',
   labelLeaseObjectRisk: 'Риск ПЛ',
   labelRegistrationDescription: 'Описание регистрации',
   tbxInsKaskoPriceLeasePeriod: 'Стоимость страховки КАСКО на весь срок',
+  labelDepreciationGroup: 'Группа обесценения',
+  labelSubsidySum: 'Сумма субсидии с НДС',
 
   /** Action Elements */
   btnCalculate: '',

Components/Calculation/config/map/computed.ts

@@ -1,16 +0,0 @@
-import type { ComputedValues } from 'stores/calculation/values/computed';
-
-function wrapElementsMap<T extends Record<string, ComputedValues>>(arg: T) {
-  return arg;
-}
-
-const elementsToComputed = wrapElementsMap({
-  labelLeaseObjectRisk: 'leaseObjectRiskName',
-  tbxInsKaskoPriceLeasePeriod: 'insKaskoPriceLeasePeriod',
-  labelIrrInfo: 'irrInfo',
-  labelRegistrationDescription: 'registrationDescription',
-});
-
-export default elementsToComputed;
-
-export type Elements = keyof typeof elementsToComputed;

Components/Calculation/config/map/index.js

@@ -1,5 +1,4 @@
 import actions from './actions';
-import computed from './computed';
 import values from './values';
 
-export default Object.assign(values, computed, actions);
+export default Object.assign(values, actions);

Components/Calculation/config/map/values.ts

@@ -37,7 +37,6 @@ const elementsToValues = wrapElementsMap({
   tbxIRR_Perc: 'IRR_Perc',
   selectLeaseObjectType: 'leaseObjectType',
   radioDeliveryTime: 'deliveryTime',
-  labelDepreciationGroup: 'depreciationGroup',
   tbxLeaseObjectCount: 'leaseObjectCount',
   cbxWithTrailer: 'withTrailer',
   cbxLeaseObjectUsed: 'leaseObjectUsed',
@@ -126,6 +125,13 @@ const elementsToValues = wrapElementsMap({
   selectFuelCard: 'fuelCard',
   tbxMinPriceChange: 'minPriceChange',
 
+  /** Readonly Elements */
+  labelLeaseObjectRisk: 'leaseObjectRiskName',
+  tbxInsKaskoPriceLeasePeriod: 'insKaskoPriceLeasePeriod',
+  labelIrrInfo: 'irrInfo',
+  labelRegistrationDescription: 'registrationDescription',
+  labelDepreciationGroup: 'depreciationGroup',
+
   /** Link Elements */
   linkDownloadKp: 'kpUrl',
   linkLeadUrl: 'leadUrl',

Components/Calculation/lib/render-rows.tsx

@@ -4,13 +4,9 @@ import type { BoxProps } from 'UIKit/grid';
 import { Box } from 'UIKit/grid';
 import elementsRender from '../config/elements-render';
 import type { Elements as ActionElements } from '../config/map/actions';
-import type { Elements as ComputedElements } from '../config/map/computed';
 import type { Elements as ValuesElements } from '../config/map/values';
 
-export type ElementsRow = [
-  elements: (ValuesElements | ComputedElements | ActionElements)[],
-  style?: BoxProps['sx']
-];
+export type ElementsRow = [elements: (ValuesElements | ActionElements)[], style?: BoxProps['sx']];
 type DividerRow = { title: string };
 
 export type FormTabRows = Array<ElementsRow | DividerRow>;

config/default-values.ts

@@ -97,7 +97,6 @@ const defaultValues: CalculationValues = {
   clientType: null,
   lastPaymentRub: 0,
   leaseObjectType: null,
-  depreciationGroup: null,
   leaseObjectUseFor: null,
   dealerRewardCondition: null,
   dealerBrokerRewardCondition: null,
@@ -121,12 +120,17 @@ const defaultValues: CalculationValues = {
   objectCategoryTax: null,
   objectTypeTax: null,
   subsidy: null,
-  subsidySum: 0,
   fuelCard: null,
   kpUrl: null,
   leadUrl: null,
   opportunityUrl: null,
   quoteUrl: null,
+  subsidySum: 0,
+  leaseObjectRiskName: '-',
+  insKaskoPriceLeasePeriod: 0,
+  irrInfo: '-',
+  registrationDescription: '-',
+  depreciationGroup: '-',
 };
 
 export default defaultValues;

stores/calculation/values/computed.ts

@@ -1,30 +0,0 @@
-/* eslint-disable import/no-cycle */
-import { makeAutoObservable } from 'mobx';
-import type RootStore from 'stores/root';
-
-export default class Computed {
-  root: RootStore;
-
-  constructor(rootStore: RootStore) {
-    makeAutoObservable(this);
-    this.root = rootStore;
-  }
-
-  get leaseObjectRiskName() {
-    return '';
-  }
-
-  get irrInfo() {
-    return '';
-  }
-
-  get registrationDescription() {
-    return '';
-  }
-
-  get insKaskoPriceLeasePeriod() {
-    return '';
-  }
-}
-
-export type ComputedValues = Exclude<keyof Computed, 'root'>;

stores/calculation/values/hooks.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/prefer-default-export */
 import { useStore } from 'stores/hooks';
 
 export function useValue(valueName) {
@@ -11,10 +12,3 @@ export function useValue(valueName) {
 
   return [storeValue, setStoreValue];
 }
-
-export function useComputedValue(valueName) {
-  const { $calculation } = useStore();
-  const computedValue = $calculation.$values.$computed[valueName];
-
-  return computedValue;
-}

stores/calculation/values/index.ts

@@ -4,18 +4,15 @@ import { getValueName } from 'Components/Calculation/config/map/values';
 import defaultValues from 'config/default-values';
 import { makeAutoObservable } from 'mobx';
 import type RootStore from '../../root';
-import Computed from './computed';
 import type { CalculationValues, Values } from './types';
 
 export default class ValuesStore {
   root: RootStore;
   values: CalculationValues = defaultValues;
-  $computed: Computed;
 
   constructor(rootStore: RootStore) {
     makeAutoObservable(this);
     this.root = rootStore;
-    this.$computed = new Computed(rootStore);
   }
 
   hydrate = (initialValues: CalculationValues) => {

stores/calculation/values/types.ts

@@ -66,7 +66,6 @@ export type CalculationValues = {
     | 100_000_011
     | 100_000_012
     | null;
-  depreciationGroup: string | null;
   leaseObjectCount: number;
   withTrailer: boolean;
   leaseObjectUsed: boolean;
@@ -211,7 +210,6 @@ export type CalculationValues = {
   legalClientRegion: string | null;
   legalClientTown: string | null;
   subsidy: string | null;
-  subsidySum: number;
   fuelCard: string | null;
   leaseObjectPriceWthtVAT: number;
   VATInLeaseObjectPrice: number;
@@ -222,6 +220,14 @@ export type CalculationValues = {
   leadUrl: string | null;
   opportunityUrl: string | null;
   quoteUrl: string | null;
+
+  /** Readonly Values */
+  leaseObjectRiskName: string | null;
+  insKaskoPriceLeasePeriod: number;
+  irrInfo: string | null;
+  registrationDescription: string | null;
+  depreciationGroup: string | null;
+  subsidySum: number;
 };
 
 export type Values = keyof CalculationValues;