routes.api: fix get_captcha endpoint (#1135)

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

diff --git a/ui/src/components/footer.tsx b/ui/src/components/footer.tsx
index 237830dd9dd64af56b3469860d426f044f37deb8..62585ff30bb9b4e40693b4dc8c436035abfe6dfc 100644 (file)
--- a/ui/src/components/footer.tsx
+++ b/ui/src/components/footer.tsx
@@ -1,12 +1,41 @@
 import { Component } from 'inferno';
 import { Link } from 'inferno-router';
-import { repoUrl } from '../utils';
-import { version } from '../version';
-import { T } from 'inferno-i18next';
+import { i18n } from '../i18next';
+import { Subscription } from 'rxjs';
+import { retryWhen, delay, take } from 'rxjs/operators';
+import { WebSocketService } from '../services';
+import { repoUrl, wsJsonToRes } from '../utils';
+import {
+  UserOperation,
+  WebSocketJsonResponse,
+  GetSiteResponse,
+} from 'lemmy-js-client';
 
-export class Footer extends Component<any, any> {
+interface FooterState {
+  version: string;
+}
+
+export class Footer extends Component<any, FooterState> {
+  private wsSub: Subscription;
+  emptyState: FooterState = {
+    version: null,
+  };
   constructor(props: any, context: any) {
     super(props, context);
+
+    this.state = this.emptyState;
+
+    this.wsSub = WebSocketService.Instance.subject
+      .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
+      .subscribe(
+        msg => this.parseMessage(msg),
+        err => console.error(err),
+        () => console.log('complete')
+      );
+  }
+
+  componentWillUnmount() {
+    this.wsSub.unsubscribe();
   }
 
   render() {
@@ -15,26 +44,31 @@ export class Footer extends Component<any, any> {
         <div className="navbar-collapse">
           <ul class="navbar-nav ml-auto">
             <li class="nav-item">
-              <span class="navbar-text">{version}</span>
+              <span class="navbar-text">{this.state.version}</span>
             </li>
             <li class="nav-item">
               <Link class="nav-link" to="/modlog">
-                <T i18nKey="modlog">#</T>
+                {i18n.t('modlog')}
               </Link>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href={`${repoUrl}/blob/master/docs/api.md`}>
-                <T i18nKey="api">#</T>
+              <Link class="nav-link" to="/instances">
+                {i18n.t('instances')}
+              </Link>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href={'/docs/index.html'}>
+                {i18n.t('docs')}
               </a>
             </li>
             <li class="nav-item">
               <Link class="nav-link" to="/sponsors">
-                <T i18nKey="sponsors">#</T>
+                {i18n.t('donate')}
               </Link>
             </li>
             <li class="nav-item">
               <a class="nav-link" href={repoUrl}>
-                <T i18nKey="code">#</T>
+                {i18n.t('code')}
               </a>
             </li>
           </ul>
@@ -42,4 +76,12 @@ export class Footer extends Component<any, any> {
       </nav>
     );
   }
+  parseMessage(msg: WebSocketJsonResponse) {
+    let res = wsJsonToRes(msg);
+
+    if (res.op == UserOperation.GetSite) {
+      let data = res.data as GetSiteResponse;
+      this.setState({ version: data.version });
+    }
+  }
 }