From e1fc8ea5904de90f94d3f63287555c75067846ac Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 14 Mar 2021 03:03:12 +0300
Subject: feat: add Page component

---
 src/components/Button.tsx    | 11 +++++++++--
 src/components/DataTable.tsx | 30 ------------------------------
 src/components/ListTable.tsx |  5 +++--
 src/containers/Home.tsx      |  6 +++---
 src/containers/Page.tsx      | 25 +++++++++++++++++++++++++
 src/containers/Products.tsx  | 14 +++++++++-----
 6 files changed, 49 insertions(+), 42 deletions(-)
 delete mode 100644 src/components/DataTable.tsx
 create mode 100644 src/containers/Page.tsx

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 8f2398b..5724b40 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,6 +1,9 @@
-import React from 'react';
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
 
 interface Props {
+  onClick?: () => void;
+  route?: string;
   variant?: 'contained' | 'outlined';
   size?: 'sm' | 'md' | 'lg';
   children: string;
@@ -18,10 +21,14 @@ const sizes = {
   sm: 'p-3',
 };
 
-const Button: React.FC<Props> = ({ variant = 'contained', size = 'md', children }) => {
+const Button: React.FC<Props> = ({ onClick, route, variant = 'contained', size = 'md', children }) => {
+  const history = useHistory();
+  const navigateRoute = useCallback(() => history.push(route || '/'), [route, history]);
+
   return (
     <button
       type="button"
+      onClick={route ? navigateRoute : onClick}
       className={`m-3 font-bold tracking-wide hover:underline focus:outline-none ${variants[variant]} ${sizes[size]}`}
     >
       {children}
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
deleted file mode 100644
index e005454..0000000
--- a/src/components/DataTable.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import ListTable from './ListTable';
-import Button from './Button';
-
-interface Field {
-  key: string;
-  label: string;
-}
-
-interface Props {
-  title: string;
-  items?: any[];
-  fields: Field[];
-  handleRowClick?: (index: number) => void;
-}
-
-const DataTable: React.FC<Props> = ({ title, items = [], fields, handleRowClick = () => {} }) => {
-  return (
-    <>
-      <div className="mb-2 flex justify-between items-center">
-        <span className="text-2xl font-bold">{title}</span>
-        <Button size="sm">Добавить</Button>
-      </div>
-      <ListTable items={items} fields={fields} handleRowClick={handleRowClick} />
-      {items.length === 0 && <div className="text-center p-6">No data</div>}
-    </>
-  );
-};
-
-export default DataTable;
diff --git a/src/components/ListTable.tsx b/src/components/ListTable.tsx
index 9315a27..85b86aa 100644
--- a/src/components/ListTable.tsx
+++ b/src/components/ListTable.tsx
@@ -6,13 +6,14 @@ interface Field {
 }
 
 interface Props {
-  items: any[];
+  items?: any[];
   fields: Field[];
   handleRowClick?: (index: number) => void;
 }
 
 
-const ListTable: React.FC<Props> = ({ items, fields, handleRowClick = () => {} }) => {
+const ListTable: React.FC<Props> = ({ items = [], fields, handleRowClick = () => {} }) => {
+  if (!items.length) return <div className="text-center p-6">No data</div>;
   return (
     <table className="table-auto w-full">
       <thead>
diff --git a/src/containers/Home.tsx b/src/containers/Home.tsx
index 7f62186..f39861a 100644
--- a/src/containers/Home.tsx
+++ b/src/containers/Home.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import Paper from '../components/Paper';
+import Page from '../containers/Page';
 import Button from '../components/Button';
 
 const Home: React.FC = () => (
-  <Paper>
+  <Page title="Главная">
     <p>
       Привет, мир!
       <Button>Нажми меня</Button>
       <Button variant="outlined">Отменить</Button>
     </p>
-  </Paper>
+  </Page>
 );
 
 export default Home;
diff --git a/src/containers/Page.tsx b/src/containers/Page.tsx
new file mode 100644
index 0000000..0c8269e
--- /dev/null
+++ b/src/containers/Page.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import Paper from '../components/Paper';
+import Button from '../components/Button';
+
+interface Action {
+  name: string;
+  route: string;
+}
+
+interface Props {
+  title: string;
+  actions?: Action[];
+}
+
+const Page: React.FC<Props> = ({ title, actions, children }) => (
+  <Paper>
+    <div className="mb-2 flex justify-between items-center">
+      <span className="text-2xl font-bold">{title}</span>
+      {actions?.map(action => (<Button size="sm" route={action.route}>{action.name}</Button>))}
+    </div>
+    {children}
+  </Paper>
+);
+
+export default Page;
diff --git a/src/containers/Products.tsx b/src/containers/Products.tsx
index 8cd301a..3542df1 100644
--- a/src/containers/Products.tsx
+++ b/src/containers/Products.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import Paper from '../components/Paper';
-import DataTable from '../components/DataTable';
+import Page from '../containers/Page';
+import ListTable from '../components/ListTable';
 import { useProducts } from '../hooks/useAPIClient';
 
 const fields = [
@@ -9,13 +9,17 @@ const fields = [
   { key: 'type', label: 'Тип' },
 ];
 
+const actions = [
+  { name: 'Добавить', route: 'products/add' }
+];
+
 const Home: React.FC = () => {
   const { data: products } = useProducts();
 
   return (
-    <Paper>
-      <DataTable title="Товары" items={products} fields={fields} />
-    </Paper>
+    <Page title="Товары" actions={actions}>
+      <ListTable items={products} fields={fields} />
+    </Page>
   );
 };
 
-- 
cgit v1.2.3