Merge branch 'main' into fix/Modal

src/App.jsx

@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
 import { fetchCurrentUser } from './redux/auth/operation';
 
 import SharedLayout from './components/SharedLayout/SharedLayout';
-// import SharedLayout from './components/SharedLayout/SharedLayout';
+
 import { PrivateRoute, PublicRoute } from './components/Routes';
 import { UseAuth } from './hooks/useAuth';
 

src/components/AuthForm/AuthForm.styled.jsx

@@ -15,10 +15,16 @@ export const InputContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 28px;
-  margin-bottom: 28px;
+  gap: 32px;
+  margin-bottom: 32px;
+
+  ${mq.mobile} {
+    gap: 33px;
+    margin-bottom: 34px;
+  }
+
   ${mq.tablet} {
-    gap: 32px;
+    gap: 34px;
     margin-bottom: 64px;
   }
 `;
@@ -56,7 +62,15 @@ export const TextInput = styled(Field)`
 export const Warning = styled.div`
   position: absolute;
   ${mq.smallMobile} {
-    bottom: -24px;
+    bottom: -28px;
+  }
+
+  ${mq.Mobile} {
+    bottom: -29px;
+  }
+
+  ${mq.tablet} {
+    bottom: -30px;
   }
 `;
 

src/components/ExercisesItemList/ExercisesItemList.jsx

@@ -52,6 +52,7 @@ const ExercisesList = () => {
 
   return (
     <Swiper
+      key={category}
       modules={[Navigation, Pagination, Scrollbar, A11y]}
       spaceBetween={50}
       slidesPerView={1}

src/components/ProductsFilter/ProductsFilter.jsx

@@ -4,7 +4,10 @@ import ButtonIconForInput from '../ButtonIconForInput';
 import { useDispatch, useSelector } from 'react-redux';
 import { useEffect, useState } from 'react';
 import { getProductsCategories } from '../../redux/productsFilter/selectors';
-import { getCategories, fetchProducts } from "../../redux/productsFilter/operations";
+import {
+  getCategories,
+  fetchProducts,
+} from '../../redux/productsFilter/operations';
 import {
   FilterContainer,
   SelectContainer,
@@ -15,12 +18,11 @@ import {
   SelectPointer,
   Svg,
   FilterTitle,
+  SpanForSvg,
 } from './ProductsFilter.styled';
 import debounce from 'lodash.debounce';
 
-import { capitalizeWord } from "../../utils/capitalizeWord";
-
-
+import { capitalizeWord } from '../../utils/capitalizeWord';
 
 export default function ProductsFilter() {
   const makeReqObj = (input, category, recommended) => {
@@ -29,7 +31,7 @@ export default function ProductsFilter() {
     if (input) {
       reqObj.title = input.trim();
     }
-    if (category && category !== 'Categories' && category !== "default") {
+    if (category && category !== 'Categories' && category !== 'default') {
       reqObj.category = category;
     }
 
@@ -41,57 +43,54 @@ export default function ProductsFilter() {
     }
     return reqObj;
   };
-  const dispatch = useDispatch()
-  const [currentCategory, setCurrentCategory] = useState("Categories");
-  const [isRecommended, setIsRecommended] = useState("All")
-  const [query, setQuery] = useState("");
-  
+  const dispatch = useDispatch();
+  const [currentCategory, setCurrentCategory] = useState('Categories');
+  const [isRecommended, setIsRecommended] = useState('All');
+  const [query, setQuery] = useState('');
+
   const productsCategories = useSelector(getProductsCategories);
   useEffect(() => {
     const reqObj = makeReqObj(query, currentCategory, isRecommended);
     const urlParams = new URLSearchParams(reqObj).toString();
-     dispatch(fetchProducts(urlParams))
-  }, [query, currentCategory, isRecommended, dispatch ] )
-
+    dispatch(fetchProducts(urlParams));
+  }, [query, currentCategory, isRecommended, dispatch]);
 
   useEffect(() => {
     dispatch(getCategories());
   }, [dispatch]);
 
-   const handleChangeCategory = event => {
+  const handleChangeCategory = event => {
     const selectedValue = event.target.value;
-    setCurrentCategory(selectedValue)
-  }
-  const debouncedHandleChange = debounce((term) => {
-    setQuery(term)
+    setCurrentCategory(selectedValue);
+  };
+  const debouncedHandleChange = debounce(term => {
+    setQuery(term);
   }, 500);
 
   const handleChangeQuery = event => {
     const selectedValue = event.target.value;
     debouncedHandleChange(selectedValue);
-  }
+  };
   const handleChangeisReccomended = event => {
     const selectedValue = event.target.value;
-    setIsRecommended(selectedValue) 
-  }
+    setIsRecommended(selectedValue);
+  };
 
   const optionStyles = {
     backgroundColor: 'rgba(28, 28, 28, 1)',
-    color: "#EFEDE8",
-    fontSize: "16px",
-    lineHeight: "24px", 
+    color: '#EFEDE8',
+    fontSize: '16px',
+    lineHeight: '24px',
   };
   const handleSubmit = event => {
     event.preventDefault();
-    console.log("SUBMIT");
     const selectedValue = event.target.value;
-    setQuery(selectedValue)
-  }
+    setQuery(selectedValue);
+  };
   const hanleReset = () => {
-    console.log("isReset");
-    setQuery("")
-  }
-
+    setQuery('');
+  };
+
   return (
     <FilterContainer>
       <FilterTitle>Filters</FilterTitle>
@@ -101,11 +100,11 @@ export default function ProductsFilter() {
           autoComplete="off"
           onChange={handleChangeQuery}
         />
-        <ButtonIconForInput type="submit" right="18px">
+        <SpanForSvg>
           <Svg>
             <use href={sprite + `#icon-search`}></use>
           </Svg>
-        </ButtonIconForInput>
+        </SpanForSvg>
         <ButtonIconForInput right="42px" type="reset">
           <Svg>
             <use href={sprite + `#close`}></use>

src/components/ProductsFilter/ProductsFilter.styled.jsx

@@ -1,29 +1,25 @@
 import styled from '@emotion/styled';
 import { colors, mq } from '../../utils';
-import shewron from '../../assets/chevron-down.png'
-
-
+import shewron from '../../assets/chevron-down.png';
 
 export const Option = styled.option`
   width: 200px;
   padding: 10px;
   font-size: 16px;
   border: 1px solid #ccc;
   border-radius: 4px;
-  background-color:#fff;
+  background-color: #fff;
   appearance: none;
   cursor: pointer;
-`
-
+`;
 
 export const Select = styled.select`
   appearance: none;
   position: reletive;
-  
+
   height: 46px;
   width: 100%;
 
-  
   ${mq.tablet} {
     width: 204px;
     height: 52px;
@@ -43,12 +39,8 @@ export const Select = styled.select`
 
   color: ${colors.textWhite06};
   background-color: transparent;
- 
-
 `;
 
-
-
 export const FilterContainer = styled.div`
   position: relative;
   display: flex;
@@ -78,28 +70,26 @@ export const SelectContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
-   ${mq.tablet} {
+  ${mq.tablet} {
     flex-direction: row;
-    
   }
-
 `;
 
 export const SelectPointer = styled.div`
   position: relative;
-&::after {
-  content: " ";
-  width: 18px;
-  height: 18px;
-  background-image: url(${shewron}); 
-  color: red;
-  position: absolute;
-  top: 50%;
-  right: 14px;
-  transform: translateY(-50%);
-  pointer-events: none; 
-}
-`
+  &::after {
+    content: ' ';
+    width: 18px;
+    height: 18px;
+    background-image: url(${shewron});
+    color: red;
+    position: absolute;
+    top: 50%;
+    right: 14px;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+`;
 
 export const InputWrapper = styled.form`
   position: relative;
@@ -130,12 +120,11 @@ export const TextInput = styled.input`
   color: ${colors.textWhite06};
   background-color: transparent;
 
-  
   &:focus-visible {
     border: 1px solid ${colors.orange};
   }
 
-  &:focus-visible + button {
+  &:focus-visible + span {
     color: ${colors.orange};
   }
 `;
@@ -147,4 +136,19 @@ export const Svg = styled.svg`
   height: 18px;
 `;
 
+export const SpanForSvg = styled.span`
+  position: absolute;
+  top: 15px;
+  right: 18px;
+
+  width: 18px;
+  height: 18px;
 
+  ${mq.tablet} {
+    top: 17px;
+  }
+
+  ${mq.desktop} {
+    top: 18px;
+  }
+`;

src/components/ProductsOrExercisesItem/ProductsOrExercisesItem.jsx

@@ -85,7 +85,6 @@ const ProductsOrExercisesItem = ({ page, data }) => {
       if (!time || !burnedCalories) {
         return;
       }
-      console.log(data);
       setAddedExerciseTime(time);
       setAddedExerciseBurnedCalories(burnedCalories);
       dispatch(addExercise(data));

src/components/headersComp/Header/Header.jsx

@@ -9,8 +9,10 @@ import { UseAuth } from '../../../hooks/useAuth';
 export const Header = () => {
   const { isLoggedIn } = UseAuth();
   const { pathname } = useLocation();
+  const isBorderToRender = isLoggedIn && pathname !== '/params';
+
   return (
-    <HeaderContainer isLoggedIn={isLoggedIn} >
+    <HeaderContainer isBorderToRender={isBorderToRender}>
       <Logo />
       {isLoggedIn && pathname !== '/params' && (
         <>

src/components/headersComp/Header/Header.styled.js

@@ -10,7 +10,7 @@ export const HeaderContainer = styled.div`
   align-items: center;
   padding: 0 20px;
   border-bottom: ${props =>
-    props.isLoggedIn ? `1px solid ${colors.textWhite03}` : 'none'};
+    props.isBorderToRender ? `1px solid ${colors.textWhite03}` : 'none'};
   ${mq.tablet} {
     background-color: ${colors.black};
     padding: 0 32px;
@@ -20,6 +20,5 @@ export const HeaderContainer = styled.div`
   ${mq.desktop} {
     background-color: transparent;
     padding-left: 96px;
-	 
   }
 `;

src/pages/SignUp/SignUp.jsx

@@ -11,7 +11,6 @@ import { mg } from '../../utils';
 const SignUp = () => {
   const dispatch = useDispatch();
   const handleSubmit = (user, { resetForm }) => {
-    console.log(user);
     dispatch(authUser(user));
     resetForm();
   };

src/redux/auth/operation.js

@@ -18,7 +18,7 @@ export const authUser = createAsyncThunk(
   async (user, { rejectWithValue }) => {
     try {
       const { data } = await axios.post('/api/users/register', user);
-      console.log(data);
+
       token.set(data.token);
       return data;
     } catch (error) {
@@ -33,7 +33,7 @@ export const logInUser = createAsyncThunk(
   async (user, { rejectWithValue }) => {
     try {
       const { data } = await axios.post('/api/users/login', user);
-      console.log(data);
+
       token.set(data.token);
       return data;
     } catch (error) {