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"; diff --git a/src/modules/LoggedIn/Project/ProjectFilter.tsx b/src/modules/LoggedIn/Project/ProjectFilter.tsx index 7b60667..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( @@ -57,6 +67,13 @@ const ProjectFilter = () => { )?.name; }, [projectSyncContext.sortBy, projectSyncContext.sortDirection]); + const handleQueryChange = React.useCallback( + (event: React.ChangeEvent) => { + setsearchQuery(event.target.value); + }, + [] + ); + return (
@@ -77,6 +94,8 @@ const ProjectFilter = () => { diff --git a/src/modules/LoggedIn/Project/ProjectSyncContext.tsx b/src/modules/LoggedIn/Project/ProjectSyncContext.tsx index 7db55fa..3881a76 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; + searchQuery: string; + setsearchQuery: (searchQuery: string) => void; }; export const useProjectSync = (): ProjectSyncValue => { @@ -32,9 +34,9 @@ export const useProjectSync = (): ProjectSyncValue => { const [sortDirection, setSortDirection] = React.useState<"asc" | "desc">( "desc" ); + const [searchQuery, setsearchQuery] = 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=${searchQuery}` ); const projects = React.useMemo(() => { @@ -171,6 +173,8 @@ export const useProjectSync = (): ProjectSyncValue => { setSortBy, sortDirection, setSortDirection, + searchQuery, + setsearchQuery, }; }; @@ -187,6 +191,8 @@ const ProjectContext = React.createContext({ setSortBy: () => {}, sortDirection: "asc", setSortDirection: () => {}, + searchQuery: "", + setsearchQuery: () => {}, }); export const ProjectProvider = (props: { children: React.ReactNode }) => {