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