pagination

bk_api/bills/management/commands/populate_db.py

@@ -71,8 +71,8 @@ class Command(BaseCommand):
         return created_shops
 
     def _create_receipts(self, user, shops, tags, shop_tags):
-        # dates for last 30 days
+        # dates for last 100 days
-        for d in [date.today() - timedelta(31) + timedelta(n)for n in range(31)]:
+        for d in [date.today() - timedelta(100) + timedelta(n)for n in range(100)]:
             if random.random() > 0.4:
                 continue
             receipt_date = f"{d.year}-{d.month}-{d.day}"

bk_api/bills/views.py

@@ -1,6 +1,6 @@
 from django.shortcuts import render
 
-from rest_framework import viewsets, permissions, pagination
+from rest_framework import viewsets, permissions, pagination, filters
 
 from .models import Tag, Product, ProductOnBill, Receipt, Shop, ShopTag
 from .serializers import TagSerializer, ProductSerializer, ProductOnBillSerializer, ReceiptSerializer, ShopSerializer, ShopTagSerializer
@@ -32,6 +32,7 @@ class ShopViewSet(viewsets.ModelViewSet):
     queryset = Shop.objects.all()
     # permission_classes = [permissions.AllowAny]
     serializer_class = ShopSerializer
+
     def get_queryset(self):
         return self.request.user.shops.all()
 
@@ -71,6 +72,8 @@ class ReceiptViewSet(viewsets.ModelViewSet):
     queryset = Receipt.objects.all()
     serializer_class = ReceiptSerializer
     pagination_class = StandardResultsSetPagination
+    filter_backends = [filters.OrderingFilter]
+    ordering = ['-date']
 
     def get_queryset(self):
         return self.request.user.receipts.all()

bk_webapp/src/screens/Digest/subscreens/Receipts/Receipts.jsx

@@ -5,7 +5,8 @@ import {
   Container,
   Menu,
   Accordion,
-  Table
+  Table,
+  Pagination
 } from "semantic-ui-react";
 import axios from "axios";
 
@@ -48,6 +49,8 @@ function Receipts() {
   const [page, setPage] = useState(1);
   const [activeIndex, setActiveIndex] = useState(-1);
   const [globalState, globalActions] = useGlobal();
+  const [maxPage, setMaxPage] = useState(1);
+  const [currentPage, setCurrentPage] = useState(1);
 
   const handleClick = (oldIndex, index) => {
     const newIndex = oldIndex === index ? -1 : index;
@@ -58,20 +61,28 @@ function Receipts() {
   useEffect(() => {
     setReceiptsLoading(true);
     axios
-      .get(`${config.api_url}/api/receipts/`, {
+      .get(`${config.api_url}/api/receipts/?page=${currentPage}`, {
         headers: { Authorization: `Token ${globalState.auth_token}` }
       })
       .then(resp => {
-        setTimeout(() => {
+        processResponse(resp.data);
-          setReceipts(resp.data.results);
-          setReceiptsLoading(false);
-        }, 1000);
       })
       .catch(err => {
         console.log(err);
         setReceiptsLoading(false);
       });
-  }, []);
+  }, [currentPage]);
+
+  const handlePageChange = (event, paginator_data) => {
+    console.log(paginator_data.activePage);
+    setCurrentPage(paginator_data.activePage);
+  };
+
+  const processResponse = data => {
+    setReceipts(data.results);
+    setReceiptsLoading(false);
+    setMaxPage(Math.floor(data.count / 10));
+  };
 
   return (
     <Container textAlign="center">
@@ -80,6 +91,18 @@ function Receipts() {
           <Loader size="massive">Loading</Loader>
         </Dimmer>
       )}
+      {maxPage !== 1 && (
+        <Pagination
+          boundaryRange={0}
+          defaultActivePage={1}
+          ellipsisItem={null}
+          // firstItem={null}
+          // lastItem={null}
+          siblingRange={1}
+          totalPages={maxPage}
+          onPageChange={handlePageChange}
+        />
+      )}
       <Accordion fluid styled>
         {receipts.map((item, index) => (
           <ReceiptEntery