95 lines
2 KiB
TypeScript
95 lines
2 KiB
TypeScript
/**
|
|
* PostList.tsx
|
|
* show posts in recent order
|
|
*/
|
|
import type { Map } from "../../../types/types"
|
|
|
|
import { useCallback, useContext, useEffect, useState } from "react"
|
|
import { Helmet } from "react-helmet-async"
|
|
import styled from "styled-components"
|
|
|
|
import PostCard from "../../components/PostCard"
|
|
import ShowMoreButton from "./ShowMoreButton"
|
|
|
|
import _map from "../../data/map.json"
|
|
|
|
import { globalContext } from "../../globalContext"
|
|
|
|
const map: Map = _map
|
|
|
|
const PostList = styled.div`
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
|
|
color: ${({ theme }) => theme.theme.color.text.default};
|
|
`
|
|
|
|
export default () => {
|
|
const { globalState } = useContext(globalContext)
|
|
const { locale } = globalState
|
|
|
|
const [howMany, setHowMany] = useState(5)
|
|
const [postsLength, setPostsLength] = useState(0)
|
|
const [postCards, setPostCards] = useState<JSX.Element[]>([])
|
|
|
|
const loadPostCards = useCallback(() => {
|
|
let postCount = 0
|
|
const postCards = [] as JSX.Element[]
|
|
|
|
for (const date of Object.keys(map.date).reverse()) {
|
|
if (postCount >= howMany) break
|
|
|
|
const length = map.date[date].length
|
|
|
|
for (let i = 0; i < length; i++) {
|
|
if (postCount >= howMany) break
|
|
|
|
postCount++
|
|
const content_id = map.date[date][length - i - 1]
|
|
|
|
postCards.push(
|
|
<PostCard
|
|
key={content_id}
|
|
postData={{
|
|
content_id: content_id,
|
|
...map.posts[content_id],
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
|
|
setPostCards(postCards)
|
|
}, [howMany, postCards])
|
|
|
|
useEffect(() => {
|
|
loadPostCards()
|
|
setPostsLength(Object.keys(map.posts).length)
|
|
}, [howMany])
|
|
|
|
return (
|
|
<>
|
|
<Helmet>
|
|
<title>pomp | {locale == "en" ? "Home" : "홈"}</title>
|
|
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content="/icon/icon.svg" />
|
|
</Helmet>
|
|
|
|
<PostList>
|
|
<h1>{locale == "en" ? "Recent Posts" : "최근 포스트"}</h1>
|
|
|
|
{postCards}
|
|
|
|
{postsLength > howMany && (
|
|
<ShowMoreButton
|
|
action={() => {
|
|
setHowMany((prev) => prev + 5)
|
|
}}
|
|
/>
|
|
)}
|
|
</PostList>
|
|
</>
|
|
)
|
|
}
|