src/shared/components/footer.tsx

   1 import { Component } from 'inferno';
   2 import { Link } from 'inferno-router';
   3 import { i18n } from '../i18next';
   4 import { Subscription } from 'rxjs';
   5 import { retryWhen, delay, take } from 'rxjs/operators';
   6 import { WebSocketService } from '../services';
   7 import { repoUrl, wsJsonToRes, isBrowser } from '../utils';
   8 import {
   9   UserOperation,
  10   WebSocketJsonResponse,
  11   GetSiteResponse,
  12 } from 'lemmy-js-client';
  13
  14 interface FooterState {
  15   version: string;
  16 }
  17
  18 export class Footer extends Component<any, FooterState> {
  19   private wsSub: Subscription;
  20   emptyState: FooterState = {
  21     version: null,
  22   };
  23   constructor(props: any, context: any) {
  24     super(props, context);
  25
  26     this.state = this.emptyState;
  27
  28     if (isBrowser()) {
  29       this.wsSub = WebSocketService.Instance.subject
  30         .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  31         .subscribe(
  32           msg => this.parseMessage(msg),
  33           err => console.error(err),
  34           () => console.log('complete')
  35         );
  36     }
  37   }
  38
  39   componentWillUnmount() {
  40     this.wsSub.unsubscribe();
  41   }
  42
  43   render() {
  44     return (
  45       <nav class="container navbar navbar-expand-md navbar-light navbar-bg p-0 px-3 mt-2">
  46         <div className="navbar-collapse">
  47           <ul class="navbar-nav ml-auto">
  48             <li class="nav-item">
  49               <span class="navbar-text">{this.state.version}</span>
  50             </li>
  51             <li class="nav-item">
  52               <Link class="nav-link" to="/modlog">
  53                 {i18n.t('modlog')}
  54               </Link>
  55             </li>
  56             <li class="nav-item">
  57               <Link class="nav-link" to="/instances">
  58                 {i18n.t('instances')}
  59               </Link>
  60             </li>
  61             <li class="nav-item">
  62               <a class="nav-link" href={'/docs/index.html'}>
  63                 {i18n.t('docs')}
  64               </a>
  65             </li>
  66             <li class="nav-item">
  67               <Link class="nav-link" to="/sponsors">
  68                 {i18n.t('donate')}
  69               </Link>
  70             </li>
  71             <li class="nav-item">
  72               <a class="nav-link" href={repoUrl}>
  73                 {i18n.t('code')}
  74               </a>
  75             </li>
  76           </ul>
  77         </div>
  78       </nav>
  79     );
  80   }
  81   parseMessage(msg: WebSocketJsonResponse) {
  82     let res = wsJsonToRes(msg);
  83
  84     if (res.op == UserOperation.GetSite) {
  85       let data = res.data as GetSiteResponse;
  86       this.setState({ version: data.version });
  87     }
  88   }
  89 }