Skip to content

Commit

Permalink
Input with Coma
Browse files Browse the repository at this point in the history
  • Loading branch information
@OlenaIa
OlenaIa committed Dec 2, 2023
1 parent c85435a commit 07d0bf8
Show file tree
Hide file tree
Showing 3 changed files with 149 additions and 84 deletions.
152 changes: 97 additions & 55 deletions src/components/Filters/Filters.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { selectBrand, selectCarBrands } from "redux/selectors";
import { ButtonSearch, Form, Input, InputWrap, Label, firstSelectStyles, secondSelectStyles } from "./Filters.styled";
import { Blink, ButtonSearch, Form, Input, InputWrap, Label, FalseInput, WrapSecondInput, firstSelectStyles, secondSelectStyles } from "./Filters.styled";
import Select from 'react-select';
import { brandSet } from "redux/filter/filterSlice";

Expand All @@ -13,30 +13,57 @@ export const Filters = () => {
const [selectedPrice, setSelectedPrice] = useState(null);
const [mileageFrom, setMileageFrom] = useState('');
const [mileageTo, setMileageTo] = useState('');

const [mileageToWithComa, setMileageToWithComa] = useState('');
const [mileageFromWithComa, setMileageFromWithComa] = useState('');


const pricesArray = [];
for (let index = 30; index < 501; index += 10) {
pricesArray.push({ value: index, label: index });
};

// const onSubmitFilter = (event) => {
// event.preventDefault();
// const form = event.currentTarget;
// // const searchValue = form.search.value
// console.log('form', form);
// };
const reset = () => {
setMileageFrom('');
setMileageTo('');
setMileageToWithComa('');
setMileageFromWithComa('');
};

const onSubmitFilter = (event) => {
event.preventDefault();
const form = event.currentTarget;
// const searchValue = form.search.value
console.log('form', form);
reset();
};



const makeComaInMileage = (mileage) => {
const lengthMileage = mileage.toString().length;

if (lengthMileage <= 3) {
return mileage;
};

const mileageStringArr = mileage.split('');
mileageStringArr.splice((lengthMileage-3), 0, ',');
return mileageStringArr.join('');
};

const handleChange = (e) => {
console.log('e.target', e.target);
const { value } = e.target;
const valueWithComa = makeComaInMileage(value);

switch (e.target.name) {
case 'mileageFrom':
setMileageFrom(value);
console.log('mileageFrom');
setMileageFromWithComa(valueWithComa);
break;
case 'mileageTo':

setMileageTo(value);
console.log('mileageTo');
setMileageToWithComa(valueWithComa);
break;
default:
break;
Expand All @@ -49,52 +76,67 @@ export const Filters = () => {
};

return (
<>
<Form>
<Label>Car brand
<Select
onChange={onChangeBrand}
options={carBrands}
isSearchable
placeholder='Enter the text'
styles={firstSelectStyles}
value={filterBrand}
/>
</Label>
<Label>Price/ 1 hour
<Select
onChange={setSelectedPrice}
options={pricesArray}
isSearchable
placeholder='To $'
styles={secondSelectStyles}
value={selectedPrice}
<Form>
<Label>Car brand
<Select
onChange={onChangeBrand}
options={carBrands}
isSearchable
placeholder='Enter the text'
styles={firstSelectStyles}
value={filterBrand}
/>
</Label>
<Label>Price/ 1 hour
<Select
onChange={setSelectedPrice}
options={pricesArray}
isSearchable
placeholder='To $'
styles={secondSelectStyles}
value={selectedPrice}
/>
</Label>
<InputWrap>
<Label>Сar mileage / km
<Input type="number"
inputmode='numeric'
pattern="[0-9]{1,6}"
title="Only number. From 1 to 6 digitals"

name="mileageFrom"
value={mileageFrom}
onChange={handleChange}
min="0"
max='999998'
$radius='14px 0px 0px 14px'
$border='1px solid rgba(138, 138, 137, 0.20)'
/>
<FalseInput>From {mileageFromWithComa}
{mileageFromWithComa.length > 0 && <Blink></Blink>}
</FalseInput>
</Label>
<InputWrap>
<Label>Сar mileage / km
<Input type="number"
name="mileageFrom"
placeholder="From"
value={mileageFrom}
onChange={handleChange} min="0"
step='10'
$radius='14px 0px 0px 14px'
$border='1px solid rgba(138, 138, 137, 0.20)'
/>
</Label>
<WrapSecondInput>
<Input type="number"
name="mileageTo"
placeholder="To"
value={mileageTo}
onChange={handleChange} min="10"
step='10'
$radius='0px 14px 14px 0px' />
</InputWrap>
<ButtonSearch type="submit"
// onSubmit={onSubmitFilter}
>Search</ButtonSearch>
</Form>
</>
pattern="[0-9]{1,6}"
title="Only number. From 1 to 6 digitals"

inputmode='numeric'
name="mileageTo"
value={mileageTo}
onChange={handleChange}
min="1"
max='999999'
$radius='0px 14px 14px 0px'
$padding='14px 14px 14px 48px'/>
<FalseInput>To {mileageToWithComa}
{mileageToWithComa.length > 0 && <Blink></Blink>}
</FalseInput>
</WrapSecondInput>
</InputWrap>
<ButtonSearch type="submit"
onSubmit={onSubmitFilter}
>Search</ButtonSearch>
</Form>
)
};
49 changes: 37 additions & 12 deletions src/components/Filters/Filters.styled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export const Form = styled.form`
`;

export const Label = styled.label`
position: relative;
display: flex;
flex-direction: column;
color: var(--color-text-label);
Expand All @@ -33,29 +34,53 @@ export const InputWrap = styled.div`
export const Input = styled.input`
width: 160px;
height: 48px;
padding: 14px 24px;
padding: ${props => props.$padding || '14px 14px 14px 70px'};
margin-top: 8px;
border-radius: ${props => props.$radius || '14px'};
border: none;
border-right: ${props => props.$border || 'none'};
background-color: var(--color-filter-field);
color: transparent;
font-size: 18px;
font-weight: 500;
line-height: 1.1;
line-height: 1.11;
&::placeholder {
color: var(--color-text-main);
opacity: 1;
font-size: 18px;
font-weight: 500;
line-height: 1.1;
&:invalid {
border: 1px solid red;
}
`;

@media screen and (min-width: 768px) {
}
export const FalseInput = styled.div`
display: flex;
color: var(--color-text-main);
position: absolute;
bottom: 14px;
left: 24px;
font-size: 18px;
font-weight: 500;
line-height: 1.1;
`;

@media screen and (min-width: 1440px) {
}
export const Blink = styled.div`
margin-left: 1px;
display: inline-block;
width: 1px;
height: 18px;
background-color: black;
animation: cursor-blink 1s infinite;
@keyframes cursor-blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
}
`;

export const WrapSecondInput = styled.div`
position: relative;
`;

export const ButtonSearch = styled.button`
Expand Down
32 changes: 15 additions & 17 deletions src/pages/Favorites.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,25 @@ import { selectFavoriteCars } from "redux/selectors";
import { Link } from 'react-router-dom';

const Favorite = () => {
const favoriteCarsId = useSelector(selectFavoriteCars);
const favoriteCars = useSelector(selectFavoriteCars);

return (
<>
<Section>
<Container $top='50px'>
{(favoriteCarsId?.length > 0) ?
<CarsListStyle>
{favoriteCarsId?.map((car, index) =>
<Section>
<Container $top='50px'>
{(favoriteCars?.length > 0) ?
<CarsListStyle>
{favoriteCars?.map((car, index) =>
<CarItem car={car} key={car.id} index={index} />
)}
</CarsListStyle> :
<EmptyPage>
<p>
Please select your favorite cars in the <Link to="/catalog">Сatalog</Link>.
</p>
</EmptyPage>}
</Container>
</Section>
</>
</CarsListStyle> :
<EmptyPage>
<p>
Please select your favorite cars in the <Link to="/catalog">Сatalog</Link>.
</p>
</EmptyPage>}
</Container>
</Section>
)
}
};

export default Favorite;

0 comments on commit 07d0bf8

Please sign in to comment.