diff --git a/README.md b/README.md index 8eac7a5..6813967 100644 --- a/README.md +++ b/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 | diff --git a/source/package.json b/source/package.json index 765c088..6e78b72 100644 --- a/source/package.json +++ b/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", diff --git a/source/src/App.tsx b/source/src/App.tsx index 12583b1..c91f12d 100644 --- a/source/src/App.tsx +++ b/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 { /> - - + + diff --git a/source/src/components/Navbar.tsx b/source/src/components/Navbar.tsx index ab08ede..9097d09 100644 --- a/source/src/components/Navbar.tsx +++ b/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 { )} - @@ -113,7 +113,7 @@ export default class Navbar extends React.Component { Search - )} + )} */} diff --git a/source/src/data/NavbarData.tsx b/source/src/data/NavbarData.tsx index 0c842dc..1310a51 100644 --- a/source/src/data/NavbarData.tsx +++ b/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 = [ path: "/", icon: , }, - { - title: "Explore", - path: "/explore", - icon: , - }, { title: "Portfolio", path: "/portfolio", diff --git a/source/src/pages/Explore.tsx b/source/src/pages/Explore.tsx deleted file mode 100644 index 05d629e..0000000 --- a/source/src/pages/Explore.tsx +++ /dev/null @@ -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 ( - <> - - pomp | Explore - - - - - - - - - Explore!! - - - ) - } -} diff --git a/source/src/pages/Search.tsx b/source/src/pages/Search.tsx new file mode 100644 index 0000000..bbb0a4f --- /dev/null +++ b/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 { + 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 ( + <> + + pomp | Search + + + + + + + + + + { + this.setState({ dateRange: [item.selection] }) + }} + /> +
+ available tags: {this.state.tags} +
+
+ selected tags: {this.state.query.tags?.join(", ")} +
+ date from: {this.state.query.from} +
+ date to: {this.state.query.to} +
+ + Search + + + + ) + } +}