From 0493352292b3d89317709c8bb79e77cdd978ac99 Mon Sep 17 00:00:00 2001 From: fadingNA Date: Mon, 18 Nov 2024 00:06:18 -0500 Subject: [PATCH] frontend: remove search on localstate, change to backend search use mongo passing searchTerm --- frontend/src/preferences/preferenceApi.ts | 3 ++- frontend/src/settings/Documents.tsx | 29 +++++++++++++---------- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/frontend/src/preferences/preferenceApi.ts b/frontend/src/preferences/preferenceApi.ts index 32cf8b178..8d21bdcd2 100644 --- a/frontend/src/preferences/preferenceApi.ts +++ b/frontend/src/preferences/preferenceApi.ts @@ -25,9 +25,10 @@ export async function getDocsWithPagination( order = 'desc', pageNumber = 1, rowsPerPage = 10, + searchTerm = '', ): Promise { try { - const query = `sort=${sort}&order=${order}&page=${pageNumber}&rows=${rowsPerPage}`; + const query = `sort=${sort}&order=${order}&page=${pageNumber}&rows=${rowsPerPage}&search=${searchTerm}`; const response = await userService.getDocsWithPagination(query); const data = await response.json(); const docs: Doc[] = []; diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx index 1e5a610ec..bb45b9ff0 100644 --- a/frontend/src/settings/Documents.tsx +++ b/frontend/src/settings/Documents.tsx @@ -40,25 +40,18 @@ const Documents: React.FC = ({ const { t } = useTranslation(); const dispatch = useDispatch(); // State for search input - const [searchTerm, setSearchTerm] = useState(''); + const [searchTerm, setSearchTerm] = useState(''); // State for modal: active/inactive const [modalState, setModalState] = useState('INACTIVE'); // Initialize with inactive state - const [isOnboarding, setIsOnboarding] = useState(false); // State for onboarding flag - const [loading, setLoading] = useState(false); + const [isOnboarding, setIsOnboarding] = useState(false); // State for onboarding flag + const [loading, setLoading] = useState(false); const [sortField, setSortField] = useState<'date' | 'tokens'>('date'); const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc'); // Pagination const [currentPage, setCurrentPage] = useState(1); const [rowsPerPage, setRowsPerPage] = useState(10); const [totalPages, setTotalPages] = useState(1); - // const [totalDocuments, setTotalDocuments] = useState(0); - // Filter documents based on the search term - const filteredDocuments = paginatedDocuments?.filter((document) => - document.name.toLowerCase().includes(searchTerm.toLowerCase()), - ); - // State for documents - const currentDocuments = filteredDocuments ?? []; - console.log('currentDocuments', currentDocuments); + const currentDocuments = paginatedDocuments ?? []; const syncOptions = [ { label: 'Never', value: 'never' }, { label: 'Daily', value: 'daily' }, @@ -84,7 +77,7 @@ const Documents: React.FC = ({ setSortOrder('desc'); } } - getDocsWithPagination(sortField, sortOrder, page, rowsPerPg) + getDocsWithPagination(sortField, sortOrder, page, rowsPerPg, searchTerm) .then((data) => { dispatch(setPaginatedDocuments(data ? data.docs : [])); setTotalPages(data ? data.totalPages : 0); @@ -130,6 +123,10 @@ const Documents: React.FC = ({ } }, [modalState, sortField, currentPage, rowsPerPage]); + useEffect(() => { + refreshDocs(sortField, 1, rowsPerPage); + }, [searchTerm]); + return (
@@ -143,7 +140,13 @@ const Documents: React.FC = ({ type="text" id="document-search-input" value={searchTerm} - onChange={(e) => setSearchTerm(e.target.value)} // Handle search input change + onChange={(e) => { + setSearchTerm(e.target.value); + setCurrentPage(1); + // refreshDocs(sortField, 1, rowsPerPage); + // do not call refreshDocs here the state is async + // so it will not have the updated value + }} // Handle search input change />