refactor: extract fn for sorting

apps/cowswap-frontend/src/common/hooks/useAnnouncements.ts

@@ -2,16 +2,32 @@ import { useAtomValue } from 'jotai'
 import { useMemo } from 'react'
 
 import { isProdLike } from '@cowprotocol/common-utils'
-import { Announcements, announcementsAtom } from '@cowprotocol/core'
-import { SupportedChainId } from '@cowprotocol/cow-sdk'
+import { Announcement, Announcements, announcementsAtom } from '@cowprotocol/core'
+import { CowEnv, SupportedChainId } from '@cowprotocol/cow-sdk'
+
+function getAnnouncementSpecificity(chainId: SupportedChainId, env: CowEnv, announcement: Announcement): number {
+  let specificity = 0
+
+  const matchesChain = announcement.chainIds.some((announcementChain) => announcementChain === chainId)
+  const matchesEnv = announcement.envs.some((announcementEnv) => announcementEnv === env)
+  const matchesEveryChain = announcement.chainIds.length === 0
+  const matchesEveryEnv = announcement.envs.length === 0
+
+  if (matchesChain) specificity += 2
+  if (matchesEnv) specificity += 2
+  if (matchesEveryChain) specificity += 1
+  if (matchesEveryEnv) specificity += 1
+
+  return specificity
+}
 
 function useAnnouncements(chainId: SupportedChainId): Announcements {
   const allAnnouncements = useAtomValue(announcementsAtom)
 
   return useMemo(() => {
-    const env = isProdLike ? 'prod' : 'staging' // Should match what's set on CMS!
+    const env = isProdLike ? 'prod' : 'staging'
 
-    return allAnnouncements
+    const filtered = allAnnouncements
       .filter((announcement) => {
         const showForEveryChain = announcement.chainIds.length === 0
         const showForEveryEnv = announcement.envs.length === 0
@@ -22,32 +38,13 @@ function useAnnouncements(chainId: SupportedChainId): Announcements {
         return (showForEveryChain || matchesChainId) && (showForEveryEnv || matchesEnv)
       })
       .sort((a, b) => {
-        // A bit of duplication, yes, but this is to sort the filtered results and have some priority:
-        // 1. first the most specific, with chain and env set
-        // 2. second the ones with chain and any env
-        // 3. third the ones with env and any chain
-        // 4. lastly, the ones with any chain and any env
-
-        const showForEveryChainA = a.chainIds.length === 0
-        const showForEveryEnvA = a.envs.length === 0
-        const matchesChainIdA = a.chainIds.some((announcementChain) => announcementChain === chainId)
-        const matchesEnvA = a.envs.some((announcementEnv) => announcementEnv === env)
-
-        const showForEveryChainB = b.chainIds.length === 0
-        const showForEveryEnvB = b.envs.length === 0
-        const matchesChainIdB = b.chainIds.some((announcementChain) => announcementChain === chainId)
-        const matchesEnvB = b.envs.some((announcementEnv) => announcementEnv === env)
-
-        if (matchesChainIdA && matchesEnvA) return -1
-        if (matchesChainIdB && matchesEnvB) return 1
-        if (matchesChainIdA && showForEveryEnvA) return -1
-        if (matchesChainIdB && showForEveryEnvB) return 1
-        if (showForEveryChainA && matchesEnvA) return -1
-        if (showForEveryChainB && matchesEnvB) return 1
-        if (showForEveryChainA && showForEveryEnvA) return -1
-        if (showForEveryChainB && showForEveryEnvB) return 1
-        return 0
+        const specificityA = getAnnouncementSpecificity(chainId, env, a)
+        const specificityB = getAnnouncementSpecificity(chainId, env, b)
+
+        return specificityB - specificityA
       })
+
+    return filtered
   }, [chainId, allAnnouncements])
 }