TEMP fix for desc to be default - also removed null

src/components/RouteSorter.tsx

@@ -12,11 +12,11 @@ interface RouteSorterProps {
 
 export const RouteSorter: Component<RouteSorterProps> = (props) => {
   const [sortOptions] = createStore<SortOption[]>([
-    { label: 'Date', key: 'date', order: null },
-    { label: 'Duration', key: 'duration', order: null },
-    { label: 'Miles', key: 'miles', order: null },
-    { label: 'Engaged', key: 'engaged', order: null },
-    { label: 'User Flags', key: 'userFlags', order: null },
+    { label: 'Date', key: 'date', order: 'asc' },
+    { label: 'Duration', key: 'duration', order: 'asc' },
+    { label: 'Miles', key: 'miles', order: 'asc' },
+    { label: 'Engaged', key: 'engaged', order: 'asc' },
+    { label: 'User Flags', key: 'userFlags', order: 'asc' },
   ])
 
   // Allows mouse wheel to scroll through filters
@@ -31,8 +31,7 @@ export const RouteSorter: Component<RouteSorterProps> = (props) => {
       // If the same button is clicked, toggle the order
       newOrder = props.currentSort.order === 'desc' ? 'asc' : 'desc'
     } else {
-      // If a new button is clicked, always start with descending order
-      newOrder = 'desc'
+      newOrder = 'asc' // ! Changed to 'asc' so it descends by default... TEMP Solution find out why not working
     }
     props.onSortChange(clickedOption.key, newOrder)
   }

src/pages/dashboard/components/RouteList.tsx

@@ -13,7 +13,7 @@ interface RouteListProps {
 }
 
 const RouteList: Component<RouteListProps> = (props) => {
-  const [sortOption, setSortOption] = createSignal<SortOption>({ label: 'Date', key: 'date', order: 'desc' })
+  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[]>([])
@@ -60,7 +60,9 @@ const RouteList: Component<RouteListProps> = (props) => {
   }
 
   const loadMore = () => {
+    console.log('loadMore called', { loading: routesData.loading, hasMore: hasMore() })
     if (!routesData.loading && hasMore()) {
+      console.log('Incrementing page')
       setPage(p => p + 1)
     }
   }
@@ -69,6 +71,7 @@ const RouteList: Component<RouteListProps> = (props) => {
   const observer = new IntersectionObserver(
     (entries) => {
       if (entries[0].isIntersecting) {
+        console.log('Bottom of list visible')
         loadMore()
       }
     },
@@ -84,6 +87,11 @@ const RouteList: Component<RouteListProps> = (props) => {
     }
   })
 
+  createEffect(() => {
+    page()
+    void refetch()
+  })
+
   onCleanup(() => observer.disconnect())
 
   return (
@@ -92,11 +100,12 @@ const RouteList: Component<RouteListProps> = (props) => {
       <For each={sortedRoutes()}>
         {(route: RouteSegments) => <RouteCard route={route} />}
       </For>
-      <div ref={bottomRef}>
+      <div>
         {routesData.loading && <div>Loading...</div>}
         {!routesData.loading && !hasMore() && sortedRoutes().length === 0 && <div>No routes found</div>}
         {!routesData.loading && !hasMore() && sortedRoutes().length > 0 && <div>All routes loaded</div>}
       </div>
+      <div ref={bottomRef} style={{ height: '1px' }} />
     </div>
   )
 }

src/utils/sorting.ts

@@ -2,8 +2,7 @@ import { RouteSegments } from '~/types'
 import { getTimelineStatistics, TimelineStatistics } from '~/api/derived'
 
 export type SortKey = 'date' | 'miles' | 'duration' | 'engaged' | 'userFlags'
-export type SortOrder = 'asc' | 'desc' | null // ? Do I need null?
-
+export type SortOrder = 'asc' | 'desc'
 export interface SortOption {
   label: string
   key: SortKey