From 2a84d5989617f2fd9b25e76f484c2352ccab602c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arda=20Sentu=CC=88rk?= <ase@tpwd.de>
Date: Wed, 28 Jun 2023 13:57:51 +0200
Subject: [PATCH] fix: load new data when you scroll to the bottom of the list

- added `fetchMoreData` function to load new data when scrolling to the bottom of the list
- deleted `horizontal` and `showBackToTop` props because they are non-functional

SVA-665
---
 src/components/Calendar.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
index 6738530b7..20785c73b 100644
--- a/src/components/Calendar.tsx
+++ b/src/components/Calendar.tsx
@@ -13,7 +13,7 @@ import { SettingsContext } from '../SettingsProvider';
 import { colors, consts, normalize, texts } from '../config';
 import { graphqlFetchPolicy, parseListItemsFromQuery } from '../helpers';
 import { setupLocales } from '../helpers/calendarHelper';
-import { QUERY_TYPES, getQuery } from '../queries';
+import { QUERY_TYPES, getFetchMoreQuery, getQuery } from '../queries';
 import { ScreenName, Calendar as TCalendar } from '../types';
 
 import { EmptyMessage } from './EmptyMessage';
@@ -92,12 +92,29 @@ export const Calendar = ({ query, queryVariables, calendarData, isLoading, navig
     getMarkedDates(calendarData, dotCount, today)
   );
 
-  const { data, loading, refetch } = useQuery(getQuery(QUERY_TYPES.EVENT_RECORDS), {
+  const { data, loading, refetch, fetchMore } = useQuery(getQuery(QUERY_TYPES.EVENT_RECORDS), {
     fetchPolicy,
     variables: queryVariableWithDateRange,
     skip: !subList
   });
 
+  const fetchMoreData = () =>
+    fetchMore({
+      query: getFetchMoreQuery(query),
+      variables: {
+        ...queryVariableWithDateRange,
+        offset: data?.[query]?.length
+      },
+      updateQuery: (prevResult, { fetchMoreResult }) => {
+        if (!fetchMoreResult || !fetchMoreResult[query].length) return prevResult;
+
+        return {
+          ...prevResult,
+          [query]: [...prevResult[query], ...fetchMoreResult[query]]
+        };
+      }
+    });
+
   const onDayPress = useCallback(
     async (day: DateData) => {
       if (query === QUERY_TYPES.EVENT_RECORDS) {
@@ -161,7 +178,7 @@ export const Calendar = ({ query, queryVariables, calendarData, isLoading, navig
       {subList && (
         <ListComponent
           data={loading ? [] : buildListItems(data)}
-          horizontal={false}
+          fetchMoreData={fetchMoreData}
           ListEmptyComponent={
             loading ? (
               <LoadingContainer>
@@ -176,7 +193,6 @@ export const Calendar = ({ query, queryVariables, calendarData, isLoading, navig
           query={query}
           queryVariables={queryVariables}
           sectionByDate
-          showBackToTop
         />
       )}
     </>