1 import { Component, linkEvent } from 'inferno';
2 import { Link } from 'inferno-router';
3 import { Subscription } from "rxjs";
4 import { retryWhen, delay, take } from 'rxjs/operators';
5 import { UserOperation, Comment, SortType, GetRepliesForm, GetRepliesResponse, CommentResponse } from '../interfaces';
6 import { WebSocketService, UserService } from '../services';
7 import { msgOp } from '../utils';
8 import { CommentNodes } from './comment-nodes';
14 interface InboxState {
15 unreadType: UnreadType;
16 replies: Array<Comment>;
21 export class Inbox extends Component<any, InboxState> {
23 private subscription: Subscription;
24 private emptyState: InboxState = {
25 unreadType: UnreadType.Unread,
31 constructor(props: any, context: any) {
32 super(props, context);
34 this.state = this.emptyState;
36 this.subscription = WebSocketService.Instance.subject
37 .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
39 (msg) => this.parseMessage(msg),
40 (err) => console.error(err),
41 () => console.log('complete')
47 componentWillUnmount() {
48 this.subscription.unsubscribe();
52 document.title = `/u/${UserService.Instance.user.username} Inbox - Lemmy`;
56 let user = UserService.Instance.user;
58 <div class="container">
62 <span>Inbox for <Link to={`/u/${user.username}`}>{user.username}</Link></span>
64 {this.state.replies.length > 0 && this.state.unreadType == UnreadType.Unread &&
65 <ul class="list-inline mb-1 text-muted small font-weight-bold">
66 <li className="list-inline-item">
67 <span class="pointer" onClick={this.markAllAsRead}>mark all as read</span>
82 <div className="mb-2">
83 <select value={this.state.unreadType} onChange={linkEvent(this, this.handleUnreadTypeChange)} class="custom-select custom-select-sm w-auto">
84 <option disabled>Type</option>
85 <option value={UnreadType.Unread}>Unread</option>
86 <option value={UnreadType.All}>All</option>
88 <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="custom-select custom-select-sm w-auto ml-2">
89 <option disabled>Sort Type</option>
90 <option value={SortType.New}>New</option>
91 <option value={SortType.TopDay}>Top Day</option>
92 <option value={SortType.TopWeek}>Week</option>
93 <option value={SortType.TopMonth}>Month</option>
94 <option value={SortType.TopYear}>Year</option>
95 <option value={SortType.TopAll}>All</option>
105 {this.state.replies.map(reply =>
106 <CommentNodes nodes={[{comment: reply}]} noIndent markable />
115 {this.state.page > 1 &&
116 <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}>Prev</button>
118 <button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}>Next</button>
135 handleUnreadTypeChange(i: Inbox, event: any) {
136 i.state.unreadType = Number(event.target.value);
143 let form: GetRepliesForm = {
144 sort: SortType[this.state.sort],
145 unread_only: (this.state.unreadType == UnreadType.Unread),
146 page: this.state.page,
149 WebSocketService.Instance.getReplies(form);
152 handleSortChange(i: Inbox, event: any) {
153 i.state.sort = Number(event.target.value);
160 WebSocketService.Instance.markAllAsRead();
163 parseMessage(msg: any) {
165 let op: UserOperation = msgOp(msg);
169 } else if (op == UserOperation.GetReplies || op == UserOperation.MarkAllAsRead) {
170 let res: GetRepliesResponse = msg;
171 this.state.replies = res.replies;
172 this.sendRepliesCount();
173 window.scrollTo(0,0);
174 this.setState(this.state);
175 } else if (op == UserOperation.EditComment) {
176 let res: CommentResponse = msg;
178 let found = this.state.replies.find(c => c.id == res.comment.id);
179 found.content = res.comment.content;
180 found.updated = res.comment.updated;
181 found.removed = res.comment.removed;
182 found.deleted = res.comment.deleted;
183 found.upvotes = res.comment.upvotes;
184 found.downvotes = res.comment.downvotes;
185 found.score = res.comment.score;
187 // If youre in the unread view, just remove it from the list
188 if (this.state.unreadType == UnreadType.Unread && res.comment.read) {
189 this.state.replies = this.state.replies.filter(r => r.id !== res.comment.id);
191 let found = this.state.replies.find(c => c.id == res.comment.id);
192 found.read = res.comment.read;
194 this.sendRepliesCount();
196 this.setState(this.state);
197 } else if (op == UserOperation.CreateComment) {
198 // let res: CommentResponse = msg;
200 // this.state.replies.unshift(res.comment); // TODO do this right
201 // this.setState(this.state);
202 } else if (op == UserOperation.SaveComment) {
203 let res: CommentResponse = msg;
204 let found = this.state.replies.find(c => c.id == res.comment.id);
205 found.saved = res.comment.saved;
206 this.setState(this.state);
207 } else if (op == UserOperation.CreateCommentLike) {
208 let res: CommentResponse = msg;
209 let found: Comment = this.state.replies.find(c => c.id === res.comment.id);
210 found.score = res.comment.score;
211 found.upvotes = res.comment.upvotes;
212 found.downvotes = res.comment.downvotes;
213 if (res.comment.my_vote !== null)
214 found.my_vote = res.comment.my_vote;
215 this.setState(this.state);
220 UserService.Instance.sub.next({user: UserService.Instance.user, unreadCount: this.state.replies.filter(r => !r.read).length});