diff --git a/src/App.jsx b/src/App.jsx index e446be6d..51302ce9 100644 --- a/src/App.jsx +++ b/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'; diff --git a/src/components/AuthForm/AuthForm.styled.jsx b/src/components/AuthForm/AuthForm.styled.jsx index 57941a21..72f27b64 100644 --- a/src/components/AuthForm/AuthForm.styled.jsx +++ b/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; } `; diff --git a/src/components/ExercisesItemList/ExercisesItemList.jsx b/src/components/ExercisesItemList/ExercisesItemList.jsx index 76e7d262..ad632f74 100644 --- a/src/components/ExercisesItemList/ExercisesItemList.jsx +++ b/src/components/ExercisesItemList/ExercisesItemList.jsx @@ -52,6 +52,7 @@ const ExercisesList = () => { return ( { @@ -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 ( Filters @@ -99,11 +100,11 @@ export default function ProductsFilter() { autoComplete="off" onChange={handleChangeQuery} /> - + - + diff --git a/src/components/ProductsFilter/ProductsFilter.styled.jsx b/src/components/ProductsFilter/ProductsFilter.styled.jsx index 8f46c04b..b86f8b1a 100644 --- a/src/components/ProductsFilter/ProductsFilter.styled.jsx +++ b/src/components/ProductsFilter/ProductsFilter.styled.jsx @@ -1,8 +1,6 @@ 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; @@ -10,20 +8,18 @@ export const Option = styled.option` 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; + } +`; diff --git a/src/components/headersComp/Header/Header.jsx b/src/components/headersComp/Header/Header.jsx index d7ac2b57..0f14c702 100644 --- a/src/components/headersComp/Header/Header.jsx +++ b/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 ( - + {isLoggedIn && pathname !== '/params' && ( <> diff --git a/src/components/headersComp/Header/Header.styled.js b/src/components/headersComp/Header/Header.styled.js index fbc1d067..f899e9ef 100644 --- a/src/components/headersComp/Header/Header.styled.js +++ b/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; - } `; diff --git a/src/redux/productsFilter/operations.js b/src/redux/productsFilter/operations.js index e167c1f3..e1bade3c 100644 --- a/src/redux/productsFilter/operations.js +++ b/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; } - } - } + }, + }, );