add actions for buttons

src/client/Containers/Calculation/Sections/sectionsList.ts

@@ -15,6 +15,7 @@ import {
   validatePhone,
 } from 'client/tools/validate';
 import { ISections } from 'core/types/Calculation/components';
+import { ElementType } from 'core/types/elements';
 
 const sections: ISections[] = [
   {
@@ -274,13 +275,14 @@ const sections: ISections[] = [
           {
             elements: [
               {
+                type: ElementType.Button,
                 Component: Button,
                 props: {
                   type: 'primary',
                   size: 'large',
                   name: 'btnCreateLead',
                   text: 'Создать интерес',
-                  onClick: undefined,
+                  actionName: 'createLead',
                 },
               },
             ],
@@ -1357,7 +1359,7 @@ const sections: ISections[] = [
           {
             elements: [
               {
-                isTable: true,
+                type: ElementType.Table,
                 Component: Table,
                 props: {
                   name: 'tableInsurance',

src/client/Containers/Calculation/lib/buildElement.js

@@ -1,12 +1,24 @@
-import { withStoreValue, withTableData } from 'client/hocs/withStore';
+import {
+  withStoreButton,
+  withStoreValue,
+  withTableData,
+} from 'client/hocs/withStore';
+import { ElementType } from 'core/types/elements';
 
 export function buildElement({
-  isTable,
+  type,
   Component: Element,
   props: elementProps,
 }) {
-  if (isTable) {
-    return withTableData(Element)(elementProps);
+  switch (type) {
+    case ElementType.Table: {
+      return withTableData(Element)(elementProps);
+    }
+    case ElementType.Button: {
+      return withStoreButton(Element)(elementProps);
+    }
+    default: {
+      return withStoreValue(Element)(elementProps);
+    }
   }
-  return withStoreValue(Element)(elementProps);
 }

src/client/Elements/Button.jsx

@@ -2,13 +2,15 @@ import { Button as AntButton } from 'antd';
 import { Status } from 'core/types/statuses';
 import React from 'react';
 
-const Button = ({ status, onClick, text, ...props }) => {
+const Button = ({ status, action, text, ...props }) => {
   return (
     <AntButton
       {...props}
       disabled={status === Status.Disabled || status === Status.Loading}
       loading={status === Status.Loading}
-      onClick={onClick}
+      onClick={() => {
+        if (action) action();
+      }}
     >
       {text}
     </AntButton>

src/client/hocs/withStore.js

@@ -7,6 +7,7 @@ import React from 'react';
 import { useStores } from 'client/hooks/useStores';
 import { useTableOptions } from 'client/hooks/useOptions';
 import { useModal } from 'client/hooks/useModal';
+import { useAction } from 'client/hooks/useAction';
 
 export const withStoreValue = Component => ({
   name,
@@ -113,3 +114,13 @@ export const withStoreModal = Modal => {
   };
   return observer(ModalWithStore);
 };
+
+export const withStoreButton = Button => ({ name, actionName, ...params }) => {
+  const ButtonWithStore = () => {
+    const { status } = useStatus(name);
+    const { action } = useAction({ actionName });
+
+    return <Button {...params} status={status} action={action} />;
+  };
+  return ButtonWithStore;
+};

src/client/hooks/useAction.js

@@ -0,0 +1,7 @@
+import { useStores } from './useStores';
+
+export const useAction = ({ actionName }) => {
+  const { calculationStore } = useStores();
+  const action = calculationStore.actions[actionName];
+  return { action };
+};

src/client/stores/CalculationStore/Effects/action.ts

@@ -0,0 +1,10 @@
+import CalculationStore from 'client/stores/CalculationStore';
+import { TAction } from 'core/types/effect';
+
+const actions: TAction = {
+  createLead: () => {
+    console.log('createLead action');
+  },
+};
+
+export default { actions };

src/client/stores/CalculationStore/Effects/reaction.ts

@@ -318,7 +318,6 @@ const reactionEffects: IReactionEffect[] = [
           },
         })
           .then(reward_conditions => {
-            console.log('reward_conditions', reward_conditions);
             calculationStore.setOptions(
               'selectCalcDoubleAgentRewardCondition',
               reward_conditions,
@@ -360,7 +359,6 @@ const reactionEffects: IReactionEffect[] = [
           },
         })
           .then(reward_conditions => {
-            console.log('reward_conditions', reward_conditions);
             calculationStore.setOptions(
               'selectFinDepartmentRewardCondtion',
               reward_conditions,
@@ -402,7 +400,6 @@ const reactionEffects: IReactionEffect[] = [
           },
         })
           .then(reward_conditions => {
-            console.log('reward_conditions', reward_conditions);
             calculationStore.setOptions(
               'selectCalcBrokerRewardCondition',
               reward_conditions,

src/client/stores/CalculationStore/index.ts

@@ -2,6 +2,7 @@ import {
   modalActions,
   modalData,
 } from 'client/stores/CalculationStore/Data/modal';
+import actionsEffects from 'client/stores/CalculationStore/Effects/action';
 import assignProperties from 'client/tools/assignProps';
 import { ICalculationStore } from 'core/types/stores';
 import { autorun, observable, reaction, when } from 'mobx';
@@ -19,11 +20,13 @@ import whenEffects from './Effects/when';
 
 const CalculationStore: ICalculationStore = observable(
   assignProperties(
+    {},
     valuesData,
     valuesActions,
     tablesData,
     tablesActions,
     computedEffects,
+    actionsEffects,
     modalData,
     modalActions,
   ),

src/core/types/Calculation/components.ts

@@ -1,14 +1,16 @@
-import { ElementsNames } from 'core/types/elements';
+import { ActionsNames } from 'core/types/effect';
+import { ElementsNames, ElementType } from 'core/types/elements';
 import { ComputedValuesNames, ValuesNames } from 'core/types/values';
 
 interface IElement {
-  isTable?: boolean;
+  type?: ElementType;
   title?: string;
   Component: () => JSX.Element;
   props: {
     name: ElementsNames;
     valueName?: ValuesNames;
     computedValue?: ComputedValuesNames;
+    actionName?: ActionsNames;
     [key: string]: any;
   };
 }

src/core/types/effect.ts

@@ -4,19 +4,28 @@ import { ICalculationStore } from './stores';
 
 type TCommonStore = typeof CommonStore;
 
+export type ActionsNames = 'createLead';
+
+export type TAction = {
+  [actionName in ActionsNames]?: (
+    CalculationStore: ICalculationStore,
+    CommonStore?: TCommonStore,
+  ) => void;
+};
+
 export interface IAutorunEffect {
   (CalculationStore: ICalculationStore, CommonStore?: TCommonStore): () => void;
 }
 
 export interface IReactionEffect {
-  (CalculationStore: ICalculationStore): {
+  (CalculationStore: ICalculationStore, CommonStore?: TCommonStore): {
     expression: (r: IReactionPublic) => any;
     effect: (arg: any, r: IReactionPublic) => void;
   };
 }
 
 export interface IWhenEffect {
-  (CalculationStore: ICalculationStore): {
+  (CalculationStore: ICalculationStore, CommonStore?: TCommonStore): {
     predicate: () => boolean;
     effect: Lambda;
   };

src/core/types/elements.ts

@@ -136,6 +136,12 @@ export type ElementsNames =
   | 'lblLead'
   | 'lblOpportunity';
 
+export enum ElementType {
+  Default,
+  Table,
+  Button,
+}
+
 export type TElements<T> = {
   [elementName in ElementsNames]?: T;
 };