Merge pull request #97 from MargoMarm/bagfix/sliderPagination

Bagfix/slider_products_header

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,55 +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();
     const selectedValue = event.target.value;
-    setQuery(selectedValue)
-  }
+    setQuery(selectedValue);
+  };
   const hanleReset = () => {
-    setQuery("")
-  }
-  
+    setQuery('');
+  };
+
   return (
     <FilterContainer>
       <FilterTitle>Filters</FilterTitle>
@@ -99,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/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/redux/productsFilter/operations.js

@@ -3,7 +3,7 @@ import axios from 'axios';
 
 export const fetchProducts = createAsyncThunk(
   `filter/getProducts`,
-  async (searchParams, thunkAPI) => {
+  async (searchParams = '', thunkAPI) => {
     try {
       const res = await axios.get(`api/products?${searchParams}`);
       return res.data;
@@ -13,26 +13,23 @@ export const fetchProducts = createAsyncThunk(
   },
 );
 
-
-
 export const getCategories = createAsyncThunk(
   `categories/getCategories`,
   async (_, thunkAPI) => {
     try {
-      const res = await axios.get("api/categories"); 
-    
+      const res = await axios.get('api/categories');
+
       return res.data[0].categories;
-
     } catch (error) {
       return thunkAPI.rejectWithValue(error.message);
-    } 
+    }
   },
   {
     condition: (_, { getState, extra }) => {
-      const  state  = getState();
+      const state = getState();
       if (state.products.categories.length > 1) {
-        return false
+        return false;
       }
-    }
-  }
+    },
+  },
 );