add modal

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>
   );

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;

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);
+};

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 };
+};

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 };

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,
   ),
 );
 

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;
 }