diff --git a/source/package.json b/source/package.json index cc5ad55..0574ae5 100644 --- a/source/package.json +++ b/source/package.json @@ -25,6 +25,7 @@ "@types/elasticlunr": "^0.9.2", "@types/highlight.js": "^10.1.0", "@types/react-router-hash-link": "^2.4.1", + "@types/react-select": "^4.0.17", "date-fns": "^2.23.0", "elasticlunr": "^0.9.5", "gray-matter": "^4.0.3", @@ -41,11 +42,14 @@ "react-collapse": "^5.1.0", "react-date-range": "^1.3.0", "react-device-detect": "^1.17.0", + "react-dnd": "^14.0.3", + "react-dnd-html5-backend": "^14.0.1", "react-dom": "^17.0.2", "react-helmet-async": "^1.0.9", "react-router-dom": "^5.2.0", "react-router-hash-link": "^2.4.3", "react-scripts": "^4.0.3", + "react-select": "^4.3.1", "react-tooltip": "^4.2.21", "read-time-estimate": "^0.0.3", "styled-components": "^5.3.0", diff --git a/source/src/components/Tag.tsx b/source/src/components/Tag.tsx index 369f5a4..dc01739 100644 --- a/source/src/components/Tag.tsx +++ b/source/src/components/Tag.tsx @@ -17,12 +17,13 @@ const StyledTag = styled.div` interface TagProps { text: string + onClick?: (event: React.MouseEvent) => void } export default class Tag extends React.Component { render() { return ( - +  {this.props.text} ) diff --git a/source/src/pages/Search.tsx b/source/src/pages/Search.tsx index 070d349..c5881f9 100644 --- a/source/src/pages/Search.tsx +++ b/source/src/pages/Search.tsx @@ -1,26 +1,32 @@ import { useEffect, useState, useRef } from "react" -import styled from "styled-components" +import styled, { ThemeConsumer } from "styled-components" import { useLocation, useHistory } from "react-router-dom" import { Helmet } from "react-helmet-async" import { DateRange, Range, OnDateRangeChangeProps } from "react-date-range" +import Select from "react-select" import queryString from "query-string" // parsing url query import elasticlunr from "elasticlunr" // search engine import _map from "../data/map.json" -import searchIndex from "../data/search.json" +import searchData from "../data/search.json" import theming from "../theming" import "react-date-range/dist/styles.css" import "react-date-range/dist/theme/default.css" -import Tag from "../components/Tag" -import TagList from "../components/TagList" import PostCard from "../components/PostCard" import { Map } from "../types/typings" const map: Map = _map +const searchIndex = elasticlunr.Index.load(searchData as never) + +interface TagsData { + value: string + label: string +} + const StyledSearch = styled.div` text-align: center; ` @@ -80,6 +86,16 @@ const StyledSearchBar = styled.input` })}; ` +const StyledReactTagsContainer = styled.div` + width: 100%; +` + +const options: TagsData[] = [ + ...map.meta.tags.map((elem) => { + return { value: elem, label: elem } + }), +] + // check if post date is withing the range function isDateInRange( dateToCompare: string, @@ -106,7 +122,6 @@ export default function Search() { } function _Search() { - const [index] = useState(elasticlunr.Index.load(searchIndex as never)) const inputRef = useRef(null) const _history = useHistory() @@ -133,6 +148,11 @@ function _Search() { const [dateRange, setDateRange] = useState>(defaultDateRange) const [postCards, setPostCards] = useState([]) const [searchInput, setSearchInput] = useState(query.query) + const [selectedTags, setSelectedOption] = useState( + query.tags.map((elem) => { + return { label: elem, value: elem } + }) + ) function doSearch() { _history.push({ @@ -153,7 +173,7 @@ function _Search() { try { const _postCards: unknown[] = [] - for (const res of index.search(searchInput)) { + for (const res of searchIndex.search(searchInput)) { const postData = map.posts[res.ref] // if post data exists, @@ -267,87 +287,105 @@ function _Search() { doSearch() }} /> -
-
- -
-
- - - {query.tags.length > 0 && - query.tags.map((tag) => { - return - })} - - +

Filters

+ + + {(theme) => ( +