From 2c106d1d3f6d59b10ad946e01e8bb3d0df587e40 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 14 Mar 2021 10:10:16 +0300
Subject: refactor: create Service abstraction

---
 src/containers/Service/Service.tsx        | 19 +++++++++++++
 src/containers/Service/ServiceContext.tsx | 20 ++++++++++++++
 src/containers/Service/ServiceForm.tsx    | 45 +++++++++++++++++++++++++++++++
 src/containers/Service/ServiceList.tsx    | 28 +++++++++++++++++++
 4 files changed, 112 insertions(+)
 create mode 100644 src/containers/Service/Service.tsx
 create mode 100644 src/containers/Service/ServiceContext.tsx
 create mode 100644 src/containers/Service/ServiceForm.tsx
 create mode 100644 src/containers/Service/ServiceList.tsx

(limited to 'src/containers/Service')

diff --git a/src/containers/Service/Service.tsx b/src/containers/Service/Service.tsx
new file mode 100644
index 0000000..3a7cbee
--- /dev/null
+++ b/src/containers/Service/Service.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Route, Switch, useRouteMatch } from 'react-router-dom';
+import ServiceList from './ServiceList';
+import ServiceForm from './ServiceForm';
+
+
+const Service: React.FC = () => {
+  const { path } = useRouteMatch();
+
+  return (
+    <Switch>
+      <Route exact path={path} component={ServiceList} />
+      <Route path={`${path}/add`} component={ServiceForm} />
+      <Route path={`${path}/edit/:id`} component={ServiceForm} />
+    </Switch>
+  );
+};
+
+export default Service;
diff --git a/src/containers/Service/ServiceContext.tsx b/src/containers/Service/ServiceContext.tsx
new file mode 100644
index 0000000..2602936
--- /dev/null
+++ b/src/containers/Service/ServiceContext.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export interface ServiceParams {
+  route: string;
+  name: string;
+  nameSingular: string;
+  tableFields: any[];
+  Form: React.FC<any>;
+}
+
+const ServiceContext = React.createContext<ServiceParams>({
+  route: '',
+  name: '',
+  nameSingular: '',
+  tableFields: [],
+  Form: () => null,
+});
+
+export const ServiceProvider = ServiceContext.Provider;
+export default ServiceContext;
diff --git a/src/containers/Service/ServiceForm.tsx b/src/containers/Service/ServiceForm.tsx
new file mode 100644
index 0000000..273f5bd
--- /dev/null
+++ b/src/containers/Service/ServiceForm.tsx
@@ -0,0 +1,45 @@
+import React, { useContext } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
+import { Formik } from 'formik';
+import Page, { Action } from '../Page';
+import hooks from '../../hooks/useAPIClient';
+import { post, patch } from '../../requests';
+import ServiceContext from './ServiceContext';
+
+interface Params {
+  id: string;
+}
+
+const actions: Action[] = [
+  { name: 'Назад', variant: 'outlined', route: '..' },
+  { name: 'Сохранить', type: 'submit', form: 'form' },
+];
+
+const ServiceForm: React.FC = () => {
+  const service = useContext(ServiceContext);
+  const history = useHistory();
+  const { id } = useParams<Params>();
+  const { data: item } = hooks[service.route].useItem(id);
+
+  const onSubmit = (values: any) => {
+    const promise = id
+      ? patch(`/${service.route}/${id}`, values)
+      : post(`/${service.route}`, values);
+    return promise.then(() => history.push(`/${service.route}`));
+  };
+
+  return (
+    <Page title={id ? item?.name : `Новый ${service.nameSingular}`} actions={actions}>
+      {(!id || item) && (
+        <Formik
+          initialValues={item || { name: '', debt: '', vatId: '' }}
+          onSubmit={onSubmit}
+        >
+          <service.Form />
+        </Formik>
+      )}
+    </Page>
+  );
+};
+
+export default ServiceForm;
diff --git a/src/containers/Service/ServiceList.tsx b/src/containers/Service/ServiceList.tsx
new file mode 100644
index 0000000..6af2d1b
--- /dev/null
+++ b/src/containers/Service/ServiceList.tsx
@@ -0,0 +1,28 @@
+import React, { useContext } from 'react';
+import { useHistory } from 'react-router-dom';
+import Page from '../Page';
+import ListTable from '../../components/ListTable';
+import hooks from '../../hooks/useAPIClient';
+import ServiceContext from './ServiceContext';
+
+
+const ServiceList: React.FC = () => {
+  const service = useContext(ServiceContext);
+  const history = useHistory();
+  const { data } = hooks[service.route].useList();
+
+  const actions = [{ name: 'Добавить', route: `/${service.route}/add` }];
+
+  const handleRowClick = (index: number) => {
+    const item = data && data[index];
+    history.push(`/${service.route}/edit/${item?._id}`);
+  };
+
+  return (
+    <Page title={service.name} actions={actions}>
+      <ListTable items={data} fields={service.tableFields} handleRowClick={handleRowClick} />
+    </Page>
+  );
+};
+
+export default ServiceList;
-- 
cgit v1.2.3