From 64a537425a05a15ecfac3bf314735876dbbd8ed7 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 14 Mar 2021 02:32:09 +0300
Subject: feat: pull Products from api

---
 src/components/DataTable.tsx |  5 +++--
 src/containers/Products.tsx  | 22 +++++++++-------------
 src/hooks/useAPIClient.ts    | 21 +++++++++++++++++++++
 src/requests.ts              | 11 +++++++++++
 4 files changed, 44 insertions(+), 15 deletions(-)
 create mode 100644 src/hooks/useAPIClient.ts
 create mode 100644 src/requests.ts

(limited to 'src')

diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
index e75af18..e005454 100644
--- a/src/components/DataTable.tsx
+++ b/src/components/DataTable.tsx
@@ -9,12 +9,12 @@ interface Field {
 
 interface Props {
   title: string;
-  items: any[];
+  items?: any[];
   fields: Field[];
   handleRowClick?: (index: number) => void;
 }
 
-const DataTable: React.FC<Props> = ({ title, items, fields, handleRowClick = () => {} }) => {
+const DataTable: React.FC<Props> = ({ title, items = [], fields, handleRowClick = () => {} }) => {
   return (
     <>
       <div className="mb-2 flex justify-between items-center">
@@ -22,6 +22,7 @@ const DataTable: React.FC<Props> = ({ title, items, fields, handleRowClick = ()
         <Button size="sm">Добавить</Button>
       </div>
       <ListTable items={items} fields={fields} handleRowClick={handleRowClick} />
+      {items.length === 0 && <div className="text-center p-6">No data</div>}
     </>
   );
 };
diff --git a/src/containers/Products.tsx b/src/containers/Products.tsx
index 9b4f507..8cd301a 100644
--- a/src/containers/Products.tsx
+++ b/src/containers/Products.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Paper from '../components/Paper';
 import DataTable from '../components/DataTable';
+import { useProducts } from '../hooks/useAPIClient';
 
 const fields = [
   { key: '_id', label: 'ID' },
@@ -8,19 +9,14 @@ const fields = [
   { key: 'type', label: 'Тип' },
 ];
 
-const items = [
-  { _id: 1, name: 'Товар 1', type: 'Кондиционер' },
-  { _id: 2, name: 'Товар 2', type: 'Кондиционер' },
-  { _id: 3, name: 'Товар 3', type: 'Кондиционер' },
-  { _id: 4, name: 'Товар 4', type: 'Кондиционер' },
-  { _id: 5, name: 'Товар 5', type: 'Кондиционер' },
-  { _id: 6, name: 'Товар 6', type: 'Кондиционер' },
-];
+const Home: React.FC = () => {
+  const { data: products } = useProducts();
 
-const Home: React.FC = () => (
-  <Paper>
-    <DataTable title="Товары" items={items} fields={fields} />
-  </Paper>
-);
+  return (
+    <Paper>
+      <DataTable title="Товары" items={products} fields={fields} />
+    </Paper>
+  );
+};
 
 export default Home;
diff --git a/src/hooks/useAPIClient.ts b/src/hooks/useAPIClient.ts
new file mode 100644
index 0000000..a27453e
--- /dev/null
+++ b/src/hooks/useAPIClient.ts
@@ -0,0 +1,21 @@
+import useSWR, { responseInterface } from 'swr';
+import { get } from '../requests';
+
+type Response<T> = responseInterface<T, Error>;
+
+export interface Product {
+  _id: string;
+  name: string;
+  description: string;
+  price: number;
+  quantity: number;
+  specs: any;
+  createdAt: string;
+  updatedAt: string;
+}
+
+const fetcher = (endpoint: string) => get(endpoint).then(response => response.data);
+
+export const useProducts = (): Response<Product[]> => {
+  return useSWR('/products', fetcher);
+};
diff --git a/src/requests.ts b/src/requests.ts
new file mode 100644
index 0000000..2873b37
--- /dev/null
+++ b/src/requests.ts
@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+const baseURL = process.env.NODE_ENV === 'production'
+  ? 'PUT_PRODUCTION_URL_HERE'
+  : 'http://localhost:3030';
+
+const requests = axios.create({ baseURL });
+
+export const { get, post, put, patch } = requests;
+export default requests;
+
-- 
cgit v1.2.3