11.implement bodypart/category funcitnality

.

  in exerxises.jsx file :Add

   
useEffect(() => {
    const fetchExercisesData = async () => {
      let exercisesData = [];

      if (bodyPart === "all") {
        exercisesData = await fetchData(
          "https://exercisedb.p.rapidapi.com/exercises",
          exerciseOptions
        );
      } else {
        exercisesData = await fetchData(
          `https://exercisedb.p.rapidapi.com/exercises/bodyPart/${bodyPart}`,
          exerciseOptions
        );
      }

      setExercises(exercisesData);
    };
    fetchExercisesData();
  }, [bodyPart]);

.We have prop drilled and setbodypart to an item such as waist ,legs ,etc on clicking on a category/bodypart card.

so console.log(bodyPart) to check if it is changing when clicked on particular bodyPart card eg:if i click on waist card then it should console waist.

Now, we need to fetch exercise on basis of that bodypart,so set dependncy of useEffect to bodypart e,each time we click on a bodypart card it changes and useeffect fetch new exercises

.if bodyPart = 'all',(whcih it actually is initially before clicking any card) then fetch all exercises.

if (bodyPart === "all") {
        exercisesData = await fetchData(
          "https://exercisedb.p.rapidapi.com/exercises",
          exerciseOptions

        );.

..if bodyPart = 'something else',(which it changes when clicking any card) then fetch that exercises for only that particular bodypart.

. else {

        exercisesData = await fetchData(
          `https://exercisedb.p.rapidapi.com/exercises/bodyPart/${bodyPart}`,
          exerciseOptions
        );
      }

.Then set exerxies to that newly fetched data so that UI display thoses exercises:

setExercises(exercisesData);


Comments

Post a Comment

Popular posts from this blog

5. Create SearchExercise Section

 ....Here is how you make UI.Later we will fetch data for this section. import React , { useState , useEffect } from "react" ; import { Box , Typography , Stack , TextField , Button } from "@mui/material" ; const SearchExercises = () => {   return (     < Stack justifyContent = "center" alignItems = "center" mt = "37px" p = "20px" >       < Typography         fontWeight = { 700 }         sx = { { fontSize : { lg : "44px" , xs : "30px" } } }         mb = "50px"         textAlign = "center"       >         Awesome Exercises You < br />         Should Know       </ Typography >       < Box position = "relative" mb = "72px" >         < TextField           sx = { {         ...
Read more

9.exerxise card

  import React from "react" ; import { Link } from "react-router-dom" ; import { Stack , Typography , Button } from "@mui/material" ; const ExerciseCard = ({ exercise }) => {   // console.log(exercise); // only appear when you serach something eg:back   return (     < Link className = "exercise-card" to = { `/exercise/ ${ exercise . id } ` } >       < img src = { exercise . gifUrl } alt = { exercise . name } loading = "lazy" />       < Stack flexDirection = "row" >         < Button           sx = { {             ml : "21px" ,             color : "#fff" ,             backgroundColor : "#ffa9a9" ,             fontSize : "14px" ,             borderRadius : "20px" ,         ...
Read more

7. Horizontal Scroll bar

 First lets do prop drilling (of course u can use context api but for now lets use props only): in home.jsx . import React , { useState } from "react" ; import { Box } from "@mui/material" ; import HeroBanner from "../../components/HeroBanner/HeroBanner" ; import SearchExercises from "../../components/SearchExercises/SearchExercises" ; import Exercises from "../../components/Exercises/Exercises" ; const Home = () => {   const [ bodyPart , setBodyPart ] = useState ( "all" );   const [ exercises , setExercises ] = useState ([]);   return (     < Box >       < HeroBanner />       < SearchExercises         bodyPart = { bodyPart }         setExercises = { setExercises }         setBodyPart = { setBodyPart }       />       < Exercises         bodyPart = { bodyPart }     ...
Read more