src/shared/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, isBrowser } 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
  30     if (isBrowser()) {
  31       this.subscription = WebSocketService.Instance.subject
  32         .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  33         .subscribe(
  34           msg => this.parseMessage(msg),
  35           err => console.error(err),
  36           () => console.log('complete')
  37         );
  38
  39       WebSocketService.Instance.getSite();
  40     }
  41   }
  42
  43   componentWillUnmount() {
  44     this.subscription.unsubscribe();
  45   }
  46
  47   get documentTitle(): string {
  48     if (this.state.siteRes) {
  49       return `${i18n.t('instances')} - ${this.state.siteRes.site.name}`;
  50     } else {
  51       return 'Lemmy';
  52     }
  53   }
  54
  55   render() {
  56     return (
  57       <div class="container">
  58         <Helmet title={this.documentTitle} />
  59         {this.state.loading ? (
  60           <h5 class="">
  61             <svg class="icon icon-spinner spin">
  62               <use xlinkHref="#icon-spinner"></use>
  63             </svg>
  64           </h5>
  65         ) : (
  66           <div>
  67             <h5>{i18n.t('linked_instances')}</h5>
  68             {this.state.siteRes &&
  69             this.state.siteRes.federated_instances.length ? (
  70               <ul>
  71                 {this.state.siteRes.federated_instances.map(i => (
  72                   <li>
  73                     <a href={`https://${i}`} target="_blank" rel="noopener">
  74                       {i}
  75                     </a>
  76                   </li>
  77                 ))}
  78               </ul>
  79             ) : (
  80               <div>{i18n.t('none_found')}</div>
  81             )}
  82           </div>
  83         )}
  84       </div>
  85     );
  86   }
  87
  88   parseMessage(msg: WebSocketJsonResponse) {
  89     console.log(msg);
  90     let res = wsJsonToRes(msg);
  91     if (msg.error) {
  92       toast(i18n.t(msg.error), 'danger');
  93       return;
  94     } else if (res.op == UserOperation.GetSite) {
  95       let data = res.data as GetSiteResponse;
  96       this.state.siteRes = data;
  97       this.state.loading = false;
  98       this.setState(this.state);
  99     }
 100   }
 101 }