added localizatioon to search page
This commit is contained in:
parent
63ab00614e
commit
0bdfcd1768
2 changed files with 112 additions and 104 deletions
|
|
@ -1,10 +1,13 @@
|
||||||
import styled, { ThemeConsumer } from "styled-components"
|
import { useContext } from "react"
|
||||||
|
import styled from "styled-components"
|
||||||
import Select from "react-select"
|
import Select from "react-select"
|
||||||
|
|
||||||
import theming from "../../styles/theming"
|
import theming from "../../styles/theming"
|
||||||
|
|
||||||
import _map from "../../data/map.json"
|
import _map from "../../data/map.json"
|
||||||
import { Map } from "../../../types/types"
|
import { globalContext } from "../../globalContext"
|
||||||
|
|
||||||
|
import type { Map } from "../../../types/types"
|
||||||
|
|
||||||
const map: Map = _map
|
const map: Map = _map
|
||||||
|
|
||||||
|
|
@ -29,104 +32,103 @@ interface TagSelectProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
const TagSelect = (props: TagSelectProps) => {
|
const TagSelect = (props: TagSelectProps) => {
|
||||||
|
const { globalState } = useContext(globalContext)
|
||||||
|
const locale = globalState.locale
|
||||||
|
const currentTheme = globalState.theme
|
||||||
const { onChange, defaultValue: selectedTags } = props
|
const { onChange, defaultValue: selectedTags } = props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledReactTagsContainer>
|
<StyledReactTagsContainer>
|
||||||
<ThemeConsumer>
|
<Select
|
||||||
{(currentTheme) => (
|
placeholder={locale == "en" ? "Select tags..." : "태그를 선택하세요"}
|
||||||
<Select
|
theme={(theme) => ({
|
||||||
placeholder="Select tags..."
|
...theme,
|
||||||
theme={(theme) => ({
|
colors: {
|
||||||
...theme,
|
...theme.colors,
|
||||||
colors: {
|
neutral0: theming
|
||||||
...theme.colors,
|
.theme(currentTheme, {
|
||||||
neutral0: theming
|
light: theming.light.backgroundColor1,
|
||||||
.theme(currentTheme.currentTheme, {
|
dark: theming.dark.backgroundColor1,
|
||||||
light: theming.light.backgroundColor1,
|
})
|
||||||
dark: theming.dark.backgroundColor1,
|
.toString(),
|
||||||
})
|
neutral5: "hsl(0, 0%, 20%)",
|
||||||
.toString(),
|
neutral10: "hsl(0, 0%, 30%)",
|
||||||
neutral5: "hsl(0, 0%, 20%)",
|
neutral20: "hsl(0, 0%, 40%)",
|
||||||
neutral10: "hsl(0, 0%, 30%)",
|
neutral30: "hsl(0, 0%, 50%)",
|
||||||
neutral20: "hsl(0, 0%, 40%)",
|
neutral40: "hsl(0, 0%, 60%)",
|
||||||
neutral30: "hsl(0, 0%, 50%)",
|
neutral50: "hsl(0, 0%, 70%)",
|
||||||
neutral40: "hsl(0, 0%, 60%)",
|
neutral60: "hsl(0, 0%, 80%)",
|
||||||
neutral50: "hsl(0, 0%, 70%)",
|
neutral70: "hsl(0, 0%, 90%)",
|
||||||
neutral60: "hsl(0, 0%, 80%)",
|
neutral80: "hsl(0, 0%, 95%)",
|
||||||
neutral70: "hsl(0, 0%, 90%)",
|
neutral90: "hsl(0, 0%, 100%)",
|
||||||
neutral80: "hsl(0, 0%, 95%)",
|
primary25: "hotpink",
|
||||||
neutral90: "hsl(0, 0%, 100%)",
|
primary: "black",
|
||||||
primary25: "hotpink",
|
},
|
||||||
primary: "black",
|
})}
|
||||||
},
|
styles={{
|
||||||
})}
|
option: (styles) => ({
|
||||||
styles={{
|
...styles,
|
||||||
option: (styles) => ({
|
backgroundColor: theming
|
||||||
...styles,
|
.theme(currentTheme, {
|
||||||
backgroundColor: theming
|
light: theming.light.backgroundColor1,
|
||||||
.theme(currentTheme.currentTheme, {
|
dark: theming.dark.backgroundColor1,
|
||||||
light: theming.light.backgroundColor1,
|
})
|
||||||
dark: theming.dark.backgroundColor1,
|
.toString(),
|
||||||
})
|
color: theming
|
||||||
.toString(),
|
.theme(currentTheme, {
|
||||||
color: theming
|
light: theming.light.color1,
|
||||||
.theme(currentTheme.currentTheme, {
|
dark: theming.dark.color1,
|
||||||
light: theming.light.color1,
|
})
|
||||||
dark: theming.dark.color1,
|
.toString(),
|
||||||
})
|
cursor: "pointer",
|
||||||
.toString(),
|
padding: 10,
|
||||||
cursor: "pointer",
|
":hover": {
|
||||||
padding: 10,
|
backgroundColor: theming
|
||||||
":hover": {
|
.theme(currentTheme, {
|
||||||
backgroundColor: theming
|
light: theming.light.backgroundColor0,
|
||||||
.theme(currentTheme.currentTheme, {
|
dark: theming.dark.backgroundColor0,
|
||||||
light: theming.light.backgroundColor0,
|
})
|
||||||
dark: theming.dark.backgroundColor0,
|
.toString(),
|
||||||
})
|
},
|
||||||
.toString(),
|
}),
|
||||||
},
|
control: (styles) => ({
|
||||||
}),
|
...styles,
|
||||||
control: (styles) => ({
|
backgroundColor: theming
|
||||||
...styles,
|
.theme(currentTheme, {
|
||||||
backgroundColor: theming
|
light: theming.light.backgroundColor1,
|
||||||
.theme(currentTheme.currentTheme, {
|
dark: theming.dark.backgroundColor1,
|
||||||
light: theming.light.backgroundColor1,
|
})
|
||||||
dark: theming.dark.backgroundColor1,
|
.toString(),
|
||||||
})
|
border: theming.theme(currentTheme, {
|
||||||
.toString(),
|
light: "1px solid #ccc",
|
||||||
border: theming.theme(currentTheme.currentTheme, {
|
dark: "1px solid #555",
|
||||||
light: "1px solid #ccc",
|
}),
|
||||||
dark: "1px solid #555",
|
}),
|
||||||
}),
|
multiValue: (styles) => ({
|
||||||
}),
|
...styles,
|
||||||
multiValue: (styles) => ({
|
color: "white",
|
||||||
...styles,
|
backgroundColor: theming.light.linkColor,
|
||||||
color: "white",
|
borderRadius: "5px",
|
||||||
backgroundColor: theming.light.linkColor,
|
}),
|
||||||
borderRadius: "5px",
|
multiValueLabel: (styles) => ({
|
||||||
}),
|
...styles,
|
||||||
multiValueLabel: (styles) => ({
|
marginLeft: "0.2rem",
|
||||||
...styles,
|
marginRight: "0.2rem",
|
||||||
marginLeft: "0.2rem",
|
}),
|
||||||
marginRight: "0.2rem",
|
multiValueRemove: (styles) => ({
|
||||||
}),
|
...styles,
|
||||||
multiValueRemove: (styles) => ({
|
marginLeft: "0.2rem",
|
||||||
...styles,
|
":hover": {
|
||||||
marginLeft: "0.2rem",
|
backgroundColor: "white",
|
||||||
":hover": {
|
color: theming.light.linkColor,
|
||||||
backgroundColor: "white",
|
},
|
||||||
color: theming.light.linkColor,
|
}),
|
||||||
},
|
}}
|
||||||
}),
|
defaultValue={selectedTags}
|
||||||
}}
|
onChange={onChange}
|
||||||
defaultValue={selectedTags}
|
options={options}
|
||||||
onChange={onChange}
|
isMulti
|
||||||
options={options}
|
/>
|
||||||
isMulti
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</ThemeConsumer>
|
|
||||||
</StyledReactTagsContainer>
|
</StyledReactTagsContainer>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
/* eslint-disable react/prop-types */
|
/* eslint-disable react/prop-types */
|
||||||
|
|
||||||
import { useEffect, useState } from "react"
|
import { useContext, useEffect, useState } from "react"
|
||||||
import styled from "styled-components"
|
import styled from "styled-components"
|
||||||
import { useSearchParams } from "react-router-dom"
|
import { useSearchParams } from "react-router-dom"
|
||||||
import { Helmet } from "react-helmet-async"
|
import { Helmet } from "react-helmet-async"
|
||||||
|
|
@ -19,12 +19,13 @@ import MainContent from "../../components/MainContent"
|
||||||
import SearchBar from "./SearchBar"
|
import SearchBar from "./SearchBar"
|
||||||
import TagSelect, { TagsData } from "./TagSelect"
|
import TagSelect, { TagsData } from "./TagSelect"
|
||||||
import { ClearDateButton, DateRangeControl, StyledDateRange } from "./DateRange"
|
import { ClearDateButton, DateRangeControl, StyledDateRange } from "./DateRange"
|
||||||
|
import { globalContext } from "../../globalContext"
|
||||||
import { Map } from "../../../types/types"
|
|
||||||
|
|
||||||
import "react-date-range/dist/styles.css"
|
import "react-date-range/dist/styles.css"
|
||||||
import "react-date-range/dist/theme/default.css"
|
import "react-date-range/dist/theme/default.css"
|
||||||
|
|
||||||
|
import type { Map } from "../../../types/types"
|
||||||
|
|
||||||
const map: Map = _map
|
const map: Map = _map
|
||||||
|
|
||||||
const searchIndex = elasticlunr.Index.load(searchData as never)
|
const searchIndex = elasticlunr.Index.load(searchData as never)
|
||||||
|
|
@ -98,6 +99,9 @@ function isSelectedTagsInPost(selectedTags?: TagsData[], postTags?: string[]) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const Search = () => {
|
const Search = () => {
|
||||||
|
const { globalState } = useContext(globalContext)
|
||||||
|
const locale = globalState.locale
|
||||||
|
|
||||||
// URL search parameters
|
// URL search parameters
|
||||||
const [URLSearchParams, setURLSearchParams] = useSearchParams()
|
const [URLSearchParams, setURLSearchParams] = useSearchParams()
|
||||||
|
|
||||||
|
|
@ -219,11 +223,11 @@ const Search = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>pomp | Search</title>
|
<title>pomp | {locale == "en" ? "Search" : "검색"}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
|
|
||||||
<StyledSearch>
|
<StyledSearch>
|
||||||
<h1>Search</h1>
|
<h1>{locale == "en" ? "Search" : "검색"}</h1>
|
||||||
|
|
||||||
<StyledSearchContainer>
|
<StyledSearchContainer>
|
||||||
<DateRangeControl>
|
<DateRangeControl>
|
||||||
|
|
@ -232,7 +236,7 @@ const Search = () => {
|
||||||
setDateRange(defaultDateRange)
|
setDateRange(defaultDateRange)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Reset range
|
{locale == "en" ? "Reset date range" : "날짜 범위 초기화"}
|
||||||
</ClearDateButton>
|
</ClearDateButton>
|
||||||
<StyledDateRange
|
<StyledDateRange
|
||||||
editableDateInputs
|
editableDateInputs
|
||||||
|
|
@ -253,13 +257,15 @@ const Search = () => {
|
||||||
type="search"
|
type="search"
|
||||||
value={searchInput}
|
value={searchInput}
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
placeholder="Search"
|
placeholder={locale == "en" ? "Search" : "검색"}
|
||||||
onChange={(event) => setSearchInput(event.target.value)}
|
onChange={(event) => setSearchInput(event.target.value)}
|
||||||
onKeyPress={(event) => {
|
onKeyPress={(event) => {
|
||||||
event.key === "Enter" && searchInput && doSearch()
|
event.key === "Enter" && searchInput && doSearch()
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{postCards.length} {postCards.length > 1 ? "results" : "result"}
|
{locale == "kr" && "결과: "}
|
||||||
|
{postCards.length}{" "}
|
||||||
|
{locale == "en" && (postCards.length > 1 ? "results" : "result")}
|
||||||
<TagSelect
|
<TagSelect
|
||||||
defaultValue={selectedTags}
|
defaultValue={selectedTags}
|
||||||
onChange={(newValue) => {
|
onChange={(newValue) => {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue