refactor: changed the behavior of the input in the form

src/components/Cards/CalleryAdsCards/GalleryAdsCards.tsx

@@ -27,17 +27,25 @@ const promocards = [
 export const GalleryAdsCards: FC = () => {
   const navigate = useNavigate()
 
+  const onClickHandler = (path: string) => {
+    navigate(path)
+  }
+
   return (
     <div className={classes.cards}>
       {promocards.map((card) => {
         return (
-          <div key={card.id} className={card.classes} style={card.mr ? { marginRight: "30px" } : {}}>
+          <div
+            key={card.id}
+            className={card.classes}
+            style={card.mr ? { marginRight: "30px" } : {}}
+          >
             <p className={classes.subtitle}>{card.subtitle}</p>
             <h3 className={classes.title}>{card.title}</h3>
             {card.isButtons && <Badges />}
             <img src={card.image} className={classes.image} alt="аренда бань и саун" />
             {!card.isButtons &&
-              <Button className={classes.jumpButton} onClick={() => navigate(card.path)}>
+              <Button className={classes.jumpButton} onClick={() => onClickHandler(card.path)}>
                 <IconSvg id={"#arrow"} className={classes.arrow} />
               </Button>
             }

src/components/FilterUI/Filter/ButtonGroup/ButtonGroup.tsx

@@ -63,7 +63,6 @@ export const ButtonGroup: FC<IPropsButtons> = ({ onHandleClick }) => {
           <Button
             type="submit"
             className={classes.showSelectedBtn}
-
           >
             Показать объекты
           </Button>

src/components/Form/ContactForm/ContactForm.module.scss

@@ -26,7 +26,7 @@
     outline: none;
     border: 2px solid #f8f8f8;
     transition: $transition;
-    &:focus {
+    &:hover {
       border: 2px solid rgba(102, 78, 249, 0.8);
     }
   }
@@ -64,8 +64,4 @@
 
 .error {
   border: 2px solid rgba(235, 87, 87, 1);
-
-  input:focus {
-    border: 2px solid rgba(235, 87, 87, 1);
-  }
 }

src/components/Notification/NothingFound/NothingFound.module.scss

@@ -7,4 +7,5 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  height: 400px;
 }

src/components/ui-kit/Input/Input.module.scss

@@ -32,10 +32,10 @@
   outline: transparent;
   transition: $transition;
 
-  &:focus {
+  &:hover {
     border: 2px solid rgba(102, 78, 249, 0.8);
   }
-  &:focus + svg {
+  &:hover + svg {
     fill: $moderate-blue;
     opacity: 1;
   }

src/hooks/useFilter.ts

@@ -8,10 +8,6 @@ import {
 import { useLocation } from "react-router";
 import { path } from "../constants/pages";
 import { IResponseData } from "../Interfaces/IResponseData";
-import { fetchFlats } from "../store/thunks/flatThunk";
-import { fetchCottages } from "../store/thunks/cottagesThunk";
-import { fetchBaths } from "../store/thunks/bathsThunk";
-import { fetchCars } from "../store/thunks/carsThunk";
 
 export const useFilter = () => {
   const location = useLocation();
@@ -25,24 +21,6 @@ export const useFilter = () => {
   );
   const [currentFetchData, setCurrentFetchData] = useState<IResponseData[]>();
 
-  useEffect(() => {
-    switch (location.pathname) {
-      case path.APARTMENTS:
-        dispatch(fetchFlats());
-        break;
-      case path.COTTAGES:
-        dispatch(fetchCottages());
-        break;
-      case path.BATHS:
-        dispatch(fetchBaths());
-        break;
-      case path.CARS:
-        dispatch(fetchCars());
-        break;
-      default:
-    }
-  }, [dispatch, location.pathname]);
-
   useEffect(() => {
     switch (location.pathname) {
       case path.HOME:
@@ -56,7 +34,7 @@ export const useFilter = () => {
       case path.CARS:
         return setCurrentFetchData(cars);
     }
-  }, [baths, cars, cottages, flats, location.pathname]);
+  }, [baths, cars, cottages, currentFetchData, flats, location.pathname]);
 
   useEffect(() => {
     submitFilteringFunction();
@@ -157,6 +135,5 @@ export const useFilter = () => {
 
   return {
     submitFilteringFunction,
-    filteredData,
   };
 };

src/pages/Catalog/Catalog.tsx

@@ -1,11 +1,42 @@
-import { FC } from "react"
+import { FC, useEffect } from "react"
+import { useLocation } from "react-router-dom"
+import { useAppDispatch } from "../../hooks/redux/redux-hooks"
 import { useFilter } from "../../hooks/useFilter"
+
 import { Recommended } from "./section-recommended/Recommended"
 import { Products } from "./section-products/Products"
 import { ShowMap } from "./section-showmap/ShowMap"
 import { Filter as FilterUI } from "../../components/FilterUI/Filter/Filter"
+import { fetchFlats } from "../../store/thunks/flatThunk";
+import { fetchCottages } from "../../store/thunks/cottagesThunk";
+import { fetchBaths } from "../../store/thunks/bathsThunk";
+import { fetchCars } from "../../store/thunks/carsThunk";
+
+
+import { path } from "../../constants/pages";
 
 export const Catalog: FC = () => {
+  const location = useLocation();
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    switch (location.pathname) {
+      case path.APARTMENTS:
+        dispatch(fetchFlats());
+        break;
+      case path.COTTAGES:
+        dispatch(fetchCottages());
+        break;
+      case path.BATHS:
+        dispatch(fetchBaths());
+        break;
+      case path.CARS:
+        dispatch(fetchCars());
+        break;
+      default:
+    }
+  }, [dispatch, location.pathname]);
+
   const { submitFilteringFunction } = useFilter()
 
   const onHandleSubmit = () => {

src/pages/Catalog/section-products/Products.tsx

@@ -13,16 +13,15 @@ import { TiledCards } from "../../../components/Cards/TiledCards/TiledCards";
 import { ListCards } from "../../../components/Cards/ListCards/ListCards";
 import { Pagination } from "../../../components/Pagination/Pagination";
 import { ShareButtons } from "../../../components/ShareButtons/ShareButtons";
-import { ErrorMessage } from "../../../components/Notification/ErrorMessage/ErrorMessage"
-import { Spinner } from "../../../Spinner/Spinner"
+
+import { NothingFound } from "../../../components/Notification/NothingFound/NothingFound";
+
 
 import { ISelectOption } from "../../../Interfaces/ISelectOption";
 import { IResponseData } from "../../../Interfaces/IResponseData";
 import classes from "./Products.module.scss"
 
 
-
-
 export const Products: FC = () => {
 
   const dispatch = useAppDispatch()
@@ -54,18 +53,19 @@ export const Products: FC = () => {
             {filteredData && <span> Найдено {filteredData?.length} результата</span>}
           </h3>
 
-          {slicedArray.length <= 0 ?
+          {slicedArray.length === 0 ?
             <div className={classes.spinwrap}>
-              <Spinner />
-            </div> :
+              <NothingFound />
+            </div>
+            :
             active === "tiles" &&
             <div className={classes.tilesCardWrapper}>
               {slicedArray?.map((items: IResponseData) =>
                 <TiledCards key={items.id} data={items} className={classes.shadow} />
               )}
             </div>
           }
-           
+
           {active === "list" &&
             <div className={classes.listCardWrapper}>
               {slicedArray?.map((items: IResponseData) =>

src/pages/Home/Home.tsx

@@ -5,12 +5,11 @@ import { Rent } from "./section-rent/Rent";
 import { Presentation } from "./section-presentation/Presentation";
 import { About } from "./section-about/About";
 
-
 export const Home: FC = () => {
 
   return (
     <>
-      <Filter/>
+      <Filter />
       <Gallery />
       <Rent />
       <Presentation />

src/pages/Home/section-rent/Rent.tsx

@@ -31,7 +31,7 @@ export const Rent: FC = () => {
     dispatch(fetchFlats())
   }, [dispatch])
 
-  const { loading, error, flats } = useAppSelector(state => state.flats)
+  const { loading, error } = useAppSelector(state => state.flats)
   const { stateData, filteredData } = useAppSelector(state => state.filter)
   const { rentTitle, totalOffersTitle } = usePageTitle()
 

src/store/reducers/filterReducer.ts

@@ -67,6 +67,7 @@ const filterSlice = createSlice({
     },
 
     resetFilter(state) {
+      state.sortValue = { value: "По умолчанию", label: "По умолчанию" };
       state.stateData.city = "";
       state.stateData.room = "";
       state.stateData.area = "";