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