mirror of https://github.com/sunface/rust-course
parent
bc63942425
commit
e7a292efc5
@ -0,0 +1,109 @@
|
|||||||
|
import { Text, Box, Heading, Image, Center, Button, Flex, VStack, Divider, useToast, Wrap, WrapItem, useColorModeValue, StackDivider, HStack } from "@chakra-ui/react"
|
||||||
|
import Card from "components/card"
|
||||||
|
import Nav from "layouts/nav/nav"
|
||||||
|
import PageContainer from "layouts/page-container"
|
||||||
|
import Sidebar from "layouts/sidebar/sidebar"
|
||||||
|
import React, { useEffect, useState } from "react"
|
||||||
|
import { dashboardLinks } from "src/data/links"
|
||||||
|
import { requestApi } from "utils/axios/request"
|
||||||
|
import PageContainer1 from "layouts/page-container1"
|
||||||
|
import Empty from "components/empty"
|
||||||
|
import { IDType } from "src/types/id"
|
||||||
|
import UserCard from "components/users/user-card"
|
||||||
|
import userCustomTheme from "theme/user-custom"
|
||||||
|
import { Story } from "src/types/story"
|
||||||
|
import moment from 'moment'
|
||||||
|
import { FaComment, FaEye, FaHeart, FaRegComment, FaRegEye, FaRegHeart } from "react-icons/fa"
|
||||||
|
import Link from "next/link"
|
||||||
|
|
||||||
|
const DashboardPage = () => {
|
||||||
|
const [stories, setStories]: [Story[], any] = useState([])
|
||||||
|
const [totalLikes, setTotalLikes] = useState(0)
|
||||||
|
const [totalViews, setTotalViews] = useState(0)
|
||||||
|
const [totalComments, setTotalComments] = useState(0)
|
||||||
|
const borderColor = useColorModeValue(userCustomTheme.borderColor.light, userCustomTheme.borderColor.dark)
|
||||||
|
|
||||||
|
const getStories = async () => {
|
||||||
|
const res = await requestApi.get(`/story/posts/dashboard`)
|
||||||
|
setStories(res.data)
|
||||||
|
|
||||||
|
let likes = 0
|
||||||
|
let views = 0
|
||||||
|
let comments = 0
|
||||||
|
|
||||||
|
res.data.forEach(s => {
|
||||||
|
likes += s.likes
|
||||||
|
views += s.views
|
||||||
|
comments += s.comments
|
||||||
|
})
|
||||||
|
|
||||||
|
setTotalLikes(likes)
|
||||||
|
setTotalViews(views)
|
||||||
|
setTotalComments(comments)
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getStories()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<PageContainer1>
|
||||||
|
<Box display="flex">
|
||||||
|
<Sidebar routes={dashboardLinks} title="dashboard" />
|
||||||
|
<Box ml="4" width="100%">
|
||||||
|
<HStack alignItems="top" width="100%" spacing="3">
|
||||||
|
<Card width="33%">
|
||||||
|
<Heading size="md">{totalLikes}</Heading>
|
||||||
|
<Text layerStyle="textSecondary" mt="2">Total likes</Text>
|
||||||
|
</Card>
|
||||||
|
<Card width="33%">
|
||||||
|
<Heading size="md">{totalViews}</Heading>
|
||||||
|
<Text layerStyle="textSecondary" mt="2">Total Views</Text>
|
||||||
|
</Card>
|
||||||
|
<Card width="33%">
|
||||||
|
<Heading size="md">{totalComments}</Heading>
|
||||||
|
<Text layerStyle="textSecondary" mt="2">Total Comments</Text>
|
||||||
|
</Card>
|
||||||
|
</HStack>
|
||||||
|
<Card mt="2" p="6" width="100%">
|
||||||
|
<Heading size="sm" >Stories ({stories.length})</Heading>
|
||||||
|
<Divider my="4"/>
|
||||||
|
{
|
||||||
|
stories.map((s,i) =>
|
||||||
|
<Link key={i} href={`/${s.creator.username}/${s.id}`}>
|
||||||
|
<Flex cursor="pointer" justifyContent="space-between" alignItems="center" mb={i < stories.length-1 ? 6 : 0}>
|
||||||
|
<VStack alignItems="left">
|
||||||
|
<Heading size="sm">{s.title}</Heading>
|
||||||
|
<Text fontSize=".85rem">created {moment(s.created).fromNow()} updated {moment(s.updated).fromNow()} </Text>
|
||||||
|
</VStack>
|
||||||
|
|
||||||
|
<HStack layerStyle="textSecondary" spacing="4">
|
||||||
|
<HStack>
|
||||||
|
<FaRegHeart />
|
||||||
|
<Text>{s.likes}</Text>
|
||||||
|
</HStack>
|
||||||
|
<HStack>
|
||||||
|
<FaRegComment />
|
||||||
|
<Text>{s.comments}</Text>
|
||||||
|
</HStack>
|
||||||
|
<HStack>
|
||||||
|
<FaRegEye />
|
||||||
|
<Text>{s.views}</Text>
|
||||||
|
</HStack>
|
||||||
|
</HStack>
|
||||||
|
|
||||||
|
</Flex>
|
||||||
|
</Link>)
|
||||||
|
}
|
||||||
|
</Card>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
</Box>
|
||||||
|
</PageContainer1>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default DashboardPage
|
||||||
|
|
||||||
|
|
Loading…
Reference in new issue