RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 03:24:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve PostList behavior

Browse Source
This commit is contained in:
SrGooglo 2023-03-31 15:52:48 +00:00
parent d04c1f028a
commit 064537b8a6
1 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/app/src/components/PostsList/index.jsx
View File

@ -34,6 +34,7 @@ export class PostsListsComponent extends React.Component {
loading: false, loading: false,
resumingLoading: false, resumingLoading: false,
initialLoading: true, initialLoading: true,
scrollingToTop: false,
topVisible: true, topVisible: true,
@ -159,7 +160,8 @@ export class PostsListsComponent extends React.Component {
username: "random user", username: "random user",
} }
}) })
} },
listRef: this.listRef,
} }
onResumeRealtimeUpdates = async () => { onResumeRealtimeUpdates = async () => {
@ -167,19 +169,19 @@ export class PostsListsComponent extends React.Component {
this.setState({ this.setState({
resumingLoading: true, resumingLoading: true,
scrollingToTop: true,
}) })
// scroll to top
this.listRef.current.scrollTo({ this.listRef.current.scrollTo({
top: 0, top: 0,
behavior: "smooth", behavior: "smooth",
}) })
// reload posts
await this.handleLoad(this.props.loadFromModel, { await this.handleLoad(this.props.loadFromModel, {
replace: true, replace: true,
}) })
// fetch new posts
this.setState({ this.setState({
realtimeUpdates: true, realtimeUpdates: true,
resumingLoading: false, resumingLoading: false,
@ -189,7 +191,11 @@ export class PostsListsComponent extends React.Component {
onScrollList = (e) => { onScrollList = (e) => {
const { scrollTop } = e.target const { scrollTop } = e.target
console.log("Scrolling => ", scrollTop) if (this.state.scrollingToTop && scrollTop === 0) {
this.setState({
scrollingToTop: false,
})
}
if (scrollTop > 200) { if (scrollTop > 200) {
if (this.state.topVisible) { if (this.state.topVisible) {
@ -202,7 +208,7 @@ export class PostsListsComponent extends React.Component {
} }
} }
if (!this.props.realtime || this.state.resumingLoading) { if (!this.props.realtime || this.state.resumingLoading || this.state.scrollingToTop) {
return null return null
} }
@ -218,10 +224,10 @@ export class PostsListsComponent extends React.Component {
if (typeof this.props.onTopVisibility === "function") { if (typeof this.props.onTopVisibility === "function") {
this.props.onTopVisibility(true) this.props.onTopVisibility(true)
} }
}
if (this.props.realtime || !this.state.realtimeUpdates && !this.state.resumingLoading) { // if (this.props.realtime || !this.state.realtimeUpdates && !this.state.resumingLoading && scrollTop < 5) {
this.onResumeRealtimeUpdates() // this.onResumeRealtimeUpdates()
// }
} }
} }
} }
@ -352,12 +358,10 @@ export class PostsListsComponent extends React.Component {
} }
return <AutoSizer return <AutoSizer
style={{ disableWidth
width: "100%"
}}
> >
{({ height, width }) => { {({ height }) => {
console.log("AutoSizer => ", height, width) console.log("[PostList] AutoSizer height update => ", height)
return <LoadMore return <LoadMore
ref={this.listRef} ref={this.listRef}