Skip to content

Commit

Permalink
Solved page state problem
Browse files Browse the repository at this point in the history
  • Loading branch information
@riadelimemmedov
riadelimemmedov committed Feb 29, 2024
1 parent ae8bb07 commit 1fd049b
Show file tree
Hide file tree
Showing 6 changed files with 116 additions and 53 deletions.
29 changes: 29 additions & 0 deletions backend/apps/pet/migrations/0005_alter_pet_pet_photo_url.py
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# Generated by Django 5.0.1 on 2024-02-29 05:06

import django.core.validators
from django.db import migrations, models


class Migration(migrations.Migration):

dependencies = [
("pet", "0004_alter_pet_pet_photo_url"),
]

operations = [
migrations.AlterField(
model_name="pet",
name="pet_photo_url",
field=models.FileField(
default=1,
upload_to="",
validators=[
django.core.validators.FileExtensionValidator(
allowed_extensions=["png", "jpg", "jpeg"]
)
],
verbose_name="Pet photo",
),
preserve_default=False,
),
]
27 changes: 27 additions & 0 deletions backend/apps/pet/migrations/0006_alter_pet_pet_photo_url.py
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# Generated by Django 5.0.1 on 2024-02-29 05:18

import django.core.validators
from django.db import migrations, models


class Migration(migrations.Migration):

dependencies = [
("pet", "0005_alter_pet_pet_photo_url"),
]

operations = [
migrations.AlterField(
model_name="pet",
name="pet_photo_url",
field=models.FileField(
upload_to="",
validators=[
django.core.validators.FileExtensionValidator(
allowed_extensions=["png", "jpg", "jpeg", "avif"]
)
],
verbose_name="Pet photo",
),
),
]
12 changes: 9 additions & 3 deletions backend/apps/pet/models.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,15 @@ class Pet(TimeStampedModel, LifecycleModel):
)
pet_photo_url = models.FileField(
_("Pet photo"),
blank=True,
null=True,
validators=[FileExtensionValidator(allowed_extensions=["png", "jpg", "jpeg"])],
validators=[
FileExtensionValidator(
allowed_extensions=[
"png",
"jpg",
"jpeg",
]
)
],
)
location = models.CharField(_("Location"), max_length=50)
city = models.CharField(_("City"), max_length=50)
Expand Down
2 changes: 1 addition & 1 deletion backend/apps/pet/pagination.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

# !PetPagination
class PetPagination(PageNumberPagination):
page_size = 2 # Set the number of items per page
page_size = 5 # Set the number of items per page
cursor_query_param = "page"

def get_paginated_response(self, data):
Expand Down
26 changes: 13 additions & 13 deletions backend/config/base.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,18 +292,18 @@
}

# !Django Redis Cache
CACHES = {
"default": {
"BACKEND": "django_redis.cache.RedisCache",
"LOCATION": "redis://{}:{}/{}".format(
config("REDIS_HOST"),
config("REDIS_PORT"),
config("REDIS_DB"),
),
"OPTIONS": {
"CLIENT_CLASS": "django_redis.client.DefaultClient",
},
}
}
# CACHES = {
# "default": {
# "BACKEND": "django_redis.cache.RedisCache",
# "LOCATION": "redis://{}:{}/{}".format(
# config("REDIS_HOST"),
# config("REDIS_PORT"),
# config("REDIS_DB"),
# ),
# "OPTIONS": {
# "CLIENT_CLASS": "django_redis.client.DefaultClient",
# },
# }
# }

print("Configgg ", config("REDIS_HOST"), config("REDIS_PORT"), config("REDIS_DB"))
73 changes: 37 additions & 36 deletions frontend/contract-ui/src/components/Petitem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export function PetItem(){
}, 1500);
},[page])


// ?getPetData
const getPetData = async () => {
const apiUrl = `${url}/pets/?page=${page}`
Expand Down Expand Up @@ -46,42 +45,44 @@ export function PetItem(){
<>
<div className="max-w-5xl mx-auto mt-20">

<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>
}>
{
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>
{
petData.length > 0 ? (
<InfiniteScroll dataLength={petData.length} next={()=>setPage(prevState => prevState+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>
))
}
</InfiniteScroll>
}>
<div class="grid grid-cols-5 gap-5">
{
petData.map((pet,index) => (
<div class="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700" key={index}>
<a href="#">
<figure class="max-w-lg">
<img class="h-screen w-full max-w-full" src={url+pet.pet_photo_url ? null : pet_photo_url} alt="image description"/>
</figure>
</a>
<div class="px-5 pb-5">
<a href="#">
<h5 class="text-sm font-semibold tracking-tight text-gray-900 dark:text-white mt-2">{pet.name}</h5>
<hr />
</a>
<div class="flex items-center justify-between mt-2">
<span class="text-md font-bold text-gray-900 dark:text-white">$599</span>
<a href="#" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-sm px-1 py-1 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Add to cart</a>
</div>
</div>
</div>
))
}
</div>
</InfiniteScroll>
)
:
(
<p>Not founds</p>
)
}

</div>
</>
)
Expand Down

0 comments on commit 1fd049b

Please sign in to comment.