From 4068781ed5423f60e34d2c03dd1c6d223ba0e1f8 Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Tue, 17 May 2022 16:10:06 +0300
Subject: [PATCH] Components/Calculation: add build-action

---
 .../Calculation/builders/build-action.tsx     | 20 +++++++++++++
 Components/Calculation/config/map-actions.ts  | 11 ++++++++
 Elements/Button.tsx                           | 28 +++++++++++++++++++
 process/calculate/index.ts                    |  1 +
 process/create-kp/index.ts                    |  1 +
 5 files changed, 61 insertions(+)
 create mode 100644 Components/Calculation/builders/build-action.tsx
 create mode 100644 Components/Calculation/config/map-actions.ts
 create mode 100644 Elements/Button.tsx
 create mode 100644 process/calculate/index.ts
 create mode 100644 process/create-kp/index.ts

diff --git a/Components/Calculation/builders/build-action.tsx b/Components/Calculation/builders/build-action.tsx
new file mode 100644
index 0000000..1460172
--- /dev/null
+++ b/Components/Calculation/builders/build-action.tsx
@@ -0,0 +1,20 @@
+import { observer } from 'mobx-react-lite';
+import { useStatus } from 'stores/calculation/statuses/hooks';
+import { getAction } from '../config/map-actions';
+import type { BuilderProps } from './types';
+
+export default function buildAction({ elementName, Component, ...props }: BuilderProps) {
+  const actionName = getAction(elementName);
+
+  return observer(() => {
+    const { status } = useStatus(elementName);
+
+    return (
+      <Component
+        status={status}
+        {...props}
+        action={() => import(`process/${actionName}`).then((m) => m.default())}
+      />
+    );
+  });
+}
diff --git a/Components/Calculation/config/map-actions.ts b/Components/Calculation/config/map-actions.ts
new file mode 100644
index 0000000..a2c59d8
--- /dev/null
+++ b/Components/Calculation/config/map-actions.ts
@@ -0,0 +1,11 @@
+export const elementsToActions: Record<string, string> = {
+  btnCalculate: 'calculate',
+  btnCreateKP: 'create-kp',
+};
+
+export type Elements = keyof typeof elementsToActions;
+
+export function getAction(elementName: Elements) {
+  const actionName = elementsToActions[elementName];
+  return actionName;
+}
diff --git a/Elements/Button.tsx b/Elements/Button.tsx
new file mode 100644
index 0000000..f944163
--- /dev/null
+++ b/Elements/Button.tsx
@@ -0,0 +1,28 @@
+import type { ButtonProps } from 'antd';
+import { Button } from 'antd';
+import { throttle } from 'lodash';
+import type { Status } from './types';
+
+type ElementProps = {
+  status: Status;
+  action: () => void;
+  text: string;
+};
+
+export default function Element({ status, action, text }: ElementProps) {
+  const throttledAction = throttle(action, 1200, {
+    trailing: false,
+  });
+
+  return (
+    <Button
+      disabled={status === 'Disabled'}
+      loading={status === 'Loading'}
+      onClick={throttledAction}
+    >
+      {text}
+    </Button>
+  );
+}
+
+export type { ButtonProps };
diff --git a/process/calculate/index.ts b/process/calculate/index.ts
new file mode 100644
index 0000000..2d1ec23
--- /dev/null
+++ b/process/calculate/index.ts
@@ -0,0 +1 @@
+export default () => {};
diff --git a/process/create-kp/index.ts b/process/create-kp/index.ts
new file mode 100644
index 0000000..2d1ec23
--- /dev/null
+++ b/process/create-kp/index.ts
@@ -0,0 +1 @@
+export default () => {};