fix filter selecting issue

data-for-change · Dec 28, 2024 · d507019 · d507019
1 parent c12247f
commit d507019
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/src/components/molecules/NewsFlashFilterPanel.tsx b/src/components/molecules/NewsFlashFilterPanel.tsx
@@ -12,12 +12,13 @@ import { useStore } from 'store/storeConfig';
 import { SourceFilterEnum } from 'models/SourceFilter';
 import { Typography } from 'components/atoms';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 const useStyles = makeStyles({
   image: {
     maxWidth: '50px',
     maxHeight: '35px',
-    mixBlendMode: "multiply"
+    mixBlendMode: 'multiply',
   },
   button: {
     height: '50px',
@@ -48,6 +49,7 @@ const NewsFlashFilterPanel: FC<IProps> = () => {
   const classes = useStyles();
   const { t } = useTranslation();
   const store: RootStore = useStore();
+  const navigate = useNavigate();
   const { newsFlashStore } = store;
 
   const getLogoByFilter = (type: SourceFilterEnum) => {
@@ -76,7 +78,10 @@ const NewsFlashFilterPanel: FC<IProps> = () => {
             className={classnames(classes.button, {
               [classes.active]: newsFlashStore.newsFlashActiveFilter === filter,
             })}
-            onClick={() => newsFlashStore.setActiveNewsFlashFilter(filter)}
+            onClick={() => {
+              newsFlashStore.setActiveNewsFlashFilter(filter);
+              navigate('');
+            }}
             key={filter}
           >
             {filter === SourceFilterEnum.all ? (

diff --git a/src/store/news-flash-store.ts b/src/store/news-flash-store.ts
@@ -102,11 +102,11 @@ export default class NewsFlashStore {
           this.newsFlashCollection.data = [];
         });
       }
-      this.filterNewsFlashCollection();
+      this.filterNewsFlashCollection(undefined,true);
     }
   }
 
-  async filterNewsFlashCollection(direction: Direction = Direction.NEXT) {
+  async filterNewsFlashCollection (direction: Direction = Direction.NEXT, isFiltering: boolean = false) {
     runInAction(() => (this.newsFlashLoading = true));
 
     if (this.newsFlashActiveFilter in LOCAL_FILTERS) {
@@ -117,11 +117,18 @@ export default class NewsFlashStore {
         this.newsFlashLoading = false;
       });
     } else {
-      const queryParams: IFetchNewsQueryParams = {
-        pageNumber:
-          direction === Direction.NEXT ? this.newsFlashLastNextPage + 1 : Math.max(this.newsFlashLastPrevPage - 1, 1),
-      };
-
+      const queryParams: IFetchNewsQueryParams = {};
+      if (!isFiltering) {
+        queryParams.pageNumber =
+          direction === Direction.NEXT ? this.newsFlashLastNextPage + 1 : Math.max(this.newsFlashLastPrevPage - 1, 1);
+      } else {
+        queryParams.pageNumber = 1;
+        runInAction(() => {
+          this.newsFlashPageNumber = 1;
+          this.newsFlashLastNextPage = 1;
+          this.newsFlashLastPrevPage = 1;
+        });
+      }
       if (this.newsFlashActiveFilter === 'critical') {
         queryParams['critical'] = true;
       } else {