From 07d0bf86f00614770d91c5216a0bb69c77a56a68 Mon Sep 17 00:00:00 2001
From: OlenaIa <121794911+OlenaIa@users.noreply.github.com>
Date: Sat, 2 Dec 2023 18:18:18 +0200
Subject: [PATCH] Input with Coma

---
 src/components/Filters/Filters.jsx       | 152 +++++++++++++++--------
 src/components/Filters/Filters.styled.js |  49 ++++++--
 src/pages/Favorites.jsx                  |  32 +++--
 3 files changed, 149 insertions(+), 84 deletions(-)

diff --git a/src/components/Filters/Filters.jsx b/src/components/Filters/Filters.jsx
index 616873c..0ec90da 100644
--- a/src/components/Filters/Filters.jsx
+++ b/src/components/Filters/Filters.jsx
@@ -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";
 
@@ -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;
@@ -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>
     )
 };
\ No newline at end of file
diff --git a/src/components/Filters/Filters.styled.js b/src/components/Filters/Filters.styled.js
index 17cf7b1..e5646d1 100644
--- a/src/components/Filters/Filters.styled.js
+++ b/src/components/Filters/Filters.styled.js
@@ -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);
@@ -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`
diff --git a/src/pages/Favorites.jsx b/src/pages/Favorites.jsx
index 796abd1..f418c88 100644
--- a/src/pages/Favorites.jsx
+++ b/src/pages/Favorites.jsx
@@ -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;
\ No newline at end of file