implement UI for project slug

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 (
-    <Switch>
-      <Route path="/project" component={ProjectPage} />
-      <Redirect to="/project" />
-    </Switch>
+    <Router>
+      <Switch>
+        <Route path="/map/publish" component={PublishingMap} />
+        <Route path="/map/editor" component={EditorMap} />
+        <Route path="/project" component={ProjectPage} />
+        <Redirect to="/project" />
+      </Switch>
+    </Router>
   );
 };
 

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 (
+    <>
+      <ProjectMap />
+      <Layout style={{ height: "90vh" }}>
+        <Layout.Content>
+          <Typography.Title style={{ textAlign: "center", marginTop: 15 }}>
+            Ini Component Editor Map
+          </Typography.Title>
+        </Layout.Content>
+      </Layout>
+    </>
+  );
+};
+
+export default EditorMap;

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 (
+    <Layout>
+      <Layout.Header style={{ backgroundColor: "#fff" }}>
+        <Row align="middle" justify="space-between">
+          <Row gutter={26} align="middle" justify="space-between">
+            <Col>
+              <Form.Item name="dropdown" style={{ margin: 0 }}>
+                <Select
+                  defaultValue="Blueprint"
+                  value="blueprint"
+                  bordered={false}
+                  style={{ width: 120, fontWeight: "bold" }}
+                >
+                  <Option value="Blueprint">Blueprint</Option>
+                  <Option value="Blueprint2">Blueprint 2</Option>
+                  <Option value="Blueprint3">Blueprint 3</Option>
+                </Select>
+              </Form.Item>
+            </Col>
+            <Col>
+              <Typography.Text
+                style={{ fontSize: 16 }}
+                editable={{ onChange: setEditableStr }}
+              >
+                {editableStr}
+              </Typography.Text>
+            </Col>
+          </Row>
+          <Row gutter={16} align="middle" justify="space-between">
+            <Col>
+              <ClusterOutlined style={{ marginRight: 10 }} />
+              <NavLink
+                to="/map/editor"
+                activeStyle={{ fontWeight: "bold" }}
+                style={{ color: "rgba(0, 0, 0, 0.65)" }}
+              >
+                Editor
+              </NavLink>
+            </Col>
+            <Col>
+              <ShareAltOutlined style={{ marginRight: 10 }} />
+              <NavLink
+                to="/map/publish"
+                activeStyle={{ fontWeight: "bold" }}
+                style={{ color: "rgba(0, 0, 0, 0.65)" }}
+              >
+                Publishing
+              </NavLink>
+            </Col>
+            <Col>
+              <Typography.Text>M. Nindra Zaka</Typography.Text>
+              <UserOutlined style={{ marginLeft: 15 }} />
+            </Col>
+          </Row>
+        </Row>
+      </Layout.Header>
+    </Layout>
+  );
+};
+
+export default ProjectMap;

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 (
+    <>
+      <ProjectMap />
+      <Layout style={{ height: "90vh" }}>
+        <Layout.Content
+          style={{
+            padding: 50,
+          }}
+        >
+          <Row align="middle" justify="center">
+            <Col
+              style={{
+                textAlign: "center",
+                padding: 60,
+                boxShadow:
+                  "4px 4px 10px rgba(0, 0, 0, 0.1), -4px 0px 10px rgba(0, 0, 0, 0.1)",
+                borderRadius: 8,
+                backgroundColor: "#FFFFFF",
+              }}
+            >
+              <Typography.Title>Share Your Map</Typography.Title>
+              <Typography.Text>Here is your map link</Typography.Text>
+              <Input
+                addonBefore="http://blueprint-indent.netlify.app/map/"
+                defaultValue="v2yKM59pQtB"
+                style={{ marginTop: 25 }}
+              />
+            </Col>
+          </Row>
+        </Layout.Content>
+      </Layout>
+    </>
+  );
+};
+
+export default PublishingMap;

src/modules/LoggedIn/Map/index.tsx

@@ -0,0 +1 @@
+export { default } from "./ProjectMap";

src/modules/LoggedIn/Project/ProjectFilter.tsx

@@ -34,7 +34,17 @@ const projectSortOptions: ProjectSortOption[] = [
 
 const ProjectFilter = () => {
   const projectSyncContext = useProjectSyncContext();
-
+  const [searchQuery, setsearchQuery] = React.useState<string>(
+    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<HTMLInputElement>) => {
+      setsearchQuery(event.target.value);
+    },
+    []
+  );
+
   return (
     <Form>
       <Row gutter={16}>
@@ -77,6 +94,8 @@ const ProjectFilter = () => {
         <Col>
           <Search
             placeholder="Search Project Name Card"
+            value={searchQuery}
+            onChange={handleQueryChange}
             style={{ width: 200 }}
           />
         </Col>

src/modules/LoggedIn/Project/ProjectSyncContext.tsx

@@ -25,16 +25,18 @@ type ProjectSyncValue = {
   setSortBy: (sortBy: string) => void;
   sortDirection: "asc" | "desc";
   setSortDirection: (sortDirection: "asc" | "desc") => void;
+  searchQuery: string;
+  setsearchQuery: (searchQuery: string) => void;
 };
 
 export const useProjectSync = (): ProjectSyncValue => {
   const [sortBy, setSortBy] = React.useState<string>("createdAt");
   const [sortDirection, setSortDirection] = React.useState<"asc" | "desc">(
     "desc"
   );
+  const [searchQuery, setsearchQuery] = React.useState<string>("");
   const [page, setPage] = React.useState<number>(1);
   const [hasNextPage, setHasNextPage] = React.useState<boolean>(false);
-
   const {
     data,
     isValidating,
@@ -44,7 +46,7 @@ export const useProjectSync = (): ProjectSyncValue => {
     errorMutate,
     request,
   } = useRequest<Project[]>(
-    `/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<ProjectSyncValue>({
   setSortBy: () => {},
   sortDirection: "asc",
   setSortDirection: () => {},
+  searchQuery: "",
+  setsearchQuery: () => {},
 });
 
 export const ProjectProvider = (props: { children: React.ReactNode }) => {