10.Whole exerscise section to display exercise cards with pagination

 .

import React, { useState, useEffect } from "react";

import { Pagination } from "@mui/material";

import { Box, Stack, Typography } from "@mui/material";

import { exerciseOptions, fetchData } from "../../utils/fetchData";

import ExerciseCard from "../ExerciseCard/ExerciseCard";

const Exercises = ({ exercises, setExercises, bodyPart }) => {

  // console.log(exercises); // only appear when you serach something

  const [currentPage, setCurrentPage] = useState(1);

  const exercisesPerPage = 9;

  const indexOfLastExercise = currentPage * exercisesPerPage;

  const indexOfFirstExercise = indexOfLastExercise - exercisesPerPage;

  const currentExercises = exercises.slice(

    indexOfFirstExercise,

    indexOfLastExercise

  );

  const paginate = (e, value) => {

    setCurrentPage(value);

    window.scrollTo({ top: "1800px", behavior: "smooth" });

  };

  return (

    <Box id="exercises" sx={{ mt: { lg: "110px" } }} mt="50px" p="20px">

      <Typography variant="h3" mb="46px" ml="50px">

        Showing Results

      </Typography>

      <Stack

        flexDirection="row"

        spacing={{ lg: 11, xs: 5 }}

        flexWrap="wrap"

        justifyContent={{ xs: "center", sm: "space-between" }}

        px="50px"

      >

        {currentExercises.map((exercise, index) => (

          <ExerciseCard key={index} exercise={exercise} />

          // <p>{exercises.name}</p>

        ))}

      </Stack>

      <Stack mt="100px" alignItems="center">

        {exercises.length > 9 && (

          <Pagination

            color="standard"

            shape="rounded"

            defaultPage={1}

            count={Math.ceil(exercises.length / exercisesPerPage)}

            page={currentPage}

            onChange={paginate}

            size="large"

          ></Pagination>

        )}

      </Stack>

    </Box>

  );

};

export default Exercises;

.

const [currentPage, setCurrentPage] = useState(1);

  const exercisesPerPage = 9;

Initilaly page no ie currentPage is 1 and we want 9 exercise per page.

const indexOfLastExercise = currentPage * exercisesPerPage; (for last card is 1 page ie,9,18,27,etc)

  const indexOfFirstExercise = indexOfLastExercise - exercisesPerPage; (for first card is 1 page ie, 0,9,18,etc)

  const currentExercises = exercises.slice(

    indexOfFirstExercise,

    indexOfLastExercise

  ); (this is array of exercise only from fisrt card to last card of a page(ie 9 card per page))

.{currentExercises.map((exercise, index) => (

          <ExerciseCard key={index} exercise={exercise} />

          // <p>{exercises.name}</p>

        ))}

ie 9 exercise are passed in each page according to their currentpage no.

.

.{exercises.length > 9 && (

          <Pagination

            color="standard"

            shape="rounded"

            defaultPage={1}

            count={Math.ceil(exercises.length / exercisesPerPage)}

            page={currentPage}

            onChange={paginate}

            size="large"

          ></Pagination>

        )}

.By default onChange={paginate} ,means mui passes value of page=CurrentPage as value,along with e as:

onchange={(e)=>paginate(e,value)}

so here value is current page.

. const paginate = (e, value) => {

    setCurrentPage(value);

    window.scrollTo({ top: "1800px", behavior: "smooth" });

  };

so paginate func change the currentPage value to clicked value which changes on clicking on pagination ac to page prop by degault in mui