From 73a720e9c38f1354621069b28fcc6fff946c9dda Mon Sep 17 00:00:00 2001 From: Dessalines Date: Tue, 4 Feb 2020 11:19:05 -0500 Subject: [PATCH] Websocket reconnect reload page data. Fixes #504 --- .gitignore | 1 + ui/src/components/community.tsx | 2 ++ ui/src/components/inbox.tsx | 2 ++ ui/src/components/main.tsx | 2 ++ ui/src/components/navbar.tsx | 2 ++ ui/src/components/post.tsx | 4 ++++ ui/src/components/user.tsx | 2 ++ ui/src/interfaces.ts | 1 + ui/src/services/WebSocketService.ts | 17 +++++++++++------ 9 files changed, 27 insertions(+), 6 deletions(-) diff --git a/.gitignore b/.gitignore index 7fac3d5f..90972df6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ ansible/inventory +ansible/inventory_dev ansible/passwords/ docker/lemmy_mine.hjson docker/dev/env_deploy.sh diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx index 7e3e2cd7..0fa8f7b5 100644 --- a/ui/src/components/community.tsx +++ b/ui/src/components/community.tsx @@ -254,6 +254,8 @@ export class Community extends Component { toast(i18n.t(msg.error), 'danger'); this.context.router.history.push('/'); return; + } else if (msg.reconnect) { + this.fetchPosts(); } else if (res.op == UserOperation.GetCommunity) { let data = res.data as GetCommunityResponse; this.state.community = data.community; diff --git a/ui/src/components/inbox.tsx b/ui/src/components/inbox.tsx index 6f4d2377..6849b37d 100644 --- a/ui/src/components/inbox.tsx +++ b/ui/src/components/inbox.tsx @@ -313,6 +313,8 @@ export class Inbox extends Component { if (msg.error) { toast(i18n.t(msg.error), 'danger'); return; + } else if (msg.reconnect) { + this.refetch(); } else if (res.op == UserOperation.GetReplies) { let data = res.data as GetRepliesResponse; this.state.replies = data.replies; diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index 6d3e1815..0970381b 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -537,6 +537,8 @@ export class Main extends Component { if (msg.error) { toast(i18n.t(msg.error), 'danger'); return; + } else if (msg.reconnect) { + this.fetchPosts(); } else if (res.op == UserOperation.GetFollowedCommunities) { let data = res.data as GetFollowedCommunitiesResponse; this.state.subscribedCommunities = data.communities; diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index a916f69f..c675cfe7 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -208,6 +208,8 @@ export class Navbar extends Component { location.reload(); } return; + } else if (msg.reconnect) { + this.fetchUnreads(); } else if (res.op == UserOperation.GetReplies) { let data = res.data as GetRepliesResponse; let unreadReplies = data.replies.filter(r => !r.read); diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx index b0faf850..b399d3b2 100644 --- a/ui/src/components/post.tsx +++ b/ui/src/components/post.tsx @@ -370,6 +370,10 @@ export class Post extends Component { if (msg.error) { toast(i18n.t(msg.error), 'danger'); return; + } else if (msg.reconnect) { + WebSocketService.Instance.getPost({ + id: Number(this.props.match.params.id), + }); } else if (res.op == UserOperation.GetPost) { let data = res.data as GetPostResponse; this.state.post = data.post; diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx index ebdf6d5b..1c3c51d9 100644 --- a/ui/src/components/user.tsx +++ b/ui/src/components/user.tsx @@ -991,6 +991,8 @@ export class User extends Component { } this.setState(this.state); return; + } else if (msg.reconnect) { + this.refetch(); } else if (res.op == UserOperation.GetUserDetails) { let data = res.data as UserDetailsResponse; this.state.user = data.user; diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts index 6c87d3e9..02c108aa 100644 --- a/ui/src/interfaces.ts +++ b/ui/src/interfaces.ts @@ -854,4 +854,5 @@ export interface WebSocketJsonResponse { op?: string; data?: ResponseType; error?: string; + reconnect?: boolean; } diff --git a/ui/src/services/WebSocketService.ts b/ui/src/services/WebSocketService.ts index c5e45e79..6d951618 100644 --- a/ui/src/services/WebSocketService.ts +++ b/ui/src/services/WebSocketService.ts @@ -40,6 +40,7 @@ import { GetPrivateMessagesForm, UserJoinForm, MessageType, + WebSocketJsonResponse, } from '../interfaces'; import { UserService } from './'; import { i18n } from '../i18next'; @@ -59,17 +60,21 @@ export class WebSocketService { private constructor() { this.ws = new ReconnectingWebSocket(wsUri); - this.ws.onopen = () => { - console.log(`Connected to ${wsUri}`); - if (UserService.Instance.user) { - this.userJoin(); - } - }; this.subject = Observable.create((obs: any) => { this.ws.onmessage = e => { obs.next(JSON.parse(e.data)); }; + this.ws.onopen = () => { + console.log(`Connected to ${wsUri}`); + if (UserService.Instance.user) { + this.userJoin(); + } + let res: WebSocketJsonResponse = { + reconnect: true, + }; + obs.next(res); + }; }).pipe(share()); }