Merge remote-tracking branch 'nutomic/websocket-generics' into nutomic-ws-generics

ui/src/components/comment-form.tsx

@@ -10,9 +10,9 @@ import {
 } from '../interfaces';
 import { Subscription } from 'rxjs';
 import {
+  wsJsonToRes,
   capitalizeFirstLetter,
   mentionDropdownFetchLimit,
-  msgOp,
   mdToHtml,
   randomStr,
   markdownHelpUrl,
@@ -311,10 +311,10 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
 
       this.userSub = WebSocketService.Instance.subject.subscribe(
         msg => {
-          let op: UserOperation = msgOp(msg);
+          let res = wsJsonToRes(msg);
-          if (op == UserOperation.Search) {
+          if (res.op == UserOperation.Search) {
-            let res: SearchResponse = msg;
+            let data = res.data as SearchResponse;
-            let users = res.users.map(u => {
+            let users = data.users.map(u => {
               return { key: u.name };
             });
             cb(users);
@@ -343,10 +343,10 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
 
       this.communitySub = WebSocketService.Instance.subject.subscribe(
         msg => {
-          let op: UserOperation = msgOp(msg);
+          let res = wsJsonToRes(msg);
-          if (op == UserOperation.Search) {
+          if (res.op == UserOperation.Search) {
-            let res: SearchResponse = msg;
+            let data = res.data as SearchResponse;
-            let communities = res.communities.map(u => {
+            let communities = data.communities.map(u => {
               return { key: u.name };
             });
             cb(communities);

ui/src/components/communities.tsx

@@ -10,9 +10,10 @@ import {
   FollowCommunityForm,
   ListCommunitiesForm,
   SortType,
+  WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService } from '../services';
-import { msgOp } from '../utils';
+import { wsJsonToRes } from '../utils';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
 
@@ -36,14 +37,7 @@ export class Communities extends Component<any, CommunitiesState> {
     super(props, context);
     this.state = this.emptyState;
     this.subscription = WebSocketService.Instance.subject
-      .pipe(
+      .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
-        retryWhen(errors =>
-          errors.pipe(
-            delay(3000),
-            take(10)
-          )
-        )
-      )
       .subscribe(
         msg => this.parseMessage(msg),
         err => console.error(err),
@@ -234,15 +228,15 @@ export class Communities extends Component<any, CommunitiesState> {
     WebSocketService.Instance.listCommunities(listCommunitiesForm);
   }
 
-  parseMessage(msg: any) {
+  parseMessage(msg: WebSocketJsonResponse) {
     console.log(msg);
-    let op: UserOperation = msgOp(msg);
+    let res = wsJsonToRes(msg);
-    if (msg.error) {
+    if (res.error) {
-      alert(i18n.t(msg.error));
+      alert(i18n.t(res.error));
       return;
-    } else if (op == UserOperation.ListCommunities) {
+    } else if (res.op == UserOperation.ListCommunities) {
-      let res: ListCommunitiesResponse = msg;
+      let data = res.data as ListCommunitiesResponse;
-      this.state.communities = res.communities;
+      this.state.communities = data.communities;
       this.state.communities.sort(
         (a, b) => b.number_of_subscribers - a.number_of_subscribers
       );
@@ -251,11 +245,11 @@ export class Communities extends Component<any, CommunitiesState> {
       this.setState(this.state);
       let table = document.querySelector('#community_table');
       Sortable.initTable(table);
-    } else if (op == UserOperation.FollowCommunity) {
+    } else if (res.op == UserOperation.FollowCommunity) {
-      let res: CommunityResponse = msg;
+      let data = res.data as CommunityResponse;
-      let found = this.state.communities.find(c => c.id == res.community.id);
+      let found = this.state.communities.find(c => c.id == data.community.id);
-      found.subscribed = res.community.subscribed;
+      found.subscribed = data.community.subscribed;
-      found.number_of_subscribers = res.community.number_of_subscribers;
+      found.number_of_subscribers = data.community.number_of_subscribers;
       this.setState(this.state);
     }
   }

ui/src/components/community-form.tsx

@@ -10,8 +10,8 @@ import {
   GetSiteResponse,
 } from '../interfaces';
 import { WebSocketService } from '../services';
-import { msgOp, capitalizeFirstLetter } from '../utils';
+import { wsJsonToRes, capitalizeFirstLetter } from '../utils';
-import * as autosize from 'autosize';
+import autosize from 'autosize';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
 
@@ -67,14 +67,7 @@ export class CommunityForm extends Component<
     }
 
     this.subscription = WebSocketService.Instance.subject
-      .pipe(
+      .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
-        retryWhen(errors =>
-          errors.pipe(
-            delay(3000),
-            take(10)
-          )
-        )
-      )
       .subscribe(
         msg => this.parseMessage(msg),
         err => console.error(err),
@@ -246,34 +239,34 @@ export class CommunityForm extends Component<
     i.props.onCancel();
   }
 
-  parseMessage(msg: any) {
+  parseMessage(msg: WebSocketJsonResponse) {
-    let op: UserOperation = msgOp(msg);
+    let res = wsJsonToRes(msg);
     console.log(msg);
-    if (msg.error) {
+    if (res.error) {
-      alert(i18n.t(msg.error));
+      alert(i18n.t(res.error));
       this.state.loading = false;
       this.setState(this.state);
       return;
-    } else if (op == UserOperation.ListCategories) {
+    } else if (res.op == UserOperation.ListCategories) {
-      let res: ListCategoriesResponse = msg;
+      let data = res.data as ListCategoriesResponse;
-      this.state.categories = res.categories;
+      this.state.categories = data.categories;
       if (!this.props.community) {
-        this.state.communityForm.category_id = res.categories[0].id;
+        this.state.communityForm.category_id = data.categories[0].id;
       }
       this.setState(this.state);
-    } else if (op == UserOperation.CreateCommunity) {
+    } else if (res.op == UserOperation.CreateCommunity) {
-      let res: CommunityResponse = msg;
+      let data = res.data as CommunityResponse;
       this.state.loading = false;
-      this.props.onCreate(res.community);
+      this.props.onCreate(data.community);
     }
-    // TODO is ths necessary
+    // TODO is this necessary
-    else if (op == UserOperation.EditCommunity) {
+    else if (res.op == UserOperation.EditCommunity) {
-      let res: CommunityResponse = msg;
+      let data = res.data as CommunityResponse;
       this.state.loading = false;
-      this.props.onEdit(res.community);
+      this.props.onEdit(data.community);
-    } else if (op == UserOperation.GetSite) {
+    } else if (res.op == UserOperation.GetSite) {
-      let res: GetSiteResponse = msg;
+      let data = res.data as GetSiteResponse;
-      this.state.enable_nsfw = res.site.enable_nsfw;
+      this.state.enable_nsfw = data.site.enable_nsfw;
       this.setState(this.state);
     }
   }

ui/src/components/community.tsx

@@ -14,13 +14,14 @@ import {
   ListingType,
   GetPostsResponse,
   CreatePostLikeResponse,
+  WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { PostListings } from './post-listings';
 import { SortSelect } from './sort-select';
 import { Sidebar } from './sidebar';
 import {
-  msgOp,
+  wsJsonToRes,
   routeSortTypeToEnum,
   fetchLimit,
   postRefetchSeconds,
@@ -251,48 +252,49 @@ export class Community extends Component<any, State> {
     WebSocketService.Instance.getPosts(getPostsForm);
   }
 
-  parseMessage(msg: any) {
+  parseMessage(msg: WebSocketJsonResponse) {
     console.log(msg);
-    let op: UserOperation = msgOp(msg);
+    let res = wsJsonToRes(msg);
-    if (msg.error) {
+    if (res.error) {
-      alert(i18n.t(msg.error));
+      alert(i18n.t(res.error));
       this.context.router.history.push('/');
       return;
-    } else if (op == UserOperation.GetCommunity) {
+    } else if (res.op == UserOperation.GetCommunity) {
-      let res: GetCommunityResponse = msg;
+      let data = res.data as GetCommunityResponse;
-      this.state.community = res.community;
+      this.state.community = data.community;
-      this.state.moderators = res.moderators;
+      this.state.moderators = data.moderators;
-      this.state.admins = res.admins;
+      this.state.admins = data.admins;
       document.title = `/c/${this.state.community.name} - ${WebSocketService.Instance.site.name}`;
       this.setState(this.state);
       this.keepFetchingPosts();
-    } else if (op == UserOperation.EditCommunity) {
+    } else if (res.op == UserOperation.EditCommunity) {
-      let res: CommunityResponse = msg;
+      let data = res.data as CommunityResponse;
-      this.state.community = res.community;
+      this.state.community = data.community;
       this.setState(this.state);
-    } else if (op == UserOperation.FollowCommunity) {
+    } else if (res.op == UserOperation.FollowCommunity) {
-      let res: CommunityResponse = msg;
+      let data = res.data as CommunityResponse;
-      this.state.community.subscribed = res.community.subscribed;
+      this.state.community.subscribed = data.community.subscribed;
       this.state.community.number_of_subscribers =
-        res.community.number_of_subscribers;
+        data.community.number_of_subscribers;
       this.setState(this.state);
-    } else if (op == UserOperation.GetPosts) {
+    } else if (res.op == UserOperation.GetPosts) {
-      let res: GetPostsResponse = msg;
+      let data = res.data as GetPostsResponse;
 
+      // TODO rework this
       // This is needed to refresh the view
       this.state.posts = undefined;
       this.setState(this.state);
 
-      this.state.posts = res.posts;
+      this.state.posts = data.posts;
       this.state.loading = false;
       this.setState(this.state);
-    } else if (op == UserOperation.CreatePostLike) {
+    } else if (res.op == UserOperation.CreatePostLike) {
-      let res: CreatePostLikeResponse = msg;
+      let data = res.data as CreatePostLikeResponse;
-      let found = this.state.posts.find(c => c.id == res.post.id);
+      let found = this.state.posts.find(c => c.id == data.post.id);
-      found.my_vote = res.post.my_vote;
+      found.my_vote = data.post.my_vote;
-      found.score = res.post.score;
+      found.score = data.post.score;
-      found.upvotes = res.post.upvotes;
+      found.upvotes = data.post.upvotes;
-      found.downvotes = res.post.downvotes;
+      found.downvotes = data.post.downvotes;
       this.setState(this.state);
     }
   }

ui/src/components/inbox.tsx

@@ -12,9 +12,10 @@ import {
   GetUserMentionsResponse,
   UserMentionResponse,
   CommentResponse,
+  WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
-import { msgOp, fetchLimit } from '../utils';
+import { wsJsonToRes, fetchLimit } from '../utils';
 import { CommentNodes } from './comment-nodes';
 import { SortSelect } from './sort-select';
 import { i18n } from '../i18next';
@@ -296,94 +297,94 @@ export class Inbox extends Component<any, InboxState> {
     WebSocketService.Instance.markAllAsRead();
   }
 
-  parseMessage(msg: any) {
+  parseMessage(msg: WebSocketJsonResponse) {
     console.log(msg);
-    let op: UserOperation = msgOp(msg);
+    let res = wsJsonToRes(msg);
-    if (msg.error) {
+    if (res.error) {
-      alert(i18n.t(msg.error));
+      alert(i18n.t(res.error));
       return;
-    } else if (op == UserOperation.GetReplies) {
+    } else if (res.op == UserOperation.GetReplies) {
-      let res: GetRepliesResponse = msg;
+      let data = res.data as GetRepliesResponse;
-      this.state.replies = res.replies;
+      this.state.replies = data.replies;
       this.sendUnreadCount();
       window.scrollTo(0, 0);
       this.setState(this.state);
-    } else if (op == UserOperation.GetUserMentions) {
+    } else if (res.op == UserOperation.GetUserMentions) {
-      let res: GetUserMentionsResponse = msg;
+      let data = res.data as GetUserMentionsResponse;
-      this.state.mentions = res.mentions;
+      this.state.mentions = data.mentions;
       this.sendUnreadCount();
       window.scrollTo(0, 0);
       this.setState(this.state);
-    } else if (op == UserOperation.MarkAllAsRead) {
+    } else if (res.op == UserOperation.MarkAllAsRead) {
       this.state.replies = [];
       this.state.mentions = [];
       window.scrollTo(0, 0);
       this.setState(this.state);
-    } else if (op == UserOperation.EditComment) {
+    } else if (res.op == UserOperation.EditComment) {
-      let res: CommentResponse = msg;
+      let data = res.data as CommentResponse;
 
-      let found = this.state.replies.find(c => c.id == res.comment.id);
+      let found = this.state.replies.find(c => c.id == data.comment.id);
-      found.content = res.comment.content;
+      found.content = data.comment.content;
-      found.updated = res.comment.updated;
+      found.updated = data.comment.updated;
-      found.removed = res.comment.removed;
+      found.removed = data.comment.removed;
-      found.deleted = res.comment.deleted;
+      found.deleted = data.comment.deleted;
-      found.upvotes = res.comment.upvotes;
+      found.upvotes = data.comment.upvotes;
-      found.downvotes = res.comment.downvotes;
+      found.downvotes = data.comment.downvotes;
-      found.score = res.comment.score;
+      found.score = data.comment.score;
 
       // If youre in the unread view, just remove it from the list
-      if (this.state.unreadOrAll == UnreadOrAll.Unread && res.comment.read) {
+      if (this.state.unreadOrAll == UnreadOrAll.Unread && data.comment.read) {
         this.state.replies = this.state.replies.filter(
-          r => r.id !== res.comment.id
+          r => r.id !== data.comment.id
         );
       } else {
-        let found = this.state.replies.find(c => c.id == res.comment.id);
+        let found = this.state.replies.find(c => c.id == data.comment.id);
-        found.read = res.comment.read;
+        found.read = data.comment.read;
       }
       this.sendUnreadCount();
       this.setState(this.state);
-    } else if (op == UserOperation.EditUserMention) {
+    } else if (res.op == UserOperation.EditUserMention) {
-      let res: UserMentionResponse = msg;
+      let data = res.data as UserMentionResponse;
 
-      let found = this.state.mentions.find(c => c.id == res.mention.id);
+      let found = this.state.mentions.find(c => c.id == data.mention.id);
-      found.content = res.mention.content;
+      found.content = data.mention.content;
-      found.updated = res.mention.updated;
+      found.updated = data.mention.updated;
-      found.removed = res.mention.removed;
+      found.removed = data.mention.removed;
-      found.deleted = res.mention.deleted;
+      found.deleted = data.mention.deleted;
-      found.upvotes = res.mention.upvotes;
+      found.upvotes = data.mention.upvotes;
-      found.downvotes = res.mention.downvotes;
+      found.downvotes = data.mention.downvotes;
-      found.score = res.mention.score;
+      found.score = data.mention.score;
 
       // If youre in the unread view, just remove it from the list
-      if (this.state.unreadOrAll == UnreadOrAll.Unread && res.mention.read) {
+      if (this.state.unreadOrAll == UnreadOrAll.Unread && data.mention.read) {
         this.state.mentions = this.state.mentions.filter(
-          r => r.id !== res.mention.id
+          r => r.id !== data.mention.id
         );
       } else {
-        let found = this.state.mentions.find(c => c.id == res.mention.id);
+        let found = this.state.mentions.find(c => c.id == data.mention.id);
-        found.read = res.mention.read;
+        found.read = data.mention.read;
       }
       this.sendUnreadCount();
       this.setState(this.state);
-    } else if (op == UserOperation.CreateComment) {
+    } else if (res.op == UserOperation.CreateComment) {
       // let res: CommentResponse = msg;
       alert(i18n.t('reply_sent'));
       // this.state.replies.unshift(res.comment); // TODO do this right
       // this.setState(this.state);
-    } else if (op == UserOperation.SaveComment) {
+    } else if (res.op == UserOperation.SaveComment) {
-      let res: CommentResponse = msg;
+      let data = res.data as CommentResponse;
-      let found = this.state.replies.find(c => c.id == res.comment.id);
+      let found = this.state.replies.find(c => c.id == data.comment.id);
-      found.saved = res.comment.saved;
+      found.saved = data.comment.saved;
       this.setState(this.state);
-    } else if (op == UserOperation.CreateCommentLike) {
+    } else if (res.op == UserOperation.CreateCommentLike) {
-      let res: CommentResponse = msg;
+      let data = res.data as CommentResponse;
       let found: Comment = this.state.replies.find(
-        c => c.id === res.comment.id
+        c => c.id === data.comment.id
       );
-      found.score = res.comment.score;
+      found.score = data.comment.score;
-      found.upvotes = res.comment.upvotes;
+      found.upvotes = data.comment.upvotes;
-      found.downvotes = res.comment.downvotes;
+      found.downvotes = data.comment.downvotes;
-      if (res.comment.my_vote !== null) found.my_vote = res.comment.my_vote;
+      if (data.comment.my_vote !== null) found.my_vote = data.comment.my_vote;
       this.setState(this.state);
     }
   }

ui/src/components/login.tsx

@@ -8,9 +8,10 @@ import {
   UserOperation,
   PasswordResetForm,
   GetSiteResponse,
+  WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
-import { msgOp, validEmail } from '../utils';
+import { wsJsonToRes, validEmail } from '../utils';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
 
@@ -48,14 +49,7 @@ export class Login extends Component<any, State> {
     this.state = this.emptyState;
 
     this.subscription = WebSocketService.Instance.subject
-      .pipe(
+      .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
-        retryWhen(errors =>
-          errors.pipe(
-            delay(3000),
-            take(10)
-          )
-        )
-      )
       .subscribe(
         msg => this.parseMessage(msg),
         err => console.error(err),
@@ -299,31 +293,31 @@ export class Login extends Component<any, State> {
     WebSocketService.Instance.passwordReset(resetForm);
   }
 
-  parseMessage(msg: any) {
+  parseMessage(msg: WebSocketJsonResponse) {
-    let op: UserOperation = msgOp(msg);
+    let res = wsJsonToRes(msg);
-    if (msg.error) {
+    if (res.error) {
-      alert(i18n.t(msg.error));
+      alert(i18n.t(res.error));
       this.state = this.emptyState;
       this.setState(this.state);
       return;
     } else {
-      if (op == UserOperation.Login) {
+      if (res.op == UserOperation.Login) {
+        let data = res.data as LoginResponse;
         this.state = this.emptyState;
         this.setState(this.state);
-        let res: LoginResponse = msg;
+        UserService.Instance.login(data);
-        UserService.Instance.login(res);
         this.props.history.push('/');
-      } else if (op == UserOperation.Register) {
+      } else if (res.op == UserOperation.Register) {
+        let data = res.data as LoginResponse;
         this.state = this.emptyState;
         this.setState(this.state);
-        let res: LoginResponse = msg;
+        UserService.Instance.login(data);
-        UserService.Instance.login(res);
         this.props.history.push('/communities');
-      } else if (op == UserOperation.PasswordReset) {
+      } else if (res.op == UserOperation.PasswordReset) {
         alert(i18n.t('reset_password_mail_sent'));
-      } else if (op == UserOperation.GetSite) {
+      } else if (res.op == UserOperation.GetSite) {
-        let res: GetSiteResponse = msg;
+        let data = res.data as GetSiteResponse;
-        this.state.enable_nsfw = res.site.enable_nsfw;
+        this.state.enable_nsfw = data.site.enable_nsfw;
         this.setState(this.state);
         document.title = `${i18n.t('login')} - ${
           WebSocketService.Instance.site.name

ui/src/components/main.tsx

@@ -17,6 +17,7 @@ import {
   CreatePostLikeResponse,
   Post,
   GetPostsForm,
+  WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { PostListings } from './post-listings';
@@ -24,7 +25,7 @@ import { SortSelect } from './sort-select';
 import { ListingTypeSelect } from './listing-type-select';
 import { SiteForm } from './site-form';
 import {
-  msgOp,
+  wsJsonToRes,
   repoUrl,
   mdToHtml,
   fetchLimit,
@@ -56,7 +57,6 @@ export class Main extends Component<any, MainState> {
     subscribedCommunities: [],
     trendingCommunities: [],
     site: {
-      op: null,
       site: {
         id: null,
         name: null,
@@ -562,55 +562,56 @@ export class Main extends Component<any, MainState> {
     WebSocketService.Instance.getPosts(getPostsForm);
   }
 
-  parseMessage(msg: any) {
+  parseMessage(msg: WebSocketJsonResponse) {
     console.log(msg);
-    let op: UserOperation = msgOp(msg);
+    let res = wsJsonToRes(msg);
-    if (msg.error) {
+    if (res.error) {
-      alert(i18n.t(msg.error));
+      alert(i18n.t(res.error));
       return;
-    } else if (op == UserOperation.GetFollowedCommunities) {
+    } else if (res.op == UserOperation.GetFollowedCommunities) {
-      let res: GetFollowedCommunitiesResponse = msg;
+      let data = res.data as GetFollowedCommunitiesResponse;
-      this.state.subscribedCommunities = res.communities;
+      this.state.subscribedCommunities = data.communities;
       this.setState(this.state);
-    } else if (op == UserOperation.ListCommunities) {
+    } else if (res.op == UserOperation.ListCommunities) {
-      let res: ListCommunitiesResponse = msg;
+      let data = res.data as ListCommunitiesResponse;
-      this.state.trendingCommunities = res.communities;
+      this.state.trendingCommunities = data.communities;
       this.setState(this.state);
-    } else if (op == UserOperation.GetSite) {
+    } else if (res.op == UserOperation.GetSite) {
-      let res: GetSiteResponse = msg;
+      let data = res.data as GetSiteResponse;
 
       // This means it hasn't been set up yet
-      if (!res.site) {
+      if (!data.site) {
         this.context.router.history.push('/setup');
       }
-      this.state.site.admins = res.admins;
+      this.state.site.admins = data.admins;
-      this.state.site.site = res.site;
+      this.state.site.site = data.site;
-      this.state.site.banned = res.banned;
+      this.state.site.banned = data.banned;
-      this.state.site.online = res.online;
+      this.state.site.online = data.online;
       this.setState(this.state);
       document.title = `${WebSocketService.Instance.site.name}`;
-    } else if (op == UserOperation.EditSite) {
+    } else if (res.op == UserOperation.EditSite) {
-      let res: SiteResponse = msg;
+      let data = res.data as SiteResponse;
-      this.state.site.site = res.site;
+      this.state.site.site = data.site;
       this.state.showEditSite = false;
       this.setState(this.state);
-    } else if (op == UserOperation.GetPosts) {
+    } else if (res.op == UserOperation.GetPosts) {
-      let res: GetPostsResponse = msg;
+      let data = res.data as GetPostsResponse;
 
       // This is needed to refresh the view
+      // TODO mess with this
       this.state.posts = undefined;
       this.setState(this.state);
 
-      this.state.posts = res.posts;
+      this.state.posts = data.posts;
       this.state.loading = false;
       this.setState(this.state);
-    } else if (op == UserOperation.CreatePostLike) {
+    } else if (res.op == UserOperation.CreatePostLike) {
-      let res: CreatePostLikeResponse = msg;
+      let data = res.data as CreatePostLikeResponse;
-      let found = this.state.posts.find(c => c.id == res.post.id);
+      let found = this.state.posts.find(c => c.id == data.post.id);
-      found.my_vote = res.post.my_vote;
+      found.my_vote = data.post.my_vote;
-      found.score = res.post.score;
+      found.score = data.post.score;
-      found.upvotes = res.post.upvotes;
+      found.upvotes = data.post.upvotes;
-      found.downvotes = res.post.downvotes;
+      found.downvotes = data.post.downvotes;
       this.setState(this.state);
     }
   }

ui/src/components/modlog.tsx

@@ -17,9 +17,9 @@ import {
   ModAdd,
 } from '../interfaces';
 import { WebSocketService } from '../services';
-import { msgOp, addTypeInfo, fetchLimit } from '../utils';
+import { wsJsonToRes, addTypeInfo, fetchLimit } from '../utils';
 import { MomentTime } from './moment-time';
-import * as moment from 'moment';
+import moment from 'moment';
 import { i18n } from '../i18next';
 
 interface ModlogState {
@@ -55,14 +55,7 @@ export class Modlog extends Component<any, ModlogState> {
       ? Number(this.props.match.params.community_id)
       : undefined;
     this.subscription = WebSocketService.Instance.subject
-      .pipe(
+      .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
-        retryWhen(errors =>
-          errors.pipe(
-            delay(3000),
-            take(10)
-          )
-        )
-      )
       .subscribe(
         msg => this.parseMessage(msg),
         err => console.error(err),
@@ -429,17 +422,17 @@ export class Modlog extends Component<any, ModlogState> {
     WebSocketService.Instance.getModlog(modlogForm);
   }
 
-  parseMessage(msg: any) {
+  parseMessage(msg: WebSocketJsonResponse) {
     console.log(msg);
-    let op: UserOperation = msgOp(msg);
+    let res = wsJsonToRes(msg);
-    if (msg.error) {
+    if (res.error) {
-      alert(i18n.t(msg.error));
+      alert(i18n.t(res.error));
       return;
-    } else if (op == UserOperation.GetModlog) {
+    } else if (res.op == UserOperation.GetModlog) {
-      let res: GetModlogResponse = msg;
+      let data = res.data as GetModlogResponse;
       this.state.loading = false;
       window.scrollTo(0, 0);
-      this.setCombined(res);
+      this.setCombined(data);
     }
   }
 }

ui/src/components/moment-time.tsx

@@ -1,5 +1,5 @@
 import { Component } from 'inferno';
-import * as moment from 'moment';
+import moment from 'moment';
 import { getMomentLanguage } from '../utils';
 import { i18n } from '../i18next';
 

ui/src/components/navbar.tsx

@@ -12,9 +12,10 @@ import {
   SortType,
   GetSiteResponse,
   Comment,
+  WebSocketJsonResponse,
 } from '../interfaces';
 import {
-  msgOp,
+  wsJsonToRes,
   pictshareAvatarThumbnail,
   showAvatars,
   fetchLimit,
@@ -181,17 +182,17 @@ export class Navbar extends Component<any, NavbarState> {
     i.setState(i.state);
   }
 
-  parseMessage(msg: any) {
+  parseMessage(msg: WebSocketJsonResponse) {
-    let op: UserOperation = msgOp(msg);
+    let res = wsJsonToRes(msg);
-    if (msg.error) {
+    if (res.error) {
-      if (msg.error == 'not_logged_in') {
+      if (res.error == 'not_logged_in') {
         UserService.Instance.logout();
         location.reload();
       }
       return;
-    } else if (op == UserOperation.GetReplies) {
+    } else if (res.op == UserOperation.GetReplies) {
-      let res: GetRepliesResponse = msg;
+      let data = res.data as GetRepliesResponse;
-      let unreadReplies = res.replies.filter(r => !r.read);
+      let unreadReplies = data.replies.filter(r => !r.read);
       if (
         unreadReplies.length > 0 &&
         this.state.fetchCount > 1 &&
@@ -203,9 +204,9 @@ export class Navbar extends Component<any, NavbarState> {
       this.state.replies = unreadReplies;
       this.setState(this.state);
       this.sendUnreadCount();
-    } else if (op == UserOperation.GetUserMentions) {
+    } else if (res.op == UserOperation.GetUserMentions) {
-      let res: GetUserMentionsResponse = msg;
+      let data = res.data as GetUserMentionsResponse;
-      let unreadMentions = res.mentions.filter(r => !r.read);
+      let unreadMentions = data.mentions.filter(r => !r.read);
       if (
         unreadMentions.length > 0 &&
         this.state.fetchCount > 1 &&
@@ -217,12 +218,12 @@ export class Navbar extends Component<any, NavbarState> {
       this.state.mentions = unreadMentions;
       this.setState(this.state);
       this.sendUnreadCount();
-    } else if (op == UserOperation.GetSite) {
+    } else if (res.op == UserOperation.GetSite) {
-      let res: GetSiteResponse = msg;
+      let data = res.data as GetSiteResponse;
 
-      if (res.site) {
+      if (data.site) {
-        this.state.siteName = res.site.name;
+        this.state.siteName = data.site.name;
-        WebSocketService.Instance.site = res.site;
+        WebSocketService.Instance.site = data.site;
         this.setState(this.state);
       }
     }

ui/src/components/password_change.tsx

@@ -5,9 +5,10 @@ import {
   UserOperation,
   LoginResponse,
   PasswordChangeForm,
+  WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
-import { msgOp, capitalizeFirstLetter } from '../utils';
+import { wsJsonToRes, capitalizeFirstLetter } from '../utils';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
 
@@ -34,14 +35,7 @@ export class PasswordChange extends Component<any, State> {
     this.state = this.emptyState;
 
     this.subscription = WebSocketService.Instance.subject
-      .pipe(
+      .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
-        retryWhen(errors =>
-          errors.pipe(
-            delay(3000),
-            take(10)
-          )
-        )
-      )
       .subscribe(
         msg => this.parseMessage(msg),
         err => console.error(err),
@@ -140,19 +134,19 @@ export class PasswordChange extends Component<any, State> {
     WebSocketService.Instance.passwordChange(i.state.passwordChangeForm);
   }
 
-  parseMessage(msg: any) {
+  parseMessage(msg: WebSocketJsonResponse) {
-    let op: UserOperation = msgOp(msg);
+    let res = wsJsonToRes(msg);
     if (msg.error) {
       alert(i18n.t(msg.error));
       this.state.loading = false;
       this.setState(this.state);
       return;
     } else {
-      if (op == UserOperation.PasswordChange) {
+      if (res.op == UserOperation.PasswordChange) {
+        let data = res.data as LoginResponse;
         this.state = this.emptyState;
         this.setState(this.state);
-        let res: LoginResponse = msg;
+        UserService.Instance.login(data);
-        UserService.Instance.login(res);
         this.props.history.push('/');
       }
     }

ui/src/components/post-form.tsx

@@ -16,10 +16,11 @@ import {
   SearchType,
   SearchResponse,
   GetSiteResponse,
+  WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import {
-  msgOp,
+  wsJsonToRes,
   getPageTitle,
   validURL,
   capitalizeFirstLetter,
@@ -457,47 +458,47 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
       });
   }
 
-  parseMessage(msg: any) {
+  parseMessage(msg: WebSocketJsonResponse) {
-    let op: UserOperation = msgOp(msg);
+    let res = wsJsonToRes(msg);
-    if (msg.error) {
+    if (res.error) {
-      alert(i18n.t(msg.error));
+      alert(i18n.t(res.error));
       this.state.loading = false;
       this.setState(this.state);
       return;
-    } else if (op == UserOperation.ListCommunities) {
+    } else if (res.op == UserOperation.ListCommunities) {
-      let res: ListCommunitiesResponse = msg;
+      let data = res.data as ListCommunitiesResponse;
-      this.state.communities = res.communities;
+      this.state.communities = data.communities;
       if (this.props.post) {
         this.state.postForm.community_id = this.props.post.community_id;
       } else if (this.props.params && this.props.params.community) {
-        let foundCommunityId = res.communities.find(
+        let foundCommunityId = data.communities.find(
           r => r.name == this.props.params.community
         ).id;
         this.state.postForm.community_id = foundCommunityId;
       } else {
-        this.state.postForm.community_id = res.communities[0].id;
+        this.state.postForm.community_id = data.communities[0].id;
       }
       this.setState(this.state);
-    } else if (op == UserOperation.CreatePost) {
+    } else if (res.op == UserOperation.CreatePost) {
+      let data = res.data as PostResponse;
       this.state.loading = false;
-      let res: PostResponse = msg;
+      this.props.onCreate(data.post.id);
-      this.props.onCreate(res.post.id);
+    } else if (res.op == UserOperation.EditPost) {
-    } else if (op == UserOperation.EditPost) {
+      let data = res.data as PostResponse;
       this.state.loading = false;
-      let res: PostResponse = msg;
+      this.props.onEdit(data.post);
-      this.props.onEdit(res.post);
+    } else if (res.op == UserOperation.Search) {
-    } else if (op == UserOperation.Search) {
+      let data = res.data as SearchResponse;
-      let res: SearchResponse = msg;
 
-      if (res.type_ == SearchType[SearchType.Posts]) {
+      if (data.type_ == SearchType[SearchType.Posts]) {
-        this.state.suggestedPosts = res.posts;
+        this.state.suggestedPosts = data.posts;
-      } else if (res.type_ == SearchType[SearchType.Url]) {
+      } else if (data.type_ == SearchType[SearchType.Url]) {
-        this.state.crossPosts = res.posts;
+        this.state.crossPosts = data.posts;
       }
       this.setState(this.state);
-    } else if (op == UserOperation.GetSite) {
+    } else if (res.op == UserOperation.GetSite) {
-      let res: GetSiteResponse = msg;
+      let data = res.data as GetSiteResponse;
-      this.state.enable_nsfw = res.site.enable_nsfw;
+      this.state.enable_nsfw = data.site.enable_nsfw;
       this.setState(this.state);
     }
   }

ui/src/components/post.tsx

@@ -26,9 +26,10 @@ import {
   SearchResponse,
   GetSiteResponse,
   GetCommunityResponse,
+  WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
-import { msgOp, hotRank } from '../utils';
+import { wsJsonToRes, hotRank } from '../utils';
 import { PostListing } from './post-listing';
 import { PostListings } from './post-listings';
 import { Sidebar } from './sidebar';
@@ -341,19 +342,19 @@ export class Post extends Component<any, PostState> {
     );
   }
 
-  parseMessage(msg: any) {
+  parseMessage(msg: WebSocketJsonResponse) {
     console.log(msg);
-    let op: UserOperation = msgOp(msg);
+    let res = wsJsonToRes(msg);
-    if (msg.error) {
+    if (res.error) {
-      alert(i18n.t(msg.error));
+      alert(i18n.t(res.error));
       return;
-    } else if (op == UserOperation.GetPost) {
+    } else if (res.op == UserOperation.GetPost) {
-      let res: GetPostResponse = msg;
+      let data = res.data as GetPostResponse;
-      this.state.post = res.post;
+      this.state.post = data.post;
-      this.state.comments = res.comments;
+      this.state.comments = data.comments;
-      this.state.community = res.community;
+      this.state.community = data.community;
-      this.state.moderators = res.moderators;
+      this.state.moderators = data.moderators;
-      this.state.admins = res.admins;
+      this.state.admins = data.admins;
       this.state.loading = false;
       document.title = `${this.state.post.name} - ${WebSocketService.Instance.site.name}`;
 
@@ -370,105 +371,107 @@ export class Post extends Component<any, PostState> {
       }
 
       this.setState(this.state);
-    } else if (op == UserOperation.CreateComment) {
+    } else if (res.op == UserOperation.CreateComment) {
-      let res: CommentResponse = msg;
+      let data = res.data as CommentResponse;
-      this.state.comments.unshift(res.comment);
+      this.state.comments.unshift(data.comment);
       this.setState(this.state);
-    } else if (op == UserOperation.EditComment) {
+    } else if (res.op == UserOperation.EditComment) {
-      let res: CommentResponse = msg;
+      let data = res.data as CommentResponse;
-      let found = this.state.comments.find(c => c.id == res.comment.id);
+      let found = this.state.comments.find(c => c.id == data.comment.id);
-      found.content = res.comment.content;
+      found.content = data.comment.content;
-      found.updated = res.comment.updated;
+      found.updated = data.comment.updated;
-      found.removed = res.comment.removed;
+      found.removed = data.comment.removed;
-      found.deleted = res.comment.deleted;
+      found.deleted = data.comment.deleted;
-      found.upvotes = res.comment.upvotes;
+      found.upvotes = data.comment.upvotes;
-      found.downvotes = res.comment.downvotes;
+      found.downvotes = data.comment.downvotes;
-      found.score = res.comment.score;
+      found.score = data.comment.score;
-      found.read = res.comment.read;
+      found.read = data.comment.read;
 
       this.setState(this.state);
-    } else if (op == UserOperation.SaveComment) {
+    } else if (res.op == UserOperation.SaveComment) {
-      let res: CommentResponse = msg;
+      let data = res.data as CommentResponse;
-      let found = this.state.comments.find(c => c.id == res.comment.id);
+      let found = this.state.comments.find(c => c.id == data.comment.id);
-      found.saved = res.comment.saved;
+      found.saved = data.comment.saved;
       this.setState(this.state);
-    } else if (op == UserOperation.CreateCommentLike) {
+    } else if (res.op == UserOperation.CreateCommentLike) {
-      let res: CommentResponse = msg;
+      let data = res.data as CommentResponse;
       let found: Comment = this.state.comments.find(
-        c => c.id === res.comment.id
+        c => c.id === data.comment.id
       );
-      found.score = res.comment.score;
+      found.score = data.comment.score;
-      found.upvotes = res.comment.upvotes;
+      found.upvotes = data.comment.upvotes;
-      found.downvotes = res.comment.downvotes;
+      found.downvotes = data.comment.downvotes;
-      if (res.comment.my_vote !== null) found.my_vote = res.comment.my_vote;
+      if (data.comment.my_vote !== null) found.my_vote = data.comment.my_vote;
       this.setState(this.state);
-    } else if (op == UserOperation.CreatePostLike) {
+    } else if (res.op == UserOperation.CreatePostLike) {
-      let res: CreatePostLikeResponse = msg;
+      let data = res.data as CreatePostLikeResponse;
-      this.state.post.my_vote = res.post.my_vote;
+      this.state.post.my_vote = data.post.my_vote;
-      this.state.post.score = res.post.score;
+      this.state.post.score = data.post.score;
-      this.state.post.upvotes = res.post.upvotes;
+      this.state.post.upvotes = data.post.upvotes;
-      this.state.post.downvotes = res.post.downvotes;
+      this.state.post.downvotes = data.post.downvotes;
       this.setState(this.state);
-    } else if (op == UserOperation.EditPost) {
+    } else if (res.op == UserOperation.EditPost) {
-      let res: PostResponse = msg;
+      let data = res.data as PostResponse;
-      this.state.post = res.post;
+      this.state.post = data.post;
       this.setState(this.state);
-    } else if (op == UserOperation.SavePost) {
+    } else if (res.op == UserOperation.SavePost) {
-      let res: PostResponse = msg;
+      let data = res.data as PostResponse;
-      this.state.post = res.post;
+      this.state.post = data.post;
       this.setState(this.state);
-    } else if (op == UserOperation.EditCommunity) {
+    } else if (res.op == UserOperation.EditCommunity) {
-      let res: CommunityResponse = msg;
+      let data = res.data as CommunityResponse;
-      this.state.community = res.community;
+      this.state.community = data.community;
-      this.state.post.community_id = res.community.id;
+      this.state.post.community_id = data.community.id;
-      this.state.post.community_name = res.community.name;
+      this.state.post.community_name = data.community.name;
       this.setState(this.state);
-    } else if (op == UserOperation.FollowCommunity) {
+    } else if (res.op == UserOperation.FollowCommunity) {
-      let res: CommunityResponse = msg;
+      let data = res.data as CommunityResponse;
-      this.state.community.subscribed = res.community.subscribed;
+      this.state.community.subscribed = data.community.subscribed;
       this.state.community.number_of_subscribers =
-        res.community.number_of_subscribers;
+        data.community.number_of_subscribers;
       this.setState(this.state);
-    } else if (op == UserOperation.BanFromCommunity) {
+    } else if (res.op == UserOperation.BanFromCommunity) {
-      let res: BanFromCommunityResponse = msg;
+      let data = res.data as BanFromCommunityResponse;
       this.state.comments
-        .filter(c => c.creator_id == res.user.id)
+        .filter(c => c.creator_id == data.user.id)
-        .forEach(c => (c.banned_from_community = res.banned));
+        .forEach(c => (c.banned_from_community = data.banned));
-      if (this.state.post.creator_id == res.user.id) {
+      if (this.state.post.creator_id == data.user.id) {
-        this.state.post.banned_from_community = res.banned;
+        this.state.post.banned_from_community = data.banned;
       }
       this.setState(this.state);
-    } else if (op == UserOperation.AddModToCommunity) {
+    } else if (res.op == UserOperation.AddModToCommunity) {
-      let res: AddModToCommunityResponse = msg;
+      let data = res.data as AddModToCommunityResponse;
-      this.state.moderators = res.moderators;
+      this.state.moderators = data.moderators;
       this.setState(this.state);
-    } else if (op == UserOperation.BanUser) {
+    } else if (res.op == UserOperation.BanUser) {
-      let res: BanUserResponse = msg;
+      let data = res.data as BanUserResponse;
       this.state.comments
-        .filter(c => c.creator_id == res.user.id)
+        .filter(c => c.creator_id == data.user.id)
-        .forEach(c => (c.banned = res.banned));
+        .forEach(c => (c.banned = data.banned));
-      if (this.state.post.creator_id == res.user.id) {
+      if (this.state.post.creator_id == data.user.id) {
-        this.state.post.banned = res.banned;
+        this.state.post.banned = data.banned;
       }
       this.setState(this.state);
-    } else if (op == UserOperation.AddAdmin) {
+    } else if (res.op == UserOperation.AddAdmin) {
-      let res: AddAdminResponse = msg;
+      let data = res.data as AddAdminResponse;
-      this.state.admins = res.admins;
+      this.state.admins = data.admins;
       this.setState(this.state);
-    } else if (op == UserOperation.Search) {
+    } else if (res.op == UserOperation.Search) {
-      let res: SearchResponse = msg;
+      let data = res.data as SearchResponse;
-      this.state.crossPosts = res.posts.filter(p => p.id != this.state.post.id);
+      this.state.crossPosts = data.posts.filter(
+        p => p.id != this.state.post.id
+      );
       this.setState(this.state);
-    } else if (op == UserOperation.TransferSite) {
+    } else if (res.op == UserOperation.TransferSite) {
-      let res: GetSiteResponse = msg;
+      let data = res.data as GetSiteResponse;
 
-      this.state.admins = res.admins;
+      this.state.admins = data.admins;
       this.setState(this.state);
-    } else if (op == UserOperation.TransferCommunity) {
+    } else if (res.op == UserOperation.TransferCommunity) {
-      let res: GetCommunityResponse = msg;
+      let data = res.data as GetCommunityResponse;
-      this.state.community = res.community;
+      this.state.community = data.community;
-      this.state.moderators = res.moderators;
+      this.state.moderators = data.moderators;
-      this.state.admins = res.admins;
+      this.state.admins = data.admins;
       this.setState(this.state);
     }
   }

ui/src/components/search.tsx

@@ -12,10 +12,11 @@ import {
   SearchForm,
   SearchResponse,
   SearchType,
+  WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService } from '../services';
 import {
-  msgOp,
+  wsJsonToRes,
   fetchLimit,
   routeSearchTypeToEnum,
   routeSortTypeToEnum,
@@ -45,7 +46,6 @@ export class Search extends Component<any, SearchState> {
     sort: this.getSortTypeFromProps(this.props),
     page: this.getPageFromProps(this.props),
     searchResponse: {
-      op: null,
       type_: null,
       posts: [],
       comments: [],
@@ -386,7 +386,6 @@ export class Search extends Component<any, SearchState> {
     return (
       <div>
         {res &&
-          res.op &&
           res.posts.length == 0 &&
           res.comments.length == 0 &&
           res.communities.length == 0 &&
@@ -462,15 +461,15 @@ export class Search extends Component<any, SearchState> {
     );
   }
 
-  parseMessage(msg: any) {
+  parseMessage(msg: WebSocketJsonResponse) {
     console.log(msg);
-    let op: UserOperation = msgOp(msg);
+    let res = wsJsonToRes(msg);
-    if (msg.error) {
+    if (res.error) {
-      alert(i18n.t(msg.error));
+      alert(i18n.t(res.error));
       return;
-    } else if (op == UserOperation.Search) {
+    } else if (res.op == UserOperation.Search) {
-      let res: SearchResponse = msg;
+      let data = res.data as SearchResponse;
-      this.state.searchResponse = res;
+      this.state.searchResponse = data;
       this.state.loading = false;
       document.title = `${i18n.t('search')} - ${this.state.q} - ${
         WebSocketService.Instance.site.name

ui/src/components/setup.tsx

@@ -1,9 +1,14 @@
 import { Component, linkEvent } from 'inferno';
 import { Subscription } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { RegisterForm, LoginResponse, UserOperation } from '../interfaces';
+import {
+  RegisterForm,
+  LoginResponse,
+  UserOperation,
+  WebSocketJsonResponse,
+} from '../interfaces';
 import { WebSocketService, UserService } from '../services';
-import { msgOp } from '../utils';
+import { wsJsonToRes } from '../utils';
 import { SiteForm } from './site-form';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
@@ -35,14 +40,7 @@ export class Setup extends Component<any, State> {
     this.state = this.emptyState;
 
     this.subscription = WebSocketService.Instance.subject
-      .pipe(
+      .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
-        retryWhen(errors =>
-          errors.pipe(
-            delay(3000),
-            take(10)
-          )
-        )
-      )
       .subscribe(
         msg => this.parseMessage(msg),
         err => console.error(err),
@@ -188,21 +186,20 @@ export class Setup extends Component<any, State> {
     i.setState(i.state);
   }
 
-  parseMessage(msg: any) {
+  parseMessage(msg: WebSocketJsonResponse) {
-    let op: UserOperation = msgOp(msg);
+    let res = wsJsonToRes(msg);
-    if (msg.error) {
+    if (res.error) {
-      alert(i18n.t(msg.error));
+      alert(i18n.t(res.error));
       this.state.userLoading = false;
       this.setState(this.state);
       return;
-    } else if (op == UserOperation.Register) {
+    } else if (res.op == UserOperation.Register) {
+      let data = res.data as LoginResponse;
       this.state.userLoading = false;
       this.state.doneRegisteringUser = true;
-      let res: LoginResponse = msg;
+      UserService.Instance.login(data);
-      UserService.Instance.login(res);
-      console.log(res);
       this.setState(this.state);
-    } else if (op == UserOperation.CreateSite) {
+    } else if (res.op == UserOperation.CreateSite) {
       this.props.history.push('/');
     }
   }

ui/src/components/user.tsx

@@ -18,10 +18,11 @@ import {
   BanUserResponse,
   AddAdminResponse,
   DeleteAccountForm,
+  WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import {
-  msgOp,
+  wsJsonToRes,
   fetchLimit,
   routeSortTypeToEnum,
   capitalizeFirstLetter,
@@ -968,27 +969,27 @@ export class User extends Component<any, UserState> {
     WebSocketService.Instance.deleteAccount(i.state.deleteAccountForm);
   }
 
-  parseMessage(msg: any) {
+  parseMessage(msg: WebSocketJsonResponse) {
     console.log(msg);
-    let op: UserOperation = msgOp(msg);
+    let res = wsJsonToRes(msg);
-    if (msg.error) {
+    if (res.error) {
-      alert(i18n.t(msg.error));
+      alert(i18n.t(res.error));
       this.state.deleteAccountLoading = false;
       this.state.avatarLoading = false;
       this.state.userSettingsLoading = false;
-      if (msg.error == 'couldnt_find_that_username_or_email') {
+      if (res.error == 'couldnt_find_that_username_or_email') {
         this.context.router.history.push('/');
       }
       this.setState(this.state);
       return;
-    } else if (op == UserOperation.GetUserDetails) {
+    } else if (res.op == UserOperation.GetUserDetails) {
-      let res: UserDetailsResponse = msg;
+      let data = res.data as UserDetailsResponse;
-      this.state.user = res.user;
+      this.state.user = data.user;
-      this.state.comments = res.comments;
+      this.state.comments = data.comments;
-      this.state.follows = res.follows;
+      this.state.follows = data.follows;
-      this.state.moderates = res.moderates;
+      this.state.moderates = data.moderates;
-      this.state.posts = res.posts;
+      this.state.posts = data.posts;
-      this.state.admins = res.admins;
+      this.state.admins = data.admins;
       this.state.loading = false;
       if (this.isCurrentUser) {
         this.state.userSettingsForm.show_nsfw =
@@ -1010,59 +1011,59 @@ export class User extends Component<any, UserState> {
       document.title = `/u/${this.state.user.name} - ${WebSocketService.Instance.site.name}`;
       window.scrollTo(0, 0);
       this.setState(this.state);
-    } else if (op == UserOperation.EditComment) {
+    } else if (res.op == UserOperation.EditComment) {
-      let res: CommentResponse = msg;
+      let data = res.data as CommentResponse;
 
-      let found = this.state.comments.find(c => c.id == res.comment.id);
+      let found = this.state.comments.find(c => c.id == data.comment.id);
-      found.content = res.comment.content;
+      found.content = data.comment.content;
-      found.updated = res.comment.updated;
+      found.updated = data.comment.updated;
-      found.removed = res.comment.removed;
+      found.removed = data.comment.removed;
-      found.deleted = res.comment.deleted;
+      found.deleted = data.comment.deleted;
-      found.upvotes = res.comment.upvotes;
+      found.upvotes = data.comment.upvotes;
-      found.downvotes = res.comment.downvotes;
+      found.downvotes = data.comment.downvotes;
-      found.score = res.comment.score;
+      found.score = data.comment.score;
 
       this.setState(this.state);
-    } else if (op == UserOperation.CreateComment) {
+    } else if (res.op == UserOperation.CreateComment) {
       // let res: CommentResponse = msg;
       alert(i18n.t('reply_sent'));
       // this.state.comments.unshift(res.comment); // TODO do this right
       // this.setState(this.state);
-    } else if (op == UserOperation.SaveComment) {
+    } else if (res.op == UserOperation.SaveComment) {
-      let res: CommentResponse = msg;
+      let data = res.data as CommentResponse;
-      let found = this.state.comments.find(c => c.id == res.comment.id);
+      let found = this.state.comments.find(c => c.id == data.comment.id);
-      found.saved = res.comment.saved;
+      found.saved = data.comment.saved;
       this.setState(this.state);
-    } else if (op == UserOperation.CreateCommentLike) {
+    } else if (res.op == UserOperation.CreateCommentLike) {
-      let res: CommentResponse = msg;
+      let data = res.data as CommentResponse;
       let found: Comment = this.state.comments.find(
-        c => c.id === res.comment.id
+        c => c.id === data.comment.id
       );
-      found.score = res.comment.score;
+      found.score = data.comment.score;
-      found.upvotes = res.comment.upvotes;
+      found.upvotes = data.comment.upvotes;
-      found.downvotes = res.comment.downvotes;
+      found.downvotes = data.comment.downvotes;
-      if (res.comment.my_vote !== null) found.my_vote = res.comment.my_vote;
+      if (data.comment.my_vote !== null) found.my_vote = data.comment.my_vote;
       this.setState(this.state);
-    } else if (op == UserOperation.BanUser) {
+    } else if (res.op == UserOperation.BanUser) {
-      let res: BanUserResponse = msg;
+      let data = res.data as BanUserResponse;
       this.state.comments
-        .filter(c => c.creator_id == res.user.id)
+        .filter(c => c.creator_id == data.user.id)
-        .forEach(c => (c.banned = res.banned));
+        .forEach(c => (c.banned = data.banned));
       this.state.posts
-        .filter(c => c.creator_id == res.user.id)
+        .filter(c => c.creator_id == data.user.id)
-        .forEach(c => (c.banned = res.banned));
+        .forEach(c => (c.banned = data.banned));
       this.setState(this.state);
-    } else if (op == UserOperation.AddAdmin) {
+    } else if (res.op == UserOperation.AddAdmin) {
-      let res: AddAdminResponse = msg;
+      let data = res.data as AddAdminResponse;
-      this.state.admins = res.admins;
+      this.state.admins = data.admins;
       this.setState(this.state);
-    } else if (op == UserOperation.SaveUserSettings) {
+    } else if (res.op == UserOperation.SaveUserSettings) {
+      let data = res.data as LoginResponse;
       this.state = this.emptyState;
       this.state.userSettingsLoading = false;
       this.setState(this.state);
-      let res: LoginResponse = msg;
+      UserService.Instance.login(data);
-      UserService.Instance.login(res);
+    } else if (res.op == UserOperation.DeleteAccount) {
-    } else if (op == UserOperation.DeleteAccount) {
       this.state.deleteAccountLoading = false;
       this.state.deleteAccountShowConfirm = false;
       this.setState(this.state);

ui/src/interfaces.ts

@@ -226,7 +226,6 @@ export interface FollowCommunityForm {
 }
 
 export interface GetFollowedCommunitiesResponse {
-  op: string;
   communities: Array<CommunityUser>;
 }
 
@@ -241,7 +240,6 @@ export interface GetUserDetailsForm {
 }
 
 export interface UserDetailsResponse {
-  op: string;
   user: UserView;
   follows: Array<CommunityUser>;
   moderates: Array<CommunityUser>;
@@ -259,7 +257,6 @@ export interface GetRepliesForm {
 }
 
 export interface GetRepliesResponse {
-  op: string;
   replies: Array<Comment>;
 }
 
@@ -272,7 +269,6 @@ export interface GetUserMentionsForm {
 }
 
 export interface GetUserMentionsResponse {
-  op: string;
   mentions: Array<Comment>;
 }
 
@@ -283,7 +279,6 @@ export interface EditUserMentionForm {
 }
 
 export interface UserMentionResponse {
-  op: string;
   mention: Comment;
 }
 
@@ -297,7 +292,6 @@ export interface BanFromCommunityForm {
 }
 
 export interface BanFromCommunityResponse {
-  op: string;
   user: UserView;
   banned: boolean;
 }
@@ -321,7 +315,6 @@ export interface TransferSiteForm {
 }
 
 export interface AddModToCommunityResponse {
-  op: string;
   moderators: Array<CommunityUser>;
 }
 
@@ -333,7 +326,6 @@ export interface GetModlogForm {
 }
 
 export interface GetModlogResponse {
-  op: string;
   removed_posts: Array<ModRemovePost>;
   locked_posts: Array<ModLockPost>;
   stickied_posts: Array<ModStickyPost>;
@@ -474,7 +466,6 @@ export interface RegisterForm {
 }
 
 export interface LoginResponse {
-  op: string;
   jwt: string;
 }
 
@@ -509,14 +500,12 @@ export interface CommunityForm {
 }
 
 export interface GetCommunityResponse {
-  op: string;
   community: Community;
   moderators: Array<CommunityUser>;
   admins: Array<UserView>;
 }
 
 export interface CommunityResponse {
-  op: string;
   community: Community;
 }
 
@@ -528,12 +517,10 @@ export interface ListCommunitiesForm {
 }
 
 export interface ListCommunitiesResponse {
-  op: string;
   communities: Array<Community>;
 }
 
 export interface ListCategoriesResponse {
-  op: string;
   categories: Array<Category>;
 }
 
@@ -562,7 +549,6 @@ export interface PostFormParams {
 }
 
 export interface GetPostResponse {
-  op: string;
   post: Post;
   comments: Array<Comment>;
   community: Community;
@@ -577,7 +563,6 @@ export interface SavePostForm {
 }
 
 export interface PostResponse {
-  op: string;
   post: Post;
 }
 
@@ -601,7 +586,6 @@ export interface SaveCommentForm {
 }
 
 export interface CommentResponse {
-  op: string;
   comment: Comment;
 }
 
@@ -627,7 +611,6 @@ export interface GetPostsForm {
 }
 
 export interface GetPostsResponse {
-  op: string;
   posts: Array<Post>;
 }
 
@@ -638,7 +621,6 @@ export interface CreatePostLikeForm {
 }
 
 export interface CreatePostLikeResponse {
-  op: string;
   post: Post;
 }
 
@@ -652,7 +634,6 @@ export interface SiteForm {
 }
 
 export interface GetSiteResponse {
-  op: string;
   site: Site;
   admins: Array<UserView>;
   banned: Array<UserView>;
@@ -660,7 +641,6 @@ export interface GetSiteResponse {
 }
 
 export interface SiteResponse {
-  op: string;
   site: Site;
 }
 
@@ -673,7 +653,6 @@ export interface BanUserForm {
 }
 
 export interface BanUserResponse {
-  op: string;
   user: UserView;
   banned: boolean;
 }
@@ -685,7 +664,6 @@ export interface AddAdminForm {
 }
 
 export interface AddAdminResponse {
-  op: string;
   admins: Array<UserView>;
 }
 
@@ -699,7 +677,6 @@ export interface SearchForm {
 }
 
 export interface SearchResponse {
-  op: string;
   type_: string;
   posts?: Array<Post>;
   comments?: Array<Comment>;
@@ -715,12 +692,43 @@ export interface PasswordResetForm {
   email: string;
 }
 
-export interface PasswordResetResponse {
+// export interface PasswordResetResponse {
-  op: string;
+// }
-}
 
 export interface PasswordChangeForm {
   token: string;
   password: string;
   password_verify: string;
 }
+
+type ResponseType =
+  | SiteResponse
+  | GetFollowedCommunitiesResponse
+  | ListCommunitiesResponse
+  | GetPostsResponse
+  | CreatePostLikeResponse
+  | GetRepliesResponse
+  | GetUserMentionsResponse
+  | ListCategoriesResponse
+  | CommunityResponse
+  | CommentResponse
+  | UserMentionResponse
+  | LoginResponse
+  | GetModlogResponse
+  | SearchResponse
+  | BanFromCommunityResponse
+  | AddModToCommunityResponse
+  | BanUserResponse
+  | AddAdminResponse;
+
+export interface WebSocketResponse {
+  op: UserOperation;
+  data: ResponseType;
+  error?: string;
+}
+
+export interface WebSocketJsonResponse {
+  op: string;
+  data: ResponseType;
+  error?: string;
+}

ui/src/utils.ts

@@ -15,6 +15,8 @@ import {
   SortType,
   ListingType,
   SearchType,
+  WebSocketResponse,
+  WebSocketJsonResponse,
 } from './interfaces';
 import { UserService } from './services/UserService';
 import markdown_it from 'markdown-it';
@@ -38,9 +40,12 @@ export function randomStr() {
     .substr(2, 10);
 }
 
-export function msgOp(msg: any): UserOperation {
+export function wsJsonToRes(msg: WebSocketJsonResponse): WebSocketResponse {
   let opStr: string = msg.op;
-  return UserOperation[opStr];
+  return {
+    op: UserOperation[opStr],
+    data: msg.data,
+  };
 }
 
 export const md = new markdown_it({