Added comments - maybe to much

src/pages/dashboard/components/RouteList.tsx

@@ -13,30 +13,38 @@ interface RouteListProps {
 }
 
 const RouteList: Component<RouteListProps> = (props) => {
+  // Initialize state signals
   const [sortOption, setSortOption] = createSignal<SortOption>({ label: 'Date', key: 'date', order: 'asc' })
   const [page, setPage] = createSignal(1)
   const [allRoutes, setAllRoutes] = createSignal<RouteSegments[]>([])
   const [sortedRoutes, setSortedRoutes] = createSignal<RouteSegments[]>([])
   const [hasMore, setHasMore] = createSignal(true)
 
+  // Create a resource for fetching routes
+  // ! This might refetch unnecessarily if any of the dependencies change
   const [routesData, { refetch }] = createResource(
     () => ({ dongleId: props.dongleId, page: page(), pageSize: PAGE_SIZE }),
     fetchRoutes,
   )
 
+  // Effect to update allRoutes when new data is fetched
   createEffect(() => {
     const newRoutes = routesData()
     if (newRoutes) {
       setAllRoutes(prev => {
+        // Filter out duplicate routes
         const uniqueNewRoutes = newRoutes.filter(newRoute => 
           !prev.some(existingRoute => existingRoute.start_time === newRoute.start_time),
         )
+        // Update hasMore based on whether a full page was returned
         setHasMore(newRoutes.length === PAGE_SIZE)
+        // Append new unique routes to existing routes
         return [...prev, ...uniqueNewRoutes]
       })
     }
   })
 
+  // Effect to sort routes when allRoutes or sortOption changes
   createEffect(() => {
     const routes = allRoutes()
     const currentSortOption = sortOption()
@@ -45,20 +53,24 @@ const RouteList: Component<RouteListProps> = (props) => {
     }
   })
 
+  // Function to sort routes and update sortedRoutes signal
   const sortAndSetRoutes = async (routes: RouteSegments[], currentSortOption: SortOption) => {
     const sorted = await sortRoutes(routes, currentSortOption)
     setSortedRoutes(sorted)
   }
 
+  // Handler for sort option changes
   const handleSortChange = (key: SortKey, order: 'asc' | 'desc') => {
     const label = key.charAt(0).toUpperCase() + key.slice(1)
     setSortOption({ label, key, order })
+    // Reset pagination and refetch routes
     setPage(1)
     setAllRoutes([])
     setHasMore(true)
     void refetch()
   }
 
+  // Function to load more routes
   const loadMore = () => {
     console.log('loadMore called', { loading: routesData.loading, hasMore: hasMore() })
     if (!routesData.loading && hasMore()) {
@@ -67,6 +79,7 @@ const RouteList: Component<RouteListProps> = (props) => {
     }
   }
 
+  // Set up Intersection Observer for infinite scrolling
   let bottomRef: HTMLDivElement | undefined
   const observer = new IntersectionObserver(
     (entries) => {
@@ -78,6 +91,7 @@ const RouteList: Component<RouteListProps> = (props) => {
     { rootMargin: '200px' },
   )
 
+  // Effect to observe/unobserve the bottom element
   createEffect(() => {
     if (bottomRef) {
       observer.observe(bottomRef)
@@ -87,13 +101,17 @@ const RouteList: Component<RouteListProps> = (props) => {
     }
   })
 
+  // Effect to refetch routes when page changes
+  // ! This might cause unnecessary refetches if other dependencies of routesData change
   createEffect(() => {
     page()
     void refetch()
   })
 
+  // Cleanup function to disconnect the observer
   onCleanup(() => observer.disconnect())
 
+  // Render the component
   return (
     <div class="flex flex-col gap-4">
       <RouteSorter onSortChange={handleSortChange} currentSort={sortOption()} />
@@ -105,6 +123,7 @@ const RouteList: Component<RouteListProps> = (props) => {
         {!routesData.loading && !hasMore() && sortedRoutes().length === 0 && <div>No routes found</div>}
         {!routesData.loading && !hasMore() && sortedRoutes().length > 0 && <div>All routes loaded</div>}
       </div>
+      {/* Invisible element for intersection observer */}
       <div ref={bottomRef} style={{ height: '1px' }} />
     </div>
   )