mirror of https://github.com/sunface/rust-course
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.2 KiB
101 lines
3.2 KiB
import { Box, chakra, Divider, Flex, Heading, HStack, IconButton, Image, storageKey, VStack } from "@chakra-ui/react"
|
|
import Comments from "components/comments/comments"
|
|
import Container from "components/container"
|
|
import LikeButton from "components/posts/unicorn-like"
|
|
import { MarkdownRender } from "components/markdown-editor/render"
|
|
import PostAuthor from "components/posts/post-author"
|
|
import TagTextCard from "components/posts/tag-text-card"
|
|
import SEO from "components/seo"
|
|
import siteConfig from "configs/site-config"
|
|
import useSession from "hooks/use-session"
|
|
import Nav from "layouts/nav/nav"
|
|
import PostNav from "layouts/nav/post-nav"
|
|
import PageContainer from "layouts/page-container"
|
|
import { cloneDeep } from "lodash"
|
|
import { useRouter } from "next/router"
|
|
import { title } from "process"
|
|
import React, { useEffect, useState } from "react"
|
|
import { FaBookmark, FaGithub, FaRegBookmark, FaShare, FaShareAlt } from "react-icons/fa"
|
|
import { ReserveUrls } from "src/data/reserve-urls"
|
|
import { Comment } from "src/types/comments"
|
|
import { Post } from "src/types/posts"
|
|
import { Tag } from "src/types/tag"
|
|
import { requestApi } from "utils/axios/request"
|
|
import UnicornLike from "components/posts/unicorn-like"
|
|
import SvgButton from "components/svg-button"
|
|
import Bookmark from "components/posts/bookmark"
|
|
import PostSidebar from "components/posts/post-sidebar"
|
|
|
|
const PostPage = () => {
|
|
const router = useRouter()
|
|
const id = router.query.post_id
|
|
const [post, setPost]: [Post, any] = useState(null)
|
|
const [comments, setComments]: [Comment[], any] = useState([])
|
|
useEffect(() => {
|
|
if (id) {
|
|
getData()
|
|
}
|
|
}, [id])
|
|
|
|
|
|
useEffect(() => {
|
|
if (router && router.asPath.indexOf("#comments") > -1) {
|
|
setTimeout(() => {
|
|
location.href = "#comments"
|
|
}, 100)
|
|
}
|
|
}, [router])
|
|
|
|
const getData = async () => {
|
|
const res = await requestApi.get(`/story/post/${id}`)
|
|
setPost(res.data)
|
|
|
|
getComments(res.data.id)
|
|
}
|
|
|
|
const getComments = async (id) => {
|
|
const res = await requestApi.get(`/story/comments/${id}`)
|
|
setComments(res.data)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<SEO
|
|
title={siteConfig.seo.title}
|
|
description={siteConfig.seo.description}
|
|
/>
|
|
<PageContainer nav={<PostNav />} mt="2rem">
|
|
{post &&
|
|
<>
|
|
<HStack alignItems="top" spacing={[0, 0, 14, 14]}>
|
|
<Box width={["100%", "100%", "75%", "75%"]} height="fit-content" pl={[0, 0, "0%", "10%"]}>
|
|
<Image src={post.cover} />
|
|
<Box px="2">
|
|
<Heading size="xl" my="6" lineHeight="1.5">{post.title}</Heading>
|
|
|
|
<Divider my="4" />
|
|
<PostAuthor post={post} />
|
|
<Divider my="4" />
|
|
|
|
<MarkdownRender md={post.md} py="2" mt="6" />
|
|
</Box>
|
|
<HStack ml="2" spacing="3" mt="4">{post.rawTags.map(tag => <TagTextCard key={tag.id} tag={tag} />)}</HStack>
|
|
|
|
<Box mt="6" p="2"><Comments storyID={post.id} comments={comments} onChange={() => getComments(post.id)} /></Box>
|
|
</Box>
|
|
<Box pt="16">
|
|
<PostSidebar post={post}/>
|
|
</Box>
|
|
</HStack>
|
|
|
|
</>
|
|
}
|
|
</PageContainer>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default PostPage
|
|
|
|
|