From 682413613e75618489d262bd033c3101da96abd7 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Sat, 20 Apr 2019 11:17:00 -0700 Subject: Mostly working, before merge --- ui/src/components/comment-node.tsx | 24 ++++- ui/src/components/comment-nodes.tsx | 2 + ui/src/components/inbox.tsx | 177 ++++++++++++++++++++++++++++++++++++ ui/src/components/main.tsx | 18 +++- ui/src/components/navbar.tsx | 16 +++- ui/src/components/post.tsx | 1 - 6 files changed, 230 insertions(+), 8 deletions(-) create mode 100644 ui/src/components/inbox.tsx (limited to 'ui/src/components') diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index 90cf5a54..cf7b1bce 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -25,6 +25,7 @@ interface CommentNodeProps { noIndent?: boolean; viewOnly?: boolean; locked?: boolean; + markable?: boolean; moderators: Array; admins: Array; } @@ -146,7 +147,7 @@ export class CommentNode extends Component { } {!this.props.node.comment.banned &&
  • - {`${this.isAdmin ? 'remove' : 'appoint'} as admin`} + {`${this.isAdmin ? 'remove' : 'appoint'} as admin`}
    • } @@ -156,6 +157,11 @@ export class CommentNode extends Component {
  • link
    • + {this.props.markable && +
  • + {`mark as ${node.comment.read ? 'unread' : 'read'}`} +
    • + } } @@ -309,6 +315,20 @@ export class CommentNode extends Component { i.setState(i.state); } + handleMarkRead(i: CommentNode) { + let form: CommentFormI = { + content: i.props.node.comment.content, + edit_id: i.props.node.comment.id, + creator_id: i.props.node.comment.creator_id, + post_id: i.props.node.comment.post_id, + parent_id: i.props.node.comment.parent_id, + read: !i.props.node.comment.read, + auth: null + }; + WebSocketService.Instance.editComment(form); + } + + handleModBanFromCommunityShow(i: CommentNode) { i.state.showBanDialog = true; i.state.banType = BanType.Community; @@ -382,7 +402,7 @@ export class CommentNode extends Component { i.setState(i.state); } - addAdmin(i: CommentNode) { + handleAddAdmin(i: CommentNode) { let form: AddAdminForm = { user_id: i.props.node.comment.creator_id, added: !i.isAdmin, diff --git a/ui/src/components/comment-nodes.tsx b/ui/src/components/comment-nodes.tsx index abbb1719..da67bbc7 100644 --- a/ui/src/components/comment-nodes.tsx +++ b/ui/src/components/comment-nodes.tsx @@ -12,6 +12,7 @@ interface CommentNodesProps { noIndent?: boolean; viewOnly?: boolean; locked?: boolean; + markable?: boolean; } export class CommentNodes extends Component { @@ -30,6 +31,7 @@ export class CommentNodes extends Component )} diff --git a/ui/src/components/inbox.tsx b/ui/src/components/inbox.tsx new file mode 100644 index 00000000..e6ce6d13 --- /dev/null +++ b/ui/src/components/inbox.tsx @@ -0,0 +1,177 @@ +import { Component, linkEvent } from 'inferno'; +import { Link } from 'inferno-router'; +import { Subscription } from "rxjs"; +import { retryWhen, delay, take } from 'rxjs/operators'; +import { UserOperation, Comment, SortType, GetRepliesForm, GetRepliesResponse, CommentResponse } from '../interfaces'; +import { WebSocketService, UserService } from '../services'; +import { msgOp } from '../utils'; +import { CommentNodes } from './comment-nodes'; + +enum UnreadType { + Unread, All +} + +interface InboxState { + unreadType: UnreadType; + replies: Array; + sort: SortType; + page: number; +} + +export class Inbox extends Component { + + private subscription: Subscription; + private emptyState: InboxState = { + unreadType: UnreadType.Unread, + replies: [], + sort: SortType.New, + page: 1, + } + + constructor(props: any, context: any) { + super(props, context); + + this.state = this.emptyState; + + this.subscription = WebSocketService.Instance.subject + .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10)))) + .subscribe( + (msg) => this.parseMessage(msg), + (err) => console.error(err), + () => console.log('complete') + ); + + this.refetch(); + } + + componentWillUnmount() { + this.subscription.unsubscribe(); + } + + render() { + let user = UserService.Instance.user; + return ( +
    +
    +
    +
    Inbox for {user.username}
    + {this.selects()} + {this.replies()} + {this.paginator()} +
    +
    +
    + ) + } + + selects() { + return ( +
    + + +
    + ) + + } + + replies() { + return ( +
    + {this.state.replies.map(reply => + + )} +
    + ); + } + + paginator() { + return ( +
    + {this.state.page > 1 && + + } + +
    + ); + } + + nextPage(i: Inbox) { + i.state.page++; + i.setState(i.state); + i.refetch(); + } + + prevPage(i: Inbox) { + i.state.page--; + i.setState(i.state); + i.refetch(); + } + + handleUnreadTypeChange(i: Inbox, event: any) { + i.state.unreadType = Number(event.target.value); + i.state.page = 1; + i.setState(i.state); + i.refetch(); + } + + refetch() { + let form: GetRepliesForm = { + sort: SortType[this.state.sort], + unread_only: (this.state.unreadType == UnreadType.Unread), + page: this.state.page, + limit: 9999, + }; + WebSocketService.Instance.getReplies(form); + } + + handleSortChange(i: Inbox, event: any) { + i.state.sort = Number(event.target.value); + i.state.page = 1; + i.setState(i.state); + i.refetch(); + } + + parseMessage(msg: any) { + console.log(msg); + let op: UserOperation = msgOp(msg); + if (msg.error) { + alert(msg.error); + return; + } else if (op == UserOperation.GetReplies) { + let res: GetRepliesResponse = msg; + this.state.replies = res.replies; + this.sendRepliesCount(); + this.setState(this.state); + } else if (op == UserOperation.EditComment) { + let res: CommentResponse = msg; + + // If youre in the unread view, just remove it from the list + if (this.state.unreadType == UnreadType.Unread && res.comment.read) { + this.state.replies = this.state.replies.filter(r => r.id !== res.comment.id); + } else { + let found = this.state.replies.find(c => c.id == res.comment.id); + found.read = res.comment.read; + } + + this.sendRepliesCount(); + this.setState(this.state); + } + } + + sendRepliesCount() { + UserService.Instance.sub.next({user: UserService.Instance.user, unreadCount: this.state.replies.filter(r => !r.read).length}); + } +} + diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index 01c70f94..e3d6f844 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -2,7 +2,7 @@ import { Component } from 'inferno'; import { Link } from 'inferno-router'; import { Subscription } from "rxjs"; import { retryWhen, delay, take } from 'rxjs/operators'; -import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse, ListCommunitiesForm, ListCommunitiesResponse, Community, SortType, GetSiteResponse } from '../interfaces'; +import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse, ListCommunitiesForm, ListCommunitiesResponse, Community, SortType, GetSiteResponse, GetRepliesResponse, GetRepliesForm } from '../interfaces'; import { WebSocketService, UserService } from '../services'; import { PostListings } from './post-listings'; import { msgOp, repoUrl, mdToHtml } from '../utils'; @@ -55,6 +55,15 @@ export class Main extends Component { if (UserService.Instance.user) { WebSocketService.Instance.getFollowedCommunities(); + + // Get replies for the count + let repliesForm: GetRepliesForm = { + sort: SortType[SortType.New], + unread_only: true, + page: 1, + limit: 9999, + }; + WebSocketService.Instance.getReplies(repliesForm); } let listCommunitiesForm: ListCommunitiesForm = { @@ -176,7 +185,14 @@ export class Main extends Component { this.state.site.site = res.site; this.state.site.banned = res.banned; this.setState(this.state); + } else if (op == UserOperation.GetReplies) { + let res: GetRepliesResponse = msg; + this.sendRepliesCount(res); } } + + sendRepliesCount(res: GetRepliesResponse) { + UserService.Instance.sub.next({user: UserService.Instance.user, unreadCount: res.replies.filter(r => !r.read).length}); + } } diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index be98912e..fed49e6f 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -7,12 +7,14 @@ interface NavbarState { isLoggedIn: boolean; expanded: boolean; expandUserDropdown: boolean; + unreadCount: number; } export class Navbar extends Component { emptyState: NavbarState = { - isLoggedIn: UserService.Instance.user !== undefined, + isLoggedIn: (UserService.Instance.user !== undefined), + unreadCount: 0, expanded: false, expandUserDropdown: false } @@ -24,8 +26,9 @@ export class Navbar extends Component { // Subscribe to user changes UserService.Instance.sub.subscribe(user => { - let loggedIn: boolean = user !== undefined; - this.setState({isLoggedIn: loggedIn}); + this.state.isLoggedIn = user.user !== undefined; + this.state.unreadCount = user.unreadCount; + this.setState(this.state); }); } @@ -65,9 +68,13 @@ export class Navbar extends Component {