pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

bumped package versions

Browse source
This commit is contained in:
Kim, Jimin 2021-12-14 10:31:46 +09:00
parent 462084381e
commit 44c17577d1
5 changed files with 435 additions and 555 deletions
Download patch file Download diff file Expand all files Collapse all files

61
source/package.json
View file

@ -21,59 +21,58 @@
"@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4", "@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.15", "@fortawesome/react-fontawesome": "^0.1.16",
"@types/elasticlunr": "^0.9.3", "date-fns": "^2.27.0",
"@types/highlight.js": "^10.1.0",
"@types/react-router-hash-link": "^2.4.2",
"@types/react-select": "^4.0.18",
"date-fns": "^2.24.0",
"elasticlunr": "^0.9.5", "elasticlunr": "^0.9.5",
"gray-matter": "^4.0.3", "gray-matter": "^4.0.3",
"highlight.js": "^11.2.0", "highlight.js": "^11.3.1",
"katex": "^0.13.18", "katex": "^0.15.1",
"local-storage-fallback": "^4.1.2", "local-storage-fallback": "^4.1.2",
"markdown-it": "^12.2.0", "markdown-it": "^12.3.0",
"markdown-it-anchor": "^8.3.1", "markdown-it-anchor": "^8.4.1",
"markdown-it-attrs": "^4.1.0", "markdown-it-attrs": "^4.1.0",
"markdown-it-texmath": "^0.9.1", "markdown-it-texmath": "^0.9.6",
"markdown-toc": "^1.2.0", "markdown-toc": "^1.2.0",
"query-string": "^7.0.1", "query-string": "^7.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-collapse": "^5.1.0", "react-collapse": "^5.1.1",
"react-date-range": "^1.4.0", "react-date-range": "^1.4.0",
"react-device-detect": "^2.0.0", "react-device-detect": "^2.1.2",
"react-dnd": "^14.0.4", "react-dnd": "^14.0.4",
"react-dnd-html5-backend": "^14.0.2", "react-dnd-html5-backend": "^14.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-helmet-async": "^1.1.2", "react-helmet-async": "^1.2.2",
"react-router-dom": "^5.3.0", "react-router-dom": "^6.1.1",
"react-router-hash-link": "^2.4.3", "react-router-hash-link": "^2.4.3",
"react-scripts": "^4.0.3", "react-scripts": "^4.0.3",
"react-select": "^5.0.0", "react-select": "^5.2.1",
"react-tooltip": "^4.2.21", "react-tooltip": "^4.2.21",
"read-time-estimate": "^0.0.3", "read-time-estimate": "^0.0.3",
"styled-components": "^5.3.1", "styled-components": "^5.3.3",
"web-vitals": "^2.1.0" "web-vitals": "^2.1.2"
}, },
"devDependencies": { "devDependencies": {
"@types/elasticlunr": "^0.9.4",
"@types/highlight.js": "^10.1.0",
"@types/katex": "^0.11.1", "@types/katex": "^0.11.1",
"@types/markdown-it": "^12.2.1", "@types/markdown-it": "^12.2.3",
"@types/node": "^16.10.1", "@types/node": "^16.11.12",
"@types/react": "^17.0.24", "@types/react": "^17.0.37",
"@types/react-collapse": "^5.0.1", "@types/react-collapse": "^5.0.1",
"@types/react-date-range": "^1.1.8", "@types/react-date-range": "^1.4.1",
"@types/react-dom": "^17.0.9", "@types/react-dom": "^17.0.11",
"@types/styled-components": "^5.1.14", "@types/react-router-hash-link": "^2.4.4",
"@typescript-eslint/eslint-plugin": "^4.32.0", "@types/react-select": "^5.0.1",
"@typescript-eslint/parser": "^4.32.0", "@types/styled-components": "^5.1.18",
"eslint": "^7.32.0", "@typescript-eslint/eslint-plugin": "^5.7.0",
"@typescript-eslint/parser": "^5.7.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-json": "^3.1.0", "eslint-plugin-json": "^3.1.0",
"eslint-plugin-react": "^7.26.0", "eslint-plugin-react": "^7.27.1",
"prettier": "^2.4.1", "prettier": "^2.5.1",
"ts-node": "^10.2.1", "ts-node": "^10.4.0",
"tslint-config-prettier": "^1.18.0", "tslint-config-prettier": "^1.18.0",
"typescript": "^4.4.3" "typescript": "^4.5.4"
}, },
"browserslist": { "browserslist": {
"production": [ "production": [

33
source/src/App.tsx
View file

@ -1,5 +1,5 @@
import React from "react" import React from "react"
import { Switch, Route } from "react-router-dom" import { Routes, Route } from "react-router-dom"
import styled, { import styled, {
ThemeProvider, ThemeProvider,
createGlobalStyle, createGlobalStyle,
@ -333,29 +333,22 @@ export default class App extends React.Component<AppProps, AppState> {
{this.state.isLoading ? ( {this.state.isLoading ? (
<Loading /> <Loading />
) : ( ) : (
<Switch> <Routes>
<Route exact path="/"> <Route
<PostList howMany={4} title="Home" /> path="/"
</Route> element={
<PostList howMany={4} title="Home" />
}
/>
<Route exact path="/loading"> <Route path="/loading" element={<Loading />} />
<Loading />
</Route>
<Route exact path="/search"> <Route path="/search" element={<Search />} />
<Search />
</Route>
<Route exact path="/404"> <Route path="/404" element={<NotFound />} />
<NotFound />
</Route>
<Route exact path="/:path*"> <Route path="/:path*" element={<Page />} />
{({ match }) => ( </Routes>
<Page key={match?.params.path} />
)}
</Route>
</Switch>
)} )}
</StyledContentContainer> </StyledContentContainer>
<Footer /> <Footer />

8
source/src/components/PostCard.tsx
View file

@ -1,5 +1,5 @@
import styled from "styled-components" import styled from "styled-components"
import { useHistory } from "react-router-dom" import { useNavigate } from "react-router-dom"
import theming from "../theming" import theming from "../theming"
@ -65,16 +65,14 @@ interface PostCardProps {
} }
export default function PostCard(props: PostCardProps) { export default function PostCard(props: PostCardProps) {
const history = useHistory() const navigate = useNavigate()
return ( return (
<StyledPostCard <StyledPostCard
key={props.postData.url} key={props.postData.url}
className="card main-content" className="card main-content"
onClick={() => { onClick={() => {
history.push({ navigate(process.env.PUBLIC_URL + props.postData.url)
pathname: process.env.PUBLIC_URL + props.postData.url,
})
}} }}
> >
<StyledTitle>{props.postData?.title || "No title"}</StyledTitle> <StyledTitle>{props.postData?.title || "No title"}</StyledTitle>

116
source/src/pages/Search.tsx
View file

@ -1,8 +1,10 @@
/* eslint-disable react/prop-types */
import { useEffect, useState, useRef } from "react" import { useEffect, useState, useRef } from "react"
import styled, { ThemeConsumer } from "styled-components" import styled, { ThemeConsumer } from "styled-components"
import { useLocation, useHistory } from "react-router-dom" import { useLocation, useNavigate, useSearchParams } from "react-router-dom"
import { Helmet } from "react-helmet-async" import { Helmet } from "react-helmet-async"
import { DateRange, Range, OnDateRangeChangeProps } from "react-date-range" import { DateRange, Range } from "react-date-range"
import Select from "react-select" import Select from "react-select"
import queryString from "query-string" // parsing url query import queryString from "query-string" // parsing url query
import elasticlunr from "elasticlunr" // search engine import elasticlunr from "elasticlunr" // search engine
@ -151,7 +153,9 @@ function isSelectedTagsInPost(
export default () => { export default () => {
const inputRef = useRef<HTMLInputElement>(null) const inputRef = useRef<HTMLInputElement>(null)
const _history = useHistory() const navigate = useNavigate()
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [_, setSearchParams] = useSearchParams()
const _location = useLocation() const _location = useLocation()
// todo: handle duplicate/missing keys // todo: handle duplicate/missing keys
@ -180,21 +184,19 @@ export default () => {
) )
function doSearch() { function doSearch() {
_history.push({ navigate("/search")
pathname: "/search", setSearchParams({
search: queryString.stringify({ ...(searchInput && {
...(searchInput && { query: searchInput,
query: searchInput, }),
}), ...(query.from && {
...(query.from && { from: query.from,
from: query.from, }),
}), ...(query.to && {
...(query.to && { to: query.to,
to: query.to, }),
}), ...(query.tags.length > 0 && {
...(query.tags.length > 0 && { tags: query.tags.join(","),
tags: query.tags.join(","),
}),
}), }),
}) })
@ -242,22 +244,19 @@ export default () => {
}, [searchInput]) }, [searchInput])
function clearDate() { function clearDate() {
_history.push({ navigate("/search")
pathname: "/search", setSearchParams({
search: queryString.stringify({ ...(query.query && {
...(query.query && { query: query.query,
query: query.query, }),
}), ...(query.tags.length > 0 && {
...(query.tags.length > 0 && { tags: query.tags.join(","),
tags: query.tags.join(","),
}),
}), }),
}) })
setDateRange(defaultDateRange) setDateRange(defaultDateRange)
} }
function onDateRangeChange(item: OnDateRangeChangeProps) { function onDateRangeChange(item: { [key: string]: Range }) {
const historyToPush = { const historyToPush = {
...(query.query && { ...(query.query && {
query: query.query, query: query.query,
@ -272,7 +271,6 @@ export default () => {
tags: query.tags.join(","), tags: query.tags.join(","),
}), }),
} }
console.log(item)
// convert Date to YYYY-MM-DD string if it exists // convert Date to YYYY-MM-DD string if it exists
if (item.selection.startDate != null) if (item.selection.startDate != null)
@ -285,11 +283,8 @@ export default () => {
.toISOString() .toISOString()
.split("T")[0] .split("T")[0]
_history.push({ navigate("/search")
pathname: "/search", setSearchParams(historyToPush)
search: queryString.stringify(historyToPush),
})
setDateRange([item.selection]) setDateRange([item.selection])
} }
@ -357,8 +352,14 @@ interface TagSelectProps {
setSelectedOption: React.Dispatch<React.SetStateAction<TagsData[] | null>> setSelectedOption: React.Dispatch<React.SetStateAction<TagsData[] | null>>
} }
const TagSelect = (props: TagSelectProps) => { const TagSelect: React.FC<TagSelectProps> = ({
const _history = useHistory() query,
selectedTags,
setSelectedOption,
}) => {
const navigate = useNavigate()
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [_, setSearchParams] = useSearchParams()
return ( return (
<StyledReactTagsContainer> <StyledReactTagsContainer>
@ -452,28 +453,29 @@ const TagSelect = (props: TagSelectProps) => {
}, },
}), }),
}} }}
defaultValue={props.selectedTags} defaultValue={selectedTags}
onChange={(newSelectedTags) => { onChange={(newSelectedTags) => {
props.setSelectedOption( setSelectedOption(newSelectedTags as TagsData[])
newSelectedTags as TagsData[]
)
_history.push({ navigate("/search")
pathname: "/search",
search: queryString.stringify({ const tags =
...(props.query.query && { newSelectedTags
query: props.query.query, .map((elem) => elem.value)
}), .join(",") || undefined
...(props.query.from && {
from: props.query.from, setSearchParams({
}), ...(query.query && {
...(props.query.to && { query: query.query,
to: props.query.to, }),
}), ...(query.from && {
tags: from: query.from,
newSelectedTags }),
.map((elem) => elem.value) ...(query.to && {
.join(",") || undefined, to: query.to,
}),
...(tags && {
tags: tags,
}), }),
}) })
}} }}

772
source/yarn.lock
View file

File diff suppressed because it is too large Load diff