fix free text search

danactive · Apr 7, 2024 · 1150e7d · 1150e7d
1 parent 3c825fd
commit 1150e7d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 28 deletions.
diff --git a/next/src/components/ComboBox.tsx b/next/src/components/ComboBox.tsx
@@ -1,18 +1,10 @@
-import * as React from 'react'
 import FormControl from '@mui/joy/FormControl'
-import FormLabel from '@mui/joy/FormLabel'
 import Autocomplete, { createFilterOptions } from '@mui/joy/Autocomplete'
 import AutocompleteOption from '@mui/joy/AutocompleteOption'
 import ListItemDecorator from '@mui/joy/ListItemDecorator'
-import { IndexedKeywords, FilmOptionType } from '../types/common'
+import { IndexedKeywords } from '../types/common'
 
-export const TYPES = {
-  A: 'A',
-  B: 'B',
-  C: 'C',
-} as const
-
-const filter = createFilterOptions<FilmOptionType>()
+const filter = createFilterOptions<IndexedKeywords>()
 
 export default function ComboBox(
   {
@@ -21,19 +13,19 @@ export default function ComboBox(
     value: valueText,
   }:
   {
-    options: FilmOptionType[],
+    options: IndexedKeywords[],
     onChange: ({ label, value }: { label: string; value: string; }) => void,
-    value: FilmOptionType | null,
+    value: IndexedKeywords | null,
   },
 ) {
   return (
     <FormControl id="free-solo-with-text-demo">
       <Autocomplete
         value={valueText}
         onChange={(event, newValue): void => {
-          if (typeof newValue === 'string') {
+          if (typeof newValue === 'string') { // free text
             onChange({ label: newValue, value: newValue })
-          } else if (newValue?.label && newValue?.value) {
+          } else if (newValue?.label && newValue?.value) { // selected keyword
             onChange({ label: newValue.label, value: newValue.value })
           } else if (newValue === null) { // clear
             onChange({ label: '', value: '' })
@@ -47,7 +39,7 @@ export default function ComboBox(
           const isExisting = options.some((option) => inputValue === option.label)
           if (inputValue !== '' && !isExisting) {
             filtered.push({
-              inputValue,
+              value: inputValue,
               label: `Add "${inputValue}"`,
             })
           }
@@ -65,8 +57,8 @@ export default function ComboBox(
             return option
           }
           // Add "xxx" option created dynamically
-          if (option.inputValue) {
-            return option.inputValue
+          if (option.value) {
+            return option.value
           }
           // Regular option
           return option.label

diff --git a/next/src/hooks/useSearch.tsx b/next/src/hooks/useSearch.tsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import ComboBox, { type TYPES } from '../components/ComboBox'
-import { FilmOptionType, IndexedKeywords } from '../types/common'
+import { IndexedKeywords } from '../types/common'
 
 interface ServerSideItem {
   corpus: string;
@@ -28,7 +28,7 @@ function useSearch<ItemType extends ServerSideItem>(
 ): { filtered: ItemType[]; keyword: string; setKeyword: Function; searchBox: JSX.Element; } {
   const router = useRouter()
   const [keyword, setKeyword] = useState(router.query.keyword?.toString() || '')
-  const [selectedOption, setSelectedOption] = useState<FilmOptionType | null>(null)
+  const [selectedOption, setSelectedOption] = useState<IndexedKeywords | null>(null)
 
   const getShareUrlStem = () => {
     if (router.asPath.includes('keyword=')) {
@@ -72,9 +72,10 @@ function useSearch<ItemType extends ServerSideItem>(
   useEffect(() => {
     if (router.isReady && router.query.keyword) {
       setKeyword(router.query.keyword?.toString())
-      const newValue: FilmOptionType = {
-        label: Array.isArray(router.query.keyword) ? router.query.keyword[0] : router.query.keyword,
-        inputValue: Array.isArray(router.query.keyword) ? router.query.keyword[0] : router.query.keyword,
+      const value = Array.isArray(router.query.keyword) ? router.query.keyword[0] : router.query.keyword
+      const newValue: IndexedKeywords = {
+        label: value,
+        value,
       }
       setSelectedOption(newValue)
     }

diff --git a/next/src/types/common.d.ts b/next/src/types/common.d.ts
@@ -131,11 +131,6 @@ declare global {
   }
 }
 
-interface FilmOptionType extends Partial<IndexedKeywords> {
-  inputValue?: string;
-  label: string;
-}
-
 export type {
   AlbumMeta,
   XmlMeta,
@@ -148,5 +143,4 @@ export type {
   Item,
   ItemReferenceSource,
   IndexedKeywords,
-  FilmOptionType,
 }