use new post list api

This commit is contained in:
SrGooglo 2023-03-07 02:11:58 +00:00
parent 990e1fee2e
commit dfeaf970d4
7 changed files with 27 additions and 176 deletions

View File

@ -1,5 +1,4 @@
import React from "react"
import { Skeleton } from "antd"
import { PostsList } from "components"
@ -19,72 +18,17 @@ const emptyListRender = () => {
</div>
}
export default class Feed extends React.Component {
state = {
loading: true,
initialLoading: true,
hasMorePosts: true,
posts: [],
}
loadData = async ({
trim,
replace = false
} = {}) => {
await this.setState({
loading: true,
})
// get posts from api
const result = await FeedModel.getPostsFeed({
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 = async () => {
await this.loadData()
}
export class Feed extends React.Component {
render() {
return <div className="feed">
{
this.state.initialLoading ? <Skeleton active /> : <PostsList
loading={this.state.loading}
hasMorePosts={this.state.hasMorePosts}
emptyListRender={emptyListRender}
onLoadMore={this.loadData}
list={this.state.posts}
watchTimeline
/>
}
</div>
return <PostsList
emptyListRender={emptyListRender}
loadFromModel={FeedModel.getPostsFeed}
onLoadMore={FeedModel.getPostsFeed}
watchTimeline
/>
}
}
}
export default React.forwardRef((props, ref) => {
return <Feed {...props} innerRef={ref} />
})

View File

@ -1,4 +1,4 @@
.feed {
.emptyFeed {
display: flex;
flex-direction: column;
@ -7,15 +7,5 @@
width: 100%;
.emptyFeed {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 20px;
}
margin-top: 20px;
}

View File

@ -1,9 +1,7 @@
import React from "react"
import { Skeleton } from "antd"
import { Icons } from "components/Icons"
import { PostsList } from "components"
import Post from "models/post"
import PostModel from "models/post"
import "./index.less"
@ -15,77 +13,16 @@ const emptyListRender = () => {
</div>
}
export default class SavedPosts extends React.Component {
state = {
loading: true,
initialLoading: true,
hasMorePosts: true,
posts: [],
}
loadData = async ({
trim,
replace = false
} = {}) => {
await this.setState({
loading: true,
})
const result = await Post.getSavedPosts({
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()
}
export class SavedPosts extends React.Component {
render() {
return <div className="savedPosts">
<div className="savedPosts_header">
<h1>
<Icons.Bookmark />
Saved Posts
</h1>
</div>
{
this.state.initialLoading ? <Skeleton active /> : <PostsList
loading={this.state.loading}
hasMorePosts={this.state.hasMorePosts}
emptyListRender={emptyListRender}
onLoadMore={this.loadData}
posts={this.state.posts}
/>
}
</div>
return <PostsList
emptyListRender={emptyListRender}
loadFromModel={PostModel.getSavedPosts}
onLoadMore={PostModel.getSavedPosts}
/>
}
}
}
export default React.forwardRef((props, ref) => {
return <SavedPosts {...props} innerRef={ref} />
})

View File

@ -1,14 +0,0 @@
import React from "react"
import { Result } from "antd"
import "./index.less"
export default (props) => {
return <div className="trendingsBrowser">
<Result
status="404"
title="Not implemented"
subTitle="Sorry, but this feature is not implemented yet."
/>
</div>
}

View File

@ -1 +0,0 @@
.trendingsBrowser {}

View File

@ -1,6 +1,5 @@
import FeedTab from "./components/feed"
import ExploreTab from "./components/explore"
import TrendingsTab from "./components/trendings"
import SavedPostsTab from "./components/savedPosts"
export default {
@ -14,11 +13,6 @@ export default {
icon: "Search",
component: ExploreTab
},
"trendings": {
title: "Trendings",
icon: "TrendingUp",
component: TrendingsTab
},
"savedPosts": {
title: "Saved posts",
icon: "Bookmark",

View File

@ -220,6 +220,7 @@ html {
.page_layout {
width: 100%;
height: 100%;
}
}