Browse Source

immutability for voting, post listings are pure

main
DashEightMate 2 years ago
parent
commit
954f27cc51
  1. 1
      package.json
  2. 24
      src/components/main.tsx
  3. 8
      src/components/post-listing.tsx
  4. 22
      src/components/post-listings.tsx
  5. 32
      src/utils.ts
  6. 5
      yarn.lock

1
package.json

@ -38,6 +38,7 @@
"emoji-mart": "^3.0.0",
"emoji-short-name": "^1.0.0",
"i18next": "^19.6.3",
"immutability-helper": "^3.1.1",
"js-cookie": "^2.2.1",
"jwt-decode": "^2.2.0",
"line-height": "^0.3.1",

24
src/components/main.tsx

@ -84,7 +84,7 @@ interface MainState {
trendingCommunities: Array<Community>;
siteRes: GetSiteResponse;
showEditSite: boolean;
loading: false;
loading: boolean;
posts: Array<Post>;
comments: Array<Comment>;
listingType: ListingType;
@ -152,7 +152,7 @@ class Main extends Component<MainProps & RouteComponentProps, MainState> {
online: null,
},
showEditSite: false,
loading: false,
loading: true,
posts: [],
comments: [],
listingType: getListingTypeFromProps(this.props) || ListingType.Subscribed,
@ -546,14 +546,7 @@ class Main extends Component<MainProps & RouteComponentProps, MainState> {
<PostListings
// filter out sticky posts from main and announcements otherwise they show up twice
posts={this.state.posts.filter(post => {
if (post.featured) {
return !post.stickied;
}
// return all other posts and sticky posts
return true;
})}
posts={this.state.posts}
sort={this.state.sort}
enableDownvotes
enableNsfw
@ -740,6 +733,10 @@ class Main extends Component<MainProps & RouteComponentProps, MainState> {
async fetchData() {
if (this.state.dataType == DataType.Post) {
this.setState({
loading: true,
})
const params = new URLSearchParams({
page: this.state.page,
limit: fetchLimit,
@ -757,9 +754,11 @@ class Main extends Component<MainProps & RouteComponentProps, MainState> {
(result) => {
this.setState({
posts: result.posts,
loading: false,
})
}
);
WebSocketService.Instance.communityJoinRoom(0);
} else {
let getCommentsForm: GetCommentsForm = {
@ -843,8 +842,9 @@ class Main extends Component<MainProps & RouteComponentProps, MainState> {
this.setState(this.state);
} else if (res.op === UserOperation.CreatePostLike) {
let data = res.data as PostResponse;
createPostLikeFindRes(data, this.state.posts);
this.setState(this.state);
this.setState({
posts: createPostLikeFindRes(data, this.state.posts),
});
} else if (res.op === UserOperation.AddAdmin) {
let data = res.data as AddAdminResponse;
this.setState({

8
src/components/post-listing.tsx

@ -1,4 +1,4 @@
import React, { Component, useState } from 'react';
import React, { Component, PureComponent, useState } from 'react';
import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
import clone from 'clone';
import { WebSocketService, UserService } from '../services';
@ -634,7 +634,7 @@ const MobilePostListing = ({
);
};
export class BasePostListing extends Component<
export class BasePostListing extends PureComponent<
PostListingProps & RouteComponentProps,
PostListingState
> {
@ -686,10 +686,6 @@ export class BasePostListing extends Component<
// });
// }
componentDidUpdate(prevProps) {
console.log(this.props.post.score != prevProps.post.score);
}
/*componentDidUpdate(prevProps) {
console.log(prevProps.post.score != this.props.post.score);
if (prevProps.post.score != this.props.post.score){

22
src/components/post-listings.tsx

@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { Component, PureComponent } from 'react';
import { Link } from 'react-router-dom';
import { Post, SortType } from '../interfaces';
import { postSort } from '../utils';
@ -20,7 +20,7 @@ interface PostListingsState {
scrollPos: number;
}
export class PostListings extends Component<
export class PostListings extends PureComponent<
PostListingsProps,
PostListingsState
> {
@ -47,15 +47,13 @@ export class PostListings extends Component<
return this.props.posts.length > 0 ? (
<div>
{this.outer().map(post => (
<div key={post.id}>
<PostListing
key={post.id}
post={post}
showCommunity={this.props.showCommunity}
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
/>
</div>
<PostListing
key={post.id}
post={post}
showCommunity={this.props.showCommunity}
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
/>
))}
</div>
) : (
@ -78,7 +76,7 @@ export class PostListings extends Component<
}
if (this.props.sort !== undefined) {
postSort(out, this.props.sort, this.props.showCommunity == undefined);
//postSort(out, this.props.sort, this.props.showCommunity == undefined);
}
return out;

32
src/utils.ts

@ -70,6 +70,8 @@ import { BASE_PATH, isProduction } from './isProduction';
import axios from 'axios';
// import normalizeUrl from './normalize-url';
import update from 'immutability-helper';
export const repoUrl = 'https://git.chapo.chat/chapo-collective/lemmy-hexbear';
export const helpGuideUrl = '/docs/about_guide.html';
export const markdownHelpUrl = `${helpGuideUrl}#markdown-guide`;
@ -840,23 +842,25 @@ export function createCommentLikeRes(
export function createPostLikeFindRes(
data: PostResponse,
posts: Array<Post>
): void {
let found = posts.find(c => c.id == data.post.id);
if (found) {
createPostLikeRes(data, found);
): Array<Post> {
let found = posts.findIndex(c => c.id == data.post.id);
if (found !== -1) {
posts = update(posts, {[found]: {$set: createPostLikeRes(data, posts[found])}});
}
return posts;
}
export function createPostLikeRes(data: PostResponse, post: Post): void {
if (post) {
post.score = data.post.score;
post.upvotes = data.post.upvotes;
post.downvotes = data.post.downvotes;
post.saved = data.post.saved;
if (data.post.my_vote !== null) {
post.my_vote = data.post.my_vote;
}
}
export function createPostLikeRes(data: PostResponse, post: Post): Post {
//immutability-helper is used so that post listings can be pure with nested props
post = update(post, {
score: {$set: data.post.score},
upvotes: {$set: data.post.upvotes},
downvotes: {$set: data.post.downvotes},
saved: {$set: data.post.saved},
my_vote: {$set: data.post.my_vote}
});
return post;
}
export function editPostFindRes(data: PostResponse, posts: Array<Post>): void {

5
yarn.lock

@ -8468,6 +8468,11 @@ [email protected]:
resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==
[email protected]^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-3.1.1.tgz#2b86b2286ed3b1241c9e23b7b21e0444f52f77b7"
integrity sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ==
[email protected]^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"

Loading…
Cancel
Save