diff options
author | Dessalines <tyhou13@gmx.com> | 2019-04-19 21:06:25 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-04-19 21:06:25 -0700 |
commit | 9afadfb9c4c5db1796848ec4af9756fe03d51ee3 (patch) | |
tree | 22a2ea818d6bfcdb390e398c4c9bd5e05595587c /ui/src | |
parent | 6f801bb819169060abcf1d8e901759f133dc6987 (diff) |
Saving replies, the actual fixes will be in the merge to dev.
Diffstat (limited to 'ui/src')
-rw-r--r-- | ui/src/components/comment-node.tsx | 229 | ||||
-rw-r--r-- | ui/src/components/comment-nodes.tsx | 7 | ||||
-rw-r--r-- | ui/src/components/communities.tsx | 4 | ||||
-rw-r--r-- | ui/src/components/community.tsx | 6 | ||||
-rw-r--r-- | ui/src/components/create-community.tsx | 2 | ||||
-rw-r--r-- | ui/src/components/create-post.tsx | 2 | ||||
-rw-r--r-- | ui/src/components/login.tsx | 4 | ||||
-rw-r--r-- | ui/src/components/main.tsx | 12 | ||||
-rw-r--r-- | ui/src/components/modlog.tsx | 40 | ||||
-rw-r--r-- | ui/src/components/navbar.tsx | 26 | ||||
-rw-r--r-- | ui/src/components/post-listing.tsx | 35 | ||||
-rw-r--r-- | ui/src/components/post-listings.tsx | 2 | ||||
-rw-r--r-- | ui/src/components/post.tsx | 50 | ||||
-rw-r--r-- | ui/src/components/setup.tsx | 2 | ||||
-rw-r--r-- | ui/src/components/sidebar.tsx | 4 | ||||
-rw-r--r-- | ui/src/components/site-form.tsx | 2 | ||||
-rw-r--r-- | ui/src/components/user.tsx | 14 | ||||
-rw-r--r-- | ui/src/index.html | 2 | ||||
-rw-r--r-- | ui/src/index.tsx | 3 | ||||
-rw-r--r-- | ui/src/interfaces.ts | 72 | ||||
-rw-r--r-- | ui/src/main.css | 87 | ||||
-rw-r--r-- | ui/src/services/WebSocketService.ts | 23 | ||||
-rw-r--r-- | ui/src/utils.ts | 21 |
23 files changed, 397 insertions, 252 deletions
diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index dcfb18a9..c1fc059b 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -1,12 +1,14 @@ import { Component, linkEvent } from 'inferno'; import { Link } from 'inferno-router'; -import { CommentNode as CommentNodeI, CommentLikeForm, CommentForm as CommentFormI, BanFromCommunityForm, CommunityUser, AddModToCommunityForm } from '../interfaces'; +import { CommentNode as CommentNodeI, CommentLikeForm, CommentForm as CommentFormI, SaveCommentForm, BanFromCommunityForm, BanUserForm, CommunityUser, UserView, AddModToCommunityForm, AddAdminForm } from '../interfaces'; import { WebSocketService, UserService } from '../services'; -import { mdToHtml, getUnixTime } from '../utils'; +import { mdToHtml, getUnixTime, canMod, isMod } from '../utils'; import { MomentTime } from './moment-time'; import { CommentForm } from './comment-form'; import { CommentNodes } from './comment-nodes'; +enum BanType {Community, Site}; + interface CommentNodeState { showReply: boolean; showEdit: boolean; @@ -15,6 +17,7 @@ interface CommentNodeState { showBanDialog: boolean; banReason: string; banExpires: string; + banType: BanType; } interface CommentNodeProps { @@ -23,6 +26,7 @@ interface CommentNodeProps { viewOnly?: boolean; locked?: boolean; moderators: Array<CommunityUser>; + admins: Array<UserView>; } export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { @@ -35,6 +39,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { showBanDialog: false, banReason: null, banExpires: null, + banType: BanType.Community } constructor(props: any, context: any) { @@ -60,6 +65,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { <li className="list-inline-item"> <Link className="text-info" to={`/user/${node.comment.creator_id}`}>{node.comment.creator_name}</Link> </li> + {this.isMod && + <li className="list-inline-item badge badge-secondary">mod</li> + } + {this.isAdmin && + <li className="list-inline-item badge badge-secondary">admin</li> + } <li className="list-inline-item"> <span>( <span className="text-info">+{node.comment.upvotes}</span> @@ -77,47 +88,70 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { <div> <div className="md-div" dangerouslySetInnerHTML={mdToHtml(node.comment.removed ? '*removed*' : node.comment.content)} /> <ul class="list-inline mb-1 text-muted small font-weight-bold"> - {!this.props.viewOnly && - <span class="mr-2"> + {UserService.Instance.user && !this.props.viewOnly && + <> <li className="list-inline-item"> <span class="pointer" onClick={linkEvent(this, this.handleReplyClick)}>reply</span> </li> + <li className="list-inline-item mr-2"> + <span class="pointer" onClick={linkEvent(this, this.handleSaveCommentClick)}>{node.comment.saved ? 'unsave' : 'save'}</span> + </li> {this.myComment && <> - <li className="list-inline-item"> - <span class="pointer" onClick={linkEvent(this, this.handleEditClick)}>edit</span> - </li> - <li className="list-inline-item"> - <span class="pointer" onClick={linkEvent(this, this.handleDeleteClick)}>delete</span> - </li> - </> + <li className="list-inline-item"> + <span class="pointer" onClick={linkEvent(this, this.handleEditClick)}>edit</span> + </li> + <li className="list-inline-item"> + <span class="pointer" onClick={linkEvent(this, this.handleDeleteClick)}>delete</span> + </li> + </> } - {this.canMod && - <> + {/* Admins and mods can remove comments */} + {this.canMod && <li className="list-inline-item"> {!this.props.node.comment.removed ? <span class="pointer" onClick={linkEvent(this, this.handleModRemoveShow)}>remove</span> : <span class="pointer" onClick={linkEvent(this, this.handleModRemoveSubmit)}>restore</span> } </li> - {!this.isMod && - <> + } + {/* Mods can ban from community, and appoint as mods to community */} + {this.canMod && + <> + {!this.isMod && + <li className="list-inline-item"> + {!this.props.node.comment.banned_from_community ? + <span class="pointer" onClick={linkEvent(this, this.handleModBanFromCommunityShow)}>ban</span> : + <span class="pointer" onClick={linkEvent(this, this.handleModBanFromCommunitySubmit)}>unban</span> + } + </li> + } + {!this.props.node.comment.banned_from_community && + <li className="list-inline-item"> + <span class="pointer" onClick={linkEvent(this, this.handleAddModToCommunity)}>{`${this.isMod ? 'remove' : 'appoint'} as mod`}</span> + </li> + } + </> + } + {/* Admins can ban from all, and appoint other admins */} + {this.canAdmin && + <> + {!this.isAdmin && <li className="list-inline-item"> {!this.props.node.comment.banned ? - <span class="pointer" onClick={linkEvent(this, this.handleModBanShow)}>ban</span> : - <span class="pointer" onClick={linkEvent(this, this.handleModBanSubmit)}>unban</span> + <span class="pointer" onClick={linkEvent(this, this.handleModBanShow)}>ban from site</span> : + <span class="pointer" onClick={linkEvent(this, this.handleModBanSubmit)}>unban from site</span> } </li> - </> - } - {!this.props.node.comment.banned && - <li className="list-inline-item"> - <span class="pointer" onClick={linkEvent(this, this.handleAddModToCommunity)}>{`${this.isMod ? 'remove' : 'appoint'} as mod`}</span> - </li> - } - </> + } + {!this.props.node.comment.banned && + <li className="list-inline-item"> + <span class="pointer" onClick={linkEvent(this, this.addAdmin)}>{`${this.isAdmin ? 'remove' : 'appoint'} as admin`}</span> + </li> + } + </> } - </span> + </> } <li className="list-inline-item"> <Link className="text-muted" to={`/post/${node.comment.post_id}/comment/${node.comment.id}`} target="_blank">link</Link> @@ -133,22 +167,35 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { </form> } {this.state.showBanDialog && - <form onSubmit={linkEvent(this, this.handleModBanSubmit)}> - <div class="form-group row"> - <label class="col-form-label">Reason</label> - <input type="text" class="form-control mr-2" placeholder="Optional" value={this.state.banReason} onInput={linkEvent(this, this.handleModBanReasonChange)} /> - </div> - <div class="form-group row"> - <label class="col-form-label">Expires</label> - <input type="date" class="form-control mr-2" placeholder="Expires" value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> - </div> - <div class="form-group row"> - <button type="submit" class="btn btn-secondary">Ban {this.props.node.comment.creator_name}</button> - </div> - </form> + <form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}> + <div class="form-group row"> + <label class="col-form-label">Reason</label> + <input type="text" class="form-control mr-2" placeholder="Optional" value={this.state.banReason} onInput={linkEvent(this, this.handleModBanReasonChange)} /> + </div> + <div class="form-group row"> + <label class="col-form-label">Expires</label> + <input type="date" class="form-control mr-2" placeholder="Expires" value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> + </div> + <div class="form-group row"> + <button type="submit" class="btn btn-secondary">Ban {this.props.node.comment.creator_name}</button> + </div> + </form> + } + {this.state.showReply && + <CommentForm + node={node} + onReplyCancel={this.handleReplyCancel} + disabled={this.props.locked} + /> + } + {this.props.node.children && + <CommentNodes + nodes={this.props.node.children} + locked={this.props.locked} + moderators={this.props.moderators} + admins={this.props.admins} + /> } - {this.state.showReply && <CommentForm node={node} onReplyCancel={this.handleReplyCancel} disabled={this.props.locked} />} - {this.props.node.children && <CommentNodes nodes={this.props.node.children} locked={this.props.locked} moderators={this.props.moderators}/>} </div> ) } @@ -158,27 +205,22 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { } get canMod(): boolean { + let adminsThenMods = this.props.admins.map(a => a.id) + .concat(this.props.moderators.map(m => m.user_id)); - // You can do moderator actions only on the mods added after you. - if (UserService.Instance.user) { - let modIds = this.props.moderators.map(m => m.user_id); - let yourIndex = modIds.findIndex(id => id == UserService.Instance.user.id); - if (yourIndex == -1) { - return false; - } else { - console.log(modIds); - modIds = modIds.slice(0, yourIndex+1); // +1 cause you cant mod yourself - console.log(modIds); - return !modIds.includes(this.props.node.comment.creator_id); - } - } else { - return false; - } - + return canMod(UserService.Instance.user, adminsThenMods, this.props.node.comment.creator_id); } get isMod(): boolean { - return this.props.moderators.map(m => m.user_id).includes(this.props.node.comment.creator_id); + return isMod(this.props.moderators.map(m => m.user_id), this.props.node.comment.creator_id); + } + + get isAdmin(): boolean { + return isMod(this.props.admins.map(a => a.id), this.props.node.comment.creator_id); + } + + get canAdmin(): boolean { + return canMod(UserService.Instance.user, this.props.admins.map(a => a.id), this.props.node.comment.creator_id); } handleReplyClick(i: CommentNode) { @@ -193,16 +235,27 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { handleDeleteClick(i: CommentNode) { let deleteForm: CommentFormI = { - content: "*deleted*", + content: '*deleted*', 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, + removed: i.props.node.comment.removed, auth: null }; WebSocketService.Instance.editComment(deleteForm); } + handleSaveCommentClick(i: CommentNode) { + let saved = (i.props.node.comment.saved == undefined) ? true : !i.props.node.comment.saved; + let form: SaveCommentForm = { + comment_id: i.props.node.comment.id, + save: saved + }; + + WebSocketService.Instance.saveComment(form); + } + handleReplyCancel() { this.state.showReply = false; this.state.showEdit = false; @@ -257,8 +310,15 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { i.setState(i.state); } + handleModBanFromCommunityShow(i: CommentNode) { + i.state.showBanDialog = true; + i.state.banType = BanType.Community; + i.setState(i.state); + } + handleModBanShow(i: CommentNode) { i.state.showBanDialog = true; + i.state.banType = BanType.Site; i.setState(i.state); } @@ -272,16 +332,42 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { i.setState(i.state); } + handleModBanFromCommunitySubmit(i: CommentNode) { + i.state.banType = BanType.Community; + i.setState(i.state); + i.handleModBanBothSubmit(i); + } + handleModBanSubmit(i: CommentNode) { + i.state.banType = BanType.Site; + i.setState(i.state); + i.handleModBanBothSubmit(i); + } + + handleModBanBothSubmit(i: CommentNode) { event.preventDefault(); - let form: BanFromCommunityForm = { - user_id: i.props.node.comment.creator_id, - community_id: i.props.node.comment.community_id, - ban: !i.props.node.comment.banned, - reason: i.state.banReason, - expires: getUnixTime(i.state.banExpires), - }; - WebSocketService.Instance.banFromCommunity(form); + + console.log(BanType[i.state.banType]); + console.log(i.props.node.comment.banned); + + if (i.state.banType == BanType.Community) { + let form: BanFromCommunityForm = { + user_id: i.props.node.comment.creator_id, + community_id: i.props.node.comment.community_id, + ban: !i.props.node.comment.banned_from_community, + reason: i.state.banReason, + expires: getUnixTime(i.state.banExpires), + }; + WebSocketService.Instance.banFromCommunity(form); + } else { + let form: BanUserForm = { + user_id: i.props.node.comment.creator_id, + ban: !i.props.node.comment.banned, + reason: i.state.banReason, + expires: getUnixTime(i.state.banExpires), + }; + WebSocketService.Instance.banUser(form); + } i.state.showBanDialog = false; i.setState(i.state); @@ -296,4 +382,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { WebSocketService.Instance.addModToCommunity(form); i.setState(i.state); } + + addAdmin(i: CommentNode) { + let form: AddAdminForm = { + user_id: i.props.node.comment.creator_id, + added: !i.isAdmin, + }; + WebSocketService.Instance.addAdmin(form); + i.setState(i.state); + } } diff --git a/ui/src/components/comment-nodes.tsx b/ui/src/components/comment-nodes.tsx index 498c69b8..abbb1719 100644 --- a/ui/src/components/comment-nodes.tsx +++ b/ui/src/components/comment-nodes.tsx @@ -1,5 +1,5 @@ import { Component } from 'inferno'; -import { CommentNode as CommentNodeI, CommunityUser } from '../interfaces'; +import { CommentNode as CommentNodeI, CommunityUser, UserView } from '../interfaces'; import { CommentNode } from './comment-node'; interface CommentNodesState { @@ -8,6 +8,7 @@ interface CommentNodesState { interface CommentNodesProps { nodes: Array<CommentNodeI>; moderators?: Array<CommunityUser>; + admins?: Array<UserView>; noIndent?: boolean; viewOnly?: boolean; locked?: boolean; @@ -27,7 +28,9 @@ export class CommentNodes extends Component<CommentNodesProps, CommentNodesState noIndent={this.props.noIndent} viewOnly={this.props.viewOnly} locked={this.props.locked} - moderators={this.props.moderators}/> + moderators={this.props.moderators} + admins={this.props.admins} + /> )} </div> ) diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx index 86800684..9145c1cd 100644 --- a/ui/src/components/communities.tsx +++ b/ui/src/components/communities.tsx @@ -53,9 +53,9 @@ export class Communities extends Component<any, CommunitiesState> { return ( <div class="container"> {this.state.loading ? - <h4 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : + <h5 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : <div> - <h4>Communities</h4> + <h5>Communities</h5> <div class="table-responsive"> <table id="community_table" class="table table-sm table-hover"> <thead class="pointer"> diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx index cd95f991..6271bde5 100644 --- a/ui/src/components/community.tsx +++ b/ui/src/components/community.tsx @@ -60,14 +60,14 @@ export class Community extends Component<any, State> { return ( <div class="container"> {this.state.loading ? - <h4><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : + <h5><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : <div class="row"> <div class="col-12 col-md-9"> - <h4>{this.state.community.title} + <h5>{this.state.community.title} {this.state.community.removed && <small className="ml-2 text-muted font-italic">removed</small> } - </h4> + </h5> <PostListings communityId={this.state.communityId} /> </div> <div class="col-12 col-md-3"> diff --git a/ui/src/components/create-community.tsx b/ui/src/components/create-community.tsx index 5f397411..0e806dbb 100644 --- a/ui/src/components/create-community.tsx +++ b/ui/src/components/create-community.tsx @@ -13,7 +13,7 @@ export class CreateCommunity extends Component<any, any> { <div class="container"> <div class="row"> <div class="col-12 col-lg-6 mb-4"> - <h4>Create Forum</h4> + <h5>Create Forum</h5> <CommunityForm onCreate={this.handleCommunityCreate}/> </div> </div> diff --git a/ui/src/components/create-post.tsx b/ui/src/components/create-post.tsx index 041ffd17..7d2f1dd4 100644 --- a/ui/src/components/create-post.tsx +++ b/ui/src/components/create-post.tsx @@ -13,7 +13,7 @@ export class CreatePost extends Component<any, any> { <div class="container"> <div class="row"> <div class="col-12 col-lg-6 mb-4"> - <h4>Create a Post</h4> + <h5>Create a Post</h5> <PostForm onCreate={this.handlePostCreate}/> </div> </div> diff --git a/ui/src/components/login.tsx b/ui/src/components/login.tsx index 4d0b22d0..6d15a382 100644 --- a/ui/src/components/login.tsx +++ b/ui/src/components/login.tsx @@ -67,7 +67,7 @@ export class Login extends Component<any, State> { return ( <div> <form onSubmit={linkEvent(this, this.handleLoginSubmit)}> - <h4>Login</h4> + <h5>Login</h5> <div class="form-group row"> <label class="col-sm-2 col-form-label">Email or Username</label> <div class="col-sm-10"> @@ -94,7 +94,7 @@ export class Login extends Component<any, State> { registerForm() { return ( <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}> - <h4>Sign Up</h4> + <h5>Sign Up</h5> <div class="form-group row"> <label class="col-sm-2 col-form-label">Username</label> <div class="col-sm-10"> diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index 0b5923c0..01c70f94 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -78,12 +78,12 @@ export class Main extends Component<any, State> { </div> <div class="col-12 col-md-4"> {this.state.loading ? - <h4><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : + <h5><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : <div> {this.trendingCommunities()} {UserService.Instance.user && this.state.subscribedCommunities.length > 0 && <div> - <h4>Subscribed forums</h4> + <h5>Subscribed forums</h5> <ul class="list-inline"> {this.state.subscribedCommunities.map(community => <li class="list-inline-item"><Link to={`/community/${community.community_id}`}>{community.community_name}</Link></li> @@ -103,7 +103,7 @@ export class Main extends Component<any, State> { trendingCommunities() { return ( <div> - <h4>Trending <Link class="text-white" to="/communities">forums</Link></h4> + <h5>Trending <Link class="text-white" to="/communities">forums</Link></h5> <ul class="list-inline"> {this.state.trendingCommunities.map(community => <li class="list-inline-item"><Link to={`/community/${community.id}`}>{community.name}</Link></li> @@ -116,7 +116,7 @@ export class Main extends Component<any, State> { landing() { return ( <div> - <h4>{`${this.state.site.site.name}`}</h4> + <h5>{`${this.state.site.site.name}`}</h5> <ul class="my-1 list-inline"> <li className="list-inline-item badge badge-light">{this.state.site.site.number_of_users} Users</li> <li className="list-inline-item badge badge-light">{this.state.site.site.number_of_posts} Posts</li> @@ -136,10 +136,10 @@ export class Main extends Component<any, State> { <hr /> </div> } - <h4>Welcome to + <h5>Welcome to <svg class="icon mx-2"><use xlinkHref="#icon-mouse"></use></svg> <a href={repoUrl}>Lemmy<sup>Beta</sup></a> - </h4> + </h5> <p>Lemmy is a <a href="https://en.wikipedia.org/wiki/Link_aggregation">link aggregator</a> / reddit alternative, intended to work in the <a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a>.</p> <p>Its self-hostable, has live-updating comment threads, and is tiny (<code>~80kB</code>). Federation into the ActivityPub network is on the roadmap.</p> <p>This is a <b>very early beta version</b>, and a lot of features are currently broken or missing.</p> diff --git a/ui/src/components/modlog.tsx b/ui/src/components/modlog.tsx index 56b08a7e..7145b4f6 100644 --- a/ui/src/components/modlog.tsx +++ b/ui/src/components/modlog.tsx @@ -9,7 +9,7 @@ import { MomentTime } from './moment-time'; import * as moment from 'moment'; interface ModlogState { - combined: Array<{type_: string, data: ModRemovePost | ModLockPost | ModRemoveCommunity}>, + combined: Array<{type_: string, data: ModRemovePost | ModLockPost | ModRemoveCommunity | ModAdd | ModBan}>, communityId?: number, communityName?: string, page: number; @@ -51,6 +51,8 @@ export class Modlog extends Component<any, ModlogState> { let removed_communities = addTypeInfo(res.removed_communities, "removed_communities"); let banned_from_community = addTypeInfo(res.banned_from_community, "banned_from_community"); let added_to_community = addTypeInfo(res.added_to_community, "added_to_community"); + let added = addTypeInfo(res.added, "added"); + let banned = addTypeInfo(res.banned, "banned"); this.state.combined = []; this.state.combined.push(...removed_posts); @@ -59,9 +61,11 @@ export class Modlog extends Component<any, ModlogState> { this.state.combined.push(...removed_communities); this.state.combined.push(...banned_from_community); this.state.combined.push(...added_to_community); + this.state.combined.push(...added); + this.state.combined.push(...banned); if (this.state.communityId && this.state.combined.length > 0) { - this.state.communityName = this.state.combined[0].data.community_name; + this.state.communityName = (this.state.combined[0].data as ModRemovePost).community_name; } // Sort them by time @@ -95,13 +99,14 @@ export class Modlog extends Component<any, ModlogState> { <> {(i.data as ModRemoveComment).removed? 'Removed' : 'Restored'} <span> Comment <Link to={`/post/${(i.data as ModRemoveComment).post_id}/comment/${(i.data as ModRemoveComment).comment_id}`}>{(i.data as ModRemoveComment).comment_content}</Link></span> + <span> by <Link to={`/user/${(i.data as ModRemoveComment).comment_user_id}`}>{(i.data as ModRemoveComment).comment_user_name}</Link></span> <div>{(i.data as ModRemoveComment).reason && ` reason: ${(i.data as ModRemoveComment).reason}`}</div> </> } {i.type_ == 'removed_communities' && <> {(i.data as ModRemoveCommunity).removed ? 'Removed' : 'Restored'} - <span> Community <Link to={`/community/${i.data.community_id}`}>{i.data.community_name}</Link></span> + <span> Community <Link to={`/community/${(i.data as ModRemoveCommunity).community_id}`}>{(i.data as ModRemoveCommunity).community_name}</Link></span> <div>{(i.data as ModRemoveCommunity).reason && ` reason: ${(i.data as ModRemoveCommunity).reason}`}</div> <div>{(i.data as ModRemoveCommunity).expires && ` expires: ${moment.utc((i.data as ModRemoveCommunity).expires).fromNow()}`}</div> </> @@ -110,6 +115,8 @@ export class Modlog extends Component<any, ModlogState> { <> <span>{(i.data as ModBanFromCommunity).banned ? 'Banned ' : 'Unbanned '} </span> <span><Link to={`/user/${(i.data as ModBanFromCommunity).other_user_id}`}>{(i.data as ModBanFromCommunity).other_user_name}</Link></span> + <span> from the community </span> + <span><Link to={`/community/${(i.data as ModBanFromCommunity).community_id}`}>{(i.data as ModBanFromCommunity).community_name}</Link></span> <div>{(i.data as ModBanFromCommunity).reason && ` reason: ${(i.data as ModBanFromCommunity).reason}`}</div> <div>{(i.data as ModBanFromCommunity).expires && ` expires: ${moment.utc((i.data as ModBanFromCommunity).expires).fromNow()}`}</div> </> @@ -119,12 +126,27 @@ export class Modlog extends Component<any, ModlogState> { <span>{(i.data as ModAddCommunity).removed ? 'Removed ' : 'Appointed '} </span> <span><Link to={`/user/${(i.data as ModAddCommunity).other_user_id}`}>{(i.data as ModAddCommunity).other_user_name}</Link></span> <span> as a mod to the community </span> - <span><Link to={`/community/${i.data.community_id}`}>{i.data.community_name}</Link></span> + <span><Link to={`/community/${(i.data as ModAddCommunity).community_id}`}>{(i.data as ModAddCommunity).community_name}</Link></span> + </> + } + {i.type_ == 'banned' && + <> + <span>{(i.data as ModBan).banned ? 'Banned ' : 'Unbanned '} </span> + <span><Link to={`/user/${(i.data as ModBan).other_user_id}`}>{(i.data as ModBan).other_user_name}</Link></span> + <div>{(i.data as ModBan).reason && ` reason: ${(i.data as ModBan).reason}`}</div> + <div>{(i.data as ModBan).expires && ` expires: ${moment.utc((i.data as ModBan).expires).fromNow()}`}</div> + </> + } + {i.type_ == 'added' && + <> + <span>{(i.data as ModAdd).removed ? 'Removed ' : 'Appointed '} </span> + <span><Link to={`/user/${(i.data as ModAdd).other_user_id}`}>{(i.data as ModAdd).other_user_name}</Link></span> + <span> as an admin </span> </> } </td> </tr> - ) + ) } </tbody> @@ -136,12 +158,12 @@ export class Modlog extends Component<any, ModlogState> { return ( <div class="container"> {this.state.loading ? - <h4 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : + <h5 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : <div> - <h4> + <h5> {this.state.communityName && <Link className="text-white" to={`/community/${this.state.communityId}`}>/f/{this.state.communityName} </Link>} <span>Modlog</span> - </h4> + </h5> <div class="table-responsive"> <table id="modlog_table" class="table table-sm table-hover"> <thead class="pointer"> @@ -183,7 +205,7 @@ export class Modlog extends Component<any, ModlogState> { i.setState(i.state); i.refetch(); } - + refetch(){ let modlogForm: GetModlogForm = { community_id: this.state.communityId, diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index ae693825..be98912e 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -64,16 +64,22 @@ export class Navbar extends Component<any, NavbarState> { </ul> <ul class="navbar-nav ml-auto mr-2"> {this.state.isLoggedIn ? - <li className={`nav-item dropdown ${this.state.expandUserDropdown && 'show'}`}> - <a class="pointer nav-link dropdown-toggle" onClick={linkEvent(this, this.expandUserDropdown)} role="button"> - {UserService.Instance.user.username} - </a> - <div className={`dropdown-menu dropdown-menu-right ${this.state.expandUserDropdown && 'show'}`}> - <a role="button" class="dropdown-item pointer" onClick={linkEvent(this, this.handleOverviewClick)}>Overview</a> - <a role="button" class="dropdown-item pointer" onClick={ linkEvent(this, this.handle |