ui/src/components/modlog.tsx

   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, GetModlogForm, GetModlogResponse, ModRemovePost, ModLockPost, ModStickyPost, ModRemoveComment, ModRemoveCommunity, ModBanFromCommunity, ModBan, ModAddCommunity, ModAdd } from '../interfaces';
   6 import { WebSocketService } from '../services';
   7 import { msgOp, addTypeInfo, fetchLimit } from '../utils';
   8 import { MomentTime } from './moment-time';
   9 import * as moment from 'moment';
  10 import { i18n } from '../i18next';
  11
  12 interface ModlogState {
  13   combined: Array<{type_: string, data: ModRemovePost | ModLockPost | ModStickyPost | ModRemoveCommunity | ModAdd | ModBan}>,
  14   communityId?: number,
  15   communityName?: string,
  16   page: number;
  17   loading: boolean;
  18 }
  19
  20 export class Modlog extends Component<any, ModlogState> {
  21   private subscription: Subscription;
  22   private emptyState: ModlogState = {
  23     combined: [],
  24     page: 1,
  25     loading: true,
  26   }
  27
  28   constructor(props: any, context: any) {
  29     super(props, context);
  30
  31     this.state = this.emptyState;
  32     this.state.communityId = this.props.match.params.community_id ? Number(this.props.match.params.community_id) : undefined;
  33     this.subscription = WebSocketService.Instance.subject
  34     .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  35     .subscribe(
  36       (msg) => this.parseMessage(msg),
  37         (err) => console.error(err),
  38         () => console.log('complete')
  39     );
  40
  41     this.refetch();
  42   }
  43
  44   componentWillUnmount() {
  45     this.subscription.unsubscribe();
  46   }
  47
  48   componentDidMount() {
  49     document.title = `Modlog - ${WebSocketService.Instance.site.name}`;
  50   }
  51
  52   setCombined(res: GetModlogResponse) {
  53     let removed_posts = addTypeInfo(res.removed_posts, "removed_posts");
  54     let locked_posts = addTypeInfo(res.locked_posts, "locked_posts");
  55     let stickied_posts = addTypeInfo(res.stickied_posts, "stickied_posts");
  56     let removed_comments = addTypeInfo(res.removed_comments, "removed_comments");
  57     let removed_communities = addTypeInfo(res.removed_communities, "removed_communities");
  58     let banned_from_community = addTypeInfo(res.banned_from_community, "banned_from_community");
  59     let added_to_community = addTypeInfo(res.added_to_community, "added_to_community");
  60     let added = addTypeInfo(res.added, "added");
  61     let banned = addTypeInfo(res.banned, "banned");
  62     this.state.combined = [];
  63
  64     this.state.combined.push(...removed_posts);
  65     this.state.combined.push(...locked_posts);
  66     this.state.combined.push(...stickied_posts);
  67     this.state.combined.push(...removed_comments);
  68     this.state.combined.push(...removed_communities);
  69     this.state.combined.push(...banned_from_community);
  70     this.state.combined.push(...added_to_community);
  71     this.state.combined.push(...added);
  72     this.state.combined.push(...banned);
  73
  74     if (this.state.communityId && this.state.combined.length > 0) {
  75       this.state.communityName = (this.state.combined[0].data as ModRemovePost).community_name;
  76     }
  77
  78     // Sort them by time
  79     this.state.combined.sort((a, b) => b.data.when_.localeCompare(a.data.when_));
  80
  81     this.setState(this.state);
  82   }
  83
  84   combined() {
  85     return (
  86       <tbody>
  87         {this.state.combined.map(i =>
  88           <tr>
  89             <td><MomentTime data={i.data} /></td>
  90             <td><Link to={`/u/${i.data.mod_user_name}`}>{i.data.mod_user_name}</Link></td>
  91             <td>
  92               {i.type_ == 'removed_posts' &&
  93                 <>
  94                   {(i.data as ModRemovePost).removed? 'Removed' : 'Restored'}
  95                   <span> Post <Link to={`/post/${(i.data as ModRemovePost).post_id}`}>{(i.data as ModRemovePost).post_name}</Link></span>
  96                   <div>{(i.data as ModRemovePost).reason && ` reason: ${(i.data as ModRemovePost).reason}`}</div>
  97                 </>
  98               }
  99               {i.type_ == 'locked_posts' &&
 100                 <>
 101                   {(i.data as ModLockPost).locked? 'Locked' : 'Unlocked'}
 102                   <span> Post <Link to={`/post/${(i.data as ModLockPost).post_id}`}>{(i.data as ModLockPost).post_name}</Link></span>
 103                 </>
 104               }
 105               {i.type_ == 'stickied_posts' &&
 106                 <>
 107                   {(i.data as ModStickyPost).stickied? 'Stickied' : 'Unstickied'}
 108                   <span> Post <Link to={`/post/${(i.data as ModStickyPost).post_id}`}>{(i.data as ModStickyPost).post_name}</Link></span>
 109                 </>
 110               }
 111               {i.type_ == 'removed_comments' &&
 112                 <>
 113                   {(i.data as ModRemoveComment).removed? 'Removed' : 'Restored'}
 114                   <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>
 115                   <span> by <Link to={`/u/${(i.data as ModRemoveComment).comment_user_name}`}>{(i.data as ModRemoveComment).comment_user_name}</Link></span>
 116                   <div>{(i.data as ModRemoveComment).reason && ` reason: ${(i.data as ModRemoveComment).reason}`}</div>
 117                 </>
 118               }
 119               {i.type_ == 'removed_communities' &&
 120                 <>
 121                   {(i.data as ModRemoveCommunity).removed ? 'Removed' : 'Restored'}
 122                   <span> Community <Link to={`/c/${(i.data as ModRemoveCommunity).community_name}`}>{(i.data as ModRemoveCommunity).community_name}</Link></span>
 123                   <div>{(i.data as ModRemoveCommunity).reason && ` reason: ${(i.data as ModRemoveCommunity).reason}`}</div>
 124                   <div>{(i.data as ModRemoveCommunity).expires && ` expires: ${moment.utc((i.data as ModRemoveCommunity).expires).fromNow()}`}</div>
 125                 </>
 126               }
 127               {i.type_ == 'banned_from_community' &&
 128                 <>
 129                   <span>{(i.data as ModBanFromCommunity).banned ? 'Banned ' : 'Unbanned '} </span>
 130                   <span><Link to={`/u/${(i.data as ModBanFromCommunity).other_user_name}`}>{(i.data as ModBanFromCommunity).other_user_name}</Link></span>
 131                   <span> from the community </span>
 132                   <span><Link to={`/c/${(i.data as ModBanFromCommunity).community_name}`}>{(i.data as ModBanFromCommunity).community_name}</Link></span>
 133                   <div>{(i.data as ModBanFromCommunity).reason && ` reason: ${(i.data as ModBanFromCommunity).reason}`}</div>
 134                   <div>{(i.data as ModBanFromCommunity).expires && ` expires: ${moment.utc((i.data as ModBanFromCommunity).expires).fromNow()}`}</div>
 135                 </>
 136               }
 137               {i.type_ == 'added_to_community' &&
 138                 <>
 139                   <span>{(i.data as ModAddCommunity).removed ? 'Removed ' : 'Appointed '} </span>
 140                   <span><Link to={`/u/${(i.data as ModAddCommunity).other_user_name}`}>{(i.data as ModAddCommunity).other_user_name}</Link></span>
 141                   <span> as a mod to the community </span>
 142                   <span><Link to={`/c/${(i.data as ModAddCommunity).community_name}`}>{(i.data as ModAddCommunity).community_name}</Link></span>
 143                 </>
 144               }
 145               {i.type_ == 'banned' &&
 146                 <>
 147                   <span>{(i.data as ModBan).banned ? 'Banned ' : 'Unbanned '} </span>
 148                   <span><Link to={`/u/${(i.data as ModBan).other_user_name}`}>{(i.data as ModBan).other_user_name}</Link></span>
 149                   <div>{(i.data as ModBan).reason && ` reason: ${(i.data as ModBan).reason}`}</div>
 150                   <div>{(i.data as ModBan).expires && ` expires: ${moment.utc((i.data as ModBan).expires).fromNow()}`}</div>
 151                 </>
 152               }
 153               {i.type_ == 'added' &&
 154                 <>
 155                   <span>{(i.data as ModAdd).removed ? 'Removed ' : 'Appointed '} </span>
 156                   <span><Link to={`/u/${(i.data as ModAdd).other_user_name}`}>{(i.data as ModAdd).other_user_name}</Link></span>
 157                   <span> as an admin </span>
 158                 </>
 159               }
 160             </td>
 161           </tr>
 162                                 )
 163         }
 164
 165       </tbody>
 166     );
 167
 168   }
 169
 170   render() {
 171     return (
 172       <div class="container">
 173         {this.state.loading ?
 174         <h5 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> :
 175         <div>
 176           <h5>
 177             {this.state.communityName && <Link className="text-white" to={`/c/${this.state.communityName}`}>/c/{this.state.communityName} </Link>}
 178             <span>Modlog</span>
 179           </h5>
 180           <div class="table-responsive">
 181             <table id="modlog_table" class="table table-sm table-hover">
 182               <thead class="pointer">
 183                 <tr>
 184                   <th>Time</th>
 185                   <th>Mod</th>
 186                   <th>Action</th>
 187                 </tr>
 188               </thead>
 189               {this.combined()}
 190             </table>
 191             {this.paginator()}
 192           </div>
 193         </div>
 194         }
 195       </div>
 196     );
 197   }
 198
 199   paginator() {
 200     return (
 201       <div class="mt-2">
 202         {this.state.page > 1 &&
 203           <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}>Prev</button>
 204         }
 205         <button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}>Next</button>
 206       </div>
 207     );
 208   }
 209
 210   nextPage(i: Modlog) {
 211     i.state.page++;
 212     i.setState(i.state);
 213     i.refetch();
 214   }
 215
 216   prevPage(i: Modlog) {
 217     i.state.page--;
 218     i.setState(i.state);
 219     i.refetch();
 220   }
 221
 222   refetch(){
 223     let modlogForm: GetModlogForm = {
 224       community_id: this.state.communityId,
 225       page: this.state.page,
 226       limit: fetchLimit,
 227     };
 228     WebSocketService.Instance.getModlog(modlogForm);
 229   }
 230
 231   parseMessage(msg: any) {
 232     console.log(msg);
 233     let op: UserOperation = msgOp(msg);
 234     if (msg.error) {
 235       alert(i18n.t(msg.error));
 236       return;
 237     } else if (op == UserOperation.GetModlog) {
 238       let res: GetModlogResponse = msg;
 239       this.state.loading = false;
 240       window.scrollTo(0,0);
 241       this.setCombined(res);
 242     }
 243   }
 244 }