refactor: Replace FlatList infinite scroll

corona-school · Oct 28, 2024 · 2b8ced2 · 2b8ced2
1 parent 56fb6d5
commit 2b8ced2
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -89,6 +89,7 @@
         "react-dev-utils": "^12.0.1",
         "react-dom": "^18.3.1",
         "react-i18next": "^11.18.6",
+        "react-infinite-scroll-component": "^6.1.0",
         "react-native": "^0.65.3",
         "react-native-safe-area-context": "^4.3.1",
         "react-native-svg": "^12.3.0",

diff --git a/src/widgets/AppointmentList.tsx b/src/widgets/AppointmentList.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo, useRef, useEffect, useCallback } from 'react';
-import { FlatList } from 'native-base';
 import { DateTime } from 'luxon';
 import { Appointment } from '../types/lernfair/Appointment';
 import AppointmentDay from './AppointmentDay';
@@ -12,7 +11,9 @@ import useInterval from '../hooks/useInterval';
 import { Button } from '@/components/Button';
 import { Typography } from '@/components/Typography';
 import { Separator } from '@/components/Separator';
+import InfiniteScroll from 'react-infinite-scroll-component';
 import { cn } from '@/lib/Tailwind';
+import CenterLoadingSpinner from '@/components/CenterLoadingSpinner';
 
 interface HeaderProps {
     hasMoreOldAppointments: boolean;
@@ -149,7 +150,7 @@ const AppointmentList = ({
     isLoadingAppointments,
     loadMoreAppointments,
     lastAppointmentId,
-    height = '100%',
+    height = 100,
 }: AppointmentListProps) => {
     const scrollViewRef = useRef<HTMLElement>(null);
 
@@ -193,23 +194,29 @@ const AppointmentList = ({
             style={{ height: height }}
             className={cn('flex flex-col overflow-scroll w-full lg:max-w-full', isFullHeight ? 'flex-1 basis-0 max-h-full' : '')}
         >
-            <FlatList
-                keyExtractor={(item) => item.id.toString()}
-                height={height}
-                maxW="100%"
-                data={appointments}
-                renderItem={(e) => (
-                    <AppointmentItem index={e.index} appointment={e.item} previousAppointment={appointments[e.index - 1]} isReadOnly={isReadOnlyList} />
-                )}
-                onEndReached={canLoadMoreAppointments ? handleLoadMore : undefined}
-                onEndReachedThreshold={1}
-                ListFooterComponent={!isReadOnlyList ? <Footer hasMoreAppointments={!noNewAppointments} isLoading={!!isLoadingAppointments} /> : undefined}
-                ListHeaderComponent={
-                    !isReadOnlyList ? (
-                        <Header hasMoreOldAppointments={!noOldAppointments} isLoading={!!isLoadingAppointments} onLoadMoreOldAppointments={handleLoadPast} />
-                    ) : undefined
+            <InfiniteScroll
+                scrollableTarget="scrollable"
+                dataLength={appointments.length}
+                next={handleLoadMore}
+                hasMore={canLoadMoreAppointments}
+                loader={
+                    <div className="my-4">
+                        <CenterLoadingSpinner />
+                    </div>
                 }
-            />
+                endMessage={<Footer hasMoreAppointments={!noNewAppointments} isLoading={!!isLoadingAppointments} />}
+            >
+                <Header hasMoreOldAppointments={!noOldAppointments} isLoading={!!isLoadingAppointments} onLoadMoreOldAppointments={handleLoadPast} />
+                {appointments.map((appointment, index) => (
+                    <AppointmentItem
+                        key={appointment.id}
+                        appointment={appointment}
+                        previousAppointment={appointments[index - 1]}
+                        index={index}
+                        isReadOnly={isReadOnlyList}
+                    />
+                ))}
+            </InfiniteScroll>
         </div>
     );
 };