added next and prev button in category page

backend/animeManga/views.py

@@ -21,9 +21,10 @@ def ListAnimeManga(request):
  category = request.GET.get('category', '')
  rank_type = request.GET.get('rank_type', '')
  limit = request.GET.get('limit', '')
+ offset = request.GET.get('offset', '')
 
  urls = f'{settings.MYANIMELIST_URL}/v2/{category}/ranking?ranking_type={rank_type}&fields=id,mean,start_season,title,' \
- f'media_type,main_picture,genres,num_chapters,num_episodes&limit={limit}'
+ f'media_type,main_picture,genres,num_chapters,num_episodes&limit={limit}&offset={offset}'
 
  headers = {
  'X-MAL-CLIENT-ID': f'{settings.MYANIMELIST_API_KEY}'

frontend/src/Pages/Home/AnimeManga/AnimeMangaCategory/AnimeMangaCategory.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 
 import { Icon } from "@iconify/react";
 import { useNavigate, useParams } from "react-router-dom";
@@ -8,19 +8,31 @@ import { animeCategory, categoryType, mangaCategory } from "../../../../common";
 
 import Card from "../../../../components/Card/Card";
 import SkeletonCard from "../../../../components/SkeletonCard/SkeletonCard";
+import PrevNextButton from "../../../../components/PrevNextBtn/PrevNextBtn";
 
 import "./AnimeMangaCategory.css";
 
 const AnimeMangaCategory = () => {
  const [animeManga, setAnimeManga] = useState([]);
+ const [offset, setOffset] = useState(0);
 
  const navigate = useNavigate();
  const { category, id } = useParams();
 
+ const updateAnimeMangaCategory = (value = 0, firstMount = false) => {
+ let total = (firstMount ? 0 : offset) + value
+ if (offset + value >= 0) {
+ setAnimeManga([]);
+ getCategoryList(category, id, 20, total).then((result) => {
+ setAnimeManga(result.data);
+ setOffset(total);
+ });
+ }
+ };
+
  useEffect(() => {
- getCategoryList(category, id, 20).then((result) => {
- setAnimeManga(result.data);
- });
+ setAnimeManga([]);
+ updateAnimeMangaCategory(0, true);
  }, [category, id]);
 
  //Title of anime/manga category
@@ -78,6 +90,7 @@ const AnimeMangaCategory = () => {
  </div>
  ))}
  </div>
+ <PrevNextButton updateAnimeMangaCategory={updateAnimeMangaCategory} />
  </div>
  );
 };

frontend/src/api/animeManga.js

@@ -1,21 +1,24 @@
 // get anime/manga category list
-export const getCategoryList = async (category, rank_type, limit) => {
+export const getCategoryList = async (
+ category,
+ rank_type,
+ limit,
+ offset = 0
+) => {
  let result = await fetch(
- `${process.env.REACT_APP_SERVER_URL}/animeManga/animeManga-list?category=${category}&rank_type=${rank_type}&limit=${limit}`
+ `${process.env.REACT_APP_SERVER_URL}/animeManga/animeManga-list?category=${category}&rank_type=${rank_type}&limit=${limit}&offset=${offset}`
  );
  return result.json();
 };
 
-
-// get anime/manga details 
+// get anime/manga details
 export const getAnimeDetail = async (category, id) => {
  let result = await fetch(
  `${process.env.REACT_APP_SERVER_URL}/animeManga/animeManga-detail/${id}?category=${category}`
  );
  return result.json();
 };
 
-
 // search anime/manga
 export const searchAnime = async (category, animeName, limit) => {
  let result = await fetch(

frontend/src/components/PrevNextBtn/PrevNextBtn.css

@@ -0,0 +1,36 @@
+.prev-next-btn {
+ margin-top: 3rem;
+ column-gap: 2rem;
+}
+
+.prev-next-btn > .prev-btn,
+.prev-next-btn > .next-btn {
+ width: 10rem;
+ column-gap: 0.5rem;
+ padding: 0.5rem 0.75rem;
+ border-radius: 3rem;
+}
+
+.prev-next-btn > .prev-btn {
+ background-color: var(--container);
+}
+
+.prev-next-btn > .next-btn {
+ background-color: var(--primary);
+}
+
+.prev-next-btn > .prev-btn:hover {
+ background-color: var(--text);
+}
+
+.prev-next-btn .prev-btn:hover > h5 {
+ color: var(--container);
+}
+
+.prev-next-btn > .next-btn:hover {
+ background-color: var(--text);
+}
+
+.prev-next-btn .next-btn:hover > h5 {
+ color: var(--primary);
+}

frontend/src/components/PrevNextBtn/PrevNextBtn.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Icon } from "@iconify/react";
+import "./PrevNextBtn.css";
+
+const PrevNextButton = ({updateAnimeMangaCategory}) => {
+ return (
+ <div className="flex-center prev-next-btn">
+ <div className="cursor-btn flex-center prev-btn" onClick={()=>updateAnimeMangaCategory(-20)}>
+ <h5 className="flex-center color-text">
+ <Icon icon="ooui:arrow-previous-ltr" fontSize={"1.25rem"} />
+ </h5>
+ <h5 className="color-text">Previous</h5>
+ </div>
+ <div className="cursor-btn flex-center next-btn" onClick={()=>updateAnimeMangaCategory(20)}>
+ <h5 className="color-text">Next</h5>
+ <h5 className="flex-center color-text">
+ <Icon icon="ooui:arrow-previous-rtl" fontSize={"1.25rem"} />
+ </h5>
+ </div>
+ </div>
+ );
+};
+
+export default React.memo(PrevNextButton);