From 91e8cd3d1fca65ffb54bf9e01b7245ee5df41961 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=BB=D0=B0=D0=B4=D0=B8=D1=81=D0=BB=D0=B0=D0=B2=20?=
 =?UTF-8?q?=D0=A7=D0=B8=D0=BA=D0=B0=D0=BB=D0=BA=D0=B8=D0=BD?=
 <vchikalkin@evoleasing.ru>
Date: Thu, 24 Sep 2020 13:10:27 +0300
Subject: [PATCH] add modal

---
 src/client/Containers/Calculation/index.jsx    |  5 +++++
 src/client/Elements/Modal.jsx                  | 18 ++++++++++++++++++
 src/client/hocs/withStore.js                   | 15 +++++++++++++++
 src/client/hooks/useModal.js                   | 13 +++++++++++++
 .../stores/CalculationStore/Data/modal.js      | 13 +++++++++++++
 src/client/stores/CalculationStore/index.ts    | 12 +++++++++---
 src/core/types/stores.ts                       |  4 ++++
 7 files changed, 77 insertions(+), 3 deletions(-)
 create mode 100644 src/client/Elements/Modal.jsx
 create mode 100644 src/client/hooks/useModal.js
 create mode 100644 src/client/stores/CalculationStore/Data/modal.js

diff --git a/src/client/Containers/Calculation/index.jsx b/src/client/Containers/Calculation/index.jsx
index f5d13da..7f63c44 100644
--- a/src/client/Containers/Calculation/index.jsx
+++ b/src/client/Containers/Calculation/index.jsx
@@ -1,4 +1,6 @@
 import { Spin } from 'antd';
+import Modal from 'client/Elements/Modal';
+import { withStoreModal } from 'client/hocs/withStore';
 import { useStores } from 'client/hooks/useStores';
 import CalculationService from 'client/services/CalculationService';
 import { Box, Flex } from 'client/UIKit/grid';
@@ -41,6 +43,8 @@ const Calculation = () => {
     );
   }
 
+  const ModalComponent = withStoreModal(Modal);
+
   return (
     <Box mx={['0', '1%', '1%', '1.5%', '2%', '10%']}>
       <Flex flexWrap="wrap" mb="50px">
@@ -51,6 +55,7 @@ const Calculation = () => {
           // position={['sticky', 'sticky', 'sticky', 'relative']}
           // bottom={[0, 0, 0, null]}
         />
+        <ModalComponent />
       </Flex>
     </Box>
   );
diff --git a/src/client/Elements/Modal.jsx b/src/client/Elements/Modal.jsx
new file mode 100644
index 0000000..d8981eb
--- /dev/null
+++ b/src/client/Elements/Modal.jsx
@@ -0,0 +1,18 @@
+import { Modal as AntModal } from 'antd';
+import React from 'react';
+
+const Modal = ({ visible, text, closeModal, ...props }) => {
+  return (
+    <AntModal
+      {...props}
+      centered
+      visible={visible}
+      onOk={() => closeModal()}
+      onCancel={() => closeModal()}
+    >
+      {text}
+    </AntModal>
+  );
+};
+
+export default Modal;
diff --git a/src/client/hocs/withStore.js b/src/client/hocs/withStore.js
index bafed5d..355ca45 100644
--- a/src/client/hocs/withStore.js
+++ b/src/client/hocs/withStore.js
@@ -6,6 +6,7 @@ import { observer, useObserver } from 'mobx-react-lite';
 import React from 'react';
 import { useStores } from 'client/hooks/useStores';
 import { useTableOptions } from 'client/hooks/useOptions';
+import { useModal } from 'client/hooks/useModal';
 
 export const withStoreValue = Component => ({
   name,
@@ -98,3 +99,17 @@ export const withTableValue = Component => ({
   };
   return observer(ComponentWithStore);
 };
+
+export const withStoreModal = Modal => {
+  const ModalWithStore = () => {
+    const { isModalVisible, modalText, closeModal } = useModal();
+    return (
+      <Modal
+        visible={isModalVisible}
+        text={modalText}
+        closeModal={closeModal}
+      />
+    );
+  };
+  return observer(ModalWithStore);
+};
diff --git a/src/client/hooks/useModal.js b/src/client/hooks/useModal.js
new file mode 100644
index 0000000..8511ccc
--- /dev/null
+++ b/src/client/hooks/useModal.js
@@ -0,0 +1,13 @@
+import { useStores } from './useStores';
+
+export const useModal = () => {
+  const { calculationStore } = useStores();
+  const {
+    modal: { isModalVisible, modalText },
+  } = calculationStore;
+
+  const closeModal = () => {
+    calculationStore.closeModal();
+  };
+  return { isModalVisible, modalText, closeModal };
+};
diff --git a/src/client/stores/CalculationStore/Data/modal.js b/src/client/stores/CalculationStore/Data/modal.js
new file mode 100644
index 0000000..d5927dc
--- /dev/null
+++ b/src/client/stores/CalculationStore/Data/modal.js
@@ -0,0 +1,13 @@
+const modalData = { modal: { isModalVisible: false, modalText: undefined } };
+
+const modalActions = {
+  showModal(text) {
+    this.modal.modalText = text;
+    this.modal.isModalVisible = false;
+  },
+  closeModal() {
+    this.modal.isModalVisible = false;
+  },
+};
+
+export { modalData, modalActions };
diff --git a/src/client/stores/CalculationStore/index.ts b/src/client/stores/CalculationStore/index.ts
index 77fc22c..3aeec51 100644
--- a/src/client/stores/CalculationStore/index.ts
+++ b/src/client/stores/CalculationStore/index.ts
@@ -1,12 +1,16 @@
+import {
+  modalActions,
+  modalData,
+} from 'client/stores/CalculationStore/Data/modal';
 import assignProperties from 'client/tools/assignProps';
 import { ICalculationStore } from 'core/types/stores';
 import { autorun, observable, reaction, when } from 'mobx';
 import CommonStore from '../CommonStore';
 import {
-  valuesData,
-  valuesActions,
-  tablesData,
   tablesActions,
+  tablesData,
+  valuesActions,
+  valuesData,
 } from './Data/index';
 import autorunEffects from './Effects/autorun';
 import computedEffects from './Effects/computed';
@@ -20,6 +24,8 @@ const CalculationStore: ICalculationStore = observable(
     tablesData,
     tablesActions,
     computedEffects,
+    modalData,
+    modalActions,
   ),
 );
 
diff --git a/src/core/types/stores.ts b/src/core/types/stores.ts
index 2449cf0..14b33b0 100644
--- a/src/core/types/stores.ts
+++ b/src/core/types/stores.ts
@@ -52,4 +52,8 @@ export interface ICalculationStore {
 
   deleteTableRow: (tableName: TableNames, rowIndex: number) => void;
   cleanTable: (tableName: TableNames) => void;
+
+  modal: { isModalVisible: boolean; modalText: string };
+  showModal: (text: string) => void;
+  closeModal: () => void;
 }