RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

move panels

Browse Source
This commit is contained in:
SrGooglo 2023-03-07 02:12:16 +00:00
parent dfeaf970d4
commit 75fd44e37a
3 changed files with 50 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
packages/app/src/pages/account/tabs/posts.jsx
View File

@ -1,7 +1,7 @@
import React from "react"
import { Skeleton, Result } from "antd"
import { Result } from "antd"
import Post from "models/post"
import PostModel from "models/post"
import { PostsList } from "components"
import { Icons } from "components/Icons"
@ -17,73 +17,16 @@ const emptyListRender = () => {
}
export default class UserPosts extends React.Component {
state = {
loading: true,
initialLoading: true,
hasMorePosts: true,
posts: [],
}
contentsRef = React.createRef()
loadData = async ({
trim,
replace = false
} = {}) => {
await this.setState({
loading: true,
})
const result = await Post.getUserPosts({
user_id: this.props.state.user._id,
trim: trim ?? this.state.posts.length,
})
console.log("Loaded data => \n", result)
if (result) {
if (result.length === 0) {
await this.setState({
hasMorePosts: false,
loading: false,
initialLoading: false,
})
return false
}
await this.setState({
posts: replace ? result : [...this.state.posts, ...result],
})
}
await this.setState({
loading: false,
})
if (this.state.initialLoading) {
await this.setState({
initialLoading: false,
})
}
}
componentDidMount() {
this.loadData()
}
render() {
return <div className="userPosts">
{
this.state.initialLoading ? <Skeleton active /> : <PostsList
loading={this.state.loading}
hasMorePosts={this.state.hasMorePosts}
emptyListRender={emptyListRender}
onLoadMore={this.loadData}
posts={this.state.posts}
ref={this.contentsRef}
/>
}
<PostsList
emptyListRender={emptyListRender}
onLoadMore={PostModel.getUserPosts}
loadFromModel={PostModel.getUserPosts}
loadFromModelProps={{
user_id: this.props.state.user._id,
}}
/>
</div>
}
}

69
packages/app/src/pages/index.jsx
View File

@ -19,6 +19,7 @@ export default class Dashboard extends React.Component {
openPost: null,
}
contentRef = React.createRef()
primaryPanelRef = React.createRef()
renderActiveTab = () => {
@ -32,6 +33,7 @@ export default class Dashboard extends React.Component {
return React.createElement(tab.component, {
onOpenPost: this.onOpenPost,
ref: this.contentRef,
})
}
@ -67,6 +69,40 @@ export default class Dashboard extends React.Component {
render() {
return <div className="postingDashboard">
<div className="panel left">
<div className="card" id="trendings">
<div className="header">
<h2>
<Icons.TrendingUp />
<Translation>{(t) => t("Trendings")}</Translation>
</h2>
</div>
<HashtagTrendings />
</div>
<div className="card" id="onlineFriends">
<div className="header">
<h2>
<Icons.MdPeopleAlt />
<Translation>{(t) => t("Online Friends")}</Translation>
</h2>
</div>
<ConnectedFriends />
</div>
<FeaturedEventsAnnouncements />
</div>
<div
ref={this.primaryPanelRef}
className={classnames("panel", "full", "fade-opacity-active")}
>
{this.renderActiveTab()}
</div>
<div className="panel right">
<div className="card" id="browserType">
<div className="header">
<h1>
@ -103,39 +139,6 @@ export default class Dashboard extends React.Component {
</antd.Menu>
</div>
</div>
<div
ref={this.primaryPanelRef}
className={classnames("panel", "fade-opacity-active")}
>
{this.renderActiveTab()}
</div>
<div className="panel right">
<div className="card" id="trendings">
<div className="header">
<h2>
<Icons.TrendingUp />
<Translation>{(t) => t("Trendings")}</Translation>
</h2>
</div>
<HashtagTrendings />
</div>
<div className="card" id="onlineFriends">
<div className="header">
<h2>
<Icons.Rss />
<Translation>{(t) => t("Online Friends")}</Translation>
</h2>
</div>
<ConnectedFriends />
</div>
<FeaturedEventsAnnouncements />
</div>
</div>
}
}

4
packages/app/src/pages/index.less
View File

@ -19,6 +19,10 @@
align-items: center;
&.full {
height: 100%;
}
&.left {
.card {
background-color: var(--background-color-accent);