fix: get select options from query

packages/api/src/repository/Feed.ts

@@ -42,7 +42,8 @@ export class FeedRepository {
   }
 
   async get (feedFullName: string): Promise<FeedDbObjectNormalized> {
-    return this.normalizeId(await this.collection.findOne({ feedFullName }))
+    const response = await this.collection.findOne({ feedFullName })
+    return this.normalizeId(response)
   }
 
   async getPaginatedFeeds (

packages/api/src/resolvers.ts

@@ -1,5 +1,4 @@
-import { Context } from './types'
-
+import { Context, Network } from './types'
 const resolvers = {
   Query: {
     feeds: async (_parent, args, { feedRepository }: Context) => {
@@ -10,6 +9,10 @@ const resolvers = {
       )
     },
 
+    networks: async (_parent, _args) => {
+      return Object.keys(Network).map(key => ({ label: Network[key] }))
+    },
+
     requests: async (_parent, args, { resultRequestRepository }: Context) => {
       return await resultRequestRepository.getFeedRequestsPage(
         args.feedFullName,

packages/api/src/typeDefs.ts

@@ -29,6 +29,11 @@ const typeDefs = gql`
     timestamp: String! @column
   }
 
+  type Network @entity {
+    id: String! @id
+    label: String
+  }
+
   # type DataRequest @entity(embedded: true) {
   #   retrieval: String! @column
   #   aggregation: String! @column
@@ -39,6 +44,7 @@ const typeDefs = gql`
     feed(feedFullName: String!): Feed
     feeds(page: Int!, pageSize: Int!, network: String): FeedsPage!
     requests(feedFullName: String!, page: Int!, size: Int!): [ResultRequest]!
+    networks: [Network]!
   }
 `
 

packages/ui/apollo/queries/networks.gql

@@ -0,0 +1,5 @@
+query networks {
+  networks {
+    label
+  }
+}

packages/ui/components/Main.vue

@@ -25,11 +25,17 @@
 
 <script>
 import feeds from '@/apollo/queries/feeds.gql'
+import networks from '@/apollo/queries/networks.gql'
 import { formatSvgName } from '../utils/formatSvgName'
 import { generateSelectOptions } from '../utils/generateSelectOptions'
 
 export default {
   apollo: {
+    networks: {
+      prefetch: true,
+      query: networks,
+      fetchPolicy: 'network-only',
+    },
     feeds: {
       prefetch: true,
       query: feeds,
@@ -83,13 +89,12 @@ export default {
       }
     },
     options() {
-      if (this.feeds) {
-        return [
+      if (this.networks) {
+        const result = [
           { label: 'all', key: 'All' },
-          ...generateSelectOptions(
-            this.allFeeds.map((feed) => feed.network)
-          ).sort((option1, option2) => option1.label < option2.label),
+          ...generateSelectOptions(this.networks),
         ]
+        return result
       } else {
         return [{ label: 'all', key: 'All' }]
       }

packages/ui/components/Select.vue

@@ -73,6 +73,7 @@ export default {
     border: var(--selected-options-border);
     box-shadow: var(--selected-options-shadow);
     border-radius: 4px 4px 4px 4px;
+    max-height: max-content;
   }
 
   .vs__dropdown-option {

packages/ui/tests/utils/generateSelectOptions.spec.js

@@ -3,10 +3,10 @@ import { generateSelectOptions } from '../../utils/generateSelectOptions'
 describe('generateSelectOptions.js', () => {
   it('should generate a list of options from a list of feeds', () => {
     const networks = [
-      'ethereum-rinkeby',
-      'ethereum-goerli',
-      'conflux-testnet',
-      'boba-rinkeby',
+      { label: 'ethereum-rinkeby' },
+      { label: 'ethereum-goerli' },
+      { label: 'conflux-testnet' },
+      { label: 'boba-rinkeby' },
     ]
 
     const options = generateSelectOptions(networks)
@@ -19,22 +19,6 @@ describe('generateSelectOptions.js', () => {
     ])
   })
 
-  it('should generate a list of options without repeated elements', () => {
-    const networks = [
-      'boba-rinkeby',
-      'conflux-testnet',
-      'boba-rinkeby',
-      'conflux-testnet',
-    ]
-
-    const options = generateSelectOptions(networks)
-
-    expect(options).toStrictEqual([
-      { label: 'boba-rinkeby', key: 'Boba Rinkeby' },
-      { label: 'conflux-testnet', key: 'Conflux Testnet' },
-    ])
-  })
-
   it('should generate an empty list if the arguments are empty', () => {
     const networks = []
 

packages/ui/utils/generateSelectOptions.js

@@ -1,25 +1,12 @@
 export function generateSelectOptions(list) {
   if (!list) return []
 
-  return list.reduce((options, item) => {
-    if (includesItem(options, item)) {
-      return options
-    } else {
-      return [
-        ...options,
-        {
-          label: item,
-          key: item.split('-').map(capitalizeFirstLetter).join(' '),
-        },
-      ]
-    }
-  }, [])
+  return list.map((network) => ({
+    label: network.label,
+    key: network.label.split('-').map(capitalizeFirstLetter).join(' '),
+  }))
 }
 
 function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1)
 }
-
-function includesItem(options, item) {
-  return options.find((option) => option.label === item)
-}