Browse Source

Cache feed data to enable better back navigation

unoptim
greatbearshark 2 years ago
parent
commit
5948af0cea
  1. 1
      package.json
  2. 55
      src/components/main.tsx
  3. 2
      src/components/post-listing.tsx
  4. 2
      src/utils.ts
  5. 9
      yarn.lock

1
package.json

@ -63,6 +63,7 @@
"register-service-worker": "^1.7.1",
"rxjs": "^6.6.2",
"styled-components": "npm:@esm-bundle/styled-components",
"swr": "^0.3.1",
"terser": "^5.0.0",
"theme-ui": "^0.3.1",
"tippy.js": "^6.2.6",

55
src/components/main.tsx

@ -2,6 +2,7 @@ import React, { Component } from 'react';
import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
import { Subscription } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
import useSWR from 'swr'
import {
UserOperation,
CommunityUser,
@ -55,6 +56,7 @@ import {
setupTippy,
isCommentChanged,
isPostChanged,
api, fetcher
} from '../utils';
import { BASE_PATH } from '../isProduction';
import { i18n } from '../i18next';
@ -72,7 +74,7 @@ interface MainState {
trendingCommunities: Array<Community>;
siteRes: GetSiteResponse;
showEditSite: boolean;
loading: boolean;
loading: false;
posts: Array<Post>;
comments: Array<Comment>;
listingType: ListingType;
@ -134,7 +136,7 @@ class Main extends Component<MainProps & RouteComponentProps, MainState> {
online: null,
},
showEditSite: false,
loading: true,
loading: false,
posts: [],
comments: [],
listingType: getListingTypeFromProps(this.props) || ListingType.Subscribed,
@ -194,7 +196,7 @@ class Main extends Component<MainProps & RouteComponentProps, MainState> {
lastState.sort !== this.state.sort ||
lastState.page !== this.state.page
) {
this.setState({ loading: true });
// this.setState({ loading: true });
this.fetchData();
}
}
@ -513,14 +515,14 @@ class Main extends Component<MainProps & RouteComponentProps, MainState> {
listings() {
return this.state.dataType == DataType.Post ? (
<PostListings
posts={this.state.posts}
<DataWrapper
page={this.state.page}
showCommunity
removeDuplicates
listingType={ListingType[this.state.listingType]}
sort={this.state.sort}
enableDownvotes={this.state.siteRes.site.enable_downvotes}
enableNsfw={this.state.siteRes.site.enable_nsfw}
/>
enableNsfw={this.state.siteRes.site.enable_nsfw} />
) : (
<CommentNodes
nodes={commentsToFlatNodes(this.state.comments)}
@ -678,7 +680,7 @@ class Main extends Component<MainProps & RouteComponentProps, MainState> {
window.scrollTo(0, 0);
}
fetchData() {
async fetchData() {
if (this.state.dataType == DataType.Post) {
let getPostsForm: GetPostsForm = {
page: this.state.page,
@ -686,7 +688,16 @@ class Main extends Component<MainProps & RouteComponentProps, MainState> {
sort: SortType[this.state.sort],
type_: ListingType[this.state.listingType],
};
WebSocketService.Instance.getPosts(getPostsForm);
// WebSocketService.Instance.getPosts(getPostsForm);
// const params = new URLSearchParams({
// page: this.state.page,
// limit: fetchLimit,
// sort: SortType[this.state.sort],
// type_: ListingType[this.state.listingType],
// })
// console.log(params.toString())
// const res = await api.get(`post/list?${params.toString()}`);
// console.log({ res })
} else {
let getCommentsForm: GetCommentsForm = {
page: this.state.page,
@ -879,5 +890,31 @@ class Main extends Component<MainProps & RouteComponentProps, MainState> {
}
}
function DataWrapper({ page, sort, listingType, ...props }) {
const params = new URLSearchParams({
page: page,
limit: fetchLimit,
sort: SortType[sort],
type_: listingType,
})
const { data, error } = useSWR(`post/list?${params.toString()}`, fetcher)
// console.log(params.toString())
// const res = await api.get();
console.log({ data, error });
if (!data) {
return <div>Loading</div>
}
return (
<PostListings
posts={data.posts}
sort={sort}
{...props}
/>
)
}
// @ts-ignore
export default withTranslation()(withRouter(Main));

2
src/components/post-listing.tsx

@ -435,7 +435,7 @@ export class BasePostListing extends Component<
componentDidMount() {
// scroll to top of page when loading post listing
window.scrollTo(0, 0);
// window.scrollTo(0, 0);
window.addEventListener('resize', this.handleResize);
}

2
src/utils.ts

@ -1175,3 +1175,5 @@ export function isMessageChanged(operation: UserOperation): boolean {
export const api = axios.create({
baseURL: isProduction ? '/api/v1/' : 'http://localhost:8536/api/v1/',
});
export const fetcher = url => api.get(url).then(res => res.data)

9
yarn.lock

@ -7204,7 +7204,7 @@ [email protected]^1.2.0:
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
[email protected]^2.0.1:
[email protected], [email protected]^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
@ -13829,6 +13829,13 @@ [email protected]^1.0.0, [email protected]^1.2.2:
unquote "~1.1.1"
util.promisify "~1.0.0"
[email protected]^0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/swr/-/swr-0.3.1.tgz#b673f32a470418a785d962c86bd96ec555986dd0"
integrity sha512-g9JrXXMo54CSc+DU+KS0S8+5r6cpeBmBmVLhCu23ifQL9u0KKirkJpNX3Za3eOttmUuRQLXA8N1YPpoc8ejdpA==
dependencies:
fast-deep-equal "2.0.1"
[email protected]^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"

Loading…
Cancel
Save