ui/src/components/instances.tsx

   1 import { Component } from 'inferno';
   2 import { Helmet } from 'inferno-helmet';
   3 import { Subscription } from 'rxjs';
   4 import { retryWhen, delay, take } from 'rxjs/operators';
   5 import {
   6   UserOperation,
   7   WebSocketJsonResponse,
   8   GetSiteResponse,
   9 } from 'lemmy-js-client';
  10 import { WebSocketService } from '../services';
  11 import { wsJsonToRes, toast } from '../utils';
  12 import { i18n } from '../i18next';
  13
  14 interface InstancesState {
  15   loading: boolean;
  16   siteRes: GetSiteResponse;
  17 }
  18
  19 export class Instances extends Component<any, InstancesState> {
  20   private subscription: Subscription;
  21   private emptyState: InstancesState = {
  22     loading: true,
  23     siteRes: undefined,
  24   };
  25
  26   constructor(props: any, context: any) {
  27     super(props, context);
  28     this.state = this.emptyState;
  29     this.subscription = 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     WebSocketService.Instance.getSite();
  38   }
  39
  40   componentWillUnmount() {
  41     this.subscription.unsubscribe();
  42   }
  43
  44   get documentTitle(): string {
  45     if (this.state.siteRes) {
  46       return `${i18n.t('instances')} - ${this.state.siteRes.site.name}`;
  47     } else {
  48       return 'Lemmy';
  49     }
  50   }
  51
  52   render() {
  53     return (
  54       <div class="container">
  55         <Helmet title={this.documentTitle} />
  56         {this.state.loading ? (
  57           <h5 class="">
  58             <svg class="icon icon-spinner spin">
  59               <use xlinkHref="#icon-spinner"></use>
  60             </svg>
  61           </h5>
  62         ) : (
  63           <div>
  64             <h5>{i18n.t('linked_instances')}</h5>
  65             {this.state.siteRes &&
  66             this.state.siteRes.federated_instances.length ? (
  67               <ul>
  68                 {this.state.siteRes.federated_instances.map(i => (
  69                   <li>
  70                     <a href={`https://${i}`} target="_blank" rel="noopener">
  71                       {i}
  72                     </a>
  73                   </li>
  74                 ))}
  75               </ul>
  76             ) : (
  77               <div>{i18n.t('none_found')}</div>
  78             )}
  79           </div>
  80         )}
  81       </div>
  82     );
  83   }
  84
  85   parseMessage(msg: WebSocketJsonResponse) {
  86     console.log(msg);
  87     let res = wsJsonToRes(msg);
  88     if (msg.error) {
  89       toast(i18n.t(msg.error), 'danger');
  90       return;
  91     } else if (res.op == UserOperation.GetSite) {
  92       let data = res.data as GetSiteResponse;
  93       this.state.siteRes = data;
  94       this.state.loading = false;
  95       this.setState(this.state);
  96     }
  97   }
  98 }