1051 bug coordinate the infographics main screen with the newsflash list

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 ? (

src/components/organisms/News.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef } from 'react';
+import { FC, useEffect, useRef } from 'react';
 import { Typography } from 'components/atoms';
 import { Box, makeStyles } from '@material-ui/core';
 import { useStore } from 'store/storeConfig';
@@ -41,23 +41,45 @@ const News: FC<InfiniteScrollProps> = ({ onScroll }) => {
     newsLoading: newsFlashStore.newsFlashLoading,
   });
 
+  const isNotFirstPage = newsFlashStore.newsFlashLastPrevPage > 1;
+  const selectedItemIsFirst = newsId && newsFlashStore.newsFlashCollection.data[0]?.id === +newsId;
+  const shouldShowSpacer = isNotFirstPage && selectedItemIsFirst;
+
+  useEffect(() => {
+    if (shouldShowSpacer && containerRef.current) {
+      // Use setTimeout to ensure DOM has updated
+      setTimeout(() => {
+        if (containerRef.current) {
+          containerRef.current.scrollTop = 100;
+        }
+      }, 0);
+    }
+  }, [shouldShowSpacer, newsFlashStore.newsFlashCollection.data]);
+
   return (
     <div ref={containerRef} className={classes.newsFeed}>
       {gpsId && <LocationSearchIndicator searchType={'gps'} />}
       {street && city && <LocationSearchIndicator searchType={'cityAndStreet'} />}
+      {shouldShowSpacer && <div ref={firstItemRef} style={{ height: '100px', flexShrink: 0 }} />}
       {newsFlashStore.newsFlashCollection.data.length > 0 ? (
         newsFlashStore.newsFlashCollection.data.map((news, index) => {
           const isFirst = index === 0;
           const isLast = index === newsFlashStore.newsFlashCollection.data.length - 1;
           const selectedItem = news.id === +newsId ? selectedItemRef : undefined;
 
           return (
-            <div
-              key={news.id}
-              ref={combineRefs(isFirst ? firstItemRef : undefined, isLast ? lastItemRef : undefined, selectedItem)}
-            >
-              <NewsFlashComp news={news} />
-            </div>
+            <>
+              <div
+                key={news.id}
+                ref={combineRefs(
+                  !shouldShowSpacer && isFirst ? firstItemRef : undefined,
+                  isLast ? lastItemRef : undefined,
+                  selectedItem,
+                )}
+              >
+                <NewsFlashComp news={news} />
+              </div>
+            </>
           );
         })
       ) : (

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 {