gym_exercises

npx create-react-app gym_exercises

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material

npm install --legacy-peer-deps
npm i react-router-dom
npm i react-horizontal-scrolling-menu

    <BrowserRouter> 
      <App /> 
    </BrowserRouter>

0:"back" 
1:"cardio" 
2:"chest" 
3:"lower arms" 
4:"lower legs" 
5:"neck" 
6:"shoulders" 
7:"upper arms" 
8:"upper legs" 
9:"waist"

  const [bodyParts, setBodyParts] = useState([]);  

useEffect(() => { 
    const fetchExercisesData = async () => { 
      const bodyPartsData = await fetchData( 
        "https://exercisedb.p.rapidapi.com/exercises/bodyPartList", 
        exerciseOptions 
      ); 
    //   console.log(bodyPartsData) 
      setBodyParts(["all", ...bodyPartsData]); 
    }; 
    fetchExercisesData(); 
  }, []);

  const [exercises, setExercises] = useState([]); 
  const [bodyPart, setBodyPart] = useState('all');

  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]);

  useEffect(() => { 
    const fetchExerxcisesData = 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); 
    }; 
    fetchExerxcisesData(); 
  }, [bodyPart]);

  const indexOfLastExercise = currentPage * exercisesPerPage; 
  const indexOfFirstExercise = indexOfLastExercise - exercisesPerPage; 
  const currentExercises = exercises.slice(indexOfFirstExercise, indexOfLastExercise);

0: 
bodyPart:"waist" 
equipment:"body weight" 
gifUrl:"http://d205bpvrqc9yn1.cloudfront.net/0001.gif" 
id:"0001" 
name:"3/4 sit-up" 
target:"abs" 
1: 
bodyPart:"waist" 
equipment:"body weight" 
gifUrl:"http://d205bpvrqc9yn1.cloudfront.net/0002.gif" 
id:"0002" 
name:"45° side bend" 
target:"abs"