Better tippy loading. Fixes #577

ui/src/components/comment-node.tsx

@@ -103,18 +103,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     this.handleCommentDownvote = this.handleCommentDownvote.bind(this);
   }
 
-  componentDidUpdate(prevProps: CommentNodeProps) {
-    let prevComment = prevProps.node.comment;
-    let comment = this.props.node.comment;
-    if (
-      prevComment.saved !== comment.saved ||
-      prevComment.deleted !== comment.deleted ||
-      prevComment.read !== comment.read
-    ) {
-      setupTippy();
-    }
-  }
-
   componentWillReceiveProps(nextProps: CommentNodeProps) {
     this.state.my_vote = nextProps.node.comment.my_vote;
     this.state.upvotes = nextProps.node.comment.upvotes;

ui/src/components/community.tsx

@@ -43,6 +43,7 @@ import {
   createPostLikeFindRes,
   editPostFindRes,
   commentsToFlatNodes,
+  setupTippy,
 } from '../utils';
 import { i18n } from '../i18next';
 
@@ -341,6 +342,7 @@ export class Community extends Component<any, State> {
       this.state.posts = data.posts;
       this.state.loading = false;
       this.setState(this.state);
+      setupTippy();
     } else if (res.op == UserOperation.EditPost) {
       let data = res.data as PostResponse;
       editPostFindRes(data, this.state.posts);

ui/src/components/main.tsx

@@ -52,6 +52,7 @@ import {
   editPostFindRes,
   commentsToFlatNodes,
   commentSortSortType,
+  setupTippy,
 } from '../utils';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
@@ -620,6 +621,7 @@ export class Main extends Component<any, MainState> {
       this.state.posts = data.posts;
       this.state.loading = false;
       this.setState(this.state);
+      setupTippy();
     } else if (res.op == UserOperation.CreatePost) {
       let data = res.data as PostResponse;
 

ui/src/components/moment-time.tsx

@@ -1,6 +1,6 @@
 import { Component } from 'inferno';
 import moment from 'moment';
-import { getMomentLanguage, setupTippy, capitalizeFirstLetter } from '../utils';
+import { getMomentLanguage, capitalizeFirstLetter } from '../utils';
 import { i18n } from '../i18next';
 
 interface MomentTimeProps {
@@ -20,10 +20,6 @@ export class MomentTime extends Component<MomentTimeProps, any> {
     moment.locale(lang);
   }
 
-  componentDidMount() {
-    setupTippy();
-  }
-
   render() {
     if (this.props.data.updated) {
       return (

ui/src/components/navbar.tsx

@@ -26,7 +26,6 @@ import {
   fetchLimit,
   isCommentType,
   toast,
-  setupTippy,
 } from '../utils';
 import { version } from '../version';
 import { i18n } from '../i18next';
@@ -85,10 +84,6 @@ export class Navbar extends Component<any, NavbarState> {
     WebSocketService.Instance.getSite();
   }
 
-  componentDidMount() {
-    setupTippy();
-  }
-
   render() {
     return this.navbar();
   }
@@ -283,7 +278,7 @@ export class Navbar extends Component<any, NavbarState> {
     } else if (res.op == UserOperation.GetSite) {
       let data = res.data as GetSiteResponse;
 
-      if (data.site) {
+      if (data.site && !this.state.siteName) {
         this.state.siteName = data.site.name;
         WebSocketService.Instance.site = data.site;
         this.setState(this.state);

ui/src/components/post-listing.tsx

@@ -102,19 +102,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     }
   }
 
-  componentDidUpdate(prevProps: PostListingProps) {
-    let prevPost = prevProps.post;
-    let post = this.props.post;
-    if (
-      prevPost.saved !== post.saved ||
-      prevPost.deleted !== post.deleted ||
-      prevPost.locked !== post.locked ||
-      prevPost.stickied !== post.stickied
-    ) {
-      setupTippy();
-    }
-  }
-
   componentWillReceiveProps(nextProps: PostListingProps) {
     this.state.my_vote = nextProps.post.my_vote;
     this.state.upvotes = nextProps.post.upvotes;

ui/src/components/post.tsx

@@ -37,6 +37,7 @@ import {
   createCommentLikeRes,
   createPostLikeRes,
   commentsToFlatNodes,
+  setupTippy,
 } from '../utils';
 import { PostListing } from './post-listing';
 import { PostListings } from './post-listings';
@@ -370,6 +371,7 @@ export class Post extends Component<any, PostState> {
       }
 
       this.setState(this.state);
+      setupTippy();
     } else if (res.op == UserOperation.CreateComment) {
       let data = res.data as CommentResponse;
 
@@ -386,6 +388,7 @@ export class Post extends Component<any, PostState> {
       let data = res.data as CommentResponse;
       saveCommentRes(data, this.state.comments);
       this.setState(this.state);
+      setupTippy();
     } else if (res.op == UserOperation.CreateCommentLike) {
       let data = res.data as CommentResponse;
       createCommentLikeRes(data, this.state.comments);
@@ -398,10 +401,12 @@ export class Post extends Component<any, PostState> {
       let data = res.data as PostResponse;
       this.state.post = data.post;
       this.setState(this.state);
+      setupTippy();
     } else if (res.op == UserOperation.SavePost) {
       let data = res.data as PostResponse;
       this.state.post = data.post;
       this.setState(this.state);
+      setupTippy();
     } else if (res.op == UserOperation.EditCommunity) {
       let data = res.data as CommunityResponse;
       this.state.community = data.community;

ui/src/components/sidebar.tsx

@@ -13,7 +13,6 @@ import {
   getUnixTime,
   pictshareAvatarThumbnail,
   showAvatars,
-  setupTippy,
 } from '../utils';
 import { CommunityForm } from './community-form';
 import { i18n } from '../i18next';
@@ -47,10 +46,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     this.handleEditCancel = this.handleEditCancel.bind(this);
   }
 
-  componentDidUpdate() {
-    setupTippy();
-  }
-
   render() {
     return (
       <div>

ui/src/services/WebSocketService.ts

@@ -61,6 +61,7 @@ export class WebSocketService {
 
   private constructor() {
     this.ws = new ReconnectingWebSocket(wsUri);
+    let firstConnect = true;
 
     this.subject = Observable.create((obs: any) => {
       this.ws.onmessage = e => {
@@ -68,13 +69,19 @@ export class WebSocketService {
       };
       this.ws.onopen = () => {
         console.log(`Connected to ${wsUri}`);
+
         if (UserService.Instance.user) {
           this.userJoin();
         }
+
+        if (!firstConnect) {
           let res: WebSocketJsonResponse = {
             reconnect: true,
           };
           obs.next(res);
+        }
+
+        firstConnect = false;
       };
     }).pipe(share());
   }