routes.api: fix get_captcha endpoint (#1135)

[lemmy.git] / ui / src / components / modlog.tsx

diff --git a/ui/src/components/modlog.tsx b/ui/src/components/modlog.tsx
index 425710dd1726076f317c48bba97596c0d033792f..106015a4ab74550d01f5a4810916de2ca4373382 100644 (file)
--- a/ui/src/components/modlog.tsx
+++ b/ui/src/components/modlog.tsx
@@ -1,4 +1,5 @@
 import { Component, linkEvent } from 'inferno';
+import { Helmet } from 'inferno-helmet';
 import { Link } from 'inferno-router';
 import { Subscription } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
@@ -15,11 +16,14 @@ import {
   ModBan,
   ModAddCommunity,
   ModAdd,
-} from '../interfaces';
+  WebSocketJsonResponse,
+  GetSiteResponse,
+  Site,
+} from 'lemmy-js-client';
 import { WebSocketService } from '../services';
-import { msgOp, addTypeInfo, fetchLimit } from '../utils';
+import { wsJsonToRes, addTypeInfo, fetchLimit, toast } from '../utils';
 import { MomentTime } from './moment-time';
-import * as moment from 'moment';
+import moment from 'moment';
 import { i18n } from '../i18next';
 
 interface ModlogState {
@@ -36,6 +40,7 @@ interface ModlogState {
   communityId?: number;
   communityName?: string;
   page: number;
+  site: Site;
   loading: boolean;
 }
 
@@ -45,6 +50,7 @@ export class Modlog extends Component<any, ModlogState> {
     combined: [],
     page: 1,
     loading: true,
+    site: undefined,
   };
 
   constructor(props: any, context: any) {
@@ -55,14 +61,7 @@ export class Modlog extends Component<any, ModlogState> {
       ? Number(this.props.match.params.community_id)
       : undefined;
     this.subscription = WebSocketService.Instance.subject
-      .pipe(
-        retryWhen(errors =>
-          errors.pipe(
-            delay(3000),
-            take(10)
-          )
-        )
-      )
+      .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
       .subscribe(
         msg => this.parseMessage(msg),
         err => console.error(err),
@@ -70,16 +69,13 @@ export class Modlog extends Component<any, ModlogState> {
       );
 
     this.refetch();
+    WebSocketService.Instance.getSite();
   }
 
   componentWillUnmount() {
     this.subscription.unsubscribe();
   }
 
-  componentDidMount() {
-    document.title = `Modlog - ${WebSocketService.Instance.site.name}`;
-  }
-
   setCombined(res: GetModlogResponse) {
     let removed_posts = addTypeInfo(res.removed_posts, 'removed_posts');
     let locked_posts = addTypeInfo(res.locked_posts, 'locked_posts');
@@ -346,9 +342,18 @@ export class Modlog extends Component<any, ModlogState> {
     );
   }
 
+  get documentTitle(): string {
+    if (this.state.site) {
+      return `Modlog - ${this.state.site.name}`;
+    } else {
+      return 'Lemmy';
+    }
+  }
+
   render() {
     return (
       <div class="container">
+        <Helmet title={this.documentTitle} />
         {this.state.loading ? (
           <h5 class="">
             <svg class="icon icon-spinner spin">
@@ -360,21 +365,21 @@ export class Modlog extends Component<any, ModlogState> {
             <h5>
               {this.state.communityName && (
                 <Link
-                  className="text-white"
+                  className="text-body"
                   to={`/c/${this.state.communityName}`}
                 >
                   /c/{this.state.communityName}{' '}
                 </Link>
               )}
-              <span>Modlog</span>
+              <span>{i18n.t('modlog')}</span>
             </h5>
             <div class="table-responsive">
               <table id="modlog_table" class="table table-sm table-hover">
                 <thead class="pointer">
                   <tr>
-                    <th>Time</th>
-                    <th>Mod</th>
-                    <th>Action</th>
+                    <th> {i18n.t('time')}</th>
+                    <th>{i18n.t('mod')}</th>
+                    <th>{i18n.t('action')}</th>
                   </tr>
                 </thead>
                 {this.combined()}
@@ -392,17 +397,17 @@ export class Modlog extends Component<any, ModlogState> {
       <div class="mt-2">
         {this.state.page > 1 && (
           <button
-            class="btn btn-sm btn-secondary mr-1"
+            class="btn btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            Prev
+            {i18n.t('prev')}
           </button>
         )}
         <button
-          class="btn btn-sm btn-secondary"
+          class="btn btn-secondary"
           onClick={linkEvent(this, this.nextPage)}
         >
-          Next
+          {i18n.t('next')}
         </button>
       </div>
     );
@@ -429,17 +434,21 @@ export class Modlog extends Component<any, ModlogState> {
     WebSocketService.Instance.getModlog(modlogForm);
   }
 
-  parseMessage(msg: any) {
+  parseMessage(msg: WebSocketJsonResponse) {
     console.log(msg);
-    let op: UserOperation = msgOp(msg);
+    let res = wsJsonToRes(msg);
     if (msg.error) {
-      alert(i18n.t(msg.error));
+      toast(i18n.t(msg.error), 'danger');
       return;
-    } else if (op == UserOperation.GetModlog) {
-      let res: GetModlogResponse = msg;
+    } else if (res.op == UserOperation.GetModlog) {
+      let data = res.data as GetModlogResponse;
       this.state.loading = false;
       window.scrollTo(0, 0);
-      this.setCombined(res);
+      this.setCombined(data);
+    } else if (res.op == UserOperation.GetSite) {
+      let data = res.data as GetSiteResponse;
+      this.state.site = data.site;
+      this.setState(this.state);
     }
   }
 }