From e5511c37903e3999de409ed5620bd05c2f545b0b Mon Sep 17 00:00:00 2001 From: sunface Date: Tue, 2 Mar 2021 21:40:07 +0800 Subject: [PATCH] update user profile --- layouts/page-container1.tsx | 54 ++++++++++++++++++ pages/[username]/index.tsx | 101 +++++++++++++++++++++++----------- server/internal/user/users.go | 4 ++ server/pkg/models/user.go | 2 +- theme.ts | 1 + theme/layer-styles.js | 2 +- 6 files changed, 131 insertions(+), 33 deletions(-) create mode 100644 layouts/page-container1.tsx diff --git a/layouts/page-container1.tsx b/layouts/page-container1.tsx new file mode 100644 index 00000000..6b7c044e --- /dev/null +++ b/layouts/page-container1.tsx @@ -0,0 +1,54 @@ +import { Badge, Box, chakra,Flex,PropsOf } from "@chakra-ui/react" +import { SkipNavContent, SkipNavLink } from "@chakra-ui/skip-nav" +import Container from "components/container" +import Footer from "./footer" +import Nav from "./nav/nav" +import SEO from "components/seo" +import { useRouter } from "next/router" +import * as React from "react" +import PageTransition from "src/components/page-transition" +import siteConfig from "configs/site-config" +import VerticalNav from "./nav/vertical-nav" + +function useHeadingFocusOnRouteChange() { + const router = useRouter() + + React.useEffect(() => { + const onRouteChange = () => { + const [heading] = Array.from(document.getElementsByTagName("h1")) + heading?.focus() + } + router.events.on("routeChangeComplete", onRouteChange) + return () => { + router.events.off("routeChangeComplete", onRouteChange) + } + }, []) +} + +type PageContainerProps = PropsOf & { + children: React.ReactNode + nav?: any +} + + +function PageContainer1(props: PageContainerProps) { + const { children ,nav, ...rest} = props + useHeadingFocusOnRouteChange() + + return ( + <> + + + + + {children} + + + + ) +} + +export default PageContainer1 diff --git a/pages/[username]/index.tsx b/pages/[username]/index.tsx index fb818169..c03d650c 100644 --- a/pages/[username]/index.tsx +++ b/pages/[username]/index.tsx @@ -1,4 +1,4 @@ -import { Box, chakra, Flex, HStack, VStack ,Image, Heading, Text, Button, useColorModeValue} from "@chakra-ui/react" +import { Box, chakra, Flex, HStack, VStack, Image, Heading, Text, Button, useColorModeValue, Divider } from "@chakra-ui/react" import Card from "components/card" import Container from "components/container" import SEO from "components/seo" @@ -7,54 +7,93 @@ import useSession from "hooks/use-session" import Nav from "layouts/nav/nav" import VerticalNav from "layouts/nav/vertical-nav" import PageContainer from "layouts/page-container" +import PageContainer1 from "layouts/page-container1" import { useRouter } from "next/router" import React, { useEffect, useState } from "react" -import { FaEdit, FaPlus } from "react-icons/fa" +import { FaDove, FaEdit, FaFacebook, FaGithub, FaHeart, FaPlus, FaRegStar, FaStackOverflow, FaStar, FaTwitter, FaWeibo, FaZhihu } from "react-icons/fa" +import { ReserveUrls } from "src/data/reserve-urls" import { User } from "src/types/session" import { requestApi } from "utils/axios/request" +import moment from 'moment' const UserPage = () => { const router = useRouter() const username = router.query.username const session = useSession() - const [user,setUser]:[User,any] = useState(null) - const borderColor = useColorModeValue('white','transparent') + const [user, setUser]: [User, any] = useState(null) + const borderColor = useColorModeValue('white', 'transparent') useEffect(() => { if (username) { requestApi.get(`/user/info/${username}`).then(res => setUser(res.data)) } - },[username]) + }, [username]) return ( - <> - - - - + <> + + { - user && - - - - - - - {user.nickname} - {user.tagline} - {session?.user.id === user.id ? - - :} - + user && + + + + + + {user.nickname} + {user.tagline && {user.tagline}} + + Followers 0 + Following 0 + + {session?.user.id === user.id ? + : } - + + + + {user.about} + + {user.location && + Location: + {user.location} + } + + {user.website && + Website: + {user.website} + } + + + 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} + } + + + + } - - - -)} + + + ) +} export default UserPage diff --git a/server/internal/user/users.go b/server/internal/user/users.go index ab5501b0..c69ed722 100644 --- a/server/internal/user/users.go +++ b/server/internal/user/users.go @@ -48,6 +48,10 @@ func GetUserDetail(id int64, username string) (*models.User, *e.Error) { return nil, e.New(http.StatusInternalServerError, e.Internal) } + if user.Cover == "" { + user.Cover = models.DefaultCover + } + return user, nil } diff --git a/server/pkg/models/user.go b/server/pkg/models/user.go index 72f9b25c..a587b396 100644 --- a/server/pkg/models/user.go +++ b/server/pkg/models/user.go @@ -34,7 +34,7 @@ type User struct { } const DefaultAvatar = "https://cdn.hashnode.com/res/hashnode/image/upload/v1600792675173/rY-APy9Fc.png?auto=compress" - +const DefaultCover = "https://cdn.hashnode.com/res/hashnode/image/upload/v1584035951809/rA6njTVVd.jpeg?w=1600&fit=crop&crop=entropy&auto=compress&auto=compress" func (user *User) Query(id int64, username string, email string) error { err := db.Conn.QueryRow(`SELECT id,username,role,nickname,email,avatar,last_seen_at,created FROM user WHERE id=? or username=? or email=?`, id, username, email).Scan(&user.ID, &user.Username, &user.Role, &user.Nickname, &user.Email, &user.Avatar, &user.LastSeenAt, &user.Created) diff --git a/theme.ts b/theme.ts index 8aaa35a4..47d2cb2c 100644 --- a/theme.ts +++ b/theme.ts @@ -33,6 +33,7 @@ const customTheme = extendTheme({ color: "#b5f4a5 !important", fontStyle: "normal !important", }, + fontWeight: '450' }, ...markdownEditor(props), ...markdownRender(props) diff --git a/theme/layer-styles.js b/theme/layer-styles.js index a9f947c9..ad3ead44 100644 --- a/theme/layer-styles.js +++ b/theme/layer-styles.js @@ -1,7 +1,7 @@ export default function layerStyles(theme) { return { textSecondary: { - opacity: "0.8", + opacity: "0.7", }, colorButton: { bg: "linear-gradient(270deg,#0076f5,#0098a3)",