Fixing cross-posts showing on initial load. Fixes #457 (#464)

diff --git a/src/shared/components/post/post-listings.tsx b/src/shared/components/post/post-listings.tsx
index 12d519368319a5e8dd0748e7647107df44d6f271..8bdb5698a334dcce70c79524bfefb718a84dd97e 100644 (file)
--- a/src/shared/components/post/post-listings.tsx
+++ b/src/shared/components/post/post-listings.tsx
@@ -13,18 +13,35 @@ interface PostListingsProps {
   enableNsfw: boolean;
 }
 
-export class PostListings extends Component<PostListingsProps, any> {
-  private duplicatesMap = new Map<number, PostView[]>();
+interface PostListingsState {
+  posts: PostView[];
+}
+
+export class PostListings extends Component<
+  PostListingsProps,
+  PostListingsState
+> {
+  duplicatesMap = new Map<number, PostView[]>();
+
+  private emptyState: PostListingsState = {
+    posts: [],
+  };
 
   constructor(props: any, context: any) {
     super(props, context);
+    this.state = this.emptyState;
+    if (this.props.removeDuplicates) {
+      this.state.posts = this.removeDuplicates();
+    } else {
+      this.state.posts = this.props.posts;
+    }
   }
 
   render() {
     return (
       <div>
-        {this.props.posts.length > 0 ? (
-          this.outer().map(post_view => (
+        {this.state.posts.length > 0 ? (
+          this.state.posts.map(post_view => (
             <>
               <PostListing
                 post_view={post_view}
@@ -50,16 +67,10 @@ export class PostListings extends Component<PostListingsProps, any> {
     );
   }
 
-  outer(): PostView[] {
-    let out = this.props.posts;
-    if (this.props.removeDuplicates) {
-      out = this.removeDuplicates(out);
-    }
-
-    return out;
-  }
+  removeDuplicates(): PostView[] {
+    // Must use a spread to clone the props, because splice will fail below otherwise.
+    let posts = [...this.props.posts];
 
-  removeDuplicates(posts: PostView[]): PostView[] {
     // A map from post url to list of posts (dupes)
     let urlMap = new Map<string, PostView[]>();