refactor slider issue with 0 values (#226)

daniilminin1990 · May 30, 2024 · 082dac8 · 082dac8
1 parent 7462ba1
commit 082dac8
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 26 deletions.
diff --git a/src/Pages/DecksPage/Decks.page.tsx b/src/Pages/DecksPage/Decks.page.tsx
@@ -88,10 +88,7 @@ export function DecksPage() {
     setCurrentPageQuery(value)
   }
 
-  const decksData = currentData ?? data
-  const arrayOfDecks = decksData?.items.filter(item =>
-    tabsValue === meData?.id ? item.userId === meData?.id : true
-  )
+  const decksData = currentData?.items ?? data?.items
 
   if (isLoading) {
     return <Loading />
@@ -140,20 +137,18 @@ export function DecksPage() {
           </Button>
         </div>
       </div>
-      <TableComponentWithTypes data={arrayOfDecks} tableHeader={headersNameDecks}>
+      <TableComponentWithTypes data={decksData} tableHeader={headersNameDecks}>
         {item => <SingleRowDeck item={item} />}
       </TableComponentWithTypes>
       <div className={s.footer}>
-        {arrayOfDecks?.length !== 0 && (
-          <PaginationWithSelect
-            currentPage={currentPage}
-            itemsPerPage={itemsPerPage}
-            selectOptions={selectOptionPagination}
-            setCurrentPage={handleCurrentPageChange}
-            setItemsPerPage={handleItemsPerPageChange}
-            totalItems={data?.pagination.totalItems || 0}
-          />
-        )}
+        <PaginationWithSelect
+          currentPage={currentPage}
+          itemsPerPage={itemsPerPage}
+          selectOptions={selectOptionPagination}
+          setCurrentPage={handleCurrentPageChange}
+          setItemsPerPage={handleItemsPerPageChange}
+          totalItems={data?.pagination.totalItems || 0}
+        />
       </div>
     </Page>
   )

diff --git a/src/components/TableComponent/TableComponentWithTypes.tsx b/src/components/TableComponent/TableComponentWithTypes.tsx
@@ -38,7 +38,6 @@ export const TableComponentWithTypes = <T extends CardResponse[] | Deck[]>({
         <Table.Row>
           {header.map(name => (
             <Table.HeadCell
-              // className={s.tableHeadCellCards}
               className={clsx(
                 tableHeader === headersNameDecks ? s.tableHeadCellDecks : s.tableHeadCellCards
               )}
@@ -68,7 +67,7 @@ export const TableComponentWithTypes = <T extends CardResponse[] | Deck[]>({
             <Table.Cell className={s.empty} colSpan={header.length + 1}>
               <Typography as={'span'} variant={'body1'}>
                 {search.length === 0
-                  ? 'Please add any data to show'
+                  ? 'Please add any data to show or clear filters'
                   : 'No content with these terms...'}
               </Typography>
             </Table.Cell>

diff --git a/src/hooks/useSliderQueryParams.ts b/src/hooks/useSliderQueryParams.ts
@@ -14,13 +14,14 @@ export const useSliderQueryParams = () => {
   const debouncedStartValue = useDebounce(sliderMin)
   const debouncedEndValue = useDebounce(sliderMax)
 
-  const changeMinMaxHandler = (value: number | number[]) => {
-    if (Array.isArray(value)) {
-      searchParams.set('min', `${value[0]}`)
-      searchParams.set('max', `${value[1]}`)
-    } else {
-      searchParams.set('min', `${value}`)
-    }
+  const changeMinMaxHandler = (value: number[]) => {
+    value[0] === minMaxData?.min
+      ? searchParams.delete('min')
+      : searchParams.set('min', `${value[0]}`)
+    value[1] === minMaxData?.max
+      ? searchParams.delete('max')
+      : searchParams.set('max', `${value[1]}`)
+
     setSearchParams(searchParams)
   }
 

diff --git a/src/services/decks/decks.service.ts b/src/services/decks/decks.service.ts
@@ -115,8 +115,8 @@ export const decksService = flashCardsAPI.injectEndpoints({
             authorId: args?.authorId || undefined,
             currentPage: args?.currentPage || undefined,
             itemsPerPage: args?.itemsPerPage || undefined,
-            maxCardsCount: args?.maxCardsCount || undefined,
-            minCardsCount: args?.minCardsCount || undefined,
+            maxCardsCount: args?.maxCardsCount || 0,
+            minCardsCount: args?.minCardsCount || 0,
             name: args?.name || undefined,
             orderBy: args?.orderBy || undefined,
           },