changed Explore to Search and added date picker

README.md

@@ -15,6 +15,8 @@ Tools / Frameworks / Packages used:
 |                   [gray-matter](https://github.com/jonschlinkert/gray-matter) | parsing markdown                                      |
 | [local-storage-fallback](https://github.com/ripeworks/local-storage-fallback) | storing theme choice                                  |
 |                      [react-tooltip](https://github.com/wwayne/react-tooltip) | Tooltips                                              |
+|            [react-date-range](https://github.com/hypeserver/react-date-range) | Date picker for search page                           |
+|                  [query-string](https://github.com/sindresorhus/query-string) | URL query parsing                                     |
 |   [styled-components](https://github.com/styled-components/styled-components) | easier CSS styling                                    |
 |         [styled-theming](https://github.com/styled-components/styled-theming) | Theming                                               |
 |                                    [eslint](https://github.com/eslint/eslint) | code analysis                                         |

source/package.json

@@ -26,11 +26,14 @@
 		"@testing-library/jest-dom": "^5.14.1",
 		"@testing-library/react": "^11.2.7",
 		"@testing-library/user-event": "^13.1.9",
+		"date-fns": "^2.22.1",
 		"gray-matter": "^4.0.3",
 		"local-storage-fallback": "^4.1.2",
 		"markdown-toc": "^1.2.0",
 		"marked": "^2.1.1",
+		"query-string": "^7.0.1",
 		"react": "^17.0.2",
+		"react-date-range": "^1.3.0",
 		"react-device-detect": "^1.17.0",
 		"react-dom": "^17.0.2",
 		"react-helmet-async": "^1.0.9",

source/src/App.tsx

@@ -12,7 +12,7 @@ import Navbar from "./components/Navbar"
 import Footer from "./components/Footer"
 
 import PostList from "./pages/PostList"
-import Explore from "./pages/Explore"
+import Search from "./pages/Search"
 import Page from "./pages/Page"
 import NotFound from "./pages/NotFound"
 import Portfolio from "./pages/Portfolio"
@@ -225,8 +225,8 @@ export default class App extends React.Component<AppProps, AppState> {
 										/>
 									</Route>
 
-									<Route exact path="/explore">
+									<Route exact path="/search">
-										<Explore />
+										<Search />
 									</Route>
 
 									<Route exact path="/portfolio">

source/src/components/Navbar.tsx

@@ -11,7 +11,7 @@ import NavbarData from "../data/NavbarData"
 
 import Sidebar from "./Sidebar"
 import ThemeToggleButton from "./ThemeToggleButton"
-import { faSearch } from "@fortawesome/free-solid-svg-icons"
+// import { faSearch } from "@fortawesome/free-solid-svg-icons"
 
 const StyledNav = styled.nav`
 	position: absolute;
@@ -102,10 +102,10 @@ export default class Navbar extends React.Component {
 						</ReactTooltip>
 					)}
 
-					<StyledLink
+					{/* <StyledLink
 						data-tip
 						data-for="search"
-						to={`${process.env.PUBLIC_URL}/explore`}
+						to={`${process.env.PUBLIC_URL}/search`}
 					>
 						<FontAwesomeIcon icon={faSearch} />
 					</StyledLink>
@@ -113,7 +113,7 @@ export default class Navbar extends React.Component {
 						<ReactTooltip id="search" type="dark" effect="solid">
 							<span>Search</span>
 						</ReactTooltip>
-					)}
+					)} */}
 
 					<Sidebar />
 				</StyledContainer>

source/src/data/NavbarData.tsx

@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faHome, faUserTie, faHiking } from "@fortawesome/free-solid-svg-icons"
+import { faHome, faUserTie } from "@fortawesome/free-solid-svg-icons"
 
 // item from sidebar data
 export type Item = {
@@ -17,11 +17,6 @@ const NavbarData: Array<Item> = [
 		path: "/",
 		icon: <FontAwesomeIcon icon={faHome} />,
 	},
-	{
-		title: "Explore",
-		path: "/explore",
-		icon: <FontAwesomeIcon icon={faHiking} />,
-	},
 	{
 		title: "Portfolio",
 		path: "/portfolio",

source/src/pages/Explore.tsx

@@ -1,46 +0,0 @@
-import React from "react"
-import styled from "styled-components"
-import { Helmet } from "react-helmet-async"
-
-import theming from "../theming"
-
-const StyledNotFound = styled.div`
-	margin: auto;
-	margin-top: 2rem;
-	text-align: center;
-	color: ${(props) =>
-		theming.theme(props.theme.currentTheme, {
-			light: "#111111",
-			dark: "#EEEEEE",
-		})};
-`
-
-export default class Explore extends React.Component {
-	render() {
-		return (
-			<>
-				<Helmet>
-					<title>pomp | Explore</title>
-
-					<meta property="og:title" content="Explore" />
-					<meta property="og:type" content="website" />
-					<meta
-						property="og:url"
-						content={`${process.env.PUBLIC_URL}`}
-					/>
-					<meta
-						property="og:image"
-						content={`${process.env.PUBLIC_URL}/icon/icon.svg`}
-					/>
-					<meta
-						property="og:description"
-						content="search and explore"
-					/>
-				</Helmet>
-				<StyledNotFound className="card main-content">
-					Explore!!
-				</StyledNotFound>
-			</>
-		)
-	}
-}

source/src/pages/Search.tsx

@@ -0,0 +1,110 @@
+import React from "react"
+import styled from "styled-components"
+import { Link } from "react-router-dom"
+import { Helmet } from "react-helmet-async"
+import { DateRange } from "react-date-range"
+import queryString from "query-string"
+
+import "react-date-range/dist/styles.css"
+import "react-date-range/dist/theme/default.css"
+
+import theming from "../theming"
+import pages from "../data/posts.json"
+
+const StyledSearch = styled.div`
+	margin: auto;
+	margin-top: 2rem;
+	text-align: center;
+	color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
+			light: "#111111",
+			dark: "#EEEEEE",
+		})};
+`
+
+interface SearchProps {}
+
+interface SearchState {
+	tags: string[]
+	dateRange: unknown[]
+	query: {
+		from?: string // YYYYMMDD
+		to?: string // YYYYMMDD
+		tags?: string[] // ["include", "!doNotInclude"]
+	}
+}
+
+export default class Search extends React.Component<SearchProps, SearchState> {
+	constructor(props) {
+		super(props)
+		const tags: string[] = []
+
+		for (const tag in pages.tags) {
+			tags.push(tag)
+		}
+
+		const parsedQuery = queryString.parse(location.search)
+		parsedQuery.tags = parsedQuery.tags
+			? (parsedQuery.tags as string).split(",")
+			: []
+
+		this.state = {
+			tags: tags,
+			dateRange: [
+				{
+					startDate: new Date(),
+					endDate: null,
+					key: "selection",
+				},
+			],
+			query: parsedQuery,
+		}
+	}
+
+	render() {
+		return (
+			<>
+				<Helmet>
+					<title>pomp | Search</title>
+
+					<meta property="og:title" content="Search" />
+					<meta property="og:type" content="website" />
+					<meta
+						property="og:url"
+						content={`${process.env.PUBLIC_URL}`}
+					/>
+					<meta
+						property="og:image"
+						content={`${process.env.PUBLIC_URL}/icon/icon.svg`}
+					/>
+					<meta property="og:description" content="search" />
+				</Helmet>
+
+				<StyledSearch className="card main-content">
+					<DateRange
+						editableDateInputs={true}
+						moveRangeOnFirstSelection={false}
+						retainEndDateOnFirstSelection={true}
+						ranges={this.state.dateRange}
+						onChange={(item) => {
+							this.setState({ dateRange: [item.selection] })
+						}}
+					/>
+					<br />
+					available tags: {this.state.tags}
+					<br />
+					<br />
+					selected tags: {this.state.query.tags?.join(", ")}
+					<br />
+					date from: {this.state.query.from}
+					<br />
+					date to: {this.state.query.to}
+					<br />
+					<Link to="/search?&from=YYYYMMDD&to=TTTTMMDD&tags=include,!exclude">
+						Search
+					</Link>
+				</StyledSearch>
+			</>
+		)
+	}
+}