Fix/filter

src/features/filter/components/filter-cover/filter-cover.tsx

@@ -80,6 +80,16 @@ export const FilterCover = ({
     applyFilter();
   };
 
+  const isFilterSelected = () => {
+    return (
+      filterValues.categories.length > 0 ||
+      filterValues.searchRadius.length > 0 ||
+      filterValues.sortBy.length > 0 ||
+      filterValues.date.length > 0 ||
+      filterValues.time.length > 0 ||
+      filterValues.userCategories.length > 0
+    );
+  };
   return (
     <Tooltip
       pointerPosition="right"
@@ -90,8 +100,8 @@ export const FilterCover = ({
     >
       <form
         name="formFilter"
-        onSubmit={(e) => handleSubmit(e)}
-        onReset={() => resetFilter()}
+        onSubmit={handleSubmit}
+        onReset={resetFilter}
       >
         <div className={styles.wrapper}>
           {filterMenu}
@@ -114,6 +124,7 @@ export const FilterCover = ({
               buttonType="primary"
               size="medium"
               actionType="submit"
+              disabled={!isFilterSelected()} 
             />
           </div>
         </div>

src/features/filter/filter.tsx

@@ -1,5 +1,4 @@
-import { useState } from 'react';
-
+import { useForm, Controller } from 'react-hook-form';
 import { FilterWrapper } from 'features/filter/components/filter-wrapper';
 import { FilterProps, IFilterValues } from 'features/filter/types';
 import { SortByBlock } from 'features/filter/ui/sortBy-block';
@@ -8,85 +7,147 @@ import { CalenderBlock } from 'features/filter/ui/calender-block';
 import { UserCategoriesBlock } from 'features/filter/ui/userCategories-block';
 import { TimeBlock } from './ui/time-block';
 import { CategoriesBlock } from './ui/categories-block';
-import { defaultObjFilteres } from './consts';
 import styles from './styles.module.css';
+import { useState } from 'react';
+import { Informer } from 'shared/ui/informer';
 
 export const Filter = ({
   items,
   notFoundFilter = false,
   setFilteres,
 }: FilterProps) => {
-  const [filterValues, setFilterValues] =
-    useState<IFilterValues>(defaultObjFilteres);
+  const defaultValues: IFilterValues = {
+    categories: [],
+    searchRadius: '',
+    sortBy: '',
+    date: '',
+    time: [],
+    userCategories: [],
+  };
+
+  const { control, handleSubmit, reset, watch } = useForm<IFilterValues>({
+    defaultValues,
+  });
 
-  const handleFilterChange = (
-    name: string,
-    value: string | string[] | boolean
-  ) => {
-    setFilterValues((prevFilterValues) => ({
-      ...prevFilterValues,
-      [name]: value,
-    }));
+  const [filterResults, setFilterResults] = useState<any[]>([]); 
+  const [noResults, setNoResults] = useState(false); 
+  const [isFilterApplied, setIsFilterApplied] = useState(false); 
+
+  const onSubmit = (data: IFilterValues) => {
+    if (setFilteres) {
+      const results = performFilter(data); 
+      setFilterResults(results); 
+      setNoResults(results.length === 0); 
+      setIsFilterApplied(true); 
+    }
   };
 
-  const handleReset = () => {
-    setFilterValues(defaultObjFilteres);
+  const performFilter = (filterData: IFilterValues) => {
+    return []; 
   };
 
   if (notFoundFilter) {
     return null;
   }
 
+  const formValues = watch();
   return (
-    <FilterWrapper
-      filterMenu={
-        <>
-          {items?.sort && (
-            <SortByBlock
-              filter={filterValues.sortBy}
-              onChange={handleFilterChange}
-            />
-          )}
-          {items?.categories && (
-            <CategoriesBlock
-              selectedServies={filterValues.categories}
-              onChange={handleFilterChange}
-            />
-          )}
-
-          {items?.userCategories && (
-            <UserCategoriesBlock
-              filter={filterValues.categories}
-              onChange={handleFilterChange}
-            />
-          )}
-
-          {items?.radius && (
-            <RadiusBlock
-              filter={filterValues.searchRadius}
-              onChange={handleFilterChange}
-            />
-          )}
-          <div className={styles.dateBlock}>
-            {items?.time && (
-              <TimeBlock
-                filterTime={filterValues.time}
-                onChange={handleFilterChange}
-              />
-            )}
-
-            {items?.date && (
-              <CalenderBlock
-                filterDate={filterValues.date}
-                onChange={handleFilterChange}
-              />
-            )}
-          </div>
-        </>
-      }
-      filterValues={filterValues}
-      onReset={handleReset}
-      setFilteres={setFilteres}
-    />
+    <div>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <FilterWrapper
+          filterMenu={
+            <>
+              {items?.sort && (
+                <Controller
+                  name="sortBy"
+                  control={control}
+                  render={({ field }) => (
+                    <SortByBlock
+                      filter={field.value}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              )}
+              {items?.categories && (
+                <Controller
+                  name="categories"
+                  control={control}
+                  render={({ field }) => (
+                    <CategoriesBlock
+                      selectedServies={field.value}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              )}
+              {items?.userCategories && (
+                <Controller
+                  name="userCategories"
+                  control={control}
+                  render={({ field }) => (
+                    <UserCategoriesBlock
+                      filter={field.value}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              )}
+              {items?.radius && (
+                <Controller
+                  name="searchRadius"
+                  control={control}
+                  render={({ field }) => (
+                    <RadiusBlock
+                      filter={field.value}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              )}
+              <div className={styles.dateBlock}>
+                {items?.time && (
+                  <Controller
+                    name="time"
+                    control={control}
+                    render={({ field }) => (
+                      <TimeBlock
+                        filterTime={field.value}
+                        onChange={field.onChange}
+                      />
+                    )}
+                  />
+                )}
+                {items?.date && (
+                  <Controller
+                    name="date"
+                    control={control}
+                    render={({ field }) => (
+                      <CalenderBlock
+                        filterDate={field.value}
+                        onChange={field.onChange}
+                      />
+                    )}
+                  />
+                )}
+              </div>
+            </>
+          }
+          filterValues={formValues} 
+          onReset={() => {
+            reset(defaultValues);
+            setFilterResults([]); 
+            setNoResults(false); 
+            setIsFilterApplied(false); 
+          }}
+          setFilteres={setFilteres}
+        />
+       </form>
+      {isFilterApplied && noResults && (
+        <div className={styles.noResults}>
+          <Informer text="По вашему запросу ничего не найдено" />
+        </div>
+      )}
+    </div>
   );
-};
+};

src/features/filter/types.ts

@@ -4,7 +4,7 @@ export interface IFilterValues {
   sortBy: string;
   date: string;
   time: string[];
-  userCategories: string;
+  userCategories: string[];
 }
 
 export interface FilteringProps {

src/features/filter/ui/calender-block/index.tsx

@@ -1,48 +1,27 @@
 import { useState, useEffect } from 'react';
 import { format, parseISO } from 'date-fns';
-
 import { DatePicker } from 'shared/ui/date-picker';
-
 import styles from '../styles.module.css';
 import classNames from 'classnames';
 
 interface CalenderBlockProps {
-  onChange: (name: string, value: string[] | string) => void;
+  onChange: (value: string) => void;  
   filterDate: string;
 }
 
 export const CalenderBlock = ({ onChange, filterDate }: CalenderBlockProps) => {
   const [isCalenderMobil, setIsCalenderMobil] = useState(false);
 
   const handleDateChange = (date: Date) => {
-    const formatedDate = format(date, 'yyyy-MM-dd');
-    onChange('date', formatedDate);
+    const formattedDate = format(date, 'yyyy-MM-dd');
+    onChange(formattedDate);  
   };
 
-  // определение того, в каком виде должен быть календарь: десктопном или мобильном, в том числе
-  // для случаев, когда изменение размера экрана происходит из-за изменения размера браузера
-  const setTypeCalender = () => {
-    if (window.innerWidth <= 768) {
-      setIsCalenderMobil(true);
-    } else {
-      setIsCalenderMobil(false);
-    }
-  };
-  // получение текущей даты (без времени внутри суток)
-  function getNewDate() {
-    const newDate = new Date();
-    const newDateWithoutTime = new Date(
-      newDate.getFullYear(),
-      newDate.getMonth(),
-      newDate.getDate()
-    );
-    setTimeout(() => {
-      handleDateChange(newDateWithoutTime);
-    });
-    return newDateWithoutTime;
-  }
   useEffect(() => {
-    setTypeCalender();
+    const setTypeCalender = () => {
+      setIsCalenderMobil(window.innerWidth <= 768);
+    };
+    setTypeCalender(); 
     window.addEventListener('resize', setTypeCalender);
     return () => {
       window.removeEventListener('resize', setTypeCalender);
@@ -51,21 +30,15 @@ export const CalenderBlock = ({ onChange, filterDate }: CalenderBlockProps) => {
 
   return (
     <div>
-      <p
-        className={classNames(
-          styles.filterBlockText,
-          'text',
-          'text_size_small'
-        )}
-      >
+      <p className={classNames(styles.filterBlockText, 'text', 'text_size_small')}>
         Дата
       </p>
       <div className={styles.calendar}>
         <DatePicker
-          value={filterDate ? parseISO(filterDate) : getNewDate()}
+          value={filterDate ? parseISO(filterDate) : new Date()}
           isMobile={isCalenderMobil}
           onChangeValue={handleDateChange}
-          inline={window.innerWidth > 768 || false}
+          inline={window.innerWidth > 768}
         />
       </div>
     </div>

src/features/filter/ui/categories-block/index.tsx

@@ -12,7 +12,7 @@ import { useGetCategoriesQuery } from 'services/categories-api';
 
 interface CategoriesBlockProps {
   selectedServies: string[];
-  onChange: (name: string, value: string[]) => void;
+  onChange: (value: string[]) => void;  
 }
 
 export const CategoriesBlock = ({
@@ -48,7 +48,7 @@ export const CategoriesBlock = ({
     } else {
       newValue = selectedServies.filter((item) => item !== target.id);
     }
-    onChange('categories', newValue);
+    onChange(newValue);  
   };
 
   const checkAccess = (category: string) => {