diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.test.tsx index 44404e67ea0..8a3269fb00b 100644 --- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.test.tsx +++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.test.tsx @@ -241,7 +241,7 @@ describe('getCodeListsSearchMatch', () => { it('returns all code lists when search pattern is .*', () => { const result = getCodeListsSearchMatch(codeLists, '.*'); const resultTitles = result.map((res) => res.title); - expect(resultTitles).toBe(['codeList1', 'codeList2', 'myCodeList', 'otherCodeList']); + expect(resultTitles).toBe(['codeList1', 'codeList2', 'myCodeList', 'otherList']); }); it('returns no matches when no code list matches the pattern', () => { diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.tsx index ef3dc529165..7e9e5e4dce8 100644 --- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.tsx +++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { StudioHeading, StudioPageError } from '@studio/components'; import type { CodeList as StudioComponentCodeList } from '@studio/components'; import { useTranslation } from 'react-i18next'; @@ -28,6 +28,7 @@ export function CodeListPage({ fetchDataError, }: CodeListPageProps): React.ReactElement { const { t } = useTranslation(); + const [codeListSearchPattern, setCodeListSearchPattern] = useState('.*'); const [codeListInEditMode, setCodeListInEditMode] = useState(undefined); const [codeListsSearchMatch, setCodeListsSearchMatch] = useState(codeLists); @@ -40,6 +41,10 @@ export function CodeListPage({ [codeLists, setCodeListsSearchMatch], ); + useEffect(() => { + handleSearchCodeLists(codeListSearchPattern); + }, [codeLists, codeListSearchPattern, handleSearchCodeLists]); + if (fetchDataError) return ; @@ -63,7 +68,7 @@ export function CodeListPage({ onUploadCodeList={handleUploadCodeList} onUpdateCodeList={onUpdateCodeList} codeListNames={codeListTitles} - onHandleSearchCodeLists={handleSearchCodeLists} + onSetCodeListSearchPattern={setCodeListSearchPattern} /> void; onUpdateCodeList: (updatedCodeList: CodeListWithMetadata) => void; codeListNames: string[]; - onHandleSearchCodeLists: (codeListPatternMatch: string) => void; + onSetCodeListSearchPattern: (codeListPatternMatch: string) => void; }; export function CodeListsActionsBar({ onUploadCodeList, onUpdateCodeList, codeListNames, - onHandleSearchCodeLists, + onSetCodeListSearchPattern, }: CodeListsActionsBarProps) { const { t } = useTranslation(); const getInvalidUploadFileNameErrorMessage = useUploadCodeListNameErrorMessage(); - const [codeListSearchPattern, setCodeListSearchPattern] = useState('.*'); - const previousSearchPattern = usePrevious(codeListSearchPattern); - - useEffect(() => { - if (previousSearchPattern !== codeListSearchPattern) { - onHandleSearchCodeLists(codeListSearchPattern); - } - }, [codeListNames, onHandleSearchCodeLists, previousSearchPattern, codeListSearchPattern]); const onSubmit = (file: File) => { const fileNameError = FileNameUtils.findFileNameError( @@ -52,10 +44,10 @@ export function CodeListsActionsBar({ size='sm' placeholder={t('app_content_library.code_lists.search_placeholder')} onChange={(event: ChangeEvent) => - setCodeListSearchPattern(event.target.value) + onSetCodeListSearchPattern(event.target.value) } clearButtonLabel={t('app_content_library.code_lists.clear_search_button_label')} - onClear={() => setCodeListSearchPattern('.*')} + onClear={() => onSetCodeListSearchPattern('.*')} />