import { Box, chakra, Flex, HStack, VStack, Image, Heading, Text, Button, useColorModeValue, Divider, Wrap, Avatar, Center, useDisclosure, Modal, ModalOverlay, ModalContent, ModalCloseButton, ModalBody, StackDivider, Stack, ModalHeader } from "@chakra-ui/react"
import Card from "components/card"
import Container from "components/container"
import SEO from "components/seo"
import siteConfig from "configs/site-config"
import useSession from "hooks/use-session"
import PageContainer1 from "layouts/page-container1"
import { useRouter } from "next/router"
import React, { useEffect, useState } from "react"
import { FaFacebook, FaFile, FaGithub, FaHeart, FaPlus, FaRegStar, FaStackOverflow, FaStar, FaTwitter, FaWeibo, FaZhihu } from "react-icons/fa"
import { ReserveUrls } from "src/data/reserve-urls"
import { Navbar, NavbarType, User } from "src/types/user"
import { requestApi } from "utils/axios/request"
import moment from 'moment'
import { Story } from "src/types/story"
import Stories from "components/story/stories"
import Link from "next/link"
import Empty from "components/empty"
import Count from "components/count"
import { Tag } from "src/types/tag"
import { IDType } from "src/types/id"
import UserCard from "components/users/user-card"
import userCustomTheme from "theme/user-custom"
import SearchFilters from "components/search-filters"
import Follow from "components/interaction/follow"
const UserPage = () => {
const { isOpen, onOpen, onClose } = useDisclosure()
const router = useRouter()
const username = router.query.username
const nav = router.query.nav
const session = useSession()
const [user, setUser]: [User, any] = useState(null)
const [rawPosts, setRawPosts]: [Story[], any] = useState([])
const [posts, setPosts]: [Story[], any] = useState([])
const [tags, setTags]: [Tag[], any] = useState([])
const [tagFilter, setTagFilter]: [Tag, any] = useState(null)
const [followers, setFollowers]: [User[], any] = useState([])
const [navbars,setNavbars]:[Navbar[],any] = useState([])
const borderColor = useColorModeValue('white', 'transparent')
const stackBorderColor = useColorModeValue(userCustomTheme.borderColor.light, userCustomTheme.borderColor.dark)
useEffect(() => {
if (username) {
initData(username)
}
}, [username])
const initData = async (username) => {
const res = await requestApi.get(`/user/info/${username}`)
setUser(res.data)
getTags(res.data.id)
getNavbars(res.data.id)
const res1 = await requestApi.get(`/user/posts/${res.data.id}`)
setPosts(res1.data)
setRawPosts(res1.data)
}
const getNavbars = async userID => {
const res = await requestApi.get(`/user/navbars/${userID}`)
setNavbars(res.data)
}
const getTags = async (userID) => {
const res = await requestApi.get(`/tag/user/${userID}`)
setTags(res.data)
}
const filterPostsByTag = tag => {
if (tag.id === tagFilter?.id) {
setTagFilter(null)
setPosts(rawPosts)
return
}
setTagFilter(tag)
const p = []
rawPosts.forEach(post => {
for (let i = 0; i < post.rawTags.length; i++) {
if (post.rawTags[i].id === tag.id) {
p.push(post)
break
}
}
})
setPosts(p)
}
const viewFollowers = async tp => {
let res
if (tp === 1) {
// followings
const res0 = await requestApi.get(`/interaction/following/${user.id}?type=${user.id.substring(0,1)}`)
const ids = []
for (const f of res0.data) {
ids.push(f.id)
}
res = await requestApi.post(`/user/ids`, ids)
} else if (tp === 0) {
// followers
res = await requestApi.get(`/interaction/followers/${user.id}?type=${user.id.substring(0,1)}`)
} else if (tp === 2) {
// org members
res = await requestApi.get(`/org/members/${user.id}`)
}
setFollowers(res.data)
if (res.data.length > 0) {
onOpen()
}
}
const isSubNavActive = (id) => {
return id === nav
}
return (
<>
{
user &&
{user.nickname}
{user.tagline && {user.tagline}}
HOME
{
navbars.map((nv,i) =>
{nv.label}
)
}
{session?.user.id === user.id ?
: }
Followers
viewFollowers(0)}>
{user.type === IDType.User ? "Following" : "Members"}
viewFollowers(1) : () => viewFollowers(2)}>
{user.about &&
<>
{user.about}
}
{user.location &&
Location:
{user.location}
}
{user.website &&
Website:
{user.website}
}
{user.email &&
联系邮箱:
{user.email}
}
Joined:
{moment(user.created).fromNow()}
{user.github && }
{user.twitter && }
{user.facebook && }
{user.stackoverflow && }
{user.zhihu && }
{user.weibo && }
{user.availFor &&
I am available for
{user.availFor}
}
{user.rawSkills?.length > 0 &&
{user.type === IDType.User ? "擅长技术" : "组织技术栈"}
{
user.rawSkills.map(skill =>
{skill.title}
)
}
}
{tags.length > 0 &&
博客标签
{
tags.map(tag =>
)
}
}
{posts.length === 0 ?
:
}
}
} >
{followers.map(user =>
)}
)
}
export default UserPage