From cf704af2c4d37ae119170c84d057d5bc6bd3a4ef Mon Sep 17 00:00:00 2001 From: Naufal Yukafi Date: Wed, 26 Aug 2020 08:09:24 +0700 Subject: [PATCH 1/4] 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/4] 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/4] 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 = () => { From 86911970c7428646aadedc6fc781d61a1d88df85 Mon Sep 17 00:00:00 2001 From: Naufal Yukafi Date: Sat, 5 Sep 2020 11:59:53 +0700 Subject: [PATCH 4/4] implement UI for project slug --- src/modules/LoggedIn/LoggedInPage.tsx | 22 +++++-- src/modules/LoggedIn/Map/EditorMap.tsx | 19 ++++++ src/modules/LoggedIn/Map/ProjectMap.tsx | 72 ++++++++++++++++++++++ src/modules/LoggedIn/Map/PublishingMap.tsx | 41 ++++++++++++ src/modules/LoggedIn/Map/index.tsx | 1 + 5 files changed, 149 insertions(+), 6 deletions(-) create mode 100644 src/modules/LoggedIn/Map/EditorMap.tsx create mode 100644 src/modules/LoggedIn/Map/ProjectMap.tsx create mode 100644 src/modules/LoggedIn/Map/PublishingMap.tsx create mode 100644 src/modules/LoggedIn/Map/index.tsx diff --git a/src/modules/LoggedIn/LoggedInPage.tsx b/src/modules/LoggedIn/LoggedInPage.tsx index 928e249..b0c5436 100644 --- a/src/modules/LoggedIn/LoggedInPage.tsx +++ b/src/modules/LoggedIn/LoggedInPage.tsx @@ -1,13 +1,23 @@ import React from "react"; -import { Switch, Route, Redirect } from "react-router-dom"; +import { + BrowserRouter as Router, + Switch, + Route, + Redirect, +} from "react-router-dom"; import ProjectPage from "./Project"; - +import EditorMap from "./Map/EditorMap"; +import PublishingMap from "./Map/PublishingMap"; const LoggedInPage = () => { return ( - - - - + + + + + + + + ); }; diff --git a/src/modules/LoggedIn/Map/EditorMap.tsx b/src/modules/LoggedIn/Map/EditorMap.tsx new file mode 100644 index 0000000..40a18e8 --- /dev/null +++ b/src/modules/LoggedIn/Map/EditorMap.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import ProjectMap from "./ProjectMap"; +import { Layout, Typography, Row, Col, Input } from "antd"; +const EditorMap = () => { + return ( + <> + + + + + Ini Component Editor Map + + + + + ); +}; + +export default EditorMap; diff --git a/src/modules/LoggedIn/Map/ProjectMap.tsx b/src/modules/LoggedIn/Map/ProjectMap.tsx new file mode 100644 index 0000000..51239ac --- /dev/null +++ b/src/modules/LoggedIn/Map/ProjectMap.tsx @@ -0,0 +1,72 @@ +import React from "react"; +import { Layout, Typography, Row, Col, Select, Form } from "antd"; +import { + UserOutlined, + ShareAltOutlined, + ClusterOutlined, +} from "@ant-design/icons"; +import { NavLink } from "react-router-dom"; +const { Option } = Select; +const ProjectMap = () => { + const [editableStr, setEditableStr] = React.useState("Jawa Timur Park"); + return ( + + + + + + + + + + + + {editableStr} + + + + + + + + Editor + + + + + + Publishing + + + + M. Nindra Zaka + + + + + + + ); +}; + +export default ProjectMap; diff --git a/src/modules/LoggedIn/Map/PublishingMap.tsx b/src/modules/LoggedIn/Map/PublishingMap.tsx new file mode 100644 index 0000000..a85b47a --- /dev/null +++ b/src/modules/LoggedIn/Map/PublishingMap.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import { Layout, Typography, Row, Col, Input } from "antd"; +import ProjectMap from "./ProjectMap"; + +const PublishingMap = () => { + return ( + <> + + + + + + Share Your Map + Here is your map link + + + + + + + ); +}; + +export default PublishingMap; diff --git a/src/modules/LoggedIn/Map/index.tsx b/src/modules/LoggedIn/Map/index.tsx new file mode 100644 index 0000000..32fbbef --- /dev/null +++ b/src/modules/LoggedIn/Map/index.tsx @@ -0,0 +1 @@ +export { default } from "./ProjectMap";