First pass at fixing UI to work with new websocketresponses.

This commit is contained in:
Dessalines 2020-01-18 23:54:10 -05:00
parent baf77bb6be
commit 0c5eb47135
16 changed files with 397 additions and 433 deletions

View file

@ -12,7 +12,7 @@ import {
SortType,
} 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 +36,7 @@ export class Communities extends Component<any, CommunitiesState> {
super(props, context);
this.state = this.emptyState;
this.subscription = WebSocketService.Instance.subject
.pipe(
retryWhen(errors =>
errors.pipe(
delay(3000),
take(10)
)
)
)
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
msg => this.parseMessage(msg),
err => console.error(err),
@ -236,13 +229,13 @@ export class Communities extends Component<any, CommunitiesState> {
parseMessage(msg: any) {
console.log(msg);
let op: UserOperation = msgOp(msg);
if (msg.error) {
alert(i18n.t(msg.error));
let res = wsJsonToRes(msg);
if (res.error) {
alert(i18n.t(res.error));
return;
} else if (op == UserOperation.ListCommunities) {
let res: ListCommunitiesResponse = msg;
this.state.communities = res.communities;
} else if (res.op == UserOperation.ListCommunities) {
let data = res.data as ListCommunitiesResponse;
this.state.communities = data.communities;
this.state.communities.sort(
(a, b) => b.number_of_subscribers - a.number_of_subscribers
);
@ -251,11 +244,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) {
let res: CommunityResponse = msg;
let found = this.state.communities.find(c => c.id == res.community.id);
found.subscribed = res.community.subscribed;
found.number_of_subscribers = res.community.number_of_subscribers;
} else if (res.op == UserOperation.FollowCommunity) {
let data = res.data as CommunityResponse;
let found = this.state.communities.find(c => c.id == data.community.id);
found.subscribed = data.community.subscribed;
found.number_of_subscribers = data.community.number_of_subscribers;
this.setState(this.state);
}
}

View file

@ -10,8 +10,8 @@ import {
GetSiteResponse,
} from '../interfaces';
import { WebSocketService } from '../services';
import { msgOp, capitalizeFirstLetter } from '../utils';
import * as autosize from 'autosize';
import { wsJsonToRes, capitalizeFirstLetter } from '../utils';
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(
retryWhen(errors =>
errors.pipe(
delay(3000),
take(10)
)
)
)
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
msg => this.parseMessage(msg),
err => console.error(err),
@ -247,33 +240,33 @@ export class CommunityForm extends Component<
}
parseMessage(msg: any) {
let op: UserOperation = msgOp(msg);
let res = wsJsonToRes(msg);
console.log(msg);
if (msg.error) {
alert(i18n.t(msg.error));
if (res.error) {
alert(i18n.t(res.error));
this.state.loading = false;
this.setState(this.state);
return;
} else if (op == UserOperation.ListCategories) {
let res: ListCategoriesResponse = msg;
this.state.categories = res.categories;
} else if (res.op == UserOperation.ListCategories) {
let data = res.data as ListCategoriesResponse;
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) {
let res: CommunityResponse = msg;
} else if (res.op == UserOperation.CreateCommunity) {
let data = res.data as CommunityResponse;
this.state.loading = false;
this.props.onCreate(res.community);
this.props.onCreate(data.community);
}
// TODO is ths necessary
else if (op == UserOperation.EditCommunity) {
let res: CommunityResponse = msg;
// TODO is this necessary
else if (res.op == UserOperation.EditCommunity) {
let data = res.data as CommunityResponse;
this.state.loading = false;
this.props.onEdit(res.community);
} else if (op == UserOperation.GetSite) {
let res: GetSiteResponse = msg;
this.state.enable_nsfw = res.site.enable_nsfw;
this.props.onEdit(data.community);
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
this.state.enable_nsfw = data.site.enable_nsfw;
this.setState(this.state);
}
}

View file

@ -20,7 +20,7 @@ import { PostListings } from './post-listings';
import { SortSelect } from './sort-select';
import { Sidebar } from './sidebar';
import {
msgOp,
wsJsonToRes,
routeSortTypeToEnum,
fetchLimit,
postRefetchSeconds,
@ -253,46 +253,47 @@ export class Community extends Component<any, State> {
parseMessage(msg: any) {
console.log(msg);
let op: UserOperation = msgOp(msg);
if (msg.error) {
alert(i18n.t(msg.error));
let res = wsJsonToRes(msg);
if (res.error) {
alert(i18n.t(res.error));
this.context.router.history.push('/');
return;
} else if (op == UserOperation.GetCommunity) {
let res: GetCommunityResponse = msg;
this.state.community = res.community;
this.state.moderators = res.moderators;
this.state.admins = res.admins;
} else if (res.op == UserOperation.GetCommunity) {
let data = res.data as GetCommunityResponse;
this.state.community = data.community;
this.state.moderators = data.moderators;
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) {
let res: CommunityResponse = msg;
this.state.community = res.community;
} else if (res.op == UserOperation.EditCommunity) {
let data = res.data as CommunityResponse;
this.state.community = data.community;
this.setState(this.state);
} else if (op == UserOperation.FollowCommunity) {
let res: CommunityResponse = msg;
this.state.community.subscribed = res.community.subscribed;
} else if (res.op == UserOperation.FollowCommunity) {
let data = res.data as CommunityResponse;
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) {
let res: GetPostsResponse = msg;
} else if (res.op == UserOperation.GetPosts) {
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) {
let res: CreatePostLikeResponse = msg;
let found = this.state.posts.find(c => c.id == res.post.id);
found.my_vote = res.post.my_vote;
found.score = res.post.score;
found.upvotes = res.post.upvotes;
found.downvotes = res.post.downvotes;
} else if (res.op == UserOperation.CreatePostLike) {
let data = res.data as CreatePostLikeResponse;
let found = this.state.posts.find(c => c.id == data.post.id);
found.my_vote = data.post.my_vote;
found.score = data.post.score;
found.upvotes = data.post.upvotes;
found.downvotes = data.post.downvotes;
this.setState(this.state);
}
}

View file

@ -14,7 +14,7 @@ import {
CommentResponse,
} 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';
@ -298,92 +298,92 @@ export class Inbox extends Component<any, InboxState> {
parseMessage(msg: any) {
console.log(msg);
let op: UserOperation = msgOp(msg);
if (msg.error) {
alert(i18n.t(msg.error));
let res = wsJsonToRes(msg);
if (res.error) {
alert(i18n.t(res.error));
return;
} else if (op == UserOperation.GetReplies) {
let res: GetRepliesResponse = msg;
this.state.replies = res.replies;
} else if (res.op == UserOperation.GetReplies) {
let data = res.data as GetRepliesResponse;
this.state.replies = data.replies;
this.sendUnreadCount();
window.scrollTo(0, 0);
this.setState(this.state);
} else if (op == UserOperation.GetUserMentions) {
let res: GetUserMentionsResponse = msg;
this.state.mentions = res.mentions;
} else if (res.op == UserOperation.GetUserMentions) {
let data = res.data as GetUserMentionsResponse;
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) {
let res: CommentResponse = msg;
} else if (res.op == UserOperation.EditComment) {
let data = res.data as CommentResponse;
let found = this.state.replies.find(c => c.id == res.comment.id);
found.content = res.comment.content;
found.updated = res.comment.updated;
found.removed = res.comment.removed;
found.deleted = res.comment.deleted;
found.upvotes = res.comment.upvotes;
found.downvotes = res.comment.downvotes;
found.score = res.comment.score;
let found = this.state.replies.find(c => c.id == data.comment.id);
found.content = data.comment.content;
found.updated = data.comment.updated;
found.removed = data.comment.removed;
found.deleted = data.comment.deleted;
found.upvotes = data.comment.upvotes;
found.downvotes = data.comment.downvotes;
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);
found.read = res.comment.read;
let found = this.state.replies.find(c => c.id == data.comment.id);
found.read = data.comment.read;
}
this.sendUnreadCount();
this.setState(this.state);
} else if (op == UserOperation.EditUserMention) {
let res: UserMentionResponse = msg;
} else if (res.op == UserOperation.EditUserMention) {
let data = res.data as UserMentionResponse;
let found = this.state.mentions.find(c => c.id == res.mention.id);
found.content = res.mention.content;
found.updated = res.mention.updated;
found.removed = res.mention.removed;
found.deleted = res.mention.deleted;
found.upvotes = res.mention.upvotes;
found.downvotes = res.mention.downvotes;
found.score = res.mention.score;
let found = this.state.mentions.find(c => c.id == data.mention.id);
found.content = data.mention.content;
found.updated = data.mention.updated;
found.removed = data.mention.removed;
found.deleted = data.mention.deleted;
found.upvotes = data.mention.upvotes;
found.downvotes = data.mention.downvotes;
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);
found.read = res.mention.read;
let found = this.state.mentions.find(c => c.id == data.mention.id);
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) {
let res: CommentResponse = msg;
let found = this.state.replies.find(c => c.id == res.comment.id);
found.saved = res.comment.saved;
} else if (res.op == UserOperation.SaveComment) {
let data = res.data as CommentResponse;
let found = this.state.replies.find(c => c.id == data.comment.id);
found.saved = data.comment.saved;
this.setState(this.state);
} else if (op == UserOperation.CreateCommentLike) {
let res: CommentResponse = msg;
} else if (res.op == UserOperation.CreateCommentLike) {
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.upvotes = res.comment.upvotes;
found.downvotes = res.comment.downvotes;
if (res.comment.my_vote !== null) found.my_vote = res.comment.my_vote;
found.score = data.comment.score;
found.upvotes = data.comment.upvotes;
found.downvotes = data.comment.downvotes;
if (data.comment.my_vote !== null) found.my_vote = data.comment.my_vote;
this.setState(this.state);
}
}

View file

@ -10,7 +10,7 @@ import {
GetSiteResponse,
} 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 +48,7 @@ export class Login extends Component<any, State> {
this.state = this.emptyState;
this.subscription = WebSocketService.Instance.subject
.pipe(
retryWhen(errors =>
errors.pipe(
delay(3000),
take(10)
)
)
)
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
msg => this.parseMessage(msg),
err => console.error(err),
@ -300,30 +293,30 @@ export class Login extends Component<any, State> {
}
parseMessage(msg: any) {
let op: UserOperation = msgOp(msg);
if (msg.error) {
alert(i18n.t(msg.error));
let res = wsJsonToRes(msg);
if (res.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(res);
UserService.Instance.login(data);
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(res);
UserService.Instance.login(data);
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) {
let res: GetSiteResponse = msg;
this.state.enable_nsfw = res.site.enable_nsfw;
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
this.state.enable_nsfw = data.site.enable_nsfw;
this.setState(this.state);
document.title = `${i18n.t('login')} - ${
WebSocketService.Instance.site.name

View file

@ -24,7 +24,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 +56,6 @@ export class Main extends Component<any, MainState> {
subscribedCommunities: [],
trendingCommunities: [],
site: {
op: null,
site: {
id: null,
name: null,
@ -564,53 +563,54 @@ export class Main extends Component<any, MainState> {
parseMessage(msg: any) {
console.log(msg);
let op: UserOperation = msgOp(msg);
if (msg.error) {
alert(i18n.t(msg.error));
let res = wsJsonToRes(msg);
if (res.error) {
alert(i18n.t(res.error));
return;
} else if (op == UserOperation.GetFollowedCommunities) {
let res: GetFollowedCommunitiesResponse = msg;
this.state.subscribedCommunities = res.communities;
} else if (res.op == UserOperation.GetFollowedCommunities) {
let data = res.data as GetFollowedCommunitiesResponse;
this.state.subscribedCommunities = data.communities;
this.setState(this.state);
} else if (op == UserOperation.ListCommunities) {
let res: ListCommunitiesResponse = msg;
this.state.trendingCommunities = res.communities;
} else if (res.op == UserOperation.ListCommunities) {
let data = res.data as ListCommunitiesResponse;
this.state.trendingCommunities = data.communities;
this.setState(this.state);
} else if (op == UserOperation.GetSite) {
let res: GetSiteResponse = msg;
} else if (res.op == UserOperation.GetSite) {
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.site = res.site;
this.state.site.banned = res.banned;
this.state.site.online = res.online;
this.state.site.admins = data.admins;
this.state.site.site = data.site;
this.state.site.banned = data.banned;
this.state.site.online = data.online;
this.setState(this.state);
document.title = `${WebSocketService.Instance.site.name}`;
} else if (op == UserOperation.EditSite) {
let res: SiteResponse = msg;
this.state.site.site = res.site;
} else if (res.op == UserOperation.EditSite) {
let data = res.data as SiteResponse;
this.state.site.site = data.site;
this.state.showEditSite = false;
this.setState(this.state);
} else if (op == UserOperation.GetPosts) {
let res: GetPostsResponse = msg;
} else if (res.op == UserOperation.GetPosts) {
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) {
let res: CreatePostLikeResponse = msg;
let found = this.state.posts.find(c => c.id == res.post.id);
found.my_vote = res.post.my_vote;
found.score = res.post.score;
found.upvotes = res.post.upvotes;
found.downvotes = res.post.downvotes;
} else if (res.op == UserOperation.CreatePostLike) {
let data = res.data as CreatePostLikeResponse;
let found = this.state.posts.find(c => c.id == data.post.id);
found.my_vote = data.post.my_vote;
found.score = data.post.score;
found.upvotes = data.post.upvotes;
found.downvotes = data.post.downvotes;
this.setState(this.state);
}
}

View file

@ -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(
retryWhen(errors =>
errors.pipe(
delay(3000),
take(10)
)
)
)
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
msg => this.parseMessage(msg),
err => console.error(err),
@ -431,15 +424,15 @@ export class Modlog extends Component<any, ModlogState> {
parseMessage(msg: any) {
console.log(msg);
let op: UserOperation = msgOp(msg);
if (msg.error) {
alert(i18n.t(msg.error));
let res = wsJsonToRes(msg);
if (res.error) {
alert(i18n.t(res.error));
return;
} else if (op == UserOperation.GetModlog) {
let res: GetModlogResponse = msg;
} else if (res.op == UserOperation.GetModlog) {
let data = res.data as GetModlogResponse;
this.state.loading = false;
window.scrollTo(0, 0);
this.setCombined(res);
this.setCombined(data);
}
}
}

View file

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

View file

@ -7,7 +7,7 @@ import {
PasswordChangeForm,
} 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 +34,7 @@ export class PasswordChange extends Component<any, State> {
this.state = this.emptyState;
this.subscription = WebSocketService.Instance.subject
.pipe(
retryWhen(errors =>
errors.pipe(
delay(3000),
take(10)
)
)
)
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
msg => this.parseMessage(msg),
err => console.error(err),
@ -141,18 +134,18 @@ export class PasswordChange extends Component<any, State> {
}
parseMessage(msg: any) {
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(res);
UserService.Instance.login(data);
this.props.history.push('/');
}
}

View file

@ -19,7 +19,7 @@ import {
} from '../interfaces';
import { WebSocketService, UserService } from '../services';
import {
msgOp,
wsJsonToRes,
getPageTitle,
validURL,
capitalizeFirstLetter,
@ -458,46 +458,46 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
}
parseMessage(msg: any) {
let op: UserOperation = msgOp(msg);
if (msg.error) {
alert(i18n.t(msg.error));
let res = wsJsonToRes(msg);
if (res.error) {
alert(i18n.t(res.error));
this.state.loading = false;
this.setState(this.state);
return;
} else if (op == UserOperation.ListCommunities) {
let res: ListCommunitiesResponse = msg;
this.state.communities = res.communities;
} else if (res.op == UserOperation.ListCommunities) {
let data = res.data as ListCommunitiesResponse;
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(res.post.id);
} else if (op == UserOperation.EditPost) {
this.props.onCreate(data.post.id);
} else if (res.op == UserOperation.EditPost) {
let data = res.data as PostResponse;
this.state.loading = false;
let res: PostResponse = msg;
this.props.onEdit(res.post);
} else if (op == UserOperation.Search) {
let res: SearchResponse = msg;
this.props.onEdit(data.post);
} else if (res.op == UserOperation.Search) {
let data = res.data as SearchResponse;
if (res.type_ == SearchType[SearchType.Posts]) {
this.state.suggestedPosts = res.posts;
} else if (res.type_ == SearchType[SearchType.Url]) {
this.state.crossPosts = res.posts;
if (data.type_ == SearchType[SearchType.Posts]) {
this.state.suggestedPosts = data.posts;
} else if (data.type_ == SearchType[SearchType.Url]) {
this.state.crossPosts = data.posts;
}
this.setState(this.state);
} else if (op == UserOperation.GetSite) {
let res: GetSiteResponse = msg;
this.state.enable_nsfw = res.site.enable_nsfw;
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
this.state.enable_nsfw = data.site.enable_nsfw;
this.setState(this.state);
}
}

View file

@ -28,7 +28,7 @@ import {
GetCommunityResponse,
} 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';
@ -343,17 +343,17 @@ export class Post extends Component<any, PostState> {
parseMessage(msg: any) {
console.log(msg);
let op: UserOperation = msgOp(msg);
if (msg.error) {
alert(i18n.t(msg.error));
let res = wsJsonToRes(msg);
if (res.error) {
alert(i18n.t(res.error));
return;
} else if (op == UserOperation.GetPost) {
let res: GetPostResponse = msg;
this.state.post = res.post;
this.state.comments = res.comments;
this.state.community = res.community;
this.state.moderators = res.moderators;
this.state.admins = res.admins;
} else if (res.op == UserOperation.GetPost) {
let data = res.data as GetPostResponse;
this.state.post = data.post;
this.state.comments = data.comments;
this.state.community = data.community;
this.state.moderators = data.moderators;
this.state.admins = data.admins;
this.state.loading = false;
document.title = `${this.state.post.name} - ${WebSocketService.Instance.site.name}`;
@ -370,105 +370,107 @@ export class Post extends Component<any, PostState> {
}
this.setState(this.state);
} else if (op == UserOperation.CreateComment) {
let res: CommentResponse = msg;
this.state.comments.unshift(res.comment);
} else if (res.op == UserOperation.CreateComment) {
let data = res.data as CommentResponse;
this.state.comments.unshift(data.comment);
this.setState(this.state);
} else if (op == UserOperation.EditComment) {
let res: CommentResponse = msg;
let found = this.state.comments.find(c => c.id == res.comment.id);
found.content = res.comment.content;
found.updated = res.comment.updated;
found.removed = res.comment.removed;
found.deleted = res.comment.deleted;
found.upvotes = res.comment.upvotes;
found.downvotes = res.comment.downvotes;
found.score = res.comment.score;
found.read = res.comment.read;
} else if (res.op == UserOperation.EditComment) {
let data = res.data as CommentResponse;
let found = this.state.comments.find(c => c.id == data.comment.id);
found.content = data.comment.content;
found.updated = data.comment.updated;
found.removed = data.comment.removed;
found.deleted = data.comment.deleted;
found.upvotes = data.comment.upvotes;
found.downvotes = data.comment.downvotes;
found.score = data.comment.score;
found.read = data.comment.read;
this.setState(this.state);
} else if (op == UserOperation.SaveComment) {
let res: CommentResponse = msg;
let found = this.state.comments.find(c => c.id == res.comment.id);
found.saved = res.comment.saved;
} else if (res.op == UserOperation.SaveComment) {
let data = res.data as CommentResponse;
let found = this.state.comments.find(c => c.id == data.comment.id);
found.saved = data.comment.saved;
this.setState(this.state);
} else if (op == UserOperation.CreateCommentLike) {
let res: CommentResponse = msg;
} else if (res.op == UserOperation.CreateCommentLike) {
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.upvotes = res.comment.upvotes;
found.downvotes = res.comment.downvotes;
if (res.comment.my_vote !== null) found.my_vote = res.comment.my_vote;
found.score = data.comment.score;
found.upvotes = data.comment.upvotes;
found.downvotes = data.comment.downvotes;
if (data.comment.my_vote !== null) found.my_vote = data.comment.my_vote;
this.setState(this.state);
} else if (op == UserOperation.CreatePostLike) {
let res: CreatePostLikeResponse = msg;
this.state.post.my_vote = res.post.my_vote;
this.state.post.score = res.post.score;
this.state.post.upvotes = res.post.upvotes;
this.state.post.downvotes = res.post.downvotes;
} else if (res.op == UserOperation.CreatePostLike) {
let data = res.data as CreatePostLikeResponse;
this.state.post.my_vote = data.post.my_vote;
this.state.post.score = data.post.score;
this.state.post.upvotes = data.post.upvotes;
this.state.post.downvotes = data.post.downvotes;
this.setState(this.state);
} else if (op == UserOperation.EditPost) {
let res: PostResponse = msg;
this.state.post = res.post;
} else if (res.op == UserOperation.EditPost) {
let data = res.data as PostResponse;
this.state.post = data.post;
this.setState(this.state);
} else if (op == UserOperation.SavePost) {
let res: PostResponse = msg;
this.state.post = res.post;
} else if (res.op == UserOperation.SavePost) {
let data = res.data as PostResponse;
this.state.post = data.post;
this.setState(this.state);
} else if (op == UserOperation.EditCommunity) {
let res: CommunityResponse = msg;
this.state.community = res.community;
this.state.post.community_id = res.community.id;
this.state.post.community_name = res.community.name;
} else if (res.op == UserOperation.EditCommunity) {
let data = res.data as CommunityResponse;
this.state.community = data.community;
this.state.post.community_id = data.community.id;
this.state.post.community_name = data.community.name;
this.setState(this.state);
} else if (op == UserOperation.FollowCommunity) {
let res: CommunityResponse = msg;
this.state.community.subscribed = res.community.subscribed;
} else if (res.op == UserOperation.FollowCommunity) {
let data = res.data as CommunityResponse;
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) {
let res: BanFromCommunityResponse = msg;
} else if (res.op == UserOperation.BanFromCommunity) {
let data = res.data as BanFromCommunityResponse;
this.state.comments
.filter(c => c.creator_id == res.user.id)
.forEach(c => (c.banned_from_community = res.banned));
if (this.state.post.creator_id == res.user.id) {
this.state.post.banned_from_community = res.banned;
.filter(c => c.creator_id == data.user.id)
.forEach(c => (c.banned_from_community = data.banned));
if (this.state.post.creator_id == data.user.id) {
this.state.post.banned_from_community = data.banned;
}
this.setState(this.state);
} else if (op == UserOperation.AddModToCommunity) {
let res: AddModToCommunityResponse = msg;
this.state.moderators = res.moderators;
} else if (res.op == UserOperation.AddModToCommunity) {
let data = res.data as AddModToCommunityResponse;
this.state.moderators = data.moderators;
this.setState(this.state);
} else if (op == UserOperation.BanUser) {
let res: BanUserResponse = msg;
} else if (res.op == UserOperation.BanUser) {
let data = res.data as BanUserResponse;
this.state.comments
.filter(c => c.creator_id == res.user.id)
.forEach(c => (c.banned = res.banned));
if (this.state.post.creator_id == res.user.id) {
this.state.post.banned = res.banned;
.filter(c => c.creator_id == data.user.id)
.forEach(c => (c.banned = data.banned));
if (this.state.post.creator_id == data.user.id) {
this.state.post.banned = data.banned;
}
this.setState(this.state);
} else if (op == UserOperation.AddAdmin) {
let res: AddAdminResponse = msg;
this.state.admins = res.admins;
} else if (res.op == UserOperation.AddAdmin) {
let data = res.data as AddAdminResponse;
this.state.admins = data.admins;
this.setState(this.state);
} else if (op == UserOperation.Search) {
let res: SearchResponse = msg;
this.state.crossPosts = res.posts.filter(p => p.id != this.state.post.id);
} else if (res.op == UserOperation.Search) {
let data = res.data as SearchResponse;
this.state.crossPosts = data.posts.filter(
p => p.id != this.state.post.id
);
this.setState(this.state);
} else if (op == UserOperation.TransferSite) {
let res: GetSiteResponse = msg;
} else if (res.op == UserOperation.TransferSite) {
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) {
let res: GetCommunityResponse = msg;
this.state.community = res.community;
this.state.moderators = res.moderators;
this.state.admins = res.admins;
} else if (res.op == UserOperation.TransferCommunity) {
let data = res.data as GetCommunityResponse;
this.state.community = data.community;
this.state.moderators = data.moderators;
this.state.admins = data.admins;
this.setState(this.state);
}
}

View file

@ -15,7 +15,7 @@ import {
} from '../interfaces';
import { WebSocketService } from '../services';
import {
msgOp,
wsJsonToRes,
fetchLimit,
routeSearchTypeToEnum,
routeSortTypeToEnum,
@ -45,7 +45,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 +385,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 &&
@ -464,13 +462,13 @@ export class Search extends Component<any, SearchState> {
parseMessage(msg: any) {
console.log(msg);
let op: UserOperation = msgOp(msg);
if (msg.error) {
alert(i18n.t(msg.error));
let res = wsJsonToRes(msg);
if (res.error) {
alert(i18n.t(res.error));
return;
} else if (op == UserOperation.Search) {
let res: SearchResponse = msg;
this.state.searchResponse = res;
} else if (res.op == UserOperation.Search) {
let data = res.data as SearchResponse;
this.state.searchResponse = data;
this.state.loading = false;
document.title = `${i18n.t('search')} - ${this.state.q} - ${
WebSocketService.Instance.site.name

View file

@ -3,7 +3,7 @@ import { Subscription } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
import { RegisterForm, LoginResponse, UserOperation } 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 +35,7 @@ export class Setup extends Component<any, State> {
this.state = this.emptyState;
this.subscription = WebSocketService.Instance.subject
.pipe(
retryWhen(errors =>
errors.pipe(
delay(3000),
take(10)
)
)
)
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
msg => this.parseMessage(msg),
err => console.error(err),
@ -189,20 +182,19 @@ export class Setup extends Component<any, State> {
}
parseMessage(msg: any) {
let op: UserOperation = msgOp(msg);
if (msg.error) {
alert(i18n.t(msg.error));
let res = wsJsonToRes(msg);
if (res.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(res);
console.log(res);
UserService.Instance.login(data);
this.setState(this.state);
} else if (op == UserOperation.CreateSite) {
} else if (res.op == UserOperation.CreateSite) {
this.props.history.push('/');
}
}

View file

@ -21,7 +21,7 @@ import {
} from '../interfaces';
import { WebSocketService, UserService } from '../services';
import {
msgOp,
wsJsonToRes,
fetchLimit,
routeSortTypeToEnum,
capitalizeFirstLetter,
@ -970,25 +970,25 @@ export class User extends Component<any, UserState> {
parseMessage(msg: any) {
console.log(msg);
let op: UserOperation = msgOp(msg);
if (msg.error) {
alert(i18n.t(msg.error));
let res = wsJsonToRes(msg);
if (res.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) {
let res: UserDetailsResponse = msg;
this.state.user = res.user;
this.state.comments = res.comments;
this.state.follows = res.follows;
this.state.moderates = res.moderates;
this.state.posts = res.posts;
this.state.admins = res.admins;
} else if (res.op == UserOperation.GetUserDetails) {
let data = res.data as UserDetailsResponse;
this.state.user = data.user;
this.state.comments = data.comments;
this.state.follows = data.follows;
this.state.moderates = data.moderates;
this.state.posts = data.posts;
this.state.admins = data.admins;
this.state.loading = false;
if (this.isCurrentUser) {
this.state.userSettingsForm.show_nsfw =
@ -1010,59 +1010,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) {
let res: CommentResponse = msg;
} else if (res.op == UserOperation.EditComment) {
let data = res.data as CommentResponse;
let found = this.state.comments.find(c => c.id == res.comment.id);
found.content = res.comment.content;
found.updated = res.comment.updated;
found.removed = res.comment.removed;
found.deleted = res.comment.deleted;
found.upvotes = res.comment.upvotes;
found.downvotes = res.comment.downvotes;
found.score = res.comment.score;
let found = this.state.comments.find(c => c.id == data.comment.id);
found.content = data.comment.content;
found.updated = data.comment.updated;
found.removed = data.comment.removed;
found.deleted = data.comment.deleted;
found.upvotes = data.comment.upvotes;
found.downvotes = data.comment.downvotes;
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) {
let res: CommentResponse = msg;
let found = this.state.comments.find(c => c.id == res.comment.id);
found.saved = res.comment.saved;
} else if (res.op == UserOperation.SaveComment) {
let data = res.data as CommentResponse;
let found = this.state.comments.find(c => c.id == data.comment.id);
found.saved = data.comment.saved;
this.setState(this.state);
} else if (op == UserOperation.CreateCommentLike) {
let res: CommentResponse = msg;
} else if (res.op == UserOperation.CreateCommentLike) {
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.upvotes = res.comment.upvotes;
found.downvotes = res.comment.downvotes;
if (res.comment.my_vote !== null) found.my_vote = res.comment.my_vote;
found.score = data.comment.score;
found.upvotes = data.comment.upvotes;
found.downvotes = data.comment.downvotes;
if (data.comment.my_vote !== null) found.my_vote = data.comment.my_vote;
this.setState(this.state);
} else if (op == UserOperation.BanUser) {
let res: BanUserResponse = msg;
} else if (res.op == UserOperation.BanUser) {
let data = res.data as BanUserResponse;
this.state.comments
.filter(c => c.creator_id == res.user.id)
.forEach(c => (c.banned = res.banned));
.filter(c => c.creator_id == data.user.id)
.forEach(c => (c.banned = data.banned));
this.state.posts
.filter(c => c.creator_id == res.user.id)
.forEach(c => (c.banned = res.banned));
.filter(c => c.creator_id == data.user.id)
.forEach(c => (c.banned = data.banned));
this.setState(this.state);
} else if (op == UserOperation.AddAdmin) {
let res: AddAdminResponse = msg;
this.state.admins = res.admins;
} else if (res.op == UserOperation.AddAdmin) {
let data = res.data as AddAdminResponse;
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(res);
} else if (op == UserOperation.DeleteAccount) {
UserService.Instance.login(data);
} else if (res.op == UserOperation.DeleteAccount) {
this.state.deleteAccountLoading = false;
this.state.deleteAccountShowConfirm = false;
this.setState(this.state);

54
ui/src/interfaces.ts vendored
View file

@ -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,37 @@ export interface PasswordResetForm {
email: string;
}
export interface PasswordResetResponse {
op: string;
}
// export interface PasswordResetResponse {
// }
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;
}

8
ui/src/utils.ts vendored
View file

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