add scroll observer

package.json

@@ -30,6 +30,7 @@
     "react-async-loader": "^0.1.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^14.1.1",
+    "react-intersection-observer": "^9.13.1",
     "react-leaflet": "3.2.5",
     "react-leaflet-google-layer": "^2.2.0",
     "react-router-dom": "^6.23.0",
@@ -133,7 +134,7 @@
       "prettier --write"
     ]
   },
-"overrides": {
-  "react-refresh": "0.11.0"
-}
+  "overrides": {
+    "react-refresh": "0.11.0"
+  }
 }

src/App.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useEffect } from 'react';
-import { BrowserRouter as Router, Route, Routes, useParams } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import HomePage from './pages/HomePage';
 import { Footer } from './components/organisms/Footer';
 import { Box, createStyles, makeStyles, Theme, ThemeProvider } from '@material-ui/core';
@@ -31,8 +31,6 @@ const App: FC = () => {
   const classes = useStyles();
   const store = useStore();
   const theme = useTheme();
-  const { newsId } = useParams();
-  console.log('🚀 ~ newsId:', newsId);
   const appDir = i18n.dir();
 
   useEffect(() => {

src/components/atoms/index.ts

@@ -7,7 +7,6 @@ export { default as Textbox } from './Textbox';
 export { default as ErrorBoundary } from './ErrorBoundary';
 export { default as MetaTag } from './MetaTag';
 export { default as Loader } from './Loader';
-export { default as InfiniteScroll } from './InfiniteScroll';
 export { default as Dialog } from './Dialog';
 export { default as AppBar } from './AppBar';
 export { default as Logo } from './Logo';

src/components/molecules/NewsFlashComp.tsx

@@ -57,7 +57,7 @@ const NewsFlashComp: FC<IProps> = ({ news }) => {
   const verificationIcon = getVerificationIcon(news.newsflash_location_qualification);
   const criticalIcon = news.critical && <CriticalIcon className={classes.icon} />;
   const {newsId} = useParams()
-  const newsID = newsId ? parseInt(newsId) : '' 
+  const newsID = newsId ? parseInt(newsId) : '';
   const className = news.id === newsID ? classes.activeNewsFlash : '';
   const date = news.date == null ? '' : dateFormat(new Date(news.date.replace(/-/g, '/')), locale);
   const handleLocationEditorOpen = () => setOpen(true);

src/components/organisms/News.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef } from 'react';
+import { FC, useRef } from 'react';
 import { Typography } from 'components/atoms';
 import { Box, makeStyles } from '@material-ui/core';
 import { useStore } from 'store/storeConfig';
@@ -8,6 +8,9 @@ import { observer } from 'mobx-react-lite';
 import LocationSearchIndicator from 'components/molecules/LocationSearchIndicator';
 import { IRouteProps } from 'models/Route';
 import NewsFlashComp from 'components/molecules/NewsFlashComp';
+import { useScrollObserver } from 'hooks/useScrollObserver.hooks';
+import { Direction } from 'models/ScrollObserver.model';
+import { combineRefs } from 'utils/element.util';
 
 const useStyles = makeStyles({
   container: {},
@@ -19,41 +22,40 @@ const useStyles = makeStyles({
   },
 });
 
-<img src="" alt="" />;
+interface InfiniteScrollProps {
+  onScroll: (direction: Direction) => void;
+}
 
-const News: FC = () => {
+const News: FC<InfiniteScrollProps> = ({ onScroll }) => {
   const store: RootStore = useStore();
   const classes = useStyles();
   const { gpsId, street, city, newsId = '' } = useParams<IRouteProps>();
   const { newsFlashStore } = store;
-  const selectedItemRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (newsId && newsFlashStore.newsFlashCollection.data.length > 0 && !newsFlashStore.newsFlashLoading) {
-      // Find selected item index
-      const itemIndex = newsFlashStore.newsFlashCollection.data.findIndex((item) => item.id.toString() === newsId);
-
-      if (itemIndex !== -1) {
-        setTimeout(() => {
-          selectedItemRef.current?.scrollIntoView({
-            behavior: 'smooth',
-            block: 'center',
-          });
-        }, 100);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { firstItemRef, lastItemRef, selectedItemRef } = useScrollObserver({
+    newsId,
+    onScroll,
+    containerRef,
+    newsData: newsFlashStore.newsFlashCollection.data,
+    newsLoading: newsFlashStore.newsFlashLoading,
+  });
 
   return (
     <div ref={containerRef} className={classes.newsFeed}>
       {gpsId && <LocationSearchIndicator searchType={'gps'} />}
       {street && city && <LocationSearchIndicator searchType={'cityAndStreet'} />}
       {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={selectedItemRef}>
+            <div
+              key={news.id}
+              ref={combineRefs(isFirst ? firstItemRef : undefined, isLast ? lastItemRef : undefined, selectedItem)}
+            >
               <NewsFlashComp news={news} />
             </div>
           );

src/components/organisms/SideBar.tsx

@@ -8,10 +8,9 @@ import { Typography, ErrorBoundary } from 'components/atoms';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'store/storeConfig';
 import RootStore from 'store/root.store';
-import { InfiniteScroll } from 'components/atoms';
 import SideBarMap from 'components/molecules/SideBarMap';
 import { useTranslation } from 'react-i18next';
-import { Direction } from 'hooks/useScrollObserver.hooks';
+import { Direction } from 'models/ScrollObserver.model';
 
 interface IProps {}
 
@@ -36,19 +35,22 @@ const SideBar: FC<IProps> = () => {
   const mapTitle = `${t('sideBar')}`;
   const location = newsFlashStore.activeNewsFlashLocation;
   const loading = newsFlashStore.newsFlashLoading;
-  const initialPageNumber = newsFlashStore.newsFlashInitialPageNumber;
   const currentPageNumber = newsFlashStore.newsFlashPageNumber;
+  const lastPrevPage = newsFlashStore.newsFlashLastPrevPage;
   const totalPages = newsFlashStore.newsFlashCollection.pagination.totalPages;
 
   const fetchMoreNewsItems = useCallback(
     (direction: Direction) => {
-      if (direction === Direction.PREV && initialPageNumber !== 1 && currentPageNumber > 1) {
+      if (loading) return;
+      if (direction === Direction.PREV && currentPageNumber > 1 && lastPrevPage > 1) {
+        newsFlashStore.filterNewsFlashCollection(direction);
+        return;
+      }
+      if (direction === Direction.NEXT && totalPages > currentPageNumber) {
         newsFlashStore.filterNewsFlashCollection(direction);
-      } else if (totalPages > currentPageNumber) {
-        newsFlashStore.filterNewsFlashCollection(Direction.NEXT);
       }
     },
-    [currentPageNumber, initialPageNumber, newsFlashStore, totalPages],
+    [currentPageNumber, lastPrevPage, loading, newsFlashStore, totalPages],
   );
 
   return (
@@ -60,9 +62,7 @@ const SideBar: FC<IProps> = () => {
             <NewsFlashFilterPanel />
           </ErrorBoundary>
         </Box>
-        <InfiniteScroll onScroll={fetchMoreNewsItems} loading={newsFlashStore.newsFlashLoading}>
-          <News />
-        </InfiniteScroll>
+        <News onScroll={fetchMoreNewsItems} />
       </Box>
       <Box borderTop={`1px solid ${silverSmokeColor}`} flexShrink={0} flexGrow={0} p={1}>
         <Typography.Body4 children={mapTitle} />