From cf704af2c4d37ae119170c84d057d5bc6bd3a4ef Mon Sep 17 00:00:00 2001 From: Naufal Yukafi Date: Wed, 26 Aug 2020 08:09:24 +0700 Subject: [PATCH 1/3] integrate search project to backend --- src/modules/LoggedIn/Project/ProjectFilter.tsx | 3 +++ src/modules/LoggedIn/Project/ProjectSyncContext.tsx | 10 ++++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/modules/LoggedIn/Project/ProjectFilter.tsx b/src/modules/LoggedIn/Project/ProjectFilter.tsx index 7b60667..4fb541d 100644 --- a/src/modules/LoggedIn/Project/ProjectFilter.tsx +++ b/src/modules/LoggedIn/Project/ProjectFilter.tsx @@ -77,6 +77,9 @@ const ProjectFilter = () => { + projectSyncContext.setSearchByName(item.target.value) + } style={{ width: 200 }} /> diff --git a/src/modules/LoggedIn/Project/ProjectSyncContext.tsx b/src/modules/LoggedIn/Project/ProjectSyncContext.tsx index 7db55fa..3b86304 100644 --- a/src/modules/LoggedIn/Project/ProjectSyncContext.tsx +++ b/src/modules/LoggedIn/Project/ProjectSyncContext.tsx @@ -25,6 +25,8 @@ type ProjectSyncValue = { setSortBy: (sortBy: string) => void; sortDirection: "asc" | "desc"; setSortDirection: (sortDirection: "asc" | "desc") => void; + searchByName: string; + setSearchByName: (searchByName: string) => void; }; export const useProjectSync = (): ProjectSyncValue => { @@ -32,9 +34,9 @@ export const useProjectSync = (): ProjectSyncValue => { const [sortDirection, setSortDirection] = React.useState<"asc" | "desc">( "desc" ); + const [searchByName, setSearchByName] = React.useState(""); const [page, setPage] = React.useState(1); const [hasNextPage, setHasNextPage] = React.useState(false); - const { data, isValidating, @@ -44,7 +46,7 @@ export const useProjectSync = (): ProjectSyncValue => { errorMutate, request, } = useRequest( - `/project?page=1&itemPerPage=8&sortBy=${sortBy}&sortDirection=${sortDirection}` + `/project?page=1&itemPerPage=8&sortBy=${sortBy}&sortDirection=${sortDirection}&name=${searchByName}` ); const projects = React.useMemo(() => { @@ -171,6 +173,8 @@ export const useProjectSync = (): ProjectSyncValue => { setSortBy, sortDirection, setSortDirection, + searchByName, + setSearchByName, }; }; @@ -187,6 +191,8 @@ const ProjectContext = React.createContext({ setSortBy: () => {}, sortDirection: "asc", setSortDirection: () => {}, + searchByName: "", + setSearchByName: () => {}, }); export const ProjectProvider = (props: { children: React.ReactNode }) => { From 7bec61d86187b7d57c1afd3f67b523e914023757 Mon Sep 17 00:00:00 2001 From: Naufal Yukafi Date: Fri, 28 Aug 2020 08:10:41 +0700 Subject: [PATCH 2/3] update projectfilter --- src/modules/LoggedIn/Project/ProjectFilter.tsx | 11 ++++++++--- .../LoggedIn/Project/ProjectSyncContext.tsx | 16 ++++++++-------- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/modules/LoggedIn/Project/ProjectFilter.tsx b/src/modules/LoggedIn/Project/ProjectFilter.tsx index 4fb541d..a53d61f 100644 --- a/src/modules/LoggedIn/Project/ProjectFilter.tsx +++ b/src/modules/LoggedIn/Project/ProjectFilter.tsx @@ -57,6 +57,13 @@ const ProjectFilter = () => { )?.name; }, [projectSyncContext.sortBy, projectSyncContext.sortDirection]); + const handleQueryChange = React.useCallback( + item => { + projectSyncContext.setsearchQuery(item.target.value); + }, + [projectSyncContext] + ); + return (
@@ -77,9 +84,7 @@ const ProjectFilter = () => { - projectSyncContext.setSearchByName(item.target.value) - } + onChange={handleQueryChange} style={{ width: 200 }} /> diff --git a/src/modules/LoggedIn/Project/ProjectSyncContext.tsx b/src/modules/LoggedIn/Project/ProjectSyncContext.tsx index 3b86304..3881a76 100644 --- a/src/modules/LoggedIn/Project/ProjectSyncContext.tsx +++ b/src/modules/LoggedIn/Project/ProjectSyncContext.tsx @@ -25,8 +25,8 @@ type ProjectSyncValue = { setSortBy: (sortBy: string) => void; sortDirection: "asc" | "desc"; setSortDirection: (sortDirection: "asc" | "desc") => void; - searchByName: string; - setSearchByName: (searchByName: string) => void; + searchQuery: string; + setsearchQuery: (searchQuery: string) => void; }; export const useProjectSync = (): ProjectSyncValue => { @@ -34,7 +34,7 @@ export const useProjectSync = (): ProjectSyncValue => { const [sortDirection, setSortDirection] = React.useState<"asc" | "desc">( "desc" ); - const [searchByName, setSearchByName] = React.useState(""); + const [searchQuery, setsearchQuery] = React.useState(""); const [page, setPage] = React.useState(1); const [hasNextPage, setHasNextPage] = React.useState(false); const { @@ -46,7 +46,7 @@ export const useProjectSync = (): ProjectSyncValue => { errorMutate, request, } = useRequest( - `/project?page=1&itemPerPage=8&sortBy=${sortBy}&sortDirection=${sortDirection}&name=${searchByName}` + `/project?page=1&itemPerPage=8&sortBy=${sortBy}&sortDirection=${sortDirection}&name=${searchQuery}` ); const projects = React.useMemo(() => { @@ -173,8 +173,8 @@ export const useProjectSync = (): ProjectSyncValue => { setSortBy, sortDirection, setSortDirection, - searchByName, - setSearchByName, + searchQuery, + setsearchQuery, }; }; @@ -191,8 +191,8 @@ const ProjectContext = React.createContext({ setSortBy: () => {}, sortDirection: "asc", setSortDirection: () => {}, - searchByName: "", - setSearchByName: () => {}, + searchQuery: "", + setsearchQuery: () => {}, }); export const ProjectProvider = (props: { children: React.ReactNode }) => { From 38e15e914d6d1d3fa4955bc3880d01088f6abb95 Mon Sep 17 00:00:00 2001 From: Naufal Yukafi Date: Fri, 28 Aug 2020 08:56:22 +0700 Subject: [PATCH 3/3] add debounce --- .../LoggedIn/Project/ProjectFilter.tsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/modules/LoggedIn/Project/ProjectFilter.tsx b/src/modules/LoggedIn/Project/ProjectFilter.tsx index a53d61f..e787c03 100644 --- a/src/modules/LoggedIn/Project/ProjectFilter.tsx +++ b/src/modules/LoggedIn/Project/ProjectFilter.tsx @@ -34,7 +34,17 @@ const projectSortOptions: ProjectSortOption[] = [ const ProjectFilter = () => { const projectSyncContext = useProjectSyncContext(); - + const [searchQuery, setsearchQuery] = React.useState( + projectSyncContext.searchQuery + ); + React.useEffect(() => { + const timeOut = setTimeout(() => { + projectSyncContext.setsearchQuery(searchQuery); + }, 600); + return () => { + clearTimeout(timeOut); + }; + }, [searchQuery]); const handleSortChange = React.useCallback( (sortName: string) => { const selectedProjectSortOption = projectSortOptions.find( @@ -58,10 +68,10 @@ const ProjectFilter = () => { }, [projectSyncContext.sortBy, projectSyncContext.sortDirection]); const handleQueryChange = React.useCallback( - item => { - projectSyncContext.setsearchQuery(item.target.value); + (event: React.ChangeEvent) => { + setsearchQuery(event.target.value); }, - [projectSyncContext] + [] ); return ( @@ -84,6 +94,7 @@ const ProjectFilter = () => {