mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-18 06:54:15 +00:00
Restructure account pages and convert class to function
This commit is contained in:
parent
8b9afae7eb
commit
0f70bf43fd
@ -1,8 +0,0 @@
|
||||
import React from "react"
|
||||
import Account from "."
|
||||
|
||||
export default (props) => {
|
||||
const username = props.params.username
|
||||
|
||||
return <Account username={username} />
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
import React from "react"
|
||||
import Account from "./index.mobile"
|
||||
|
||||
export default (props) => {
|
||||
const username = props.params.username
|
||||
|
||||
return <Account username={username} />
|
||||
}
|
||||
256
packages/app/src/pages/account/[username]/index.jsx
Normal file
256
packages/app/src/pages/account/[username]/index.jsx
Normal file
@ -0,0 +1,256 @@
|
||||
import React, { useState, useEffect, useRef } from "react"
|
||||
import * as antd from "antd"
|
||||
import classnames from "classnames"
|
||||
import { motion, AnimatePresence } from "motion/react"
|
||||
|
||||
import { Icons } from "@components/Icons"
|
||||
import FollowButton from "@components/FollowButton"
|
||||
import UserCard from "@components/UserCard"
|
||||
|
||||
import GenerateMenuItems from "@utils/generateMenuItems"
|
||||
|
||||
import UserModel from "@models/user"
|
||||
import FollowsModel from "@models/follows"
|
||||
|
||||
import DetailsTab from "./tabs/details"
|
||||
import PostsTab from "./tabs/posts"
|
||||
import MusicTab from "./tabs/music"
|
||||
import FollowersTab from "./tabs/followers"
|
||||
|
||||
import "./index.less"
|
||||
|
||||
const TabsComponent = {
|
||||
posts: PostsTab,
|
||||
followers: FollowersTab,
|
||||
details: DetailsTab,
|
||||
music: MusicTab,
|
||||
}
|
||||
|
||||
const Account = ({ params }) => {
|
||||
const [requestedUser, setRequestedUser] = useState(null)
|
||||
const [user, setUser] = useState(null)
|
||||
const [isSelf, setIsSelf] = useState(false)
|
||||
const [followersCount, setFollowersCount] = useState(0)
|
||||
const [following, setFollowing] = useState(false)
|
||||
const [tabActiveKey, setTabActiveKey] = useState("posts")
|
||||
const [isNotExistent, setIsNotExistent] = useState(false)
|
||||
const [coverExpanded, setCoverExpanded] = useState(false)
|
||||
|
||||
const contentRef = useRef()
|
||||
|
||||
const loadUserData = async () => {
|
||||
const requestedUsername = params.username ?? app.userData.username
|
||||
|
||||
let isSelfUser = false
|
||||
let userData = null
|
||||
let followersCountData = 0
|
||||
|
||||
if (requestedUsername != null) {
|
||||
if (app.userData.username === requestedUsername) {
|
||||
isSelfUser = true
|
||||
}
|
||||
|
||||
userData = await UserModel.data({
|
||||
username: requestedUsername,
|
||||
}).catch((error) => {
|
||||
console.error(error)
|
||||
return false
|
||||
})
|
||||
|
||||
if (!userData) {
|
||||
setIsNotExistent(true)
|
||||
return false
|
||||
}
|
||||
|
||||
console.log(`Loaded User [${userData.username}] >`, userData)
|
||||
|
||||
const followersResult = await FollowsModel.getFollowers(
|
||||
userData._id,
|
||||
).catch(() => false)
|
||||
|
||||
if (followersResult) {
|
||||
followersCountData = followersResult.count
|
||||
}
|
||||
}
|
||||
|
||||
setIsSelf(isSelfUser)
|
||||
setRequestedUser(requestedUsername)
|
||||
setUser(userData)
|
||||
setFollowing(userData?.following || false)
|
||||
setFollowersCount(followersCountData)
|
||||
}
|
||||
|
||||
const onClickFollow = async () => {
|
||||
const result = await FollowsModel.toggleFollow({
|
||||
user_id: user._id,
|
||||
}).catch((error) => {
|
||||
console.error(error)
|
||||
antd.message.error(error.message)
|
||||
return false
|
||||
})
|
||||
|
||||
setFollowing(result.following)
|
||||
setFollowersCount(result.count)
|
||||
}
|
||||
|
||||
const toggleCoverExpanded = (to) => {
|
||||
setCoverExpanded(to ?? !coverExpanded)
|
||||
}
|
||||
|
||||
const handlePageTransition = (key) => {
|
||||
if (typeof key !== "string") {
|
||||
console.error(
|
||||
"Cannot handle page transition. Invalid key, only valid passing string",
|
||||
key,
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
const normalizedKey = key.toLowerCase()
|
||||
|
||||
if (tabActiveKey === normalizedKey) {
|
||||
return false
|
||||
}
|
||||
|
||||
setTabActiveKey(normalizedKey)
|
||||
}
|
||||
|
||||
const onPostListTopVisibility = () => {
|
||||
// This function was referenced but not defined in the original component
|
||||
// You may need to implement this based on your requirements
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadUserData()
|
||||
}, [params.username])
|
||||
|
||||
if (isNotExistent) {
|
||||
return (
|
||||
<antd.Result
|
||||
status="404"
|
||||
title="This user does not exist, yet..."
|
||||
></antd.Result>
|
||||
)
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return <antd.Skeleton active />
|
||||
}
|
||||
|
||||
const state = {
|
||||
requestedUser,
|
||||
user,
|
||||
isSelf,
|
||||
followersCount,
|
||||
following,
|
||||
tabActiveKey,
|
||||
isNotExistent,
|
||||
coverExpanded,
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
id="profile"
|
||||
className={classnames("account-profile", {
|
||||
["withCover"]: user.cover,
|
||||
})}
|
||||
>
|
||||
{user.cover && (
|
||||
<div
|
||||
className={classnames("cover", {
|
||||
["expanded"]: coverExpanded,
|
||||
})}
|
||||
style={{ backgroundImage: `url("${user.cover}")` }}
|
||||
onClick={() => toggleCoverExpanded()}
|
||||
id="profile-cover"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="panels">
|
||||
<div className="left-panel">
|
||||
<UserCard user={user} />
|
||||
|
||||
<div className="actions">
|
||||
<FollowButton
|
||||
count={followersCount}
|
||||
onClick={onClickFollow}
|
||||
followed={following}
|
||||
self={isSelf}
|
||||
/>
|
||||
|
||||
{!isSelf && (
|
||||
<antd.Button
|
||||
icon={<Icons.MdMessage />}
|
||||
onClick={() =>
|
||||
app.location.push(`/messages/${user._id}`)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="center-panel" ref={contentRef}>
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{
|
||||
duration: 0.15,
|
||||
}}
|
||||
key={tabActiveKey}
|
||||
style={{
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{React.createElement(TabsComponent[tabActiveKey], {
|
||||
onTopVisibility: onPostListTopVisibility,
|
||||
state: state,
|
||||
})}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<div className="right-panel">
|
||||
<antd.Menu
|
||||
className="tabMenu"
|
||||
mode={app.isMobile ? "horizontal" : "vertical"}
|
||||
selectedKeys={[tabActiveKey]}
|
||||
onClick={(e) => handlePageTransition(e.key)}
|
||||
items={GenerateMenuItems([
|
||||
{
|
||||
id: "posts",
|
||||
label: "Posts",
|
||||
icon: "FiBookOpen",
|
||||
},
|
||||
{
|
||||
id: "music",
|
||||
label: "Music",
|
||||
icon: "MdAlbum",
|
||||
},
|
||||
{
|
||||
id: "followers",
|
||||
label: "Followers",
|
||||
icon: "FiUsers",
|
||||
},
|
||||
{
|
||||
id: "details",
|
||||
label: "Details",
|
||||
icon: "FiInfo",
|
||||
},
|
||||
])}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Account.options = {
|
||||
layout: {
|
||||
type: "default",
|
||||
centeredContent: false,
|
||||
},
|
||||
}
|
||||
|
||||
export default Account
|
||||
31
packages/app/src/pages/account/[username]/tabs/posts/index.jsx
Executable file
31
packages/app/src/pages/account/[username]/tabs/posts/index.jsx
Executable file
@ -0,0 +1,31 @@
|
||||
import React from "react"
|
||||
import { Result } from "antd"
|
||||
|
||||
import PostsList from "@components/PostsList"
|
||||
import { Icons } from "@components/Icons"
|
||||
|
||||
import PostModel from "@models/post"
|
||||
|
||||
const emptyListRender = () => {
|
||||
return (
|
||||
<Result icon={<Icons.FiUserX style={{ fontSize: "50px" }} />}>
|
||||
<h2>It's seems this user has no public post, yet.</h2>
|
||||
</Result>
|
||||
)
|
||||
}
|
||||
|
||||
export default class UserPosts extends React.Component {
|
||||
render() {
|
||||
console.log(this.props.state)
|
||||
return (
|
||||
<PostsList
|
||||
onTopVisibility={this.props.onTopVisibility}
|
||||
emptyListRender={emptyListRender}
|
||||
loadFromModel={PostModel.getUserPosts}
|
||||
loadFromModelProps={{
|
||||
user_id: this.props.state.user._id,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,260 +0,0 @@
|
||||
import React from "react"
|
||||
import * as antd from "antd"
|
||||
import classnames from "classnames"
|
||||
import { motion, AnimatePresence } from "motion/react"
|
||||
|
||||
import { Icons } from "@components/Icons"
|
||||
import FollowButton from "@components/FollowButton"
|
||||
import UserCard from "@components/UserCard"
|
||||
|
||||
import GenerateMenuItems from "@utils/generateMenuItems"
|
||||
|
||||
import SessionModel from "@models/session"
|
||||
import UserModel from "@models/user"
|
||||
import FollowsModel from "@models/follows"
|
||||
|
||||
import DetailsTab from "./tabs/details"
|
||||
import PostsTab from "./tabs/posts"
|
||||
import MusicTab from "./tabs/music"
|
||||
import FollowersTab from "./tabs/followers"
|
||||
|
||||
import "./index.less"
|
||||
|
||||
const TabsComponent = {
|
||||
posts: PostsTab,
|
||||
followers: FollowersTab,
|
||||
details: DetailsTab,
|
||||
music: MusicTab,
|
||||
}
|
||||
|
||||
export default class Account extends React.Component {
|
||||
state = {
|
||||
requestedUser: null,
|
||||
|
||||
user: null,
|
||||
isSelf: false,
|
||||
|
||||
followersCount: 0,
|
||||
following: false,
|
||||
|
||||
tabActiveKey: "posts",
|
||||
|
||||
isNotExistent: false,
|
||||
}
|
||||
|
||||
contentRef = React.createRef()
|
||||
|
||||
componentDidMount = async () => {
|
||||
app.layout.toggleCenteredContent(false)
|
||||
|
||||
const token = await SessionModel.getDecodedToken()
|
||||
const requestedUser = this.props.username ?? token?.username
|
||||
|
||||
let isSelf = false
|
||||
let user = null
|
||||
let followersCount = 0
|
||||
|
||||
if (requestedUser != null) {
|
||||
if (token.username === requestedUser) {
|
||||
isSelf = true
|
||||
}
|
||||
|
||||
user = await UserModel.data({
|
||||
username: requestedUser,
|
||||
}).catch((error) => {
|
||||
console.error(error)
|
||||
|
||||
return false
|
||||
})
|
||||
|
||||
if (!user) {
|
||||
this.setState({
|
||||
isNotExistent: true,
|
||||
})
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
console.log(`Loaded User [${user.username}] >`, user)
|
||||
|
||||
const followersResult = await FollowsModel.getFollowers(
|
||||
user._id,
|
||||
).catch(() => false)
|
||||
|
||||
if (followersResult) {
|
||||
followersCount = followersResult.count
|
||||
}
|
||||
}
|
||||
|
||||
await this.setState({
|
||||
isSelf,
|
||||
requestedUser,
|
||||
user,
|
||||
|
||||
following: user.following,
|
||||
followersCount: followersCount,
|
||||
})
|
||||
}
|
||||
|
||||
onClickFollow = async () => {
|
||||
const result = await FollowsModel.toggleFollow({
|
||||
user_id: this.state.user._id,
|
||||
}).catch((error) => {
|
||||
console.error(error)
|
||||
antd.message.error(error.message)
|
||||
|
||||
return false
|
||||
})
|
||||
|
||||
await this.setState({
|
||||
following: result.following,
|
||||
followersCount: result.count,
|
||||
})
|
||||
}
|
||||
|
||||
toggleCoverExpanded = async (to) => {
|
||||
this.setState({
|
||||
coverExpanded: to ?? !this.state.coverExpanded,
|
||||
})
|
||||
}
|
||||
|
||||
handlePageTransition = (key) => {
|
||||
if (typeof key !== "string") {
|
||||
console.error(
|
||||
"Cannot handle page transition. Invalid key, only valid passing string",
|
||||
key,
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
key = key.toLowerCase()
|
||||
|
||||
if (this.state.tabActiveKey === key) {
|
||||
return false
|
||||
}
|
||||
|
||||
this.setState({
|
||||
tabActiveKey: key,
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const user = this.state.user
|
||||
|
||||
if (this.state.isNotExistent) {
|
||||
return (
|
||||
<antd.Result
|
||||
status="404"
|
||||
title="This user does not exist, yet..."
|
||||
></antd.Result>
|
||||
)
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return <antd.Skeleton active />
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
id="profile"
|
||||
className={classnames("account-profile", {
|
||||
["withCover"]: user.cover,
|
||||
})}
|
||||
>
|
||||
{user.cover && (
|
||||
<div
|
||||
className={classnames("cover", {
|
||||
["expanded"]: this.state.coverExpanded,
|
||||
})}
|
||||
style={{ backgroundImage: `url("${user.cover}")` }}
|
||||
onClick={() => this.toggleCoverExpanded()}
|
||||
id="profile-cover"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="panels">
|
||||
<div className="left-panel">
|
||||
<UserCard user={user} />
|
||||
|
||||
<div className="actions">
|
||||
<FollowButton
|
||||
count={this.state.followersCount}
|
||||
onClick={this.onClickFollow}
|
||||
followed={this.state.following}
|
||||
self={this.state.isSelf}
|
||||
/>
|
||||
|
||||
{!this.state.isSelf && (
|
||||
<antd.Button
|
||||
icon={<Icons.MdMessage />}
|
||||
onClick={() =>
|
||||
app.location.push(
|
||||
`/messages/${user._id}`,
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="center-panel" ref={this.contentRef}>
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{
|
||||
duration: 0.15,
|
||||
}}
|
||||
key={this.state.tabActiveKey}
|
||||
style={{
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{React.createElement(
|
||||
TabsComponent[this.state.tabActiveKey],
|
||||
{
|
||||
onTopVisibility:
|
||||
this.onPostListTopVisibility,
|
||||
state: this.state,
|
||||
},
|
||||
)}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<div className="right-panel">
|
||||
<antd.Menu
|
||||
className="tabMenu"
|
||||
mode={app.isMobile ? "horizontal" : "vertical"}
|
||||
selectedKeys={[this.state.tabActiveKey]}
|
||||
onClick={(e) => this.handlePageTransition(e.key)}
|
||||
items={GenerateMenuItems([
|
||||
{
|
||||
id: "posts",
|
||||
label: "Posts",
|
||||
icon: "FiBookOpen",
|
||||
},
|
||||
{
|
||||
id: "music",
|
||||
label: "Music",
|
||||
icon: "MdAlbum",
|
||||
},
|
||||
{
|
||||
id: "followers",
|
||||
label: "Followers",
|
||||
icon: "FiUsers",
|
||||
},
|
||||
{
|
||||
id: "details",
|
||||
label: "Details",
|
||||
icon: "FiInfo",
|
||||
},
|
||||
])}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
import React from "react"
|
||||
import { Result } from "antd"
|
||||
|
||||
import PostsList from "@components/PostsList"
|
||||
import { Icons } from "@components/Icons"
|
||||
|
||||
import PostModel from "@models/post"
|
||||
|
||||
const emptyListRender = () => {
|
||||
return <Result
|
||||
icon={<Icons.FiUserX style={{ fontSize: "50px" }} />}
|
||||
>
|
||||
<h2>
|
||||
It's seems this user has no public post, yet.
|
||||
</h2>
|
||||
</Result>
|
||||
}
|
||||
|
||||
export default class UserPosts extends React.Component {
|
||||
render() {
|
||||
return <PostsList
|
||||
onTopVisibility={this.props.onTopVisibility}
|
||||
emptyListRender={emptyListRender}
|
||||
loadFromModel={PostModel.getUserPosts}
|
||||
loadFromModelProps={{
|
||||
user_id: this.props.state.user._id,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user