feat: save modal content

src/components/organisms/FiltersPresetModal/FiltersPresetModal.tsx

@@ -1,12 +1,18 @@
-import {Modal} from 'antd';
+import React, {Suspense} from 'react';
+
+import {Form, Modal, Skeleton} from 'antd';
 
 import {useAppDispatch, useAppSelector} from '@redux/hooks';
 import {closeFiltersPresetModal} from '@redux/reducers/ui';
 
+const SaveModalContent = React.lazy(() => import('./SaveModalContent'));
+
 const FiltersPresetModal: React.FC = () => {
   const dispatch = useAppDispatch();
   const uiState = useAppSelector(state => state.ui.filtersPresetModal);
 
+  const [form] = Form.useForm();
+
   if (!uiState) {
     return null;
   }
@@ -16,7 +22,13 @@ const FiltersPresetModal: React.FC = () => {
   };
 
   const onOk = () => {
-    dispatch(closeFiltersPresetModal());
+    form.validateFields().then(values => {
+      const {name} = values;
+
+      console.log(name);
+
+      dispatch(closeFiltersPresetModal());
+    });
   };
 
   return (
@@ -26,7 +38,10 @@ const FiltersPresetModal: React.FC = () => {
       onCancel={onCancel}
       onOk={onOk}
     >
-      <div>Test</div>
+      <Suspense fallback={<Skeleton />}>
+        {uiState.type === 'load' && null}
+        {uiState.type === 'save' && <SaveModalContent form={form} />}
+      </Suspense>
     </Modal>
   );
 };

src/components/organisms/FiltersPresetModal/SaveModalContent.tsx

@@ -0,0 +1,19 @@
+import {Form, FormInstance, Input} from 'antd';
+
+interface IProps {
+  form: FormInstance<any>;
+}
+
+const SaveModalContent: React.FC<IProps> = props => {
+  const {form} = props;
+
+  return (
+    <Form form={form} layout="vertical">
+      <Form.Item name="name" label="Preset name" rules={[{required: true, message: 'Preset name is required'}]}>
+        <Input id="filters-preset-name-input" placeholder="Enter preset name" />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default SaveModalContent;