3999 - Assessment/Cycle Switch: list order

src/client/components/PageLayout/Header/CycleSwitcher/hooks/usePopoverItems.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Assessments, Cycles } from 'meta/assessment'
+import { Assessments, Cycle, Cycles } from 'meta/assessment'
 import { Users } from 'meta/user'
 
 import { useAssessments } from 'client/store/assessment'
@@ -12,6 +12,27 @@ import { PopoverItem } from 'client/components/PopoverControl'
 
 import { useNavigateTo } from './useNavigateTo'
 
+const _cyclesSorter = (cycleA: Cycle, cycleB: Cycle): number => {
+  const dateEditingA = cycleA.props.dateEditing
+  const dateEditingB = cycleB.props.dateEditing
+  if (dateEditingA && dateEditingB) {
+    return new Date(dateEditingB).getTime() - new Date(dateEditingA).getTime()
+  }
+
+  const dateCreatedA = cycleA.props.dateCreated
+  const dateCreatedB = cycleB.props.dateCreated
+  if (dateCreatedA && dateCreatedB) {
+    return new Date(dateCreatedB).getTime() - new Date(dateCreatedA).getTime()
+  }
+  if (dateCreatedA) {
+    return -1
+  }
+  if (dateCreatedB) {
+    return 1
+  }
+  return 0
+}
+
 export const usePopoverItems = (): Array<PopoverItem> => {
   const { t } = useTranslation()
   const routeParams = useCycleRouteParams()
@@ -26,7 +47,8 @@ export const usePopoverItems = (): Array<PopoverItem> => {
 
     if (!isDataExportView && user) {
       assessments.forEach((assessment) => {
-        assessment.cycles.forEach((cycle) => {
+        const sortedCycles = assessment.cycles.slice().sort(_cyclesSorter)
+        sortedCycles.forEach((cycle) => {
           const hasRoleInAssessment = Users.hasRoleInAssessment({ user, assessment })
           const hasRoleInCycle = Users.hasRoleInCycle({ user, cycle })
           const canViewCycle = (hasRoleInAssessment && Cycles.isPublished(cycle)) || hasRoleInCycle