mirror of https://github.com/sunface/rust-course
sunface
4 years ago
parent
9a43a37cae
commit
a5f9c744c2
@ -0,0 +1,117 @@
|
||||
import React, { useEffect, useState } from "react"
|
||||
import { Box, Flex, Heading, HStack, Image, Select, StackDivider, Tag, Text, useColorModeValue, VStack } from "@chakra-ui/react"
|
||||
import { requestApi } from "utils/axios/request"
|
||||
import userCustomTheme from "theme/user-custom"
|
||||
import { Story } from "src/types/story"
|
||||
import { find } from "lodash"
|
||||
import { getStoryUrl } from "utils/story"
|
||||
import Link from "next/link"
|
||||
|
||||
interface Props {
|
||||
postID: string
|
||||
series: string[]
|
||||
}
|
||||
|
||||
export const Series = (props: Props) => {
|
||||
const [showAll,setShowAll] = useState(false)
|
||||
const [currentSeries, setCurrentSeries]: [Story, any] = useState(null)
|
||||
const [series, setSeries]: [Story[], any] = useState([])
|
||||
const [posts, setPosts]: [Story[], any] = useState([])
|
||||
|
||||
const borderColor = useColorModeValue(userCustomTheme.borderColor.light, userCustomTheme.borderColor.dark)
|
||||
|
||||
useEffect(() => {
|
||||
getSeries()
|
||||
}, [])
|
||||
|
||||
|
||||
const getSeries = async () => {
|
||||
const res = await requestApi.post(`/story/series`, props.series)
|
||||
setSeries(res.data)
|
||||
if (res.data.length > 0) {
|
||||
setCurrentSeries(res.data[0])
|
||||
getSeriesPosts(res.data[0].id)
|
||||
}
|
||||
}
|
||||
|
||||
const getSeriesPosts = async (id) => {
|
||||
const res = await requestApi.get(`/story/series/posts/${id}`)
|
||||
if (res.data.length > 4) {
|
||||
setShowAll(false)
|
||||
} else {
|
||||
setShowAll(true)
|
||||
}
|
||||
setPosts(res.data)
|
||||
}
|
||||
|
||||
const onSereisChange = e => {
|
||||
const s = find(series, s => s.id === e.currentTarget.value)
|
||||
setCurrentSeries(s)
|
||||
getSeriesPosts(s.id)
|
||||
}
|
||||
|
||||
const postInHidden = () => {
|
||||
for (let i=0;i<posts.length;i++) {
|
||||
if (posts[i].id === props.postID) {
|
||||
if (i >= 2) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
if (posts.length > 0) {
|
||||
return (
|
||||
<VStack divider={<StackDivider borderColor={borderColor} />} alignItems="left">
|
||||
<Box p="4" pb="0">
|
||||
<Text fontSize="sm" layerStyle="textSecondary">ARTICLE SERIES</Text>
|
||||
{<Select onChange={e => onSereisChange(e)} value={currentSeries?.id} variant="unstyled" width="fit-content">
|
||||
{
|
||||
series.map(s => <option value={s.id} key={s.id}>{s.title}</option>)
|
||||
}
|
||||
</Select>}
|
||||
</Box>
|
||||
{
|
||||
posts.map((post, i) => {
|
||||
if (showAll) {
|
||||
return <PostCard i={i} post={post} postID={props.postID} />
|
||||
} else {
|
||||
if (i < 2) {
|
||||
return <PostCard i={i} post={post} postID={props.postID} />
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
{
|
||||
(!showAll && posts.length > 2) && <HStack p="2" pb="4" spacing="4" cursor="pointer" onClick={() => setShowAll(true)}>
|
||||
<Tag borderRadius="full" size="lg" colorScheme={postInHidden()? 'cyan' : null}>··</Tag>
|
||||
<Heading size="sm" color={postInHidden()? 'cyan.500' : null}>Show all {posts.length-2} posts</Heading>
|
||||
</HStack>
|
||||
}
|
||||
</VStack>
|
||||
)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export default Series
|
||||
|
||||
function PostCard({ i, post, postID }) {
|
||||
return <Flex key={post.id} p="2" spacing="4" justifyContent="space-between" flexDirection={["column", "column", "row", "row"]}>
|
||||
<HStack mr="4" spacing="4" alignItems="top">
|
||||
<Tag borderRadius="full" size="lg" colorScheme={post.id === postID ? 'cyan' : null} height="fit-content">{i + 1}</Tag>
|
||||
<Link href={getStoryUrl(post)}>
|
||||
<Box cursor="pointer" pt="1">
|
||||
<Heading size="sm">{post.title}</Heading>
|
||||
<Text mt="3">{post.brief.substring(0, 100)}</Text>
|
||||
</Box>
|
||||
</Link>
|
||||
</HStack>
|
||||
|
||||
{post.cover && <Image src={post.cover} mt={[4, 4, 0, 0]} height={["275px", "275px", "130px", "130px"]} width={["100%", "100%", "200px", "250px"]} />}
|
||||
</Flex>
|
||||
}
|
||||
Loading…
Reference in new issue