#386. Move Form data from Filter to FilterCover

ya-pomogau · Aug 21, 2024 · 34f74f9 · 34f74f9
1 parent 65f6cbe
commit 34f74f9
Show file tree

Hide file tree

Showing 10 changed files with 249 additions and 154 deletions.
diff --git a/src/features/error-boundary/pages/BlokedPage.tsx b/src/features/error-boundary/pages/BlokedPage.tsx
@@ -14,7 +14,7 @@ export const BlokedPage = () => {
           <Filter
             items={{
               categories: true,
-              radius: true,
+              searchRadius: true,
               date: true,
             }}
           />

diff --git a/src/features/error-boundary/pages/NoConectionPage.tsx b/src/features/error-boundary/pages/NoConectionPage.tsx
@@ -14,7 +14,7 @@ export const NoConectionPage = () => {
           <Filter
             items={{
               categories: true,
-              radius: true,
+              searchRadius: true,
               date: true,
             }}
           />

diff --git a/src/features/filter/components/filter-cover/filter-cover.tsx b/src/features/filter/components/filter-cover/filter-cover.tsx
@@ -1,35 +1,68 @@
-import { useEffect, ReactElement, FormEvent } from 'react';
+import { FormEvent, ReactElement, useEffect } from 'react';
 
 import { Tooltip } from 'shared/ui/tooltip';
 import { Button } from 'shared/ui/button';
 
+import { SortByBlock } from 'features/filter/ui/sortBy-block';
+import { RadiusBlock } from 'features/filter/ui/radius-block';
+import { CalenderBlock } from 'features/filter/ui/calender-block';
+import { UserCategoriesBlock } from 'features/filter/ui/userCategories-block';
+import { TimeBlock } from 'features/filter/ui/time-block';
+import { CategoriesBlock } from 'features/filter/ui/categories-block';
+
 import type { IFilterValues } from 'features/filter/types';
 
 import styles from './filter-cover.module.css';
 import { CloseCrossIcon } from 'shared/ui/icons/close-cross-icon';
 import { defaultObjFilteres } from 'features/filter/consts';
 import { useSearchParams } from 'react-router-dom';
+import { Controller, useForm } from 'react-hook-form';
 
 interface FilterCoverProps {
   closeFilterMenu: () => void;
   position: { top: number; right: number };
-  filterMenu: ReactElement;
-  filterValues: IFilterValues;
+  // filterMenu: ReactElement;
+  filterMenu: { [key in keyof IFilterValues]?: boolean } | undefined;
+  // filterValues: IFilterValues;
   setFilteres?: (item: IFilterValues) => void;
-  onReset: () => void;
+  // onReset: () => void;
 }
 
 export const FilterCover = ({
   closeFilterMenu,
   position,
   filterMenu,
-  filterValues,
-  onReset,
   setFilteres,
-}: FilterCoverProps) => {
+}: // filterValues,
+// onReset,
+FilterCoverProps) => {
   const [_, setSearchParams] = useSearchParams();
   const newSearchParams = new URLSearchParams();
 
+  const defaultValues: IFilterValues = {
+    categories: [],
+    searchRadius: '',
+    sortBy: '',
+    date: '',
+    time: [],
+    userCategories: [],
+  };
+
+  // const { control, handleSubmit, reset, watch } = useForm<IFilterValues>({
+  const { control, reset, watch } = useForm<IFilterValues>({
+    defaultValues,
+  });
+
+  const onSubmit = (data: IFilterValues) => {
+    if (setFilteres) {
+      setFilteres(data);
+    }
+  };
+
+  const filterValues = watch();
+
+  // filterValues={formValues}
+
   useEffect(() => {
     if (window.innerWidth > 768) {
       setFilteres?.({
@@ -65,7 +98,8 @@ export const FilterCover = ({
   };
 
   const resetFilter = () => {
-    onReset();
+    // onReset();
+    reset(defaultValues);
     setSearchParams(defaultObjFilteres);
     setFilteres?.(defaultObjFilteres);
     closeFilterMenu();
@@ -81,6 +115,78 @@ export const FilterCover = ({
     applyFilter();
   };
 
+  const items = filterMenu;
+
+  const element: ReactElement = (
+    <>
+      {items?.sortBy && (
+        <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?.searchRadius && (
+        <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>
+    </>
+  );
+
   const isFilterSelected = () => {
     return (
       filterValues.categories.length > 0 ||
@@ -99,13 +205,9 @@ export const FilterCover = ({
       extClassName={styles.tooltip}
       visible
     >
-      <form
-        name="formFilter"
-        onSubmit={handleSubmit}
-        onReset={resetFilter}
-      >
+      <form name="formFilter" onSubmit={handleSubmit} onReset={resetFilter}>
         <div className={styles.wrapper}>
-          {filterMenu}
+          {element}
           <div
             className={`${styles.buttonWrapper} ${
               window.innerWidth <= 768 ? styles.buttonWrapper__mobile : null
@@ -125,7 +227,7 @@ export const FilterCover = ({
               buttonType="primary"
               size="medium"
               actionType="submit"
-              disabled={!isFilterSelected()} 
+              disabled={!isFilterSelected()}
             />
           </div>
         </div>

diff --git a/src/features/filter/components/filter-wrapper/filter-wrapper.tsx b/src/features/filter/components/filter-wrapper/filter-wrapper.tsx
@@ -1,22 +1,23 @@
-import { useState, useRef, ReactElement, useCallback, useEffect } from 'react';
+import { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
 
 import { FilterButton } from 'features/filter/components/filter-button';
 import { FilterCover } from 'features/filter/components/filter-cover';
 import { IFilterValues } from 'features/filter/types';
 
 interface FilterWrapperProps {
-  filterMenu: ReactElement;
-  filterValues: IFilterValues;
+  // filterMenu: ReactElement;
+  filterMenu: { [key in keyof IFilterValues]?: boolean } | undefined;
+  // filterValues: IFilterValues;
   setFilteres?: (data: IFilterValues) => void;
-  onReset: () => void;
+  // onReset: () => void;
 }
 
 export const FilterWrapper = ({
   filterMenu,
-  filterValues,
   setFilteres,
-  onReset,
-}: FilterWrapperProps) => {
+}: // filterValues,
+// onReset,
+FilterWrapperProps) => {
   const [isFilterMenuVisible, setFilterMenuVisible] = useState(false);
 
   const [filterPosition, setFilterPosition] = useState({ top: 10, right: 0 });
@@ -58,9 +59,9 @@ export const FilterWrapper = ({
           closeFilterMenu={toggleFilterMenu}
           position={filterPosition}
           filterMenu={filterMenu}
-          filterValues={filterValues}
+          // filterValues={filterValues}
           setFilteres={setFilteres}
-          onReset={onReset}
+          // onReset={onReset}
         />
       )}
     </>

diff --git a/src/features/filter/filter.stories.tsx b/src/features/filter/filter.stories.tsx
@@ -57,9 +57,9 @@ type Story = StoryObj<typeof meta>;
 export const DefaultFilter: Story & any = {
   args: {
     items: {
-      sort: false,
+      sortBy: false,
       categories: true,
-      radius: true,
+      searchRadius: true,
       time: true,
       date: true,
     },