From 962ed35352c67d813091d48cc09ad50369b2b185 Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Wed, 18 May 2022 21:54:29 +0300
Subject: [PATCH] Components & hooks: optimize

---
 .eslintrc.json                                | 13 +++-
 .../Calculation/builders/build-action.tsx     |  3 +-
 .../Calculation/builders/build-computed.tsx   |  4 +-
 .../Calculation/builders/build-options.tsx    |  9 +--
 .../Calculation/builders/build-readonly.tsx   |  4 +-
 .../Calculation/builders/build-value.tsx      | 15 ++---
 Elements/Button.tsx                           |  8 +--
 Elements/Checkbox.tsx                         | 13 ++--
 Elements/Input.tsx                            | 16 ++---
 Elements/InputNumber.tsx                      | 18 ++----
 Elements/Link.tsx                             |  6 +-
 Elements/Radio.tsx                            | 14 +++--
 Elements/Select.tsx                           | 27 +++++----
 Elements/Switch.tsx                           | 11 +---
 Elements/Text.tsx                             |  6 +-
 stores/calculation/options/hooks.js           | 12 +---
 stores/calculation/statuses/hooks.js          | 12 +---
 stores/calculation/validation/hooks.js        | 10 +---
 stores/calculation/values/hooks.js            | 60 +++++--------------
 19 files changed, 108 insertions(+), 153 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 3410de2..7d8d609 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -36,6 +36,17 @@
     "lines-between-class-members": "off",
     "@typescript-eslint/lines-between-class-members": ["off"],
     "indent": "off",
-    "@typescript-eslint/indent": ["off"]
+    "@typescript-eslint/indent": ["off"],
+    "react/jsx-no-bind": [
+      "error",
+      {
+        "ignoreDOMComponents": false,
+        "ignoreRefs": false,
+        "allowArrowFunctions": false,
+        "allowFunctions": true,
+        "allowBind": false
+      }
+    ],
+    "newline-before-return": "warn"
   }
 }
diff --git a/Components/Calculation/builders/build-action.tsx b/Components/Calculation/builders/build-action.tsx
index 1460172..9419338 100644
--- a/Components/Calculation/builders/build-action.tsx
+++ b/Components/Calculation/builders/build-action.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-bind */
 import { observer } from 'mobx-react-lite';
 import { useStatus } from 'stores/calculation/statuses/hooks';
 import { getAction } from '../config/map-actions';
@@ -7,7 +8,7 @@ export default function buildAction({ elementName, Component, ...props }: Builde
   const actionName = getAction(elementName);
 
   return observer(() => {
-    const { status } = useStatus(elementName);
+    const status = useStatus(elementName);
 
     return (
       <Component
diff --git a/Components/Calculation/builders/build-computed.tsx b/Components/Calculation/builders/build-computed.tsx
index 3ea7e13..c0b7f3c 100644
--- a/Components/Calculation/builders/build-computed.tsx
+++ b/Components/Calculation/builders/build-computed.tsx
@@ -8,8 +8,8 @@ export default function buildComputedValue({ elementName, Component, ...props }:
   const computedValueName = getComputedValueName(elementName);
 
   return observer(() => {
-    const { computedValue } = useComputedValue(computedValueName);
-    const { status } = useStatus(elementName);
+    const computedValue = useComputedValue(computedValueName);
+    const status = useStatus(elementName);
 
     return <Component value={computedValue} status={status} {...props} />;
   });
diff --git a/Components/Calculation/builders/build-options.tsx b/Components/Calculation/builders/build-options.tsx
index 2c6a199..7a4e245 100644
--- a/Components/Calculation/builders/build-options.tsx
+++ b/Components/Calculation/builders/build-options.tsx
@@ -2,7 +2,7 @@ import { observer } from 'mobx-react-lite';
 import { useOptions } from 'stores/calculation/options/hooks';
 import { useStatus } from 'stores/calculation/statuses/hooks';
 import { useValidation } from 'stores/calculation/validation/hooks';
-import { useValue } from 'stores/calculation/values/hooks';
+import { useSetValue, useValue } from 'stores/calculation/values/hooks';
 import { getValueName } from '../config/map-values';
 import type { BuilderProps } from './types';
 
@@ -10,10 +10,11 @@ export default function buildOptions({ elementName, Component, ...props }: Build
   const valueName = getValueName(elementName);
 
   return observer(() => {
-    const { value, setValue } = useValue(valueName);
-    const { status } = useStatus(elementName);
+    const value = useValue(valueName);
+    const setValue = useSetValue(valueName);
+    const status = useStatus(elementName);
     const { isValid, help } = useValidation(elementName);
-    const { options } = useOptions(elementName);
+    const options = useOptions(elementName);
 
     return (
       <Component
diff --git a/Components/Calculation/builders/build-readonly.tsx b/Components/Calculation/builders/build-readonly.tsx
index bd9f111..614466e 100644
--- a/Components/Calculation/builders/build-readonly.tsx
+++ b/Components/Calculation/builders/build-readonly.tsx
@@ -7,8 +7,8 @@ export default function buildReadonly({ elementName, Component, ...props }: Buil
   const valueName = getValueName(elementName);
 
   return observer(() => {
-    const { value } = useValue(valueName);
+    const value = useValue(valueName);
 
-    return <Component value={value} {...props} />;
+    return <Component value={value} readonly {...props} />;
   });
 }
diff --git a/Components/Calculation/builders/build-value.tsx b/Components/Calculation/builders/build-value.tsx
index 97878c9..5e006e6 100644
--- a/Components/Calculation/builders/build-value.tsx
+++ b/Components/Calculation/builders/build-value.tsx
@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react-lite';
 import { useStatus } from 'stores/calculation/statuses/hooks';
 import { useValidation } from 'stores/calculation/validation/hooks';
-import { useValue } from 'stores/calculation/values/hooks';
+import { useSetValue } from 'stores/calculation/values/hooks';
 import { getValueName } from '../config/map-values';
 import type { BuilderProps } from './types';
 
@@ -9,19 +9,12 @@ export default function buildValue({ elementName, Component, ...props }: Builder
   const valueName = getValueName(elementName);
 
   return observer(() => {
-    const { value, setValue } = useValue(valueName);
-    const { status } = useStatus(elementName);
+    const setValue = useSetValue(valueName);
+    const status = useStatus(elementName);
     const { isValid, help } = useValidation(elementName);
 
     return (
-      <Component
-        value={value}
-        setValue={setValue}
-        status={status}
-        isValid={isValid}
-        help={help}
-        {...props}
-      />
+      <Component setValue={setValue} status={status} isValid={isValid} help={help} {...props} />
     );
   });
 }
diff --git a/Elements/Button.tsx b/Elements/Button.tsx
index f944163..4aca367 100644
--- a/Elements/Button.tsx
+++ b/Elements/Button.tsx
@@ -1,5 +1,5 @@
 import type { ButtonProps } from 'antd';
-import { Button } from 'antd';
+import { Button as AntButton } from 'antd';
 import { throttle } from 'lodash';
 import type { Status } from './types';
 
@@ -9,19 +9,19 @@ type ElementProps = {
   text: string;
 };
 
-export default function Element({ status, action, text }: ElementProps) {
+export default function Button({ status, action, text }: ElementProps) {
   const throttledAction = throttle(action, 1200, {
     trailing: false,
   });
 
   return (
-    <Button
+    <AntButton
       disabled={status === 'Disabled'}
       loading={status === 'Loading'}
       onClick={throttledAction}
     >
       {text}
-    </Button>
+    </AntButton>
   );
 }
 
diff --git a/Elements/Checkbox.tsx b/Elements/Checkbox.tsx
index 6e4c72c..e9026b4 100644
--- a/Elements/Checkbox.tsx
+++ b/Elements/Checkbox.tsx
@@ -1,10 +1,11 @@
 import type { CheckboxProps } from 'antd';
-import { Checkbox, Form } from 'antd';
+import { Checkbox as AntCheckbox, Form } from 'antd';
+import type { CheckboxChangeEvent } from 'antd/lib/checkbox';
 import type { BaseElementProps } from './types';
 
 const { Item: FormItem } = Form;
 
-export default function Element({
+export default function Checkbox({
   value,
   setValue,
   status,
@@ -12,11 +13,15 @@ export default function Element({
   help,
   ...props
 }: BaseElementProps<boolean>) {
+  function handleChange(e: CheckboxChangeEvent) {
+    setValue(e.target.checked);
+  }
+
   return (
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
-      <Checkbox
+      <AntCheckbox
         checked={value}
-        onChange={(e) => setValue(e.target.value)}
+        onChange={handleChange}
         disabled={status === 'Disabled'}
         {...props}
       />
diff --git a/Elements/Input.tsx b/Elements/Input.tsx
index 256efec..470f84a 100644
--- a/Elements/Input.tsx
+++ b/Elements/Input.tsx
@@ -1,10 +1,11 @@
 import type { InputProps } from 'antd';
-import { Form, Input } from 'antd';
+import { Form, Input as AntInput } from 'antd';
+import type { ChangeEvent } from 'react';
 import type { BaseElementProps } from './types';
 
 const { Item: FormItem } = Form;
 
-export default function Element({
+export default function Input({
   value,
   setValue,
   status,
@@ -12,14 +13,13 @@ export default function Element({
   help,
   ...props
 }: BaseElementProps<string>) {
+  function handleChange(e: ChangeEvent<HTMLInputElement>) {
+    setValue(e.target.value);
+  }
+
   return (
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
-      <Input
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        disabled={status === 'Disabled'}
-        {...props}
-      />
+      <AntInput value={value} onChange={handleChange} disabled={status === 'Disabled'} {...props} />
     </FormItem>
   );
 }
diff --git a/Elements/InputNumber.tsx b/Elements/InputNumber.tsx
index 39b7ce5..a0c4169 100644
--- a/Elements/InputNumber.tsx
+++ b/Elements/InputNumber.tsx
@@ -1,17 +1,10 @@
 import type { InputNumberProps } from 'antd';
-import { Form, InputNumber } from 'antd';
+import { Form, InputNumber as AntInputNumber } from 'antd';
 import type { BaseElementProps } from './types';
 
 const { Item: FormItem } = Form;
 
-const parser = (val?: string): number => {
-  const res = val?.replace(/[^0-9.,]+/, '');
-  if (!res || res === '') return 0;
-  return parseFloat(res);
-};
-
-export default function Element({
-  value = 0,
+export default function InputNumber({
   setValue,
   status,
   isValid,
@@ -20,11 +13,10 @@ export default function Element({
 }: BaseElementProps<number>) {
   return (
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
-      <InputNumber
-        value={value}
-        onChange={(val) => setValue(val)}
+      <AntInputNumber
+        type="number"
+        onChange={setValue}
         disabled={status === 'Disabled'}
-        parser={parser}
         {...props}
       />
     </FormItem>
diff --git a/Elements/Link.tsx b/Elements/Link.tsx
index 4525c9b..b44abf7 100644
--- a/Elements/Link.tsx
+++ b/Elements/Link.tsx
@@ -1,11 +1,11 @@
 import DownloadOutlined from '@ant-design/icons/lib/icons/DownloadOutlined';
 import type { ButtonProps } from 'antd';
-import { Button } from 'antd';
+import { Button as AntButton } from 'antd';
 import type { BaseElementProps } from './types';
 
-export default function Element({ value, setValue, status, ...props }: BaseElementProps<string>) {
+export default function Link({ value, setValue, status, ...props }: BaseElementProps<string>) {
   return (
-    <Button
+    <AntButton
       rel="noopener"
       target="_blank"
       href={value}
diff --git a/Elements/Radio.tsx b/Elements/Radio.tsx
index 1d8d3b6..c78f71e 100644
--- a/Elements/Radio.tsx
+++ b/Elements/Radio.tsx
@@ -1,5 +1,5 @@
-import type { RadioProps } from 'antd';
-import { Form, Radio } from 'antd';
+import type { RadioChangeEvent, RadioProps } from 'antd';
+import { Form, Radio as AntRadio } from 'antd';
 import type { BaseElementProps, BaseOption } from './types';
 
 const { Item: FormItem } = Form;
@@ -8,7 +8,7 @@ type ElementProps = BaseElementProps<string | null> & {
   options: BaseOption[];
 };
 
-export default function Element({
+export default function Radio({
   value = null,
   setValue,
   options,
@@ -17,12 +17,16 @@ export default function Element({
   help,
   ...props
 }: ElementProps) {
+  function handleChange(e: RadioChangeEvent) {
+    setValue(e.target.value);
+  }
+
   return (
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
-      <Radio.Group
+      <AntRadio.Group
         value={value}
         options={options}
-        onChange={(e) => setValue(e.target.value)}
+        onChange={handleChange}
         disabled={status === 'Disabled'}
         {...props}
       />
diff --git a/Elements/Select.tsx b/Elements/Select.tsx
index 121face..8dce972 100644
--- a/Elements/Select.tsx
+++ b/Elements/Select.tsx
@@ -1,5 +1,6 @@
 import type { SelectProps } from 'antd';
-import { Form, Select } from 'antd';
+import { Form, Select as AntSelect } from 'antd';
+import { useMemo } from 'react';
 import type { BaseElementProps, BaseOption } from './types';
 
 const { Item: FormItem } = Form;
@@ -8,7 +9,7 @@ type ElementProps = BaseElementProps<string | null> & {
   options: BaseOption[];
 };
 
-export default function Element({
+export default function Select({
   value = null,
   setValue,
   options,
@@ -17,20 +18,26 @@ export default function Element({
   help,
   ...props
 }: ElementProps) {
+  const optionsWithNull = useMemo(
+    () => [
+      {
+        label: 'Не выбрано',
+        value: null,
+      },
+      ...options,
+    ],
+    [options]
+  );
+
   return (
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
-      <Select
+      <AntSelect
         value={value}
-        onChange={(val) => setValue(val)}
+        onChange={setValue}
         disabled={status === 'Disabled'}
         loading={status === 'Loading'}
         optionFilterProp="children"
-        options={[
-          {
-            label: 'Не выбрано',
-            value: null,
-          },
-        ].concat(options)}
+        options={optionsWithNull}
         {...props}
       />
     </FormItem>
diff --git a/Elements/Switch.tsx b/Elements/Switch.tsx
index bbda85e..e3575d1 100644
--- a/Elements/Switch.tsx
+++ b/Elements/Switch.tsx
@@ -1,10 +1,10 @@
 import type { SwitchProps } from 'antd';
-import { Form, Switch } from 'antd';
+import { Form, Switch as AntSwitch } from 'antd';
 import type { BaseElementProps } from './types';
 
 const { Item: FormItem } = Form;
 
-export default function Element({
+export default function Switch({
   value,
   setValue,
   status,
@@ -14,12 +14,7 @@ export default function Element({
 }: BaseElementProps<boolean>) {
   return (
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
-      <Switch
-        checked={value}
-        onChange={(enabled) => setValue(enabled)}
-        disabled={status === 'Disabled'}
-        {...props}
-      />
+      <AntSwitch checked={value} onChange={setValue} disabled={status === 'Disabled'} {...props} />
     </FormItem>
   );
 }
diff --git a/Elements/Text.tsx b/Elements/Text.tsx
index e6ed35e..aebbfba 100644
--- a/Elements/Text.tsx
+++ b/Elements/Text.tsx
@@ -1,13 +1,13 @@
 import styled from 'styled-components';
 import type { BaseElementProps } from './types';
 
-const Text = styled.span`
+const Span = styled.span`
   margin-bottom: 18px;
   font-size: 0.85rem;
 `;
 
-export default function Element({ value, ...props }: BaseElementProps<string>) {
-  return <Text {...props}>{value}</Text>;
+export default function Text({ value, ...props }: BaseElementProps<string>) {
+  return <Span {...props}>{value}</Span>;
 }
 
 type TextProps = {
diff --git a/stores/calculation/options/hooks.js b/stores/calculation/options/hooks.js
index beb95e9..9cb55bf 100644
--- a/stores/calculation/options/hooks.js
+++ b/stores/calculation/options/hooks.js
@@ -1,17 +1,9 @@
 /* eslint-disable import/prefer-default-export */
-import { computed } from 'mobx';
-import { useMemo } from 'react';
 import { useStore } from 'stores/hooks';
 
 export function useOptions(elementName) {
   const { $calculation } = useStore();
+  const options = $calculation.$options.getOptions(elementName);
 
-  const options = useMemo(
-    () => computed(() => $calculation.$options.getOptions(elementName)),
-    [$calculation.$options, elementName]
-  );
-
-  return {
-    options: options.get(),
-  };
+  return options;
 }
diff --git a/stores/calculation/statuses/hooks.js b/stores/calculation/statuses/hooks.js
index 6df7674..71ba1d9 100644
--- a/stores/calculation/statuses/hooks.js
+++ b/stores/calculation/statuses/hooks.js
@@ -1,17 +1,9 @@
 /* eslint-disable import/prefer-default-export */
-import { computed } from 'mobx';
-import { useMemo } from 'react';
 import { useStore } from 'stores/hooks';
 
 export function useStatus(elementName) {
   const { $calculation } = useStore();
+  const status = $calculation.$status.getStatus(elementName);
 
-  const status = useMemo(
-    () => computed(() => $calculation.$status.getStatus(elementName)),
-    [$calculation.$status, elementName]
-  );
-
-  return {
-    status: status.get(),
-  };
+  return status;
 }
diff --git a/stores/calculation/validation/hooks.js b/stores/calculation/validation/hooks.js
index 9e20313..61aeea7 100644
--- a/stores/calculation/validation/hooks.js
+++ b/stores/calculation/validation/hooks.js
@@ -1,18 +1,12 @@
 /* eslint-disable import/prefer-default-export */
-import { computed } from 'mobx';
-import { useMemo } from 'react';
 import { useStore } from 'stores/hooks';
 
 export function useValidation(elementName) {
   const { $calculation } = useStore();
-
-  const validationResult = useMemo(
-    () => computed(() => $calculation.$validation.getValidation(elementName)),
-    [$calculation.$validation, elementName]
-  ).get();
+  const validationResult = $calculation.$validation.getValidation(elementName);
 
   return {
     ...validationResult,
-    help: validationResult.isValid === false ? 'Некорректные данные' : null,
+    help: validationResult?.isValid === false ? 'Некорректные данные' : null,
   };
 }
diff --git a/stores/calculation/values/hooks.js b/stores/calculation/values/hooks.js
index 2e5db48..c3d2e58 100644
--- a/stores/calculation/values/hooks.js
+++ b/stores/calculation/values/hooks.js
@@ -1,62 +1,30 @@
-import { computed } from 'mobx';
-import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useStore } from 'stores/hooks';
 import { useDebouncedCallback } from 'use-debounce';
 
-const WAIT = 350;
-const MAX_WAIT = 1500;
-
 export function useValue(valueName) {
-  const [value, setValue] = useState();
+  const { $calculation } = useStore();
+  const value = $calculation.$values.getValue(valueName);
 
+  return value;
+}
+
+export function useSetValue(valueName) {
   const { $calculation } = useStore();
 
-  const setStoreValue = useCallback(
-    (val) => $calculation.$values.setValue(valueName, val),
-    [$calculation.$values, valueName]
-  );
-  const debouncedSetStoreValue = useDebouncedCallback(setStoreValue, WAIT, {
-    maxWait: MAX_WAIT,
-  });
-
-  /** Set local value to global store */
-  useEffect(() => {
-    debouncedSetStoreValue(value);
-  }, [debouncedSetStoreValue, value]);
-
-  const storeValue = useMemo(
-    () => computed(() => $calculation.$values.getValue(valueName)),
-    [$calculation.$values, valueName]
-  ).get();
-
-  /** Set initial value from global store to local state (only once) */
-  useEffect(
-    () => {
-      setValue(storeValue);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-
-  /** Get global store value and set it to local state */
-  useEffect(() => {
-    if (!debouncedSetStoreValue.isPending()) {
-      setValue(storeValue);
+  const debouncedSetStoreValue = useDebouncedCallback(
+    (value) => $calculation.$values.setValue(valueName, value),
+    350,
+    {
+      maxWait: 1500,
     }
-  }, [debouncedSetStoreValue, storeValue]);
+  );
 
-  return {
-    value,
-    setValue,
-  };
+  return debouncedSetStoreValue;
 }
 
 export function useComputedValue(valueName) {
   const { $calculation } = useStore();
-
   const computedValue = $calculation.$values.$computed[valueName];
 
-  return {
-    computedValue,
-  };
+  return computedValue;
 }