ui/src/components/sponsors.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 { WebSocketService } from '../services';
   6 import {
   7   GetSiteResponse,
   8   Site,
   9   WebSocketJsonResponse,
  10   UserOperation,
  11 } from '../interfaces';
  12 import { i18n } from '../i18next';
  13 import { T } from 'inferno-i18next';
  14 import { repoUrl, wsJsonToRes, toast } from '../utils';
  15
  16 interface SilverUser {
  17   name: string;
  18   link?: string;
  19 }
  20
  21 let general = [
  22   'mexicanhalloween',
  23   'William Moore',
  24   'Rachel Schmitz',
  25   'comradeda',
  26   'ybaumy',
  27   'dude in phx',
  28   'twilight loki',
  29   'Andrew Plaza',
  30   'Jonathan Cremin',
  31   'Arthur Nieuwland',
  32   'Ernest Wiśniewski',
  33   'HN',
  34   'Forrest Weghorst',
  35   'Andre Vallestero',
  36   'NotTooHighToHack',
  37 ];
  38 let highlighted = ['DQW', 'DiscountFuneral', 'Oskenso Kashi', 'Alex Benishek'];
  39 let silver: Array<SilverUser> = [
  40   {
  41     name: 'Redjoker',
  42     link: 'https://iww.org',
  43   },
  44 ];
  45 // let gold = [];
  46 // let latinum = [];
  47
  48 interface SponsorsState {
  49   site: Site;
  50 }
  51
  52 export class Sponsors extends Component<any, SponsorsState> {
  53   private subscription: Subscription;
  54   private emptyState: SponsorsState = {
  55     site: undefined,
  56   };
  57   constructor(props: any, context: any) {
  58     super(props, context);
  59     this.state = this.emptyState;
  60     this.subscription = WebSocketService.Instance.subject
  61       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  62       .subscribe(
  63         msg => this.parseMessage(msg),
  64         err => console.error(err),
  65         () => console.log('complete')
  66       );
  67
  68     WebSocketService.Instance.getSite();
  69   }
  70
  71   componentDidMount() {
  72     window.scrollTo(0, 0);
  73   }
  74
  75   componentWillUnmount() {
  76     this.subscription.unsubscribe();
  77   }
  78
  79   get documentTitle(): string {
  80     if (this.state.site) {
  81       return `${i18n.t('sponsors')} - ${this.state.site.name}`;
  82     } else {
  83       return 'Lemmy';
  84     }
  85   }
  86
  87   render() {
  88     return (
  89       <div class="container text-center">
  90         <Helmet title={this.documentTitle} />
  91         {this.topMessage()}
  92         <hr />
  93         {this.sponsors()}
  94         <hr />
  95         {this.bitcoin()}
  96       </div>
  97     );
  98   }
  99
 100   topMessage() {
 101     return (
 102       <div>
 103         <h5>{i18n.t('donate_to_lemmy')}</h5>
 104         <p>
 105           <T i18nKey="sponsor_message">
 106             #<a href={repoUrl}>#</a>
 107           </T>
 108         </p>
 109         <a class="btn btn-secondary" href="https://liberapay.com/Lemmy/">
 110           {i18n.t('support_on_liberapay')}
 111         </a>
 112         <a
 113           class="btn btn-secondary ml-2"
 114           href="https://www.patreon.com/dessalines"
 115         >
 116           {i18n.t('support_on_patreon')}
 117         </a>
 118         <a
 119           class="btn btn-secondary ml-2"
 120           href="https://opencollective.com/lemmy"
 121         >
 122           {i18n.t('support_on_open_collective')}
 123         </a>
 124       </div>
 125     );
 126   }
 127   sponsors() {
 128     return (
 129       <div class="container">
 130         <h5>{i18n.t('sponsors')}</h5>
 131         <p>{i18n.t('silver_sponsors')}</p>
 132         <div class="row justify-content-md-center card-columns">
 133           {silver.map(s => (
 134             <div class="card col-12 col-md-2">
 135               <div>
 136                 {s.link ? (
 137                   <a href={s.link} target="_blank" rel="noopener">
 138                     💎 {s.name}
 139                   </a>
 140                 ) : (
 141                   <div>💎 {s.name}</div>
 142                 )}
 143               </div>
 144             </div>
 145           ))}
 146         </div>
 147         <p>{i18n.t('general_sponsors')}</p>
 148         <div class="row justify-content-md-center card-columns">
 149           {highlighted.map(s => (
 150             <div class="card bg-primary col-12 col-md-2 font-weight-bold">
 151               <div>{s}</div>
 152             </div>
 153           ))}
 154           {general.map(s => (
 155             <div class="card col-12 col-md-2">
 156               <div>{s}</div>
 157             </div>
 158           ))}
 159         </div>
 160       </div>
 161     );
 162   }
 163
 164   bitcoin() {
 165     return (
 166       <div>
 167         <h5>{i18n.t('crypto')}</h5>
 168         <div class="table-responsive">
 169           <table class="table table-hover text-center">
 170             <tbody>
 171               <tr>
 172                 <td>{i18n.t('bitcoin')}</td>
 173                 <td>
 174                   <code>1Hefs7miXS5ff5Ck5xvmjKjXf5242KzRtK</code>
 175                 </td>
 176               </tr>
 177               <tr>
 178                 <td>{i18n.t('ethereum')}</td>
 179                 <td>
 180                   <code>0x400c96c96acbC6E7B3B43B1dc1BB446540a88A01</code>
 181                 </td>
 182               </tr>
 183               <tr>
 184                 <td>{i18n.t('monero')}</td>
 185                 <td>
 186                   <code>
 187                     41taVyY6e1xApqKyMVDRVxJ76sPkfZhALLTjRvVKpaAh2pBd4wv9RgYj1tSPrx8wc6iE1uWUfjtQdTmTy2FGMeChGVKPQuV
 188                   </code>
 189                 </td>
 190               </tr>
 191             </tbody>
 192           </table>
 193         </div>
 194       </div>
 195     );
 196   }
 197
 198   parseMessage(msg: WebSocketJsonResponse) {
 199     console.log(msg);
 200     let res = wsJsonToRes(msg);
 201     if (msg.error) {
 202       toast(i18n.t(msg.error), 'danger');
 203       return;
 204     } else if (res.op == UserOperation.GetSite) {
 205       let data = res.data as GetSiteResponse;
 206       this.state.site = data.site;
 207       this.setState(this.state);
 208     }
 209   }
 210 }