Complete pagination

riadelimemmedov · Feb 28, 2024 · ae8bb07 · ae8bb07
1 parent ceb6242
commit ae8bb07
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 50 deletions.
diff --git 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
diff --git 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
diff --git 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
@@ -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 (
         <>
             <div className="max-w-5xl mx-auto mt-20">
-                <div className="grid grid-cols-2 gap-5 text-center mt-4 mb-10">
-                    <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
-                        <div className="md:flex">
-                            <div className="md:shrink-0">
-                                <img className="h-48 w-full object-fill md:h-full md:w-48" src="https://placedog.net/300/200/11" alt="Modern building architecture"/>
-                            </div>
-                            <div className="p-8">
-                                <div className="grid-rows-4 grid-flow-col gap-4 text-left">
-                                    <span className='font-bold text-gray-500'>Name: </span><span>Frieda</span><br />
-                                    <hr />
-                                    <span className='font-bold text-gray-500'>Age: </span><span> 3</span><br />
-                                    <hr />
-                                    <span className='font-bold text-gray-500'>Breed: </span><span> Scottish Terrier</span><br />
-                                    <hr />
-                                    <span className='font-bold text-gray-500'>Location: </span><span> Lisco,Alabama</span><br />
-                                    <hr />
-                                    <span className='font-bold text-gray-500'>Age: </span><span> 3</span><br />
-                                    <hr />
-                                    <span className='font-bold text-gray-500'>Description: </span><span> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque maiores, veniam velit exercitationem totam quibusdam nam harum facilis accusamus nulla.</span><br />
-                                    <hr />
-                                </div>
-                                <button className="bg-sky-300 mt-4 hover:bg-sky-400 rounded py-2 w-full">Adopt Now</button>
-                            </div>
-                        </div>
+
+                <InfiniteScroll dataLength={petData.length} next={()=>setPage(()=>page+1)} hasMore={hasMore} loader={
+                    <div className="flex justify-center items-center h-screen">
+                        <div  className="border-t-4 border-b-4 border-gray-500 rounded-full w-12 h-12 animate-spin"></div>
                     </div>
-                </div>
+                }>
+                        {
+                            petData.map((pet,index) => (
+                                <div className="grid grid-cols-1 gap-5 text-center mt-4 mb-10" key={index}>
+                                    <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
+                                        <div className="md:flex">
+                                            <div className="md:shrink-0">
+                                                <img className="h-48 w-full object-fill md:h-full md:w-48" src="https://placedog.net/300/200/11" alt="Modern building architecture"/>
+                                            </div>
+                                            <div className="p-8">
+                                                <div className="grid-rows-4 grid-flow-col gap-4 text-left">
+                                                    <span className='font-bold text-gray-500'>Name: </span><span>Frieda</span><br />
+                                                    <hr />
+                                                    <span className='font-bold text-gray-500'>Age: </span><span> 3</span><br />
+                                                    <hr />
+                                                    <span className='font-bold text-gray-500'>Breed: </span><span> Scottish Terrier</span><br />
+                                                    <hr />
+                                                    <span className='font-bold text-gray-500'>Location: </span><span> Lisco,Alabama</span><br />
+                                                    <hr />
+                                                    <span className='font-bold text-gray-500'>Age: </span><span> 3</span><br />
+                                                    <hr />
+                                                    <span className='font-bold text-gray-500'>Description: </span><span> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque maiores, veniam velit exercitationem totam quibusdam nam harum facilis accusamus nulla.</span><br />
+                                                    <hr />
+                                                </div>
+                                                <button className="bg-sky-300 mt-4 hover:bg-sky-400 rounded py-2 w-full">Adopt Now</button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))
+                        }
+                </InfiniteScroll>
             </div>
         </>
     )