Merge pull request #80 from AplinkosMinisterija/77-patikrinti-student…

…es-vedamus-duomenis fishing journal list fix
AplinkosMinisterija · Jun 13, 2024 · 1560aef · 1560aef
2 parents e6242e6 + ee0a2ae
commit 1560aef
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 44 deletions.
diff --git a/src/components/layouts/DefaultLayout.tsx b/src/components/layouts/DefaultLayout.tsx
@@ -4,15 +4,13 @@ import Div100vh from 'react-div-100vh';
 import SideBar from './SideBar';
 import ScrollableContentLayout from './ScrollableContentLayout';
 
-const DefaultLayout = ({ children, onScroll = () => {} }: any) => {
+const DefaultLayout = ({ children }: any) => {
   const isMobile = useWindowSize(device.mobileL);
   const currentRoute = useGetCurrentRoute();
   return (
     <Container>
       {!isMobile && <SideBar />}
-      <ScrollableContentLayout currentRoute={currentRoute} onScroll={onScroll}>
-        {children}
-      </ScrollableContentLayout>
+      <ScrollableContentLayout currentRoute={currentRoute}>{children}</ScrollableContentLayout>
     </Container>
   );
 };

diff --git a/src/components/layouts/ScrollableContentLayout.tsx b/src/components/layouts/ScrollableContentLayout.tsx
@@ -4,9 +4,9 @@ import styled from 'styled-components';
 import { device } from '../../utils';
 import { Subtitle, Title } from '../other/CommonStyles';
 
-const ScrollableContentLayout = ({ currentRoute, children, onScroll }: any) => {
+const ScrollableContentLayout = ({ currentRoute, children }: any) => {
   return (
-    <ScrollableContainer onScroll={onScroll}>
+    <ScrollableContainer>
       <InnerContainer>
         {currentRoute?.back ? <BackHeader /> : <LogoHeader />}
         <Content>
@@ -19,6 +19,13 @@ const ScrollableContentLayout = ({ currentRoute, children, onScroll }: any) => {
   );
 };
 
+const ScrollableContainer = styled.div`
+  width: 100%;
+  min-height: 100%;
+  overflow-y: scroll;
+  background-color: white;
+`;
+
 const Content = styled.div`
   display: flex;
   flex-direction: column;
@@ -36,13 +43,6 @@ const Content = styled.div`
   }
 `;
 
-const ScrollableContainer = styled.div`
-  width: 100%;
-  min-height: 100%;
-  overflow-y: scroll;
-  background-color: white;
-`;
-
 const InnerContainer = styled.div`
   display: flex;
   width: 100%;

diff --git a/src/pages/FishingJournal.tsx b/src/pages/FishingJournal.tsx
@@ -1,50 +1,29 @@
 import DefaultLayout from '../components/layouts/DefaultLayout';
-import { slugs } from '../utils';
-import { useInfiniteQuery } from 'react-query';
+import { slugs, useInfinityLoad } from '../utils';
 import api from '../utils/api';
 import LoaderComponent from '../components/other/LoaderComponent';
 import FishingCard from '../components/cards/FishingCard';
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
+import { useRef } from 'react';
 
 const FishingJournal = () => {
   const navigate = useNavigate();
+  const observerRef = useRef<any>(null);
 
-  const fetchFishings = async (page: number) => {
-    const fishings = await api.getFishingJournal({ page });
-    return {
-      data: fishings.rows,
-      page: fishings.page < fishings.totalPages ? fishings.page + 1 : undefined,
-    };
-  };
-
-  const { data, hasNextPage, fetchNextPage, isLoading } = useInfiniteQuery(
+  const { data, isFetching } = useInfinityLoad(
     'fishingJournal',
-    ({ pageParam }) => fetchFishings(pageParam),
-    {
-      getNextPageParam: (lastPage) => lastPage.page,
-      cacheTime: 60000,
-      retry: false,
-    },
+    api.getFishingJournal,
+    observerRef,
   );
 
-  const handleScroll = async (e: any) => {
-    const element = e.currentTarget;
-    const isTheBottom =
-      Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) <= 1;
-
-    if (isTheBottom && hasNextPage && !isLoading) {
-      fetchNextPage();
-    }
-  };
-
-  const fishings = data?.pages
+  const fishings: any = data?.pages
     .flat()
-    .map((item) => item?.data)
+    .map((item) => item?.rows)
     .flat();
 
   return (
-    <DefaultLayout onScroll={handleScroll}>
+    <DefaultLayout>
       <Container>
         {fishings?.map((fishing: any) => {
           return (
@@ -61,7 +40,8 @@ const FishingJournal = () => {
             />
           );
         })}
-        {isLoading && <LoaderComponent />}
+        {observerRef && <Invisible ref={observerRef} />}
+        {isFetching && <LoaderComponent />}
       </Container>
     </DefaultLayout>
   );
@@ -75,3 +55,8 @@ const Container = styled.div`
   overflow-y: auto;
   overflow-x: hidden;
 `;
+
+const Invisible = styled.div`
+  width: 10px;
+  height: 16px;
+`;