[FF][UXIT-3730] Show All Events when there are no upcoming events (#2034)

* Updated EventsContent to utilize getDefaultViewConfig and getDefaultViewOption for improved sorting functionality.

* Add mobile sort

* Memoize default view config and extract constants

---------

Co-authored-by: Charly Martin <[email protected]>

Author: barbaraperic

apps/ff-site/src/app/events/components/EventSort.tsx

@@ -3,6 +3,7 @@
 import { CalendarBlankIcon } from '@phosphor-icons/react'
 
 import { useListboxQueryState } from '@filecoin-foundation/hooks/useListboxQueryState'
+import type { OptionType } from '@filecoin-foundation/ui/Listbox/ListboxOption'
 import { SORT_KEY } from '@filecoin-foundation/utils/constants/urlParamsConstants'
 
 import { getSortOptions } from '@/utils/getSortOptions'
@@ -13,10 +14,15 @@ import { eventsViewConfigs } from '../constants/viewConfigs'
 
 const options = getSortOptions(eventsViewConfigs)
 
-export function EventSort() {
+type EventSortProps = {
+  defaultOption?: OptionType
+}
+
+export function EventSort({ defaultOption }: EventSortProps) {
   const [selectedSort, setSelectedSort] = useListboxQueryState({
     key: SORT_KEY,
     options: options,
+    defaultOption: defaultOption || options[0],
   })
 
   return (

apps/ff-site/src/app/events/components/EventsContent.tsx

@@ -1,3 +1,5 @@
+import { useMemo } from 'react'
+
 import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr'
 
 import { useEntryView } from '@filecoin-foundation/hooks/useEntryView'
@@ -33,7 +35,10 @@ import { LocationFilter } from '@/components/LocationFilter'
 
 import { EventSort } from '../components/EventSort'
 import { DEFAULT_CTA_TEXT, FILTERS_CONFIG } from '../constants/constants'
-import { eventsViewConfigs } from '../constants/viewConfigs'
+import {
+  eventsViewConfigs,
+  getDefaultViewConfig,
+} from '../constants/viewConfigs'
 import type { Event } from '../types/eventType'
 import { entryMatchesLocationQuery } from '../utils/filterUtils'
 import { getLocationListboxOptions } from '../utils/getLocationFilterOptions'
@@ -50,6 +55,16 @@ export default function EventsContent({
   searchParams,
   events,
 }: EventsContentProps) {
+  const defaultViewConfig = useMemo(
+    () => getDefaultViewConfig(events),
+    [events],
+  )
+
+  const defaultSortOption = {
+    id: defaultViewConfig.id,
+    name: defaultViewConfig.name,
+  }
+
   const { searchResults } = useSearch({
     searchQuery: normalizeQueryParam(searchParams, SEARCH_KEY),
     entries: events,
@@ -60,6 +75,7 @@ export default function EventsContent({
     query: normalizeQueryParam(searchParams, SORT_KEY),
     entries: searchResults,
     configs: eventsViewConfigs,
+    defaultConfig: defaultViewConfig,
   })
 
   const { filteredEntries: filteredEventsByLocation } = useFilter({
@@ -94,14 +110,14 @@ export default function EventsContent({
       <FilterContainer.MainWrapper>
         <FilterContainer.DesktopFilters
           searchComponent={<Search />}
-          sortComponent={<EventSort />}
+          sortComponent={<EventSort defaultOption={defaultSortOption} />}
           filterComponents={[
             <LocationFilter key="location" options={locationOptions} />,
           ]}
         />
         <FilterContainer.MobileFiltersAndResults
           searchComponent={<Search />}
-          sortComponent={<EventSort />}
+          sortComponent={<EventSort defaultOption={defaultSortOption} />}
           filterComponents={[
             <CategoryFilter
               key="category"

apps/ff-site/src/app/events/constants/viewConfigs.ts

@@ -3,25 +3,36 @@ import type { EntryViewConfig } from '@filecoin-foundation/hooks/useEntryView/ty
 import { type Event } from '../types/eventType'
 
 import {
-  sortEventsDesc,
-  getUpcomingEvents,
   getPastEvents,
+  getUpcomingEvents,
+  sortEventsDesc,
 } from '@/events/utils/sortEvents'
 
+const upcomingEventsConfig = {
+  id: 'upcoming-events',
+  name: 'Upcoming Events',
+  filterOrSortFn: getUpcomingEvents,
+}
+
+const allEventsConfig = {
+  id: 'all-events',
+  name: 'All Events',
+  filterOrSortFn: sortEventsDesc,
+}
+
+const pastEventsConfig = {
+  id: 'past-events',
+  name: 'Past Events',
+  filterOrSortFn: getPastEvents,
+}
+
 export const eventsViewConfigs = [
-  {
-    id: 'upcoming-events',
-    name: 'Upcoming Events',
-    filterOrSortFn: getUpcomingEvents,
-  },
-  {
-    id: 'all-events',
-    name: 'All Events',
-    filterOrSortFn: sortEventsDesc,
-  },
-  {
-    id: 'past-events',
-    name: 'Past Events',
-    filterOrSortFn: getPastEvents,
-  },
+  upcomingEventsConfig,
+  allEventsConfig,
+  pastEventsConfig,
 ] as const satisfies ReadonlyArray<EntryViewConfig<Event>>
+
+export function getDefaultViewConfig(events: Array<Event>) {
+  const upcomingEvents = getUpcomingEvents(events)
+  return upcomingEvents.length === 0 ? allEventsConfig : upcomingEventsConfig
+}