From ee6138b58e0bd6df4bb215bfd972d9e25d40ac12 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Tue, 30 May 2023 01:15:14 +0000
Subject: [PATCH] some improvements to post list render lifecycle

---
 .../app/src/components/PostCard/index.less    |  6 +--
 .../app/src/components/PostsList/index.jsx    | 40 +++++++++++++++++++
 .../app/src/components/PostsList/index.less   | 39 +++++++++++++++---
 3 files changed, 76 insertions(+), 9 deletions(-)

diff --git a/packages/app/src/components/PostCard/index.less b/packages/app/src/components/PostCard/index.less
index 0039e051..cb531b55 100755
--- a/packages/app/src/components/PostCard/index.less
+++ b/packages/app/src/components/PostCard/index.less
@@ -4,11 +4,11 @@
 
     width: 35vw;
     min-width: 300px;
-    max-width: 600px;
-
+    max-width: 800px;
+    
+    //max-width: 600px;
     //min-height: 165px;
     //height: 100%;
-    max-width: 800px;
 
     background-color: var(--background-color-accent);
 
diff --git a/packages/app/src/components/PostsList/index.jsx b/packages/app/src/components/PostsList/index.jsx
index ea410fa5..f8e4c2c5 100755
--- a/packages/app/src/components/PostsList/index.jsx
+++ b/packages/app/src/components/PostsList/index.jsx
@@ -366,6 +366,46 @@ export class PostsListsComponent extends React.Component {
             </div>
         }
 
+        return <div className="post-list_wrapper">
+            <LoadMore
+            ref={this.listRef}
+            className="post-list"
+            loadingComponent={LoadingComponent}
+            noResultComponent={NoResultComponent}
+            hasMore={this.state.hasMore}
+            fetching={this.state.loading}
+            onBottom={this.onLoadMore}
+        >
+            {
+                !this.state.realtimeUpdates && <div className="resume_btn_wrapper">
+                    <antd.Button
+                        type="primary"
+                        shape="round"
+                        onClick={this.onResumeRealtimeUpdates}
+                        loading={this.state.resumingLoading}
+                        icon={<Icons.SyncOutlined />}
+                    >
+                        Resume
+                    </antd.Button>
+                </div>
+            }
+            {
+                this.state.list.map((data) => {
+                    return React.createElement(typeToComponent[data.type ?? "post"] ?? PostCard, {
+                        key: data._id,
+                        data: data,
+                        events: {
+                            onClickLike: this.onLikePost,
+                            onClickSave: this.onSavePost,
+                            onClickDelete: this.onDeletePost,
+                            onClickEdit: this.onEditPost,
+                        }
+                    })
+                })
+            }
+        </LoadMore>
+        </div>
+
         return <AutoSizer
             disableWidth
             style={{
diff --git a/packages/app/src/components/PostsList/index.less b/packages/app/src/components/PostsList/index.less
index bbf5cf39..d8830634 100755
--- a/packages/app/src/components/PostsList/index.less
+++ b/packages/app/src/components/PostsList/index.less
@@ -1,13 +1,28 @@
-.postList {
+.post-list_wrapper {
+    display: flex;
+    flex-direction: column;
+
+    position: relative;
+
+    width: fit-content;
+
+    //overflow: hidden;
+    overflow-y: overlay;
+
+    height: 100%;
     width: 100%;
+}
+
+.post-list {
+    position: relative;
 
     // WARN: Only use if is a performance issue (If is using virtualized list)
     //will-change: transform;
-
     overflow: hidden;
     overflow-y: overlay;
-
-    height: max-content;
+    
+    width: 100%;
+    height: 100%;
 
     display: flex;
     flex-direction: column;
@@ -17,17 +32,25 @@
     border-radius: 8px;
 
     margin: auto;
+    z-index: 150;
+    
 }
 
 .resume_btn_wrapper {
     z-index: 200;
 
-    position: absolute;
+    position: sticky;
 
     top: 0;
     right: 0;
 
-    transform: translate(0, -50%);
+    padding: 10px;
+    background-color: rgba(var(--background-color-accent-values), 0.8);
+
+    border-radius: 8px;
+
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
 
     width: 100%;
     height: fit-content;
@@ -36,6 +59,10 @@
     justify-content: center;
     align-items: center;
 
+    width: 35vw;
+    min-width: 300px;
+    max-width: 800px;
+
     opacity: 0;
 
     animation: fadeIn 150ms ease-in-out forwards;