From 0f70bf43fdaa2ac99a87991ab8f7369a4a81eeb5 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Mon, 16 Jun 2025 20:46:10 +0000 Subject: [PATCH] Restructure account pages and convert class to function --- packages/app/src/pages/account/[username].jsx | 8 - .../src/pages/account/[username].mobile.jsx | 8 - .../src/pages/account/[username]/index.jsx | 256 +++++++++++++++++ .../pages/account/{ => [username]}/index.less | 0 .../account/{ => [username]}/index.mobile.jsx | 0 .../{ => [username]}/index.mobile.less | 0 .../{ => [username]}/tabs/details/index.jsx | 0 .../{ => [username]}/tabs/details/index.less | 0 .../{ => [username]}/tabs/followers/index.jsx | 0 .../tabs/followers/index.less | 0 .../{ => [username]}/tabs/music/index.jsx | 0 .../{ => [username]}/tabs/music/index.less | 0 .../account/[username]/tabs/posts/index.jsx | 31 +++ packages/app/src/pages/account/index.jsx | 260 ------------------ .../src/pages/account/tabs/posts/index.jsx | 30 -- 15 files changed, 287 insertions(+), 306 deletions(-) delete mode 100755 packages/app/src/pages/account/[username].jsx delete mode 100755 packages/app/src/pages/account/[username].mobile.jsx create mode 100644 packages/app/src/pages/account/[username]/index.jsx rename packages/app/src/pages/account/{ => [username]}/index.less (100%) rename packages/app/src/pages/account/{ => [username]}/index.mobile.jsx (100%) rename packages/app/src/pages/account/{ => [username]}/index.mobile.less (100%) rename packages/app/src/pages/account/{ => [username]}/tabs/details/index.jsx (100%) rename packages/app/src/pages/account/{ => [username]}/tabs/details/index.less (100%) rename packages/app/src/pages/account/{ => [username]}/tabs/followers/index.jsx (100%) rename packages/app/src/pages/account/{ => [username]}/tabs/followers/index.less (100%) rename packages/app/src/pages/account/{ => [username]}/tabs/music/index.jsx (100%) rename packages/app/src/pages/account/{ => [username]}/tabs/music/index.less (100%) create mode 100755 packages/app/src/pages/account/[username]/tabs/posts/index.jsx delete mode 100755 packages/app/src/pages/account/index.jsx delete mode 100755 packages/app/src/pages/account/tabs/posts/index.jsx diff --git a/packages/app/src/pages/account/[username].jsx b/packages/app/src/pages/account/[username].jsx deleted file mode 100755 index 78a391e1..00000000 --- a/packages/app/src/pages/account/[username].jsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from "react" -import Account from "." - -export default (props) => { - const username = props.params.username - - return -} \ No newline at end of file diff --git a/packages/app/src/pages/account/[username].mobile.jsx b/packages/app/src/pages/account/[username].mobile.jsx deleted file mode 100755 index 99372b0a..00000000 --- a/packages/app/src/pages/account/[username].mobile.jsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from "react" -import Account from "./index.mobile" - -export default (props) => { - const username = props.params.username - - return -} \ No newline at end of file diff --git a/packages/app/src/pages/account/[username]/index.jsx b/packages/app/src/pages/account/[username]/index.jsx new file mode 100644 index 00000000..75ee2c0e --- /dev/null +++ b/packages/app/src/pages/account/[username]/index.jsx @@ -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 ( + + ) + } + + if (!user) { + return + } + + const state = { + requestedUser, + user, + isSelf, + followersCount, + following, + tabActiveKey, + isNotExistent, + coverExpanded, + } + + return ( +
+ {user.cover && ( +
toggleCoverExpanded()} + id="profile-cover" + /> + )} + +
+
+ + +
+ + + {!isSelf && ( + } + onClick={() => + app.location.push(`/messages/${user._id}`) + } + /> + )} +
+
+ +
+ + + {React.createElement(TabsComponent[tabActiveKey], { + onTopVisibility: onPostListTopVisibility, + state: state, + })} + + +
+ +
+ 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", + }, + ])} + /> +
+
+
+ ) +} + +Account.options = { + layout: { + type: "default", + centeredContent: false, + }, +} + +export default Account diff --git a/packages/app/src/pages/account/index.less b/packages/app/src/pages/account/[username]/index.less similarity index 100% rename from packages/app/src/pages/account/index.less rename to packages/app/src/pages/account/[username]/index.less diff --git a/packages/app/src/pages/account/index.mobile.jsx b/packages/app/src/pages/account/[username]/index.mobile.jsx similarity index 100% rename from packages/app/src/pages/account/index.mobile.jsx rename to packages/app/src/pages/account/[username]/index.mobile.jsx diff --git a/packages/app/src/pages/account/index.mobile.less b/packages/app/src/pages/account/[username]/index.mobile.less similarity index 100% rename from packages/app/src/pages/account/index.mobile.less rename to packages/app/src/pages/account/[username]/index.mobile.less diff --git a/packages/app/src/pages/account/tabs/details/index.jsx b/packages/app/src/pages/account/[username]/tabs/details/index.jsx similarity index 100% rename from packages/app/src/pages/account/tabs/details/index.jsx rename to packages/app/src/pages/account/[username]/tabs/details/index.jsx diff --git a/packages/app/src/pages/account/tabs/details/index.less b/packages/app/src/pages/account/[username]/tabs/details/index.less similarity index 100% rename from packages/app/src/pages/account/tabs/details/index.less rename to packages/app/src/pages/account/[username]/tabs/details/index.less diff --git a/packages/app/src/pages/account/tabs/followers/index.jsx b/packages/app/src/pages/account/[username]/tabs/followers/index.jsx similarity index 100% rename from packages/app/src/pages/account/tabs/followers/index.jsx rename to packages/app/src/pages/account/[username]/tabs/followers/index.jsx diff --git a/packages/app/src/pages/account/tabs/followers/index.less b/packages/app/src/pages/account/[username]/tabs/followers/index.less similarity index 100% rename from packages/app/src/pages/account/tabs/followers/index.less rename to packages/app/src/pages/account/[username]/tabs/followers/index.less diff --git a/packages/app/src/pages/account/tabs/music/index.jsx b/packages/app/src/pages/account/[username]/tabs/music/index.jsx similarity index 100% rename from packages/app/src/pages/account/tabs/music/index.jsx rename to packages/app/src/pages/account/[username]/tabs/music/index.jsx diff --git a/packages/app/src/pages/account/tabs/music/index.less b/packages/app/src/pages/account/[username]/tabs/music/index.less similarity index 100% rename from packages/app/src/pages/account/tabs/music/index.less rename to packages/app/src/pages/account/[username]/tabs/music/index.less diff --git a/packages/app/src/pages/account/[username]/tabs/posts/index.jsx b/packages/app/src/pages/account/[username]/tabs/posts/index.jsx new file mode 100755 index 00000000..32f0c89d --- /dev/null +++ b/packages/app/src/pages/account/[username]/tabs/posts/index.jsx @@ -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 ( + }> +

It's seems this user has no public post, yet.

+ + ) +} + +export default class UserPosts extends React.Component { + render() { + console.log(this.props.state) + return ( + + ) + } +} diff --git a/packages/app/src/pages/account/index.jsx b/packages/app/src/pages/account/index.jsx deleted file mode 100755 index fce56175..00000000 --- a/packages/app/src/pages/account/index.jsx +++ /dev/null @@ -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 ( - - ) - } - - if (!user) { - return - } - - return ( -
- {user.cover && ( -
this.toggleCoverExpanded()} - id="profile-cover" - /> - )} - -
-
- - -
- - - {!this.state.isSelf && ( - } - onClick={() => - app.location.push( - `/messages/${user._id}`, - ) - } - /> - )} -
-
- -
- - - {React.createElement( - TabsComponent[this.state.tabActiveKey], - { - onTopVisibility: - this.onPostListTopVisibility, - state: this.state, - }, - )} - - -
- -
- 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", - }, - ])} - /> -
-
-
- ) - } -} diff --git a/packages/app/src/pages/account/tabs/posts/index.jsx b/packages/app/src/pages/account/tabs/posts/index.jsx deleted file mode 100755 index 234472ac..00000000 --- a/packages/app/src/pages/account/tabs/posts/index.jsx +++ /dev/null @@ -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 } - > -

- It's seems this user has no public post, yet. -

- -} - -export default class UserPosts extends React.Component { - render() { - return - } -} \ No newline at end of file