fix: filter opening

nmashchenko · Mar 9, 2024 · a928536 · a928536
1 parent 6b8c47e
commit a928536
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 11 deletions.
diff --git a/client/src/shared/ui/search-bar/search-bar.tsx b/client/src/shared/ui/search-bar/search-bar.tsx
@@ -49,18 +49,40 @@ export const SearchBar: FC<SearchBarProps> = ({ initialFiltersState, onChange })
   const [filterState, dispatch] = useFilterReducer(initialFiltersState);
   const [filterIndex, setFilterIndex] = useState(0);
   const [isModalOpened, setIsModalOpened] = useState(false);
+  const [isFilterOpened, setIsFilterOpened] = useState(false);
   useTrackFilterArr(filterState, onChange);
 
   const { filterArr } = filterState;
 
-  const onOpen = () => {
+  const onOpenModal = () => {
     setIsModalOpened(true);
   };
 
-  const onClose = () => {
+  const onCloseModal = () => {
     setIsModalOpened(false);
   };
 
+  const onOpenFilter = () => {
+    setIsFilterOpened(true);
+  };
+
+  const onCloseFilter = () => {
+    setIsFilterOpened(false);
+  };
+
+  const onOpenModalWithoutFilter = () => {
+    onCloseFilter();
+    onOpenModal();
+  };
+
+  const onOpenModalWithFilter = (value: string) => {
+    const newFilterIndex = filterArr.findIndex(filter => filter.value === value);
+    setFilterIndex(newFilterIndex);
+
+    onOpenFilter();
+    onOpenModal();
+  };
+
   const isShowTagList = filterArr.some(item => {
     switch (item.type) {
       case 'text':
@@ -79,7 +101,7 @@ export const SearchBar: FC<SearchBarProps> = ({ initialFiltersState, onChange })
         setFilterIndex,
       }}
     >
-      <ModalButton onOpen={onOpen} onClose={onClose} />
+      <ModalButton onOpen={onOpenModalWithoutFilter} onClose={onCloseModal} />
 
       <Flex
         direction='column'
@@ -92,10 +114,16 @@ export const SearchBar: FC<SearchBarProps> = ({ initialFiltersState, onChange })
           <FilterSelect />
           <SearchInput />
         </Flex>
-        <TagList />
+        <TagList onOpenFilter={onOpenModalWithFilter} />
       </Flex>
 
-      <Modal isOpened={isModalOpened} onClose={onClose} />
+      <Modal
+        isOpened={isModalOpened}
+        onClose={onCloseModal}
+        isFilterOpened={isFilterOpened}
+        onOpenFilter={onOpenFilter}
+        onCloseFilter={onCloseFilter}
+      />
     </SearchContext.Provider>
   );
 };
diff --git a/client/src/shared/ui/search-bar/ui/modal/modal.tsx b/client/src/shared/ui/search-bar/ui/modal/modal.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC } from 'react';
 import { useFilters } from '../../hooks';
 import clsx from 'clsx';
 import { CrossIcon } from '@/shared/assets';
@@ -11,15 +11,23 @@ import { clearAllFilters, clearFilter } from '../../actions';
 interface ModalProps {
   isOpened: boolean;
   onClose: () => void;
+  isFilterOpened: boolean;
+  onOpenFilter: () => void;
+  onCloseFilter: () => void;
 }
 
-export const Modal: FC<ModalProps> = ({ isOpened, onClose }) => {
+export const Modal: FC<ModalProps> = ({
+  isOpened,
+  onClose,
+  isFilterOpened,
+  onOpenFilter,
+  onCloseFilter,
+}) => {
   const { filterArr, dispatch, filterIndex, setFilterIndex } = useFilters();
   const currentFilter = filterArr[filterIndex];
-  const [isFilterOpened, setIsFilterOpened] = useState(false);
 
   const handleOpenFilter = (index: number) => {
-    setIsFilterOpened(true);
+    onOpenFilter();
     setFilterIndex(index);
   };
 
@@ -33,7 +41,7 @@ export const Modal: FC<ModalProps> = ({ isOpened, onClose }) => {
 
   const handleRightButtonClick = () => {
     if (isFilterOpened) {
-      setIsFilterOpened(false);
+      onCloseFilter();
     } else {
       onClose();
     }

diff --git a/client/src/shared/ui/search-bar/ui/tag-list/tag-list.tsx b/client/src/shared/ui/search-bar/ui/tag-list/tag-list.tsx
@@ -13,11 +13,13 @@ import {
 interface TagListProps {
   isOnlyCurrentFilterTags?: boolean;
   isFilterMenu?: boolean;
+  onOpenFilter?: (value: string) => void;
 }
 
 export const TagList: FC<TagListProps> = ({
   isOnlyCurrentFilterTags = false,
   isFilterMenu = false,
+  onOpenFilter,
 }) => {
   const { filterArr, dispatch, filterIndex } = useFilters();
   const currentFilter = filterArr[filterIndex];
@@ -81,7 +83,11 @@ export const TagList: FC<TagListProps> = ({
                 )}
               </li>
 
-              <li className={styles.checkbox_filter_tag_mobile} key={filterItem.value}>
+              <li
+                onClick={onOpenFilter ? () => onOpenFilter(filterItem.value) : undefined}
+                className={styles.checkbox_filter_tag_mobile}
+                key={filterItem.value}
+              >
                 <Tag>
                   {filterItem.filterValue.length} {filterItem.value}
                 </Tag>