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