Refactor UserBannerList to functional component

src/components/banner-order-chooser/BannerOrderChooser.tsx

@@ -19,15 +19,14 @@ const BannerOrderChooser: FC<BannerOrderChooserProps> = ({
 }) => {
   const [open, setOpen] = useState<boolean>(false)
   const [loadingLocation, setLoadingLocation] = useState<boolean>(false)
-  const [currentFilter, setCurrentFilter] = useState<BannerFilter>(filter)
   const { t } = useTranslation()
   useEffect(() => {
     if (loadingLocation) {
       navigator.geolocation.getCurrentPosition(
         (pos) => {
           setLoadingLocation(false)
           updateFilter({
-            ...currentFilter,
+            ...filter,
             orderBy: 'proximityStartPoint',
             orderDirection: 'ASC',
             proximityLatitude: pos.coords.latitude,
@@ -40,7 +39,7 @@ const BannerOrderChooser: FC<BannerOrderChooserProps> = ({
         { maximumAge: 0, enableHighAccuracy: true }
       )
     }
-  })
+  }, [loadingLocation, setLoadingLocation, filter])
 
   const show = () => {
     setOpen(true)
@@ -52,7 +51,6 @@ const BannerOrderChooser: FC<BannerOrderChooserProps> = ({
   }
 
   const updateFilter = (newFilter: BannerFilter) => {
-    setCurrentFilter(newFilter)
     onFilterChanged(newFilter)
   }
 
@@ -68,51 +66,51 @@ const BannerOrderChooser: FC<BannerOrderChooserProps> = ({
   }
 
   const onOrderClicked = (type: BannerOrder) => {
-    if (type !== currentFilter.orderBy) {
+    if (type !== filter.orderBy) {
       if (type === 'proximityStartPoint') {
         setLoadingLocation(true)
       } else {
         updateFilter({
-          ...currentFilter,
+          ...filter,
           orderBy: type,
           orderDirection: getDefaultDirection(type),
           proximityLatitude: undefined,
           proximityLongitude: undefined,
         })
       }
-    } else if (hasBothDirections(currentFilter.orderBy)) {
+    } else if (hasBothDirections(filter.orderBy)) {
       updateFilter({
-        ...currentFilter,
-        orderDirection: currentFilter.orderDirection === 'ASC' ? 'DESC' : 'ASC',
+        ...filter,
+        orderDirection: filter.orderDirection === 'ASC' ? 'DESC' : 'ASC',
       })
     }
   }
 
   const onOfficialChanged = (includeUnofficial: boolean) => {
     updateFilter({
-      ...currentFilter,
+      ...filter,
       onlyOfficialMissions: includeUnofficial ? undefined : true,
     })
   }
 
   const onOnlineChanged = (showOffline: boolean) => {
     updateFilter({
-      ...currentFilter,
+      ...filter,
       online: showOffline ? undefined : true,
     })
   }
 
   const getButtonClass = (type: BannerOrder) => {
     let classNames = 'order-button'
-    if (type === currentFilter.orderBy) {
+    if (type === filter.orderBy) {
       classNames += ' selected'
     }
     return classNames
   }
 
   const getButtonDirection = (type: BannerOrder) => {
-    return type === currentFilter.orderBy
-      ? currentFilter.orderDirection
+    return type === filter.orderBy
+      ? filter.orderDirection
       : getDefaultDirection(type)
   }
 
@@ -147,16 +145,13 @@ const BannerOrderChooser: FC<BannerOrderChooserProps> = ({
           </h2>
           <div className="filter-and-sort-switch-row">
             <h3>{t('order.showOfflineBanners')}</h3>
-            <Switch
-              checked={!currentFilter.online}
-              onChange={onOnlineChanged}
-            />
+            <Switch checked={!filter.online} onChange={onOnlineChanged} />
           </div>
           {includeOfficial && (
             <div className="filter-and-sort-switch-row">
               <h3>{t('order.showUnofficialBanners')}</h3>
               <Switch
-                checked={!currentFilter.onlyOfficialMissions}
+                checked={!filter.onlyOfficialMissions}
                 onChange={onOfficialChanged}
               />
             </div>
@@ -190,19 +185,19 @@ const BannerOrderChooser: FC<BannerOrderChooserProps> = ({
               components={{
                 order: (
                   <Order
-                    orderBy={currentFilter.orderBy}
-                    orderDirection={currentFilter.orderDirection}
+                    orderBy={filter.orderBy}
+                    orderDirection={filter.orderDirection}
                   />
                 ),
               }}
             />
             {' / '}
           </>
         )}
-        {currentFilter.online
+        {filter.online
           ? t('order.text.excludeOffline')
           : t('order.text.includeOffline')}
-        {currentFilter.onlyOfficialMissions && (
+        {filter.onlyOfficialMissions && (
           <>
             {' / '}
             {t('order.onlyOfficial')}

src/components/infinite-banner-list/InfiniteBannerList.tsx

@@ -1,6 +1,6 @@
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { BannerFilter } from '../../features/banner/filter'
-import { useBannerList } from '../../features/banner/hooks'
+import { useBannerList, usePrevious } from '../../features/banner/hooks'
 import BannerList from '../banner-list'
 import BannerOrderChooser from '../banner-order-chooser'
 
@@ -19,6 +19,10 @@ const InfiniteBannerList: FC<InfiniteBannerListProps> = ({
     setMaxPages(1)
   }
 
+  useEffect(() => {
+    onFilterChanged(initialFilter)
+  }, [initialFilter])
+
   return (
     <div>
       <BannerOrderChooser

src/features/banner/filter.ts

@@ -1,3 +1,5 @@
+import { BannerListType } from './types'
+
 export type BannerOrder =
   | 'relevance'
   | 'listAdded'
@@ -18,4 +20,5 @@ export type BannerFilter = {
   maxEventTimestamp?: string
   proximityLatitude?: number
   proximityLongitude?: number
+  listTypes?: BannerListType
 }