feat: add useOptions hook

6 files changed, 41 insertions, 12 deletions

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 18eb0ed..595208d 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Field } from 'formik';
 
-interface Option {
+export interface Option {
   key: string;
   label: string;
 }
diff --git a/src/containers/Service/ServiceContext.tsx b/src/containers/Service/ServiceContext.tsx
index 8f23d9d..6c1a760 100644
--- a/src/containers/Service/ServiceContext.tsx
+++ b/src/containers/Service/ServiceContext.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
+import { FormikProps } from 'formik';
 
 export interface ServiceParams {
   route: string;
   name: string;
   nameSingular: string;
   tableFields: any[];
-  Form: React.FC<any>;
+  Form: React.FC<FormikProps>;
   default: Record<string, any>;
 }
 
diff --git a/src/containers/Service/ServiceForm.tsx b/src/containers/Service/ServiceForm.tsx
index 62e4521..e2dfef6 100644
--- a/src/containers/Service/ServiceForm.tsx
+++ b/src/containers/Service/ServiceForm.tsx
@@ -35,9 +35,8 @@ const ServiceForm: React.FC = () => {
         <Formik
           initialValues={_.defaults(item, service.default)}
           onSubmit={onSubmit}
-        >
-          <service.Form />
-        </Formik>
+          children={service.Form}
+        />
       )}
     </Page>
   );
diff --git a/src/containers/WaybillForm.tsx b/src/containers/WaybillForm.tsx
index bb8d9ab..1e3276f 100644
--- a/src/containers/WaybillForm.tsx
+++ b/src/containers/WaybillForm.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { Form, Field } from 'formik';
+import { Form, FormikProps } from 'formik';
 import Input from '../components/Input';
 import Select from '../components/Select';
-import hooks from '../hooks/useAPIClient';
+import useOptions from '../hooks/useOptions';
 
-const WaybillForm: React.FC = () => {
-  const { data: contractors } = hooks.contractors.useList();
-  const { data: products } = hooks.products.useList();
+const WaybillForm: React.FC<FormikProps> = ({ setFieldValue, values }) => {
+  const contractorOptions = useOptions('contractors', 'contractorId', values, setFieldValue);
+  const productOptions = useOptions('products', 'productId', values, setFieldValue);
 
   return (
     <Form id="form">
@@ -14,12 +14,12 @@ const WaybillForm: React.FC = () => {
         <Select
           name="contractorId"
           label="Контрагент"
-          options={contractors?.map(c => ({ key: c._id, label: c.name }))}
+          options={contractorOptions}
         />
         <Select
           name="productId"
           label="Товар"
-          options={products?.map(p => ({ key: p._id, label: p.name }))}
+          options={productOptions}
         />
         <Select
           name="operation"
diff --git a/src/hooks/useOptions.ts b/src/hooks/useOptions.ts
new file mode 100644
index 0000000..de8fc95
--- /dev/null
+++ b/src/hooks/useOptions.ts
@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { Option } from '../components/Select';
+import hooks from './useAPIClient';
+
+// Load service entities and map them into select options
+// setting the default value in formik
+const useOptions = (
+  service: string,
+  field: string,
+  values: Record<string, any>,
+  setFieldValue: (any) => void,
+  mapper = item => ({ key: item._id, label: item.name }),
+): Option[] => {
+  const { data: items } = hooks[service].useList();
+
+  const options = items?.map(mapper);
+
+  useEffect(() => {
+    if (items?.length && !values[field]) {
+      setFieldValue(field, items[0]._id);
+    }
+  }, [items, setFieldValue]);
+
+  return options;
+};
+
+
+export default useOptions;
diff --git a/src/services.js b/src/services.js
index dbfedd5..b610aa9 100644
--- a/src/services.js
+++ b/src/services.js
@@ -43,6 +43,7 @@ const services: ServiceParams[] = [
       { key: 'quantity', label: 'Количество' },
     ],
     default: {
+      operation: 'in',
       quantity: 1,
     },
   },