SPORT in Life~
gym_exercises
ankle0614@gmail.com
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
srcフォルダ直下にpagesフォルダを作り
<App />をBrowserRouterでwrapします。
<BrowserRouter>
<App />
</BrowserRouter>
srcフォルダ直下にutilsフォルダを作り
ExerciseDBからbodyPartListの取得
0:"back"
1:"cardio"
2:"chest"
3:"lower arms"
4:"lower legs"
5:"neck"
6:"shoulders"
7:"upper arms"
8:"upper legs"
9:"waist"
setBodyParts関数を使ってallと取得したbodyPartsDataを格納しています。
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();
}, []);
Home.jsからSearchExercises.jsとExercises.jsにデータを渡している
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]);
List of all exercisesから1324個のデータをexercisesDataに格納しsetExercises関数でexercisesにデータを格納。
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"
Pagination
ページに表示する数を6つにする。
ABOUT ME