Fixed the bookmarked offers page (#2652)

* fixed the bookmarked offers page * fixed tests
ita-social-projects · Nov 12, 2024 · dd0388e · dd0388e
1 parent e2ed728
commit dd0388e
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 66 deletions.
diff --git a/src/containers/bookmarked-offers/BookmarksToolbar.styles.tsx b/src/containers/bookmarked-offers/BookmarksToolbar.styles.tsx
@@ -7,6 +7,7 @@ export const styles = {
     justifyContent: 'flex-start',
     alignItems: 'center',
     gap: '10px',
+    scrollMarginTop: '16px',
     [theme.breakpoints.up('md')]: {
       flexDirection: 'row',
       justifyContent: 'space-between',

diff --git a/src/containers/bookmarked-offers/BookmarksToolbar.tsx b/src/containers/bookmarked-offers/BookmarksToolbar.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, useState } from 'react'
+import { FormEvent, forwardRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Box, IconButton } from '@mui/material'
 import ClearIcon from '@mui/icons-material/Clear'
@@ -26,75 +26,80 @@ interface BookmarksToolbarProps {
   offersView: CardsView
 }
 
-const BookmarksToolbar = ({
-  filters,
-  updateFilters,
-  additionalParams,
-  offersView,
-  handleOffersView
-}: BookmarksToolbarProps) => {
-  const [title, setTitle] = useState(filters.title)
-  const { t } = useTranslation()
-  const { isLaptopAndAbove } = useBreakpoints()
+const BookmarksToolbar = forwardRef<HTMLDivElement, BookmarksToolbarProps>(
+  (
+    { filters, updateFilters, additionalParams, offersView, handleOffersView },
+    ref
+  ) => {
+    const [title, setTitle] = useState(filters.title)
+    const { t } = useTranslation()
+    const { isLaptopAndAbove } = useBreakpoints()
 
-  const handleInputSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    updateFilters({ ...additionalParams, title })
-  }
+    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setTitle(event.target.value)
+    }
 
-  const handleSortBy = (value: string) => {
-    updateFilters({ ...additionalParams, sort: value })
-  }
+    const handleInputSubmit = (e: FormEvent<HTMLFormElement>) => {
+      e.preventDefault()
+      updateFilters({ ...additionalParams, title })
+    }
 
-  const sortOptions = sortTranslationKeys.map(({ title, value }) => ({
-    title: t(title),
-    value
-  }))
+    const handleSortBy = (value: string) => {
+      updateFilters({ ...additionalParams, sort: value })
+    }
 
-  const inputProps = {
-    endAdornment: filters.title ? (
-      <IconButton
-        data-testid='clear-button'
-        onClick={() => {
-          setTitle('')
-          updateFilters({ ...additionalParams, title: '' })
-        }}
-        sx={{ p: 0 }}
-      >
-        <ClearIcon color='secondary' />
-      </IconButton>
-    ) : (
-      <SearchIcon color='primary' />
-    )
-  }
+    const sortOptions = sortTranslationKeys.map(({ title, value }) => ({
+      title: t(title),
+      value
+    }))
+
+    const inputProps = {
+      endAdornment: filters.title ? (
+        <IconButton
+          data-testid='clear-button'
+          onClick={() => {
+            setTitle('')
+            updateFilters({ ...additionalParams, title: '' })
+          }}
+          sx={{ p: 0 }}
+        >
+          <ClearIcon color='secondary' />
+        </IconButton>
+      ) : (
+        <SearchIcon color='primary' />
+      )
+    }
 
-  return (
-    <Box sx={styles.container}>
-      <Box sx={styles.searchBox}>
-        <form onSubmit={handleInputSubmit}>
-          <FilterInput
-            InputProps={inputProps}
-            label={t('bookmarkedOffers.search')}
-            onChange={setTitle}
-            size={SizeEnum.Medium}
-            sx={styles.filterInput}
-            value={title}
+    return (
+      <Box ref={ref} sx={styles.container}>
+        <Box sx={styles.searchBox}>
+          <form onSubmit={handleInputSubmit}>
+            <FilterInput
+              InputProps={inputProps}
+              label={t('bookmarkedOffers.search')}
+              onChange={handleInputChange}
+              size={SizeEnum.Medium}
+              sx={styles.filterInput}
+              value={title}
+            />
+          </form>
+        </Box>
+        <Box sx={styles.selectContainer}>
+          <AppSelect
+            fields={sortOptions}
+            selectTitle={t('filters.sortBy.sortByTitle')}
+            setValue={handleSortBy}
+            value={filters.sort}
           />
-        </form>
+          {isLaptopAndAbove && (
+            <ViewSwitcher onChange={handleOffersView} value={offersView} />
+          )}
+        </Box>
       </Box>
-      <Box sx={styles.selectContainer}>
-        <AppSelect
-          fields={sortOptions}
-          selectTitle={t('filters.sortBy.sortByTitle')}
-          setValue={handleSortBy}
-          value={filters.sort}
-        />
-        {isLaptopAndAbove && (
-          <ViewSwitcher onChange={handleOffersView} value={offersView} />
-        )}
-      </Box>
-    </Box>
-  )
-}
+    )
+  }
+)
+
+BookmarksToolbar.displayName = 'BookmarksToolbar'
 
 export default BookmarksToolbar
diff --git a/src/pages/bookmarked-offers/BookmarkedOffers.tsx b/src/pages/bookmarked-offers/BookmarkedOffers.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useCallback, useEffect, useState } from 'react'
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Divider } from '@mui/material'
 import Typography from '@mui/material/Typography'
@@ -45,6 +45,7 @@ const BookmarkedOffers = () => {
   const { bookmarkedOffers } = useAppSelector((state) => state.editProfile)
   const { isMobile } = useBreakpoints()
   const dispatch = useAppDispatch()
+  const toolbarRef = useRef<HTMLDivElement>(null)
   const { t } = useTranslation()
 
   const { items, count: offersCount } = offers
@@ -100,6 +101,7 @@ const BookmarkedOffers = () => {
 
   const handlePageChange = (_: ChangeEvent<unknown>, page: number) => {
     filterQueryActions.updateFiltersInQuery({ page })
+    toolbarRef.current?.scrollIntoView({ block: 'start', behavior: 'smooth' })
   }
 
   useEffect(() => {
@@ -116,6 +118,7 @@ const BookmarkedOffers = () => {
         filters={filters}
         handleOffersView={setCardsView}
         offersView={cardsView}
+        ref={toolbarRef}
         updateFilters={filterQueryActions.updateFiltersInQuery}
       />
       <Divider sx={styles.divider} />

diff --git a/tests/unit/pages/bookmarked-offers/BookmarkedOffers.spec.jsx b/tests/unit/pages/bookmarked-offers/BookmarkedOffers.spec.jsx
@@ -16,8 +16,11 @@ import * as sortValues from '~/containers/find-offer/offer-filter-block/OfferFil
 const mockNavigate = vi.fn()
 let mockSearchParams = new URLSearchParams()
 const mockSetSearchParams = vi.fn()
+const mockScrollIntoView = vi.fn()
 const mockT = (str) => str
 
+window.HTMLElement.prototype.scrollIntoView = mockScrollIntoView
+
 vi.mock('react-router-dom', async () => {
   const actual = await vi.importActual('react-router-dom')
   return {
@@ -77,7 +80,7 @@ describe('BookmarkedOffers page with offers', () => {
     expect(offer2Title).toBeInTheDocument()
   })
 
-  it('should change the page number', async () => {
+  it('should change the page number and scroll to the top', async () => {
     const pageNumber = 2
     const goToPageBtn = await screen.findByText(`${pageNumber}`, {
       selector: 'button'
@@ -88,6 +91,7 @@ describe('BookmarkedOffers page with offers', () => {
     expect(mockSetSearchParams).toHaveBeenCalledWith(
       new URLSearchParams({ page: pageNumber })
     )
+    expect(mockScrollIntoView).toHaveBeenCalled()
   })
 
   it('should add title to URL search params', async () => {