feat: props and references for SearchBar

bihealth · Aug 30, 2023 · e021214 · e021214
1 parent ec3d82d
commit e021214
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 70 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>REEV</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/src/api/utils.ts b/frontend/src/api/utils.ts
@@ -22,7 +22,7 @@ export const roundIt = (value: number, digits: number = 2, label?: string): stri
  *
  * @param searchTerm The search term to use.
  */
-export const search = (searchTerm: string) => {
+export const search = (searchTerm: string, genomeRelease: string) => {
   interface RouteLocationFragment {
     name: string
     params?: any
@@ -38,7 +38,8 @@ export const search = (searchTerm: string) => {
       (): RouteLocationFragment => ({
         name: 'gene',
         params: {
-          searchTerm: searchTerm
+          searchTerm: searchTerm,
+          genomeRelease: genomeRelease
         }
       })
     ]

diff --git a/frontend/src/components/HeaderDetailPage.vue b/frontend/src/components/HeaderDetailPage.vue
@@ -1,37 +1,33 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { useGeneInfoStore } from '@/stores/geneInfo'
 
 import SearchBar from '@/components/SearchBar.vue'
 import { search } from '@/api/utils'
 
-const router = useRouter()
+export interface Props {
+  searchTerm?: string
+  genomeRelease?: string
+}
 
-const geneInfoStore = useGeneInfoStore()
+const props = withDefaults(defineProps<Props>(), {
+  searchTerm: '',
+  genomeRelease: 'grch37'
+})
+
+const router = useRouter()
 
-const searchTerm = ref('')
-const genomeRelease = ref('grch37')
+const searchTermRef = ref(props.searchTerm)
+const genomeReleaseRef = ref(props.genomeRelease)
 
 const performSearch = async () => {
-  const routeLocation: any = search(searchTerm.value)
-  console.log(routeLocation)
+  const routeLocation: any = search(searchTermRef.value, genomeReleaseRef.value)
   if (routeLocation) {
     router.push(routeLocation)
   } else {
-    console.log(`no route found for ${searchTerm.value}`)
+    console.error(`no route found for ${searchTermRef.value}`)
   }
 }
-
-// Load props search term and genome release from local storage on mount
-onMounted(() => {
-  searchTerm.value = localStorage.getItem('searchTerm') || ''
-  genomeRelease.value = localStorage.getItem('genomeRelease') || 'grch37'
-
-  if (geneInfoStore.geneInfo === null) {
-    router.push({ name: 'home' })
-  }
-})
 </script>
 
 <template>
@@ -43,8 +39,8 @@ onMounted(() => {
     </v-toolbar-title>
     <SearchBar
       class="top-search-bar"
-      v-model:search-term="searchTerm"
-      v-model:genome-release="genomeRelease"
+      v-model:search-term="searchTermRef"
+      v-model:genome-release="genomeReleaseRef"
       @click-search="performSearch"
     />
     <v-spacer></v-spacer>

diff --git a/frontend/src/components/__tests__/HeaderDetailPage.spec.ts b/frontend/src/components/__tests__/HeaderDetailPage.spec.ts
@@ -74,15 +74,4 @@ describe('HeaderDetailPage', async () => {
     const search = wrapper.find('#search')
     expect(search.exists()).toBe(true)
   })
-
-  it('redirects if gene data is null', async () => {
-    const store = useGeneInfoStore()
-    store.storeState = StoreState.Initial
-    store.geneSymbol = null
-    store.geneInfo = null
-
-    makeWrapper()
-
-    expect(router.push).toHaveBeenCalled()
-  })
 })
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
@@ -22,12 +22,11 @@ const routes = [
     component: ContactView
   },
   {
-    path: '/gene/:searchTerm',
+    path: '/gene/:searchTerm/:genomeRelease',
     name: 'gene',
     component: GeneDetailsView,
     props: (route: any) => {
-      // remark: the following line is not covered because we stub out the router
-      return { searchTerm: route.params.searchTerm }
+      return { searchTerm: route.params.searchTerm, genomeRelease: route.params.genomeRelease }
     }
   }
 ]

diff --git a/frontend/src/views/GeneDetailView.vue b/frontend/src/views/GeneDetailView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, onMounted } from 'vue'
+import { watch, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { StoreState, useGeneInfoStore } from '@/stores/geneInfo'
@@ -9,10 +9,12 @@ import { roundIt } from '@/api/utils'
 
 export interface Props {
   searchTerm?: string
+  genomeRelease?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  searchTerm: ''
+  searchTerm: '',
+  genomeRelease: 'grch37'
 })
 
 const router = useRouter()
@@ -62,10 +64,14 @@ const SECTIONS = [
   { id: 'gene-rifs', title: 'Gene RIFs' },
   { id: 'locus-specific-databases', title: 'Locus-Specific Databases' }
 ]
+
+// We need to use refs here because of props mutations in the parent
+const searchTermRef = ref(props.searchTerm)
+const genomeReleaseRef = ref(props.genomeRelease)
 </script>
 
 <template>
-  <HeaderDetailPage />
+  <HeaderDetailPage v-model:search-term="searchTermRef" v-model:genome-release="genomeReleaseRef" />
   <v-navigation-drawer location="right" class="overflow-auto">
     <div v-if="geneInfoStore.storeState == StoreState.Active" class="gene-info">
       <v-list density="compact" nav>

diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
@@ -10,6 +10,7 @@ import { useRouter } from 'vue-router'
 
 import HeaderDefault from '@/components/HeaderDefault.vue'
 import SearchBar from '@/components/SearchBar.vue'
+import { search } from '@/api/utils'
 
 const router = useRouter()
 
@@ -29,35 +30,12 @@ const useExample = (example: string) => {
   searchTerm.value = example
 }
 
-interface RouteLocationFragment {
-  name: string
-  params?: any
-}
-
-type RouteLoctionBuilder = () => RouteLocationFragment
-
-// We iterate the regexps in the `Map` and will use the route from the
-// first match.
-const SEARCH_REGEXPS: [RegExp, RouteLoctionBuilder][] = [
-  [
-    /^.*$/,
-    (): RouteLocationFragment => ({
-      name: 'gene',
-      params: {
-        searchTerm: searchTerm.value
-      }
-    })
-  ]
-]
-
 const performSearch = async () => {
-  for (const [regexp, getRoute] of SEARCH_REGEXPS) {
-    if (regexp.test(searchTerm.value)) {
-      const routeLocation = getRoute()
-      console.log(`term ${searchTerm.value} matched ${regexp}, route is`, routeLocation)
-      router.push(routeLocation)
-      return
-    }
+  const routeLocation: any = search(searchTerm.value, genomeRelease.value)
+  if (routeLocation) {
+    router.push(routeLocation)
+  } else {
+    console.error(`no route found for ${searchTerm.value}`)
   }
 }
 </script>

diff --git a/frontend/src/views/__tests__/HomeView.spec.ts b/frontend/src/views/__tests__/HomeView.spec.ts
@@ -132,6 +132,9 @@ describe('HomeView with mocked router', async () => {
     await nextTick()
 
     expect(router.push).toHaveBeenCalledOnce()
-    expect(router.push).toHaveBeenCalledWith({ name: 'gene', params: { searchTerm: 'HGNC:1100' } })
+    expect(router.push).toHaveBeenCalledWith({
+      name: 'gene',
+      params: { searchTerm: 'HGNC:1100', genomeRelease: 'grch37' }
+    })
   })
 })