ui/src/components/sponsors.tsx

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