From 0fd5124eb82b627f36f7b51e55b5853a0c49666b Mon Sep 17 00:00:00 2001 From: Josh Date: Tue, 27 Feb 2024 16:17:28 +0800 Subject: [PATCH 1/6] tanstack table initialization with pageSize to allow additional entries to be loaded --- .../grading/subcomponents/GradingSubmissionsTable.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx index a6d9b8e385..7d4b2bc2c7 100644 --- a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx +++ b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx @@ -158,7 +158,13 @@ const GradingSubmissionTable: React.FC = ({ const table = useReactTable({ data: submissions, columns, - state: { columnFilters }, + state: { + columnFilters, + pagination: { + pageIndex: 0, + pageSize: pageSize + } + }, onColumnFiltersChange: setColumnFilters, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), From 60aa887d9896cacf7771d19682fdc995c0b056ce Mon Sep 17 00:00:00 2001 From: Josh Date: Tue, 27 Feb 2024 16:38:15 +0800 Subject: [PATCH 2/6] update debounced function to additionally reset the page when search value changes. --- .../grading/subcomponents/GradingSubmissionsTable.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx index 7d4b2bc2c7..a41fb3e3af 100644 --- a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx +++ b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx @@ -128,10 +128,15 @@ const GradingSubmissionTable: React.FC = ({ const [searchQuery, setSearchQuery] = useState(''); /** The actual value sent to the backend */ const [searchValue, setSearchValue] = useState(''); - const debouncedSetSearchValue = useMemo(() => debounce(setSearchValue, 300), []); + // Placing searchValue as a dependency for triggering a page reset will result in double-querying. + const updateSearch = (newValue: string) => { + resetPage(); + setSearchValue(newValue); + } + const debouncedUpdateSearchValue = useMemo(() => debounce(updateSearch, 300), []); const handleSearchQueryUpdate: React.ChangeEventHandler = e => { setSearchQuery(e.target.value); - debouncedSetSearchValue(e.target.value); + debouncedUpdateSearchValue(e.target.value); }; const [page, setPage] = useState(0); @@ -182,7 +187,7 @@ const GradingSubmissionTable: React.FC = ({ useEffect(() => { resetPage(); - }, [updateEntries, resetPage]); + }, [updateEntries, resetPage, searchValue]); useEffect(() => { updateEntries(page, backendFilterParams); From 5906df97cde4c77a1f13cc84b7d0f6db49594153 Mon Sep 17 00:00:00 2001 From: Josh Date: Tue, 27 Feb 2024 16:53:52 +0800 Subject: [PATCH 3/6] adds a reset page for column filter removal for consistency reasons. --- .../academy/grading/subcomponents/GradingSubmissionsTable.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx index a41fb3e3af..949b75c457 100644 --- a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx +++ b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx @@ -179,6 +179,7 @@ const GradingSubmissionTable: React.FC = ({ const handleFilterRemove = ({ id, value }: ColumnFilter) => { const newFilters = columnFilters.filter(filter => filter.id !== id && filter.value !== value); setColumnFilters(newFilters); + resetPage(); }; useEffect(() => { From 7abd839c3214d69231311aa93efc5c0c835d98be Mon Sep 17 00:00:00 2001 From: Josh Date: Tue, 27 Feb 2024 17:04:32 +0800 Subject: [PATCH 4/6] fix linting. --- .../academy/grading/subcomponents/GradingSubmissionsTable.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx index 949b75c457..0c966a9ccb 100644 --- a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx +++ b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx @@ -132,7 +132,7 @@ const GradingSubmissionTable: React.FC = ({ const updateSearch = (newValue: string) => { resetPage(); setSearchValue(newValue); - } + }; const debouncedUpdateSearchValue = useMemo(() => debounce(updateSearch, 300), []); const handleSearchQueryUpdate: React.ChangeEventHandler = e => { setSearchQuery(e.target.value); @@ -163,7 +163,7 @@ const GradingSubmissionTable: React.FC = ({ const table = useReactTable({ data: submissions, columns, - state: { + state: { columnFilters, pagination: { pageIndex: 0, From b7c8eff55e407727eba96cd72d913c5e4d050939 Mon Sep 17 00:00:00 2001 From: Josh Date: Tue, 27 Feb 2024 17:12:45 +0800 Subject: [PATCH 5/6] update depedency array --- .../academy/grading/subcomponents/GradingSubmissionsTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx index 0c966a9ccb..a7a5bdda28 100644 --- a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx +++ b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx @@ -133,7 +133,7 @@ const GradingSubmissionTable: React.FC = ({ resetPage(); setSearchValue(newValue); }; - const debouncedUpdateSearchValue = useMemo(() => debounce(updateSearch, 300), []); + const debouncedUpdateSearchValue = useMemo(() => debounce(updateSearch, 300), [updateSearch]); const handleSearchQueryUpdate: React.ChangeEventHandler = e => { setSearchQuery(e.target.value); debouncedUpdateSearchValue(e.target.value); From ae03481d2bef81b9bf5e5f381b792f79a0d2af19 Mon Sep 17 00:00:00 2001 From: Josh Date: Tue, 27 Feb 2024 17:29:32 +0800 Subject: [PATCH 6/6] Rearrange state declaration + move debounced function entirely within memo --- .../subcomponents/GradingSubmissionsTable.tsx | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx index a7a5bdda28..353d414758 100644 --- a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx +++ b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx @@ -124,25 +124,28 @@ const GradingSubmissionTable: React.FC = ({ ...tableFilters.columnFilters ]); + const [page, setPage] = useState(0); + const maxPage = useMemo(() => Math.ceil(totalRows / pageSize) - 1, [totalRows, pageSize]); + const resetPage = useCallback(() => setPage(0), [setPage]); + /** The value to be shown in the search bar */ const [searchQuery, setSearchQuery] = useState(''); /** The actual value sent to the backend */ const [searchValue, setSearchValue] = useState(''); // Placing searchValue as a dependency for triggering a page reset will result in double-querying. - const updateSearch = (newValue: string) => { - resetPage(); - setSearchValue(newValue); - }; - const debouncedUpdateSearchValue = useMemo(() => debounce(updateSearch, 300), [updateSearch]); + const debouncedUpdateSearchValue = useMemo( + () => + debounce((newValue: string) => { + resetPage(); + setSearchValue(newValue); + }, 300), + [resetPage] + ); const handleSearchQueryUpdate: React.ChangeEventHandler = e => { setSearchQuery(e.target.value); debouncedUpdateSearchValue(e.target.value); }; - const [page, setPage] = useState(0); - const maxPage = useMemo(() => Math.ceil(totalRows / pageSize) - 1, [totalRows, pageSize]); - const resetPage = useCallback(() => setPage(0), [setPage]); - // Converts the columnFilters array into backend query parameters. const backendFilterParams = useMemo(() => { const filters: Array<{ [key: string]: any }> = [