ADD - CHS quest title searching support #307

Signed-off-by: RaenonX <[email protected]>

src/components/elements/input/search/main.test.tsx

@@ -13,7 +13,7 @@ describe('Search input', () => {
   const SearchWrapper = () => (
     <Search
       options={['option 1', 'option 2']}
-      isOptionMatchSearch={(option, searchTextLowered) => option === searchTextLowered}
+      isOptionMatchSearch={(option, searchText) => option === searchText}
       renderMatchedSelection={(option) => <span>{option}</span>}
     />
   );
@@ -45,4 +45,21 @@ describe('Search input', () => {
     expect(screen.getByText('option 1')).toBeInTheDocument();
     expect(screen.getByText('option 2')).toBeInTheDocument();
   });
+
+  it('searches in CHS', async () => {
+    const {rerender} = renderReact(() => (
+      <Search
+        options={['漢字']}
+        isOptionMatchSearch={(option, searchText) => option === searchText}
+        renderMatchedSelection={(option) => <span>{option}</span>}
+      />
+    ));
+
+    const keywordInput = screen.getByPlaceholderText(/Enter keyword/);
+    typeInput(keywordInput, '汉字', {rerender});
+    userEvent.clear(keywordInput);
+    rerender();
+
+    expect(screen.getByText('漢字')).toBeInTheDocument();
+  });
 });

src/components/elements/input/search/main.tsx

@@ -4,12 +4,13 @@ import {Property} from 'csstype';
 import Form from 'react-bootstrap/Form';
 
 import {useI18n} from '../../../../i18n/hook';
+import {transformForSearch} from '../../../../utils/text';
 import {SearchResults} from './results';
 
 
 type Props<E> = {
   options: Array<E>
-  isOptionMatchSearch: (option: E, searchTextLowered: string) => boolean,
+  isOptionMatchSearch: (option: E, searchTextTransformed: string) => boolean,
   renderMatchedSelection: (option: E) => React.ReactNode,
   height?: Property.Height,
 }
@@ -25,10 +26,9 @@ export const Search = <E, >({
 
   let matchedOptions = options;
 
-  // `toLowerCase()` is faster than `match()`
-  const searchTextLowered = searchText.toLowerCase();
+  const searchTextTransformed = transformForSearch(searchText);
   if (!!searchText) {
-    matchedOptions = options.filter((option) => isOptionMatchSearch(option, searchTextLowered));
+    matchedOptions = options.filter((option) => isOptionMatchSearch(option, searchTextTransformed));
   }
 
   return (

src/components/elements/posts/list/main.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {SequencedPostInfo} from '../../../../api-def/api';
+import {transformForSearch} from '../../../../utils/text';
 import {Search} from '../../input/search/main';
 import {PostEntry, PostEntryProps} from './entry';
 
@@ -14,7 +15,9 @@ export const PostList = <E extends SequencedPostInfo>({entries, ...props}: PostL
   return (
     <Search
       options={entries}
-      isOptionMatchSearch={(option, textLowered) => option.title.toLowerCase().includes(textLowered)}
+      isOptionMatchSearch={(option, searchText) => (
+        transformForSearch(option.title, {variantInsensitive: false}).includes(searchText)
+      )}
       renderMatchedSelection={(entry) => <PostEntry entry={entry} {...props}/>}
       height="70vh"
     />

src/components/pages/tier/points/index/main.tsx

@@ -6,6 +6,7 @@ import Row from 'react-bootstrap/Row';
 import {DataPath} from '../../../../../const/path/definitions';
 import {useI18n} from '../../../../../i18n/hook';
 import {makeDataUrl} from '../../../../../utils/path/make';
+import {transformForSearch} from '../../../../../utils/text';
 import {AdsPageTop, AdsUnitKeyPointIndexEnd} from '../../../../elements/common/ads/main';
 import {InternalLink} from '../../../../elements/common/link/internal';
 import {Loading} from '../../../../elements/common/loading';
@@ -28,7 +29,9 @@ export const KeyPointIndexPage = () => {
       <AdsPageTop/>
       <Search
         options={Object.entries(keyPointData).map(([id, entry]) => ({id, ...entry}))}
-        isOptionMatchSearch={(option, textLowered) => option.description.toLowerCase().includes(textLowered)}
+        isOptionMatchSearch={(option, searchText) => (
+          transformForSearch(option.description, {variantInsensitive: false}).includes(searchText)
+        )}
         renderMatchedSelection={({id, type, description}) => (
           <Row noGutters key={description} className={styles.entry}>
             <Col xs="auto" className={styles.typeEntry}>