From ae8bb075754f9a0e4eb4c6bd0f51ced9715ac3ce Mon Sep 17 00:00:00 2001 From: Riad Elimemmedov Date: Wed, 28 Feb 2024 13:28:42 +0400 Subject: [PATCH] Complete pagination --- backend/config/base.py | 18 ++++ backend/poetry.lock | 39 +++---- backend/pyproject.toml | 1 + frontend/contract-ui/package-lock.json | 20 ++++ frontend/contract-ui/package.json | 1 + .../contract-ui/src/components/Petitem.jsx | 101 +++++++++++++----- 6 files changed, 130 insertions(+), 50 deletions(-) diff --git a/backend/config/base.py b/backend/config/base.py index c82cd81..3a43eb8 100644 --- a/backend/config/base.py +++ b/backend/config/base.py @@ -59,6 +59,7 @@ "colorfield", "storages", "debug_toolbar", + "corsheaders", ] # !Created Apps @@ -74,6 +75,7 @@ # !Middleware MIDDLEWARE = [ + "corsheaders.middleware.CorsMiddleware", "debug_toolbar.middleware.DebugToolbarMiddleware", "django.middleware.security.SecurityMiddleware", "django.contrib.sessions.middleware.SessionMiddleware", @@ -86,6 +88,22 @@ "middleware.metric.metric_middleware", ] + +# !CORS_ALLOWED_ORIGINS +CORS_ALLOW_ALL_ORIGINS = True + + +# !CORS_ALLOW_METHODS +CORS_ALLOW_METHODS = [ + "DELETE", + "GET", + "OPTIONS", + "PATCH", + "POST", + "PUT", +] + + # !Root UrlConf ROOT_URLCONF = "config.urls" diff --git a/backend/poetry.lock b/backend/poetry.lock index 38a46f1..6afa8e1 100644 --- a/backend/poetry.lock +++ b/backend/poetry.lock @@ -360,6 +360,21 @@ files = [ [package.dependencies] Pillow = ">=9.0.0" +[[package]] +name = "django-cors-headers" +version = "4.3.1" +description = "django-cors-headers is a Django application for handling the server headers required for Cross-Origin Resource Sharing (CORS)." +optional = false +python-versions = ">=3.8" +files = [ + {file = "django-cors-headers-4.3.1.tar.gz", hash = "sha256:0bf65ef45e606aff1994d35503e6b677c0b26cafff6506f8fd7187f3be840207"}, + {file = "django_cors_headers-4.3.1-py3-none-any.whl", hash = "sha256:0b1fd19297e37417fc9f835d39e45c8c642938ddba1acce0c1753d3edef04f36"}, +] + +[package.dependencies] +asgiref = ">=3.6" +Django = ">=3.2" + [[package]] name = "django-debug-toolbar" version = "4.3.0" @@ -1027,28 +1042,6 @@ nodeenv = ">=0.11.1" pyyaml = ">=5.1" virtualenv = ">=20.10.0" -[[package]] -name = "psycopg2" -version = "2.9.9" -description = "psycopg2 - Python-PostgreSQL Database Adapter" -optional = false -python-versions = ">=3.7" -files = [ - {file = "psycopg2-2.9.9-cp310-cp310-win32.whl", hash = "sha256:38a8dcc6856f569068b47de286b472b7c473ac7977243593a288ebce0dc89516"}, - {file = "psycopg2-2.9.9-cp310-cp310-win_amd64.whl", hash = "sha256:426f9f29bde126913a20a96ff8ce7d73fd8a216cfb323b1f04da402d452853c3"}, - {file = "psycopg2-2.9.9-cp311-cp311-win32.whl", hash = "sha256:ade01303ccf7ae12c356a5e10911c9e1c51136003a9a1d92f7aa9d010fb98372"}, - {file = "psycopg2-2.9.9-cp311-cp311-win_amd64.whl", hash = "sha256:121081ea2e76729acfb0673ff33755e8703d45e926e416cb59bae3a86c6a4981"}, - {file = "psycopg2-2.9.9-cp312-cp312-win32.whl", hash = "sha256:d735786acc7dd25815e89cc4ad529a43af779db2e25aa7c626de864127e5a024"}, - {file = "psycopg2-2.9.9-cp312-cp312-win_amd64.whl", hash = "sha256:a7653d00b732afb6fc597e29c50ad28087dcb4fbfb28e86092277a559ae4e693"}, - {file = "psycopg2-2.9.9-cp37-cp37m-win32.whl", hash = "sha256:5e0d98cade4f0e0304d7d6f25bbfbc5bd186e07b38eac65379309c4ca3193efa"}, - {file = "psycopg2-2.9.9-cp37-cp37m-win_amd64.whl", hash = "sha256:7e2dacf8b009a1c1e843b5213a87f7c544b2b042476ed7755be813eaf4e8347a"}, - {file = "psycopg2-2.9.9-cp38-cp38-win32.whl", hash = "sha256:ff432630e510709564c01dafdbe996cb552e0b9f3f065eb89bdce5bd31fabf4c"}, - {file = "psycopg2-2.9.9-cp38-cp38-win_amd64.whl", hash = "sha256:bac58c024c9922c23550af2a581998624d6e02350f4ae9c5f0bc642c633a2d5e"}, - {file = "psycopg2-2.9.9-cp39-cp39-win32.whl", hash = "sha256:c92811b2d4c9b6ea0285942b2e7cac98a59e166d59c588fe5cfe1eda58e72d59"}, - {file = "psycopg2-2.9.9-cp39-cp39-win_amd64.whl", hash = "sha256:de80739447af31525feddeb8effd640782cf5998e1a4e9192ebdf829717e3913"}, - {file = "psycopg2-2.9.9.tar.gz", hash = "sha256:d1454bde93fb1e224166811694d600e746430c006fbb031ea06ecc2ea41bf156"}, -] - [[package]] name = "psycopg2-binary" version = "2.9.9" @@ -1727,4 +1720,4 @@ testing = ["coverage (>=5.0)", "pytest", "pytest-cov"] [metadata] lock-version = "2.0" python-versions = "^3.10" -content-hash = "b667ecb057e8dc4ada58206c1b1858f77f3f28628e6eedb695bb3a0c4889deff" +content-hash = "970b4f85dec64a13615581f8f2615bb7e3f8c990b1b1213aad3c4a8314430678" diff --git a/backend/pyproject.toml b/backend/pyproject.toml index 5670927..1b5f292 100644 --- a/backend/pyproject.toml +++ b/backend/pyproject.toml @@ -36,6 +36,7 @@ redis = "^5.0.1" gunicorn = "^21.2.0" waitress = "^3.0.0" psycopg2-binary = "^2.9.9" +django-cors-headers = "^4.3.1" [tool.poetry.group.dev.dependencies] diff --git a/frontend/contract-ui/package-lock.json b/frontend/contract-ui/package-lock.json index 7476a22..4cab689 100644 --- a/frontend/contract-ui/package-lock.json +++ b/frontend/contract-ui/package-lock.json @@ -11,6 +11,7 @@ "moralis-v1": "^1.13.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-infinite-scroll-component": "^6.1.0", "react-toastify": "^10.0.4", "web3uikit": "^1.0.4" }, @@ -7450,6 +7451,17 @@ "react": "^18.2.0" } }, + "node_modules/react-infinite-scroll-component": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz", + "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==", + "dependencies": { + "throttle-debounce": "^2.1.0" + }, + "peerDependencies": { + "react": ">=16.0.0" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -8276,6 +8288,14 @@ "node": ">=0.8" } }, + "node_modules/throttle-debounce": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz", + "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==", + "engines": { + "node": ">=8" + } + }, "node_modules/through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", diff --git a/frontend/contract-ui/package.json b/frontend/contract-ui/package.json index 1de433b..9b7e8b5 100644 --- a/frontend/contract-ui/package.json +++ b/frontend/contract-ui/package.json @@ -12,6 +12,7 @@ "moralis-v1": "^1.13.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-infinite-scroll-component": "^6.1.0", "react-toastify": "^10.0.4", "web3uikit": "^1.0.4" }, diff --git a/frontend/contract-ui/src/components/Petitem.jsx b/frontend/contract-ui/src/components/Petitem.jsx index fc1644b..b4bcc2e 100644 --- a/frontend/contract-ui/src/components/Petitem.jsx +++ b/frontend/contract-ui/src/components/Petitem.jsx @@ -1,40 +1,87 @@ +import { useEffect, useState } from 'react'; import { ToastContainer, toast } from 'react-toastify'; +import InfiniteScroll from 'react-infinite-scroll-component'; //*PetItem export function PetItem(){ - //return jsx to client - const notify = () => toast("Wow so easy!"); + const [petData,setPetData] = useState([]) + const [hasMore,setHasMore] = useState(true) + const [page,setPage] = useState(1) + + const PAGE_LIMIT = 2 + + const url = "http://127.0.0.1:8000" + + useEffect(() => { + setTimeout(() => { + getPetData() + }, 1500); + },[page]) + + + // ?getPetData + const getPetData = async () => { + const apiUrl = `${url}/pets/?page=${page}` + try{ + const response = await fetch(apiUrl,{ + method: "GET", + }) + const {pet_objects,pet_count} = await response.json() + let pet_data; + if (pet_objects != undefined) { + pet_data = [...petData].concat(pet_objects) + } + if(petData.length + PAGE_LIMIT >= pet_count){ + setHasMore(false) + } + setPetData(pet_data) + } + catch(err){ + console.error('Occur error when want to fetch ', err) + } + } //return jsx to client return ( <>
-
-
-
-
- Modern building architecture -
-
-
- Name: Frieda
-
- Age: 3
-
- Breed: Scottish Terrier
-
- Location: Lisco,Alabama
-
- Age: 3
-
- Description: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque maiores, veniam velit exercitationem totam quibusdam nam harum facilis accusamus nulla.
-
-
- -
-
+ + setPage(()=>page+1)} hasMore={hasMore} loader={ +
+
-
+ }> + { + petData.map((pet,index) => ( +
+
+
+
+ Modern building architecture +
+
+
+ Name: Frieda
+
+ Age: 3
+
+ Breed: Scottish Terrier
+
+ Location: Lisco,Alabama
+
+ Age: 3
+
+ Description: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque maiores, veniam velit exercitationem totam quibusdam nam harum facilis accusamus nulla.
+
+
+ +
+
+
+
+ )) + } +
)