summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json5
-rw-r--r--src/components/DataTable.tsx5
-rw-r--r--src/containers/Products.tsx22
-rw-r--r--src/hooks/useAPIClient.ts21
-rw-r--r--src/requests.ts11
-rw-r--r--yarn.lock22
6 files changed, 69 insertions, 17 deletions
diff --git a/package.json b/package.json
index 4a8a083..f084c2a 100644
--- a/package.json
+++ b/package.json
@@ -4,11 +4,14 @@
"private": true,
"dependencies": {
"@craco/craco": "^6.1.1",
+ "@types/axios": "^0.14.0",
+ "axios": "^0.21.1",
"lodash": "^4.17.21",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
+ "swr": "^0.5.3",
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
"typescript": "^4.1.2"
},
@@ -44,6 +47,7 @@
"@types/react-router-dom": "^5.1.7",
"@typescript-eslint/eslint-plugin": "^3.1.0",
"@typescript-eslint/parser": "^3.1.0",
+ "autoprefixer": "^9",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-airbnb-typescript": "^8.0.2",
@@ -51,7 +55,6 @@
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^2.5.1",
- "autoprefixer": "^9",
"postcss": "^7"
}
}
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;
+
diff --git a/yarn.lock b/yarn.lock
index 2d7783a..58ce24f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1620,6 +1620,7 @@
loader-utils "^2.0.0"
"@tailwindcss/postcss7-compat@^2.0.3", "tailwindcss@npm:@tailwindcss/postcss7-compat":
+ name tailwindcss
version "2.0.3"
resolved "https://registry.yarnpkg.com/@tailwindcss/postcss7-compat/-/postcss7-compat-2.0.3.tgz#d212aa672eb5aa789fbf1ac253000707603d7676"
integrity sha512-R43aiSzwlybDMhDld8vkSIKPSLXxbbmotZ+I2GIrX+IzFNy9JAByC7Ncf9A81Dg0JLBWHY5m769lBbBnJCF8cw==
@@ -1652,6 +1653,13 @@
resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
+"@types/axios@^0.14.0":
+ version "0.14.0"
+ resolved "https://registry.yarnpkg.com/@types/axios/-/axios-0.14.0.tgz#ec2300fbe7d7dddd7eb9d3abf87999964cafce46"
+ integrity sha1-7CMA++fX3d1+udOr+HmZlkyvzkY=
+ dependencies:
+ axios "*"
+
"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
version "7.1.12"
resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.12.tgz#4d8e9e51eb265552a7e4f1ff2219ab6133bdfb2d"
@@ -2592,6 +2600,13 @@ axe-core@^4.0.2:
resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.3.tgz#64a4c85509e0991f5168340edc4bedd1ceea6966"
integrity sha512-vwPpH4Aj4122EW38mxO/fxhGKtwWTMLDIJfZ1He0Edbtjcfna/R3YB67yVhezUMzqc3Jr3+Ii50KRntlENL4xQ==
+axios@*, axios@^0.21.1:
+ version "0.21.1"
+ resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+ integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+ dependencies:
+ follow-redirects "^1.10.0"
+
axobject-query@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -5250,7 +5265,7 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3"
readable-stream "^2.3.6"
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.10.0:
version "1.13.3"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.3.tgz#e5598ad50174c1bc4e872301e82ac2cd97f90267"
integrity sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==
@@ -10773,6 +10788,11 @@ svgo@^1.0.0, svgo@^1.2.2:
unquote "~1.1.1"
util.promisify "~1.0.0"
+swr@^0.5.3:
+ version "0.5.3"
+ resolved "https://registry.yarnpkg.com/swr/-/swr-0.5.3.tgz#7290a9a61329d930583ef365317e636b8dbaa8bb"
+ integrity sha512-RUE3RWn3jt9e4qLPat2A9vbHG/5N6konsc27xKjE65jFSiGv0P7HLD8IGvwAv6DRKktL7Od2UcayX0plKb2awg==
+
symbol-tree@^3.2.4:
version "3.2.4"
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 05:08:36 +0000