changed Explore to Search and added date picker
This commit is contained in:
parent
c328841554
commit
fb0d5a3e26
7 changed files with 123 additions and 59 deletions
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<Explore />
|
||||
<Route exact path="/search">
|
||||
<Search />
|
||||
</Route>
|
||||
|
||||
<Route exact path="/portfolio">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
110
source/src/pages/Search.tsx
Normal file
110
source/src/pages/Search.tsx
Normal file
|
|
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue