From 384c13ccdbb8fa07881a1d9b2b634e82b8d099f6 Mon Sep 17 00:00:00 2001 From: kharann Date: Sun, 16 May 2021 16:42:28 +0200 Subject: [PATCH 1/9] feat(search): add debounce to search when searching for a course --- common/hooks/useDebounce.ts | 19 +++++++++++++++++++ package-lock.json | 2 +- pages/course/index.tsx | 3 ++- 3 files changed, 22 insertions(+), 2 deletions(-) create mode 100644 common/hooks/useDebounce.ts diff --git a/common/hooks/useDebounce.ts b/common/hooks/useDebounce.ts new file mode 100644 index 0000000..272f000 --- /dev/null +++ b/common/hooks/useDebounce.ts @@ -0,0 +1,19 @@ +import { useState, useEffect } from 'react'; + +const useDebounce = (value: T, delay: number) => { + const [debouncedValue, setDebouncedValue] = useState(value); + + useEffect(() => { + const handler = setTimeout(() => { + setDebouncedValue(value); + }, delay); + + return () => { + clearTimeout(handler); + }; + }, [value, delay]); + + return debouncedValue; +}; + +export default useDebounce; diff --git a/package-lock.json b/package-lock.json index 42723c5..fb7d561 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "gradestats-app", - "version": "1.5.4", + "version": "1.7.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/pages/course/index.tsx b/pages/course/index.tsx index 0c2b332..33af0b8 100644 --- a/pages/course/index.tsx +++ b/pages/course/index.tsx @@ -10,6 +10,7 @@ import { Course, CourseSort, COURSE_ORDERING } from 'models/Course'; import { GetStaticProps } from 'next'; import { Department } from 'models/Department'; import { Faculty } from 'models/Faculty'; +import useDebounce from 'common/hooks/useDebounce'; interface StaticProps { departments: Department[]; @@ -43,7 +44,7 @@ const CourseListPage: FC = ({ departments, faculties }) => { const [sortOrder, setSortOrder] = useState('ranking'); const [departmentId, setDepartmentId] = useState(null); const [facultyId, setFacultyId] = useState(null); - const query = Array.isArray(queryParam) ? queryParam.join(',') : queryParam; + const query = useDebounce(Array.isArray(queryParam) ? queryParam.join(',') : queryParam, 1500); const getSearchUrl = useMemo(() => getSearchUrlPaginatedGetter(query, sortOrder, departmentId, facultyId), [ query, sortOrder, From b0b124164471664f4dac794797e199b475ffb399 Mon Sep 17 00:00:00 2001 From: kharann Date: Tue, 18 May 2021 15:45:00 +0200 Subject: [PATCH 2/9] fix(search): change the debounce to be around the memo --- pages/course/index.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/pages/course/index.tsx b/pages/course/index.tsx index 33af0b8..5c9002a 100644 --- a/pages/course/index.tsx +++ b/pages/course/index.tsx @@ -44,13 +44,16 @@ const CourseListPage: FC = ({ departments, faculties }) => { const [sortOrder, setSortOrder] = useState('ranking'); const [departmentId, setDepartmentId] = useState(null); const [facultyId, setFacultyId] = useState(null); - const query = useDebounce(Array.isArray(queryParam) ? queryParam.join(',') : queryParam, 1500); - const getSearchUrl = useMemo(() => getSearchUrlPaginatedGetter(query, sortOrder, departmentId, facultyId), [ - query, - sortOrder, - departmentId, - facultyId, - ]); + const query = Array.isArray(queryParam) ? queryParam.join(',') : queryParam; + const getSearchUrl = useDebounce( + useMemo(() => getSearchUrlPaginatedGetter(query, sortOrder, departmentId, facultyId), [ + query, + sortOrder, + departmentId, + facultyId, + ]), + 1500 + ); const { data, isValidating, setSize } = useSWRInfinite>(getSearchUrl); const nextPage = useCallback(() => setSize((currentSize) => currentSize + 1), []); From 56a2cddf6496c1160fec68df20445187cd8e76e0 Mon Sep 17 00:00:00 2001 From: kharann Date: Tue, 18 May 2021 15:57:26 +0200 Subject: [PATCH 3/9] fix(search): move debounce inside of the memo --- pages/course/index.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/pages/course/index.tsx b/pages/course/index.tsx index 5c9002a..de16e4c 100644 --- a/pages/course/index.tsx +++ b/pages/course/index.tsx @@ -45,14 +45,9 @@ const CourseListPage: FC = ({ departments, faculties }) => { const [departmentId, setDepartmentId] = useState(null); const [facultyId, setFacultyId] = useState(null); const query = Array.isArray(queryParam) ? queryParam.join(',') : queryParam; - const getSearchUrl = useDebounce( - useMemo(() => getSearchUrlPaginatedGetter(query, sortOrder, departmentId, facultyId), [ - query, - sortOrder, - departmentId, - facultyId, - ]), - 1500 + const getSearchUrl = useMemo( + () => useDebounce(getSearchUrlPaginatedGetter(query, sortOrder, departmentId, facultyId), 1000), + [query, sortOrder, departmentId, facultyId] ); const { data, isValidating, setSize } = useSWRInfinite>(getSearchUrl); From ec62d2fd333f7b12cc1f32fddd3fc7e8dd616eaa Mon Sep 17 00:00:00 2001 From: kharann Date: Tue, 18 May 2021 16:20:29 +0200 Subject: [PATCH 4/9] fix(search): change useMemo query depenedency to the debounced one --- pages/course/index.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/pages/course/index.tsx b/pages/course/index.tsx index de16e4c..55b5fba 100644 --- a/pages/course/index.tsx +++ b/pages/course/index.tsx @@ -45,10 +45,13 @@ const CourseListPage: FC = ({ departments, faculties }) => { const [departmentId, setDepartmentId] = useState(null); const [facultyId, setFacultyId] = useState(null); const query = Array.isArray(queryParam) ? queryParam.join(',') : queryParam; - const getSearchUrl = useMemo( - () => useDebounce(getSearchUrlPaginatedGetter(query, sortOrder, departmentId, facultyId), 1000), - [query, sortOrder, departmentId, facultyId] - ); + const debouncedQuery = useDebounce(query, 1000); + const getSearchUrl = useMemo(() => getSearchUrlPaginatedGetter(debouncedQuery, sortOrder, departmentId, facultyId), [ + debouncedQuery, + sortOrder, + departmentId, + facultyId, + ]); const { data, isValidating, setSize } = useSWRInfinite>(getSearchUrl); const nextPage = useCallback(() => setSize((currentSize) => currentSize + 1), []); From d7fd74d0091dae8e5ec468b03d78f6e5f861576f Mon Sep 17 00:00:00 2001 From: kharann Date: Tue, 18 May 2021 16:30:12 +0200 Subject: [PATCH 5/9] feat(debounce): increase debounce delay --- pages/course/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/course/index.tsx b/pages/course/index.tsx index 55b5fba..2066186 100644 --- a/pages/course/index.tsx +++ b/pages/course/index.tsx @@ -45,7 +45,7 @@ const CourseListPage: FC = ({ departments, faculties }) => { const [departmentId, setDepartmentId] = useState(null); const [facultyId, setFacultyId] = useState(null); const query = Array.isArray(queryParam) ? queryParam.join(',') : queryParam; - const debouncedQuery = useDebounce(query, 1000); + const debouncedQuery = useDebounce(query, 1500); const getSearchUrl = useMemo(() => getSearchUrlPaginatedGetter(debouncedQuery, sortOrder, departmentId, facultyId), [ debouncedQuery, sortOrder, From 8547fc0f1404d61e335e86489ee6f8d109f5e60d Mon Sep 17 00:00:00 2001 From: Kharann Date: Tue, 18 May 2021 22:06:30 +0200 Subject: [PATCH 6/9] Update index.tsx --- pages/course/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/course/index.tsx b/pages/course/index.tsx index 2066186..17b40d7 100644 --- a/pages/course/index.tsx +++ b/pages/course/index.tsx @@ -45,7 +45,7 @@ const CourseListPage: FC = ({ departments, faculties }) => { const [departmentId, setDepartmentId] = useState(null); const [facultyId, setFacultyId] = useState(null); const query = Array.isArray(queryParam) ? queryParam.join(',') : queryParam; - const debouncedQuery = useDebounce(query, 1500); + const debouncedQuery = useDebounce(query, 450); const getSearchUrl = useMemo(() => getSearchUrlPaginatedGetter(debouncedQuery, sortOrder, departmentId, facultyId), [ debouncedQuery, sortOrder, From b63a74b9dd81263e95e6d1dab7c7c5b134b48797 Mon Sep 17 00:00:00 2001 From: Kharann Date: Tue, 18 May 2021 22:52:44 +0200 Subject: [PATCH 7/9] Update index.tsx --- pages/course/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/course/index.tsx b/pages/course/index.tsx index 17b40d7..bd8e086 100644 --- a/pages/course/index.tsx +++ b/pages/course/index.tsx @@ -45,7 +45,7 @@ const CourseListPage: FC = ({ departments, faculties }) => { const [departmentId, setDepartmentId] = useState(null); const [facultyId, setFacultyId] = useState(null); const query = Array.isArray(queryParam) ? queryParam.join(',') : queryParam; - const debouncedQuery = useDebounce(query, 450); + const debouncedQuery = useDebounce(query, 300); const getSearchUrl = useMemo(() => getSearchUrlPaginatedGetter(debouncedQuery, sortOrder, departmentId, facultyId), [ debouncedQuery, sortOrder, From 2b57a65c31d6f63ab2182fe74ccfbff151862300 Mon Sep 17 00:00:00 2001 From: kharann Date: Wed, 19 May 2021 22:49:04 +0200 Subject: [PATCH 8/9] disable some lighthouse tests --- .lighthouserc.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.lighthouserc.js b/.lighthouserc.js index aa653ca..f63ccd6 100644 --- a/.lighthouserc.js +++ b/.lighthouserc.js @@ -26,6 +26,9 @@ module.exports = { 'first-cpu-idle': ['warning', { minScore: 0.7 }], // Ouff performance 'legacy-javascript': 'off', // Maybe Google Analytics? 'uses-rel-preload': 'off', // Maybe fixable? + 'uses-rel-preconnect': 'off', + 'mainthread-work-breakdown': 'off', + 'max-potential-fid': 'off', 'unused-javascript': 'off', // Maybe fixable? 'works-offline': 'off', // Enable for PWA 'offline-start-url': 'off', // Enable for PWA From de65cd5065fdfe01bcf06dd30bb1e30c1219f630 Mon Sep 17 00:00:00 2001 From: Kharann Date: Wed, 19 May 2021 23:41:02 +0200 Subject: [PATCH 9/9] Update index.tsx --- pages/course/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/course/index.tsx b/pages/course/index.tsx index bd8e086..3f48fdb 100644 --- a/pages/course/index.tsx +++ b/pages/course/index.tsx @@ -45,7 +45,7 @@ const CourseListPage: FC = ({ departments, faculties }) => { const [departmentId, setDepartmentId] = useState(null); const [facultyId, setFacultyId] = useState(null); const query = Array.isArray(queryParam) ? queryParam.join(',') : queryParam; - const debouncedQuery = useDebounce(query, 300); + const debouncedQuery = useDebounce(query, 200); const getSearchUrl = useMemo(() => getSearchUrlPaginatedGetter(debouncedQuery, sortOrder, departmentId, facultyId), [ debouncedQuery, sortOrder,