ui/src/components/modlog.tsx

   1 import { Component } 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, ModRemoveComment, ModRemoveCommunity, ModBanFromCommunity, ModBan, ModAddCommunity, ModAdd } from '../interfaces';
   6 import { WebSocketService } from '../services';
   7 import { msgOp, addTypeInfo } from '../utils';
   8 import { MomentTime } from './moment-time';
   9 import * as moment from 'moment';
  10
  11 interface ModlogState {
  12   removed_posts: Array<ModRemovePost>,
  13   locked_posts: Array<ModLockPost>,
  14   removed_comments: Array<ModRemoveComment>,
  15   removed_communities: Array<ModRemoveCommunity>,
  16   banned_from_community: Array<ModBanFromCommunity>,
  17   banned: Array<ModBan>,
  18   added_to_community: Array<ModAddCommunity>,
  19   added: Array<ModAdd>,
  20   loading: boolean;
  21 }
  22
  23 export class Modlog extends Component<any, ModlogState> {
  24   private subscription: Subscription;
  25   private emptyState: ModlogState = {
  26     removed_posts: [],
  27     locked_posts: [],
  28     removed_comments: [],
  29     removed_communities: [],
  30     banned_from_community: [],
  31     banned: [],
  32     added_to_community: [],
  33     added: [],
  34     loading: true
  35   }
  36
  37   constructor(props: any, context: any) {
  38     super(props, context);
  39     this.state = this.emptyState;
  40     this.subscription = WebSocketService.Instance.subject
  41     .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  42     .subscribe(
  43       (msg) => this.parseMessage(msg),
  44         (err) => console.error(err),
  45         () => console.log('complete')
  46     );
  47
  48     let modlogForm: GetModlogForm = {
  49
  50     };
  51     WebSocketService.Instance.getModlog(modlogForm);
  52   }
  53
  54   componentWillUnmount() {
  55     this.subscription.unsubscribe();
  56   }
  57
  58   combined() {
  59     let combined: Array<{type_: string, data: ModRemovePost | ModLockPost | ModRemoveCommunity}> = [];
  60     let removed_posts = addTypeInfo(this.state.removed_posts, "removed_posts");
  61     let locked_posts = addTypeInfo(this.state.locked_posts, "locked_posts");
  62     let removed_comments = addTypeInfo(this.state.removed_comments, "removed_comments");
  63     let removed_communities = addTypeInfo(this.state.removed_communities, "removed_communities");
  64     let banned_from_community = addTypeInfo(this.state.banned_from_community, "banned_from_community");
  65     let added_to_community = addTypeInfo(this.state.added_to_community, "added_to_community");
  66
  67     combined.push(...removed_posts);
  68     combined.push(...locked_posts);
  69     combined.push(...removed_comments);
  70     combined.push(...removed_communities);
  71     combined.push(...banned_from_community);
  72     combined.push(...added_to_community);
  73
  74     // Sort them by time
  75     combined.sort((a, b) => b.data.when_.localeCompare(a.data.when_));
  76
  77     console.log(combined);
  78
  79     return (
  80       <tbody>
  81         {combined.map(i =>
  82           <tr>
  83             <td><MomentTime data={i.data} /></td>
  84             <td><Link to={`/user/${i.data.mod_user_id}`}>{i.data.mod_user_name}</Link></td>
  85             <td>
  86               {i.type_ == 'removed_posts' &&
  87                 <>
  88                   {(i.data as ModRemovePost).removed? 'Removed' : 'Restored'}
  89                   <span> Post <Link to={`/post/${(i.data as ModRemovePost).post_id}`}>{(i.data as ModRemovePost).post_name}</Link></span>
  90                   <div>{(i.data as ModRemovePost).reason && ` reason: ${(i.data as ModRemovePost).reason}`}</div>
  91                 </>
  92               }
  93               {i.type_ == 'locked_posts' &&
  94                 <>
  95                   {(i.data as ModLockPost).locked? 'Locked' : 'Unlocked'}
  96                   <span> Post <Link to={`/post/${(i.data as ModLockPost).post_id}`}>{(i.data as ModLockPost).post_name}</Link></span>
  97                 </>
  98               }
  99               {i.type_ == 'removed_comments' &&
 100                 <>
 101                   {(i.data as ModRemoveComment).removed? 'Removed' : 'Restored'}
 102                   <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>
 103                   <div>{(i.data as ModRemoveComment).reason && ` reason: ${(i.data as ModRemoveComment).reason}`}</div>
 104                 </>
 105               }
 106               {i.type_ == 'removed_communities' &&
 107                 <>
 108                   {(i.data as ModRemoveCommunity).removed ? 'Removed' : 'Restored'}
 109                   <span> Community <Link to={`/community/${i.data.community_id}`}>{i.data.community_name}</Link></span>
 110                   <div>{(i.data as ModRemoveCommunity).reason && ` reason: ${(i.data as ModRemoveCommunity).reason}`}</div>
 111                   <div>{(i.data as ModRemoveCommunity).expires && ` expires: ${moment.utc((i.data as ModRemoveCommunity).expires).fromNow()}`}</div>
 112                 </>
 113               }
 114               {i.type_ == 'banned_from_community' &&
 115                 <>
 116                   <span>{(i.data as ModBanFromCommunity).banned ? 'Banned ' : 'Unbanned '} </span>
 117                   <span><Link to={`/user/${(i.data as ModBanFromCommunity).other_user_id}`}>{(i.data as ModBanFromCommunity).other_user_name}</Link></span>
 118                   <div>{(i.data as ModBanFromCommunity).reason && ` reason: ${(i.data as ModBanFromCommunity).reason}`}</div>
 119                   <div>{(i.data as ModBanFromCommunity).expires && ` expires: ${moment.utc((i.data as ModBanFromCommunity).expires).fromNow()}`}</div>
 120                 </>
 121               }
 122               {i.type_ == 'added_to_community' &&
 123                 <>
 124                   <span>{(i.data as ModAddCommunity).removed ? 'Removed ' : 'Appointed '} </span>
 125                   <span><Link to={`/user/${(i.data as ModAddCommunity).other_user_id}`}>{(i.data as ModAddCommunity).other_user_name}</Link></span>
 126                   <span> as a mod to the community </span>
 127                   <span><Link to={`/community/${i.data.community_id}`}>{i.data.community_name}</Link></span>
 128                 </>
 129               }
 130             </td>
 131           </tr>
 132                      )
 133         }
 134
 135       </tbody>
 136     );
 137
 138   }
 139
 140   render() {
 141     return (
 142       <div class="container">
 143         {this.state.loading ?
 144         <h4 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> :
 145         <div>
 146           <h4>Modlog</h4>
 147           <div class="table-responsive">
 148             <table id="modlog_table" class="table table-sm table-hover">
 149               <thead class="pointer">
 150                 <tr>
 151                   <th>Time</th>
 152                   <th>Mod</th>
 153                   <th>Action</th>
 154                 </tr>
 155               </thead>
 156               {this.combined()}
 157             </table>
 158           </div>
 159         </div>
 160         }
 161       </div>
 162     );
 163   }
 164
 165   parseMessage(msg: any) {
 166     console.log(msg);
 167     let op: UserOperation = msgOp(msg);
 168     if (msg.error) {
 169       alert(msg.error);
 170       return;
 171     } else if (op == UserOperation.GetModlog) {
 172       let res: GetModlogResponse = msg;
 173       this.state.loading = false;
 174       this.state.removed_posts = res.removed_posts;
 175       this.state.locked_posts = res.locked_posts;
 176       this.state.removed_comments = res.removed_comments;
 177       this.state.removed_communities = res.removed_communities;
 178       this.state.banned_from_community = res.banned_from_community;
 179       this.state.added_to_community = res.added_to_community;
 180
 181       this.setState(this.state);
 182     }
 183   }
 184 }