split search page components
This commit is contained in:
parent
a771fb2038
commit
3f4e244384
3 changed files with 224 additions and 205 deletions
32
source/src/pages/Search/SearchBar.tsx
Normal file
32
source/src/pages/Search/SearchBar.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import styled from "styled-components"
|
||||
|
||||
import theming from "../../styles/theming"
|
||||
|
||||
const StyledSearchBar = styled.input`
|
||||
width: 100%;
|
||||
border-radius: 100px; /* arbitrarily large value */
|
||||
height: 3rem;
|
||||
text-indent: 1rem;
|
||||
font-size: 1.25rem;
|
||||
outline: none;
|
||||
|
||||
border: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "1px solid #ccc",
|
||||
dark: "1px solid #555",
|
||||
})};
|
||||
|
||||
background-color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: theming.dark.color1,
|
||||
dark: theming.dark.backgroundColor1,
|
||||
})};
|
||||
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: theming.light.color1,
|
||||
dark: theming.dark.color1,
|
||||
})};
|
||||
`
|
||||
|
||||
export default StyledSearchBar
|
||||
168
source/src/pages/Search/TagSelect.tsx
Normal file
168
source/src/pages/Search/TagSelect.tsx
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
import styled, { ThemeConsumer } from "styled-components"
|
||||
import { useNavigate, useSearchParams } from "react-router-dom"
|
||||
import Select from "react-select"
|
||||
|
||||
import theming from "../../styles/theming"
|
||||
|
||||
import { Query } from "."
|
||||
import { Map } from "../../types/typings"
|
||||
import _map from "../../data/map.json"
|
||||
|
||||
const map: Map = _map
|
||||
|
||||
const StyledReactTagsContainer = styled.div`
|
||||
width: 100%;
|
||||
`
|
||||
|
||||
export interface TagsData {
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
|
||||
const options: TagsData[] = [
|
||||
...map.meta.tags.map((elem) => ({ value: elem, label: elem })),
|
||||
]
|
||||
|
||||
interface TagSelectProps {
|
||||
query: Query
|
||||
selectedTags?: TagsData[]
|
||||
setSelectedOption: React.Dispatch<
|
||||
React.SetStateAction<TagsData[] | undefined>
|
||||
>
|
||||
}
|
||||
|
||||
const TagSelect = (props: TagSelectProps) => {
|
||||
const { query, selectedTags, setSelectedOption } = props
|
||||
|
||||
const navigate = useNavigate()
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const [_, setSearchParams] = useSearchParams()
|
||||
|
||||
return (
|
||||
<StyledReactTagsContainer>
|
||||
<ThemeConsumer>
|
||||
{(currentTheme) => (
|
||||
<Select
|
||||
theme={(theme) => ({
|
||||
...theme,
|
||||
colors: {
|
||||
...theme.colors,
|
||||
neutral0: theming
|
||||
.theme(currentTheme.currentTheme, {
|
||||
light: theming.light.backgroundColor1,
|
||||
dark: theming.dark.backgroundColor1,
|
||||
})
|
||||
.toString(),
|
||||
neutral5: "hsl(0, 0%, 20%)",
|
||||
neutral10: "hsl(0, 0%, 30%)",
|
||||
neutral20: "hsl(0, 0%, 40%)",
|
||||
neutral30: "hsl(0, 0%, 50%)",
|
||||
neutral40: "hsl(0, 0%, 60%)",
|
||||
neutral50: "hsl(0, 0%, 70%)",
|
||||
neutral60: "hsl(0, 0%, 80%)",
|
||||
neutral70: "hsl(0, 0%, 90%)",
|
||||
neutral80: "hsl(0, 0%, 95%)",
|
||||
neutral90: "hsl(0, 0%, 100%)",
|
||||
primary25: "hotpink",
|
||||
primary: "black",
|
||||
},
|
||||
})}
|
||||
styles={{
|
||||
option: (styles) => ({
|
||||
...styles,
|
||||
backgroundColor: theming
|
||||
.theme(currentTheme.currentTheme, {
|
||||
light: theming.light.backgroundColor1,
|
||||
dark: theming.dark.backgroundColor1,
|
||||
})
|
||||
.toString(),
|
||||
color: theming
|
||||
.theme(currentTheme.currentTheme, {
|
||||
light: theming.light.color1,
|
||||
dark: theming.dark.color1,
|
||||
})
|
||||
.toString(),
|
||||
cursor: "pointer",
|
||||
padding: 10,
|
||||
":hover": {
|
||||
backgroundColor: theming
|
||||
.theme(currentTheme.currentTheme, {
|
||||
light: theming.light
|
||||
.backgroundColor0,
|
||||
dark: theming.dark.backgroundColor0,
|
||||
})
|
||||
.toString(),
|
||||
},
|
||||
}),
|
||||
control: (styles) => ({
|
||||
...styles,
|
||||
backgroundColor: theming
|
||||
.theme(currentTheme.currentTheme, {
|
||||
light: theming.light.backgroundColor1,
|
||||
dark: theming.dark.backgroundColor1,
|
||||
})
|
||||
.toString(),
|
||||
border: theming.theme(
|
||||
currentTheme.currentTheme,
|
||||
{
|
||||
light: "1px solid #ccc",
|
||||
dark: "1px solid #555",
|
||||
}
|
||||
),
|
||||
}),
|
||||
multiValue: (styles) => ({
|
||||
...styles,
|
||||
color: "white",
|
||||
backgroundColor: theming.color.linkColor,
|
||||
borderRadius: "5px",
|
||||
}),
|
||||
multiValueLabel: (styles) => ({
|
||||
...styles,
|
||||
marginLeft: "0.2rem",
|
||||
marginRight: "0.2rem",
|
||||
}),
|
||||
multiValueRemove: (styles) => ({
|
||||
...styles,
|
||||
marginLeft: "0.2rem",
|
||||
":hover": {
|
||||
backgroundColor: "white",
|
||||
color: theming.color.linkColor,
|
||||
},
|
||||
}),
|
||||
}}
|
||||
defaultValue={selectedTags}
|
||||
onChange={(newSelectedTags) => {
|
||||
setSelectedOption(newSelectedTags as TagsData[])
|
||||
|
||||
navigate("/search")
|
||||
|
||||
const tags =
|
||||
newSelectedTags
|
||||
.map((elem) => elem.value)
|
||||
.join(",") || undefined
|
||||
|
||||
setSearchParams({
|
||||
...(query.query && {
|
||||
query: query.query,
|
||||
}),
|
||||
...(query.from && {
|
||||
from: query.from,
|
||||
}),
|
||||
...(query.to && {
|
||||
to: query.to,
|
||||
}),
|
||||
...(tags && {
|
||||
tags: tags,
|
||||
}),
|
||||
})
|
||||
}}
|
||||
options={options}
|
||||
isMulti
|
||||
/>
|
||||
)}
|
||||
</ThemeConsumer>
|
||||
</StyledReactTagsContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default TagSelect
|
||||
|
|
@ -1,22 +1,25 @@
|
|||
/* eslint-disable react/prop-types */
|
||||
|
||||
import { useEffect, useState, useRef } from "react"
|
||||
import styled, { ThemeConsumer } from "styled-components"
|
||||
import styled from "styled-components"
|
||||
import { useLocation, useNavigate, useSearchParams } from "react-router-dom"
|
||||
import { Helmet } from "react-helmet-async"
|
||||
import { DateRange, Range } 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 searchData from "../data/search.json"
|
||||
import theming from "../styles/theming"
|
||||
import _map from "../../data/map.json"
|
||||
import searchData from "../../data/search.json"
|
||||
import theming from "../../styles/theming"
|
||||
|
||||
import PostCard from "../components/PostCard"
|
||||
import MainContent from "../components/MainContent"
|
||||
import PostCard from "../../components/PostCard"
|
||||
import MainContent from "../../components/MainContent"
|
||||
|
||||
import { Map } from "../types/typings"
|
||||
import SearchBar from "./SearchBar"
|
||||
import TagSelect, { TagsData } from "./TagSelect"
|
||||
|
||||
import { Map } from "../../types/typings"
|
||||
|
||||
import "react-date-range/dist/styles.css"
|
||||
import "react-date-range/dist/theme/default.css"
|
||||
|
|
@ -25,12 +28,7 @@ const map: Map = _map
|
|||
|
||||
const searchIndex = elasticlunr.Index.load(searchData as never)
|
||||
|
||||
interface TagsData {
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
|
||||
interface Query {
|
||||
export interface Query {
|
||||
from: string
|
||||
to: string
|
||||
tags: string[]
|
||||
|
|
@ -41,6 +39,17 @@ const StyledSearch = styled(MainContent)`
|
|||
text-align: center;
|
||||
`
|
||||
|
||||
const ClearDateButton = styled.button`
|
||||
width: 100%;
|
||||
line-height: 2.5rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
background-color: tomato; /* 🍅 mmm tomato 🍅 */
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
`
|
||||
|
||||
const StyledSearchContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
|
@ -69,52 +78,6 @@ const StyledDateRange = styled(DateRange)`
|
|||
}
|
||||
`
|
||||
|
||||
const StyledSearchBar = styled.input`
|
||||
width: 100%;
|
||||
border-radius: 100px; /* arbitrarily large value */
|
||||
height: 3rem;
|
||||
text-indent: 1rem;
|
||||
font-size: 1.25rem;
|
||||
outline: none;
|
||||
|
||||
border: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "1px solid #ccc",
|
||||
dark: "1px solid #555",
|
||||
})};
|
||||
|
||||
background-color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: theming.dark.color1,
|
||||
dark: theming.dark.backgroundColor1,
|
||||
})};
|
||||
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: theming.light.color1,
|
||||
dark: theming.dark.color1,
|
||||
})};
|
||||
`
|
||||
|
||||
const StyledReactTagsContainer = styled.div`
|
||||
width: 100%;
|
||||
`
|
||||
|
||||
const ClearDateButton = styled.button`
|
||||
width: 100%;
|
||||
line-height: 2.5rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
background-color: tomato; /* 🍅 mmm tomato 🍅 */
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
`
|
||||
|
||||
const options: TagsData[] = [
|
||||
...map.meta.tags.map((elem) => ({ value: elem, label: elem })),
|
||||
]
|
||||
|
||||
// check if post date is withing the range
|
||||
function isDateInRange(
|
||||
dateToCompare: string,
|
||||
|
|
@ -310,7 +273,7 @@ const Search = () => {
|
|||
<StyledSearchControlContainer
|
||||
onSubmit={(event) => event.preventDefault()}
|
||||
>
|
||||
<StyledSearchBar
|
||||
<SearchBar
|
||||
autoFocus
|
||||
type="text"
|
||||
ref={inputRef}
|
||||
|
|
@ -342,148 +305,4 @@ const Search = () => {
|
|||
)
|
||||
}
|
||||
|
||||
interface TagSelectProps {
|
||||
query: Query
|
||||
selectedTags?: TagsData[]
|
||||
setSelectedOption: React.Dispatch<
|
||||
React.SetStateAction<TagsData[] | undefined>
|
||||
>
|
||||
}
|
||||
|
||||
const TagSelect: React.FC<TagSelectProps> = ({
|
||||
query,
|
||||
selectedTags,
|
||||
setSelectedOption,
|
||||
}) => {
|
||||
const navigate = useNavigate()
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const [_, setSearchParams] = useSearchParams()
|
||||
|
||||
return (
|
||||
<StyledReactTagsContainer>
|
||||
<ThemeConsumer>
|
||||
{(currentTheme) => (
|
||||
<Select
|
||||
theme={(theme) => ({
|
||||
...theme,
|
||||
colors: {
|
||||
...theme.colors,
|
||||
neutral0: theming
|
||||
.theme(currentTheme.currentTheme, {
|
||||
light: theming.light.backgroundColor1,
|
||||
dark: theming.dark.backgroundColor1,
|
||||
})
|
||||
.toString(),
|
||||
neutral5: "hsl(0, 0%, 20%)",
|
||||
neutral10: "hsl(0, 0%, 30%)",
|
||||
neutral20: "hsl(0, 0%, 40%)",
|
||||
neutral30: "hsl(0, 0%, 50%)",
|
||||
neutral40: "hsl(0, 0%, 60%)",
|
||||
neutral50: "hsl(0, 0%, 70%)",
|
||||
neutral60: "hsl(0, 0%, 80%)",
|
||||
neutral70: "hsl(0, 0%, 90%)",
|
||||
neutral80: "hsl(0, 0%, 95%)",
|
||||
neutral90: "hsl(0, 0%, 100%)",
|
||||
primary25: "hotpink",
|
||||
primary: "black",
|
||||
},
|
||||
})}
|
||||
styles={{
|
||||
option: (styles) => ({
|
||||
...styles,
|
||||
backgroundColor: theming
|
||||
.theme(currentTheme.currentTheme, {
|
||||
light: theming.light.backgroundColor1,
|
||||
dark: theming.dark.backgroundColor1,
|
||||
})
|
||||
.toString(),
|
||||
color: theming
|
||||
.theme(currentTheme.currentTheme, {
|
||||
light: theming.light.color1,
|
||||
dark: theming.dark.color1,
|
||||
})
|
||||
.toString(),
|
||||
cursor: "pointer",
|
||||
padding: 10,
|
||||
":hover": {
|
||||
backgroundColor: theming
|
||||
.theme(currentTheme.currentTheme, {
|
||||
light: theming.light
|
||||
.backgroundColor0,
|
||||
dark: theming.dark.backgroundColor0,
|
||||
})
|
||||
.toString(),
|
||||
},
|
||||
}),
|
||||
control: (styles) => ({
|
||||
...styles,
|
||||
backgroundColor: theming
|
||||
.theme(currentTheme.currentTheme, {
|
||||
light: theming.light.backgroundColor1,
|
||||
dark: theming.dark.backgroundColor1,
|
||||
})
|
||||
.toString(),
|
||||
border: theming.theme(
|
||||
currentTheme.currentTheme,
|
||||
{
|
||||
light: "1px solid #ccc",
|
||||
dark: "1px solid #555",
|
||||
}
|
||||
),
|
||||
}),
|
||||
multiValue: (styles) => ({
|
||||
...styles,
|
||||
color: "white",
|
||||
backgroundColor: theming.color.linkColor,
|
||||
borderRadius: "5px",
|
||||
}),
|
||||
multiValueLabel: (styles) => ({
|
||||
...styles,
|
||||
marginLeft: "0.2rem",
|
||||
marginRight: "0.2rem",
|
||||
}),
|
||||
multiValueRemove: (styles) => ({
|
||||
...styles,
|
||||
marginLeft: "0.2rem",
|
||||
":hover": {
|
||||
backgroundColor: "white",
|
||||
color: theming.color.linkColor,
|
||||
},
|
||||
}),
|
||||
}}
|
||||
defaultValue={selectedTags}
|
||||
onChange={(newSelectedTags) => {
|
||||
setSelectedOption(newSelectedTags as TagsData[])
|
||||
|
||||
navigate("/search")
|
||||
|
||||
const tags =
|
||||
newSelectedTags
|
||||
.map((elem) => elem.value)
|
||||
.join(",") || undefined
|
||||
|
||||
setSearchParams({
|
||||
...(query.query && {
|
||||
query: query.query,
|
||||
}),
|
||||
...(query.from && {
|
||||
from: query.from,
|
||||
}),
|
||||
...(query.to && {
|
||||
to: query.to,
|
||||
}),
|
||||
...(tags && {
|
||||
tags: tags,
|
||||
}),
|
||||
})
|
||||
}}
|
||||
options={options}
|
||||
isMulti
|
||||
/>
|
||||
)}
|
||||
</ThemeConsumer>
|
||||
</StyledReactTagsContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Search
|
||||
Loading…
Add table
Add a link
Reference in a new issue