Merge pull request #63 from MargoMarm/feature/get-exercises_logic

Feature/get exercises logic
MargoMarm · Sep 21, 2023 · 7448806 · 7448806
2 parents 56118c7 + 46547d3
commit 7448806
Show file tree

Hide file tree

Showing 15 changed files with 314 additions and 115 deletions.
diff --git a/src/assets/sprite.svg b/src/assets/sprite.svg
diff --git a/src/components/ExercisesBtnBack/ExercisesBtnBack.jsx b/src/components/ExercisesBtnBack/ExercisesBtnBack.jsx
@@ -0,0 +1,22 @@
+import { useDispatch } from 'react-redux';
+import { changeStatusFilter } from '../../redux/exercises/slice';
+import { ButtonBack, SvgArrow } from './ExercisesBtnBack.styled'; // Імпорт стилів
+
+const ExercisesBtnBack = () => {
+  const dispatch = useDispatch();
+
+  const handleBtnBack = () => {
+    dispatch(changeStatusFilter(true));
+  };
+
+  return (
+    <ButtonBack type="button" onClick={handleBtnBack}>
+      <SvgArrow>
+        <use href="/src/assets/sprite.svg#icon-arrow-left"></use>
+      </SvgArrow>
+      Back
+    </ButtonBack>
+  );
+};
+
+export default ExercisesBtnBack;
diff --git a/src/components/ExercisesBtnBack/ExercisesBtnBack.styled.jsx b/src/components/ExercisesBtnBack/ExercisesBtnBack.styled.jsx
@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+
+import { mq, colors } from '../../utils';
+
+export const ButtonBack = styled.button`
+  display: flex;
+  padding: 0px;
+  align-items: center;
+	font-size: 14px;
+  line-height: 1.28; 
+
+
+
+  background-color: transparent;
+  color: ${colors.textWhite04};
+  border: none;
+	scale: 1;
+
+  transition:
+  scale 250ms ease-in-out,
+  color 250ms ease-in-out;
+	fill 250ms ease-in-out;
+
+
+		${mq.tablet}{
+ font-size: 16px;
+line-height: 1.5; 
+		}
+
+
+
+  &:hover {
+    color: ${colors.orange};
+    scale: 1.1;
+
+  }
+  &:focus {
+    color: ${colors.orange};
+		scale: 1.1;
+  }
+
+  &:hover svg {
+    fill: ${colors.orange};
+		scale: 1.1;
+  }
+  &:focus svg {
+    fill: ${colors.orange};
+		scale: 1.1;
+  }
+`;
+
+export const SvgArrow = styled.svg`
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  fill: ${colors.textWhite04};
+  scale: 1;
+
+  transition:
+    scale 250ms ease-in-out,
+    fill 250ms ease-in-out;
+`;
diff --git a/src/components/ExercisesCategories/ExercisesCategories.jsx b/src/components/ExercisesCategories/ExercisesCategories.jsx
@@ -1,51 +1,64 @@
 import { useState, useEffect } from 'react';
-import {  useDispatch, useSelector } from 'react-redux';
-
+import { useDispatch, useSelector } from 'react-redux';
 import { fetchFilters } from '../../redux/exerciseFilters/operations';
-import {setStatusFilter} from '../../redux/exerciseFilters/slice'
-import { selectFilter } from '../../redux/exerciseFilters/selectors'
-
+import { setStatusFilter } from '../../redux/exerciseFilters/slice';
+import { selectGetFilters } from '../../redux/exercises/selectors';
+import { changeStatusFilter } from '../../redux/exercises/slice';
+import { selectFilter } from '../../redux/exerciseFilters/selectors';
 import {
   CategoriesList,
   CategoriesListItem,
   CategoriesLink,
-} from './ExercisesCategories.styled'; // Імпорт стилів
+} from './ExercisesCategories.styled';
 
 const ExercisesCategories = () => {
-  const [isActive, setIsActive] = useState(false);
-  let filter = useSelector(selectFilter);
+  let activeBtn = useSelector(selectFilter);
+  const [activeCategory, setActiveCategory] = useState(activeBtn); // Используйте локальное состояние для хранения активной категории
+  const filter = useSelector(selectGetFilters);
+
   const dispatch = useDispatch();
-
-  useEffect(() => {
-   setIsActive(!isActive)
-  }, [filter]);
-
+
   useEffect(() => {
     dispatch(fetchFilters());
-  }, [dispatch]);
+  }, [dispatch, filter]);
+
+  const handleCategoryChange = event => {
+    const currentCategory = event.target.childNodes[0].textContent;
 
+    dispatch(changeStatusFilter(true));
 
-
+    setActiveCategory(currentCategory); // Устанавливаем активную категорию
 
-  const handleCategoryChange = event => {
-    dispatch(setStatusFilter(event.target.childNodes[0].textContent));
+    dispatch(setStatusFilter(currentCategory));
   };
 
   return (
     <>
       <CategoriesList>
         <CategoriesListItem>
-          <CategoriesLink type="button"  onClick={handleCategoryChange}>
+          <CategoriesLink
+            type="button"
+            onClick={handleCategoryChange}
+            className={activeCategory === 'Body parts' ? 'active' : ''} // Применяем класс "active" к активной кнопке
+          >
             Body parts
           </CategoriesLink>
         </CategoriesListItem>
         <CategoriesListItem>
-          <CategoriesLink type="button"  onClick={handleCategoryChange}>
+          <CategoriesLink
+            type="button"
+            onClick={handleCategoryChange}
+            className={activeCategory === 'Muscles' ? 'active' : ''}
+          >
             Muscles
           </CategoriesLink>
         </CategoriesListItem>
         <CategoriesListItem>
-          <CategoriesLink type="button" onClick={handleCategoryChange}>
+          <CategoriesLink
+            type="button"
+            onClick={handleCategoryChange}
+            className={activeCategory === 'Equipment' ? 'active' : ''}
+          >
             Equipment
           </CategoriesLink>
         </CategoriesListItem>

diff --git a/src/components/ExercisesCategories/ExercisesCategories.styled.jsx b/src/components/ExercisesCategories/ExercisesCategories.styled.jsx
@@ -15,7 +15,6 @@ export const CategoriesList = styled.ul`
 export const CategoriesListItem = styled.li``;
 
 export const CategoriesLink = styled.button`
-
   position: relative;
   padding: 0;
 
@@ -28,21 +27,19 @@ export const CategoriesLink = styled.button`
   background-color: transparent;
   outline: none;
   border: none;
- 
-    &:after {
-      content: '';
-      display: ${props => (props.isactive === true ?  "block" : "none")};
-      position: absolute;
-      width: 100%;
-      height: 4px;
-  
-      bottom: -4px;
-      left: 0;
-      background-color: #ef8964;
-      border-radius: 2px;
-    }
-  
-  
+
+  &.active::after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 4px;
+
+    bottom: -4px;
+    left: 0;
+    background-color: #ef8964;
+    border-radius: 2px;
+  }
 
   ${mq.tablet} {
     font-size: 16px;

diff --git a/src/components/ExercisesItem/ExercisesItem.jsx b/src/components/ExercisesItem/ExercisesItem.jsx
@@ -7,10 +7,28 @@ import {
   Name,
   Filter,
 } from './ExercisesItem.styled';
+import { useEffect, useState } from 'react';
+
+export const ExercisesItem = ({ filter, name, imgURL, handleGetExercises }) => {
+  const [query, setQuery] = useState(filter);
+
+  useEffect(() => {
+    switch (filter) {
+      case 'Body parts':
+        return setQuery('bodyPart');
+      case 'Muscles':
+        return setQuery('target');
+      case 'Equipment':
+        return setQuery('equipment');
+      default:
+        return;
+    }
+  }, [filter]);
+
+  const requestString = `${query}=${name.toLowerCase()}`;
 
-export const ExercisesItem = ({ filter, name, imgURL }) => {
   return (
-    <Item>
+    <Item onClick={() => handleGetExercises(requestString, name)}>
       <WrapCard>
         <Image src={imgURL} alt={name} />
         <WrapSpan>
@@ -28,4 +46,5 @@ ExercisesItem.propTypes = {
   filter: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   imgURL: PropTypes.string.isRequired,
+  handleGetExercises: PropTypes.func.isRequired,
 };
diff --git a/src/components/ExercisesItemList/ExercisesItemList.jsx b/src/components/ExercisesItemList/ExercisesItemList.jsx
@@ -2,18 +2,34 @@ import PropTypes from 'prop-types';
 import ExercisesItem from '../ExercisesItem/ExercisesItem';
 import { ExercisesItemList } from './ExercisesItemList.styled';
 import { capitalizeWord } from '../../utils/capitalizeWord';
-import { useSelector } from 'react-redux';
-import { selectItems, selectFilter } from '../../redux/exerciseFilters/selectors'
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  selectItems,
+  selectFilter,
+} from '../../redux/exerciseFilters/selectors';
+import { getExercises } from '../../redux/exercises/operations';
 
-export const ExercisesList = ({ bodyParts }) => {
+import { setCurrentTitle } from '../../redux/exerciseFilters/slice';
+
+export const ExercisesList = () => {
+  const dispatch = useDispatch();
+
+  const handleGetExercises = (params, name) => {
+    dispatch(getExercises(params));
+
+    dispatch(setCurrentTitle(name));
+  };
 
   let category = useSelector(selectFilter);
   let filters = useSelector(selectItems);
+
   return (
     <ExercisesItemList>
-      {filters.filter(item => item.filter === category)
+      {filters
+        .filter(item => item.filter === category)
         .map(({ filter, name, imgURL, _id }) => (
           <ExercisesItem
+            handleGetExercises={handleGetExercises}
             key={_id}
             imgURL={imgURL}
             name={capitalizeWord(name)}
@@ -29,7 +45,7 @@ ExercisesList.propTypes = {
     PropTypes.shape({
       name: PropTypes.string.isRequired,
     }),
-  ).isRequired,
+  ),
 };
 
 export default ExercisesList;