fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-25 15:39:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reworking combined inbox. Fixes #161

Browse source
This commit is contained in:
Dessalines 2021-02-02 15:24:25 -05:00
parent 92844d2f8f
commit 2b0f4929af
1 changed files with 101 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
src/shared/components/inbox.tsx
View file

@ -71,6 +71,7 @@ interface InboxState {
replies: CommentView[]; replies: CommentView[];
mentions: UserMentionView[]; mentions: UserMentionView[];
messages: PrivateMessageView[]; messages: PrivateMessageView[];
combined: ReplyType[];
sort: SortType; sort: SortType;
page: number; page: number;
site_view: SiteView; site_view: SiteView;
@ -86,6 +87,7 @@ export class Inbox extends Component<any, InboxState> {
replies: [], replies: [],
mentions: [], mentions: [],
messages: [], messages: [],
combined: [],
sort: SortType.New, sort: SortType.New,
page: 1, page: 1,
site_view: this.isoData.site_res.site_view, site_view: this.isoData.site_res.site_view,
@ -111,6 +113,7 @@ export class Inbox extends Component<any, InboxState> {
this.state.replies = this.isoData.routeData[0].replies || []; this.state.replies = this.isoData.routeData[0].replies || [];
this.state.mentions = this.isoData.routeData[1].mentions || []; this.state.mentions = this.isoData.routeData[1].mentions || [];
this.state.messages = this.isoData.routeData[2].messages || []; this.state.messages = this.isoData.routeData[2].messages || [];
this.state.combined = this.buildCombined();
this.state.loading = false; this.state.loading = false;
} else { } else {
this.refetch(); this.refetch();
@ -298,26 +301,43 @@ export class Inbox extends Component<any, InboxState> {
); );
} }
combined(): ReplyType[] { replyToReplyType(r: CommentView): ReplyType {
let id = 0; return {
let replies: ReplyType[] = this.state.replies.map(r => ({ id: r.comment.id,
id: id++,
type_: ReplyEnum.Reply, type_: ReplyEnum.Reply,
view: r, view: r,
published: r.comment.published, published: r.comment.published,
})); };
let mentions: ReplyType[] = this.state.mentions.map(r => ({ }
id: id++,
mentionToReplyType(r: UserMentionView): ReplyType {
return {
id: r.user_mention.id,
type_: ReplyEnum.Mention, type_: ReplyEnum.Mention,
view: r, view: r,
published: r.comment.published, published: r.comment.published,
})); };
let messages: ReplyType[] = this.state.messages.map(r => ({ }
id: id++,
messageToReplyType(r: PrivateMessageView): ReplyType {
return {
id: r.private_message.id,
type_: ReplyEnum.Message, type_: ReplyEnum.Message,
view: r, view: r,
published: r.private_message.published, published: r.private_message.published,
})); };
}
buildCombined(): ReplyType[] {
let replies: ReplyType[] = this.state.replies.map(r =>
this.replyToReplyType(r)
);
let mentions: ReplyType[] = this.state.mentions.map(r =>
this.mentionToReplyType(r)
);
let messages: ReplyType[] = this.state.messages.map(r =>
this.messageToReplyType(r)
);
return [...replies, ...mentions, ...messages].sort((a, b) => return [...replies, ...mentions, ...messages].sort((a, b) =>
b.published.localeCompare(a.published) b.published.localeCompare(a.published)
@ -363,7 +383,7 @@ export class Inbox extends Component<any, InboxState> {
} }
all() { all() {
return <div>{this.combined().map(i => this.renderReplyType(i))}</div>; return <div>{this.state.combined.map(i => this.renderReplyType(i))}</div>;
} }
replies() { replies() {
@ -547,6 +567,7 @@ export class Inbox extends Component<any, InboxState> {
parseMessage(msg: any) { parseMessage(msg: any) {
let op = wsUserOp(msg); let op = wsUserOp(msg);
console.log(msg);
if (msg.error) { if (msg.error) {
toast(i18n.t(msg.error), 'danger'); toast(i18n.t(msg.error), 'danger');
return; return;
@ -555,6 +576,7 @@ export class Inbox extends Component<any, InboxState> {
} else if (op == UserOperation.GetReplies) { } else if (op == UserOperation.GetReplies) {
let data = wsJsonToRes<GetRepliesResponse>(msg).data; let data = wsJsonToRes<GetRepliesResponse>(msg).data;
this.state.replies = data.replies; this.state.replies = data.replies;
this.state.combined = this.buildCombined();
this.state.loading = false; this.state.loading = false;
this.sendUnreadCount(); this.sendUnreadCount();
window.scrollTo(0, 0); window.scrollTo(0, 0);
@ -563,6 +585,7 @@ export class Inbox extends Component<any, InboxState> {
} else if (op == UserOperation.GetUserMentions) { } else if (op == UserOperation.GetUserMentions) {
let data = wsJsonToRes<GetUserMentionsResponse>(msg).data; let data = wsJsonToRes<GetUserMentionsResponse>(msg).data;
this.state.mentions = data.mentions; this.state.mentions = data.mentions;
this.state.combined = this.buildCombined();
this.sendUnreadCount(); this.sendUnreadCount();
window.scrollTo(0, 0); window.scrollTo(0, 0);
this.setState(this.state); this.setState(this.state);
@ -570,6 +593,7 @@ export class Inbox extends Component<any, InboxState> {
} else if (op == UserOperation.GetPrivateMessages) { } else if (op == UserOperation.GetPrivateMessages) {
let data = wsJsonToRes<PrivateMessagesResponse>(msg).data; let data = wsJsonToRes<PrivateMessagesResponse>(msg).data;
this.state.messages = data.private_messages; this.state.messages = data.private_messages;
this.state.combined = this.buildCombined();
this.sendUnreadCount(); this.sendUnreadCount();
window.scrollTo(0, 0); window.scrollTo(0, 0);
this.setState(this.state); this.setState(this.state);
@ -581,9 +605,12 @@ export class Inbox extends Component<any, InboxState> {
m.private_message.id === data.private_message_view.private_message.id m.private_message.id === data.private_message_view.private_message.id
); );
if (found) { if (found) {
found.private_message.content = let combinedView = this.state.combined.find(
i => i.id == data.private_message_view.private_message.id
).view as PrivateMessageView;
found.private_message.content = combinedView.private_message.content =
data.private_message_view.private_message.content; data.private_message_view.private_message.content;
found.private_message.updated = found.private_message.updated = combinedView.private_message.updated =
data.private_message_view.private_message.updated; data.private_message_view.private_message.updated;
} }
this.setState(this.state); this.setState(this.state);
@ -594,9 +621,12 @@ export class Inbox extends Component<any, InboxState> {
m.private_message.id === data.private_message_view.private_message.id m.private_message.id === data.private_message_view.private_message.id
); );
if (found) { if (found) {
found.private_message.deleted = let combinedView = this.state.combined.find(
i => i.id == data.private_message_view.private_message.id
).view as PrivateMessageView;
found.private_message.deleted = combinedView.private_message.deleted =
data.private_message_view.private_message.deleted; data.private_message_view.private_message.deleted;
found.private_message.updated = found.private_message.updated = combinedView.private_message.updated =
data.private_message_view.private_message.updated; data.private_message_view.private_message.updated;
} }
this.setState(this.state); this.setState(this.state);
@ -608,7 +638,10 @@ export class Inbox extends Component<any, InboxState> {
); );
if (found) { if (found) {
found.private_message.updated = let combinedView = this.state.combined.find(
i => i.id == data.private_message_view.private_message.id
).view as PrivateMessageView;
found.private_message.updated = combinedView.private_message.updated =
data.private_message_view.private_message.updated; data.private_message_view.private_message.updated;
// If youre in the unread view, just remove it from the list // If youre in the unread view, just remove it from the list
@ -621,13 +654,11 @@ export class Inbox extends Component<any, InboxState> {
r.private_message.id !== r.private_message.id !==
data.private_message_view.private_message.id data.private_message_view.private_message.id
); );
} else { this.state.combined = this.state.combined.filter(
let found = this.state.messages.find( r => r.id !== data.private_message_view.private_message.id
c =>
c.private_message.id ==
data.private_message_view.private_message.id
); );
found.private_message.read = } else {
found.private_message.read = combinedView.private_message.read =
data.private_message_view.private_message.read; data.private_message_view.private_message.read;
} }
} }
@ -654,11 +685,18 @@ export class Inbox extends Component<any, InboxState> {
this.state.replies = this.state.replies.filter( this.state.replies = this.state.replies.filter(
r => r.comment.id !== data.comment_view.comment.id r => r.comment.id !== data.comment_view.comment.id
); );
this.state.combined = this.state.combined.filter(
r => r.id !== data.comment_view.comment.id
);
} else { } else {
let found = this.state.replies.find( let found = this.state.replies.find(
c => c.comment.id == data.comment_view.comment.id c => c.comment.id == data.comment_view.comment.id
); );
found.comment.read = data.comment_view.comment.read; let combinedView = this.state.combined.find(
i => i.id == data.comment_view.comment.id
).view as CommentView;
found.comment.read = combinedView.comment.read =
data.comment_view.comment.read;
} }
this.sendUnreadCount(); this.sendUnreadCount();
this.setState(this.state); this.setState(this.state);
@ -670,13 +708,25 @@ export class Inbox extends Component<any, InboxState> {
let found = this.state.mentions.find( let found = this.state.mentions.find(
c => c.user_mention.id == data.user_mention_view.user_mention.id c => c.user_mention.id == data.user_mention_view.user_mention.id
); );
found.comment.content = data.user_mention_view.comment.content;
found.comment.updated = data.user_mention_view.comment.updated; if (found) {
found.comment.removed = data.user_mention_view.comment.removed; let combinedView = this.state.combined.find(
found.comment.deleted = data.user_mention_view.comment.deleted; i => i.id == data.user_mention_view.user_mention.id
found.counts.upvotes = data.user_mention_view.counts.upvotes; ).view as UserMentionView;
found.counts.downvotes = data.user_mention_view.counts.downvotes; found.comment.content = combinedView.comment.content =
found.counts.score = data.user_mention_view.counts.score; data.user_mention_view.comment.content;
found.comment.updated = combinedView.comment.updated =
data.user_mention_view.comment.updated;
found.comment.removed = combinedView.comment.removed =
data.user_mention_view.comment.removed;
found.comment.deleted = combinedView.comment.deleted =
data.user_mention_view.comment.deleted;
found.counts.upvotes = combinedView.counts.upvotes =
data.user_mention_view.counts.upvotes;
found.counts.downvotes = combinedView.counts.downvotes =
data.user_mention_view.counts.downvotes;
found.counts.score = combinedView.counts.score =
data.user_mention_view.counts.score;
// If youre in the unread view, just remove it from the list // If youre in the unread view, just remove it from the list
if ( if (
@ -686,12 +736,14 @@ export class Inbox extends Component<any, InboxState> {
this.state.mentions = this.state.mentions.filter( this.state.mentions = this.state.mentions.filter(
r => r.user_mention.id !== data.user_mention_view.user_mention.id r => r.user_mention.id !== data.user_mention_view.user_mention.id
); );
} else { this.state.combined = this.state.combined.filter(
let found = this.state.mentions.find( r => r.id !== data.user_mention_view.user_mention.id
c => c.user_mention.id == data.user_mention_view.user_mention.id
); );
} else {
// TODO test to make sure these mentions are getting marked as read // TODO test to make sure these mentions are getting marked as read
found.user_mention.read = data.user_mention_view.user_mention.read; found.user_mention.read = combinedView.user_mention.read =
data.user_mention_view.user_mention.read;
}
} }
this.sendUnreadCount(); this.sendUnreadCount();
this.setState(this.state); this.setState(this.state);
@ -700,6 +752,7 @@ export class Inbox extends Component<any, InboxState> {
if (data.recipient_ids.includes(UserService.Instance.user.id)) { if (data.recipient_ids.includes(UserService.Instance.user.id)) {
this.state.replies.unshift(data.comment_view); this.state.replies.unshift(data.comment_view);
this.state.combined.unshift(this.replyToReplyType(data.comment_view));
this.setState(this.state); this.setState(this.state);
} else if (data.comment_view.creator.id == UserService.Instance.user.id) { } else if (data.comment_view.creator.id == UserService.Instance.user.id) {
// TODO this seems wrong, you should be using form_id // TODO this seems wrong, you should be using form_id
@ -711,6 +764,9 @@ export class Inbox extends Component<any, InboxState> {
data.private_message_view.recipient.id == UserService.Instance.user.id data.private_message_view.recipient.id == UserService.Instance.user.id
) { ) {
this.state.messages.unshift(data.private_message_view); this.state.messages.unshift(data.private_message_view);
this.state.combined.unshift(
this.messageToReplyType(data.private_message_view)
);
this.setState(this.state); this.setState(this.state);
} }
} else if (op == UserOperation.SaveComment) { } else if (op == UserOperation.SaveComment) {