move panels

packages/app/src/pages/account/tabs/posts.jsx

@@ -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">
-            {
+            <PostsList
-                this.state.initialLoading ? <Skeleton active /> : <PostsList
+                emptyListRender={emptyListRender}
-                    loading={this.state.loading}
+                onLoadMore={PostModel.getUserPosts}
-                    hasMorePosts={this.state.hasMorePosts}
+                loadFromModel={PostModel.getUserPosts}
-                    emptyListRender={emptyListRender}
+                loadFromModelProps={{
-                    onLoadMore={this.loadData}
+                    user_id: this.props.state.user._id,
-                    posts={this.state.posts}
+                }}
-                    ref={this.contentsRef}
+            />
-                />
-            }
         </div>
     }
 }

packages/app/src/pages/index.jsx

@@ -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>
     }
 }

packages/app/src/pages/index.less

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