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

fetch methods

Browse Source
This commit is contained in:
srgooglo 2022-03-02 16:08:20 +01:00
parent 9b60853a8c
commit 9593584dcd
2 changed files with 60 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/app/src/pages/explore/index.jsx
View File

@ -1,12 +1,17 @@
import React from "react"
import * as antd from "antd"
import { PostCard } from "components"
import { PostCard, PostCreator } from "components"
import { InfiniteScroll } from "antd-mobile"
import "./index.less"
const ContainerHeight = 700;
export default class PostsExplorer extends React.Component {
state = {
loading: true,
skipStep: 0,
lastLength: 0,
posts: [],
}
@ -35,7 +40,9 @@ export default class PostsExplorer extends React.Component {
}
fetchPosts = async () => {
const posts = await this.api.get.feed().catch(error => {
const posts = await this.api.get.feed(undefined, {
feedSkip: this.state.skipStep,
}).catch(error => {
console.error(error)
antd.message.error(error)
@ -44,25 +51,40 @@ export default class PostsExplorer extends React.Component {
if (posts) {
console.log(posts)
this.setState({ posts })
this.setState({ posts: [...posts, ...this.state.posts,], lastLength: posts.length })
}
}
hasMore = () => {
return this.state.posts.length < this.state.lastLength
}
renderPosts = (posts) => {
if (!Array.isArray(posts)) {
antd.message.error("Failed to render posts")
return null
loadMore = async () => {
await this.setState({ skipStep: this.state.skipStep + 1 })
await this.fetchPosts()
}
return posts.map((post) => {
render() {
if (this.state.loading) {
return <antd.Skeleton active />
}
return <div className="explore">
<div className="wrapper">
<div className="header">
<PostCreator />
</div>
{
this.state.posts.map(post => {
return <PostCard data={post} />
})
}
render() {
return <div className="explore">
{this.state.loading ? <antd.Skeleton active /> : this.renderPosts(this.state.posts)}
<InfiniteScroll loadMore={this.loadMore} hasMore={this.hasMore} >
<div>Loading more...</div>
</InfiniteScroll>
</div>
</div>
}
}

28
packages/app/src/pages/explore/index.less
View File

@ -1,11 +1,31 @@
.explore {
display: flex;
flex-direction: column;
align-items: center;
display : flex;
flex-direction : column;
align-items : center;
justify-content: center;
width: 100%;
> div {
.wrapper {
display : flex;
flex-direction : column;
align-items : center;
justify-content: center;
width : 100%;
max-width: 40vw;
.header {
display : flex;
flex-direction : column;
align-items : center;
justify-content: center;
width: 100%;
}
>div {
margin-bottom: 15px;
}
}
}