Second front end pass.

ui/src/components/comment-form.tsx

@@ -88,7 +88,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
     if (i.props.node) {
       i.props.onReplyCancel();
     }
-    
+
     autosize.update(document.querySelector('textarea'));
   }
 

ui/src/components/comment-node.tsx

@@ -195,10 +195,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             {/* TODO hold off on expires until later */}
             {/* <div class="form-group row"> */}
             {/*   <label class="col-form-label">Expires</label> */}
-            {/*   <input type="date" class="form-control mr-2" placeholder="Expires" value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
+            {/*   <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
             {/* </div> */}
             <div class="form-group row">
-              <button type="submit" class="btn btn-secondary">Ban {this.props.node.comment.creator_name}</button>
+              <button type="submit" class="btn btn-secondary">{i18n.t('ban')} {this.props.node.comment.creator_name}</button>
             </div>
           </form>
         }
@@ -389,9 +389,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   handleModBanBothSubmit(i: CommentNode) {
     event.preventDefault();
 
-    console.log(BanType[i.state.banType]);
-    console.log(i.props.node.comment.banned);
-
     if (i.state.banType == BanType.Community) {
       let form: BanFromCommunityForm = {
         user_id: i.props.node.comment.creator_id,

ui/src/components/comment-nodes.tsx

@@ -32,7 +32,7 @@ export class CommentNodes extends Component<CommentNodesProps, CommentNodesState
             moderators={this.props.moderators}
             admins={this.props.admins}
             markable={this.props.markable}
-            />
+          />
         )}
       </div>
     )

ui/src/components/communities.tsx

@@ -5,6 +5,7 @@ import { retryWhen, delay, take } from 'rxjs/operators';
 import { UserOperation, Community, ListCommunitiesResponse, CommunityResponse, FollowCommunityForm, ListCommunitiesForm, SortType } from '../interfaces';
 import { WebSocketService } from '../services';
 import { msgOp } from '../utils';
+import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
 
 declare const Sortable: any;
@@ -27,12 +28,12 @@ export class Communities extends Component<any, CommunitiesState> {
     super(props, context);
     this.state = this.emptyState;
     this.subscription = WebSocketService.Instance.subject
-    .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
-    .subscribe(
-      (msg) => this.parseMessage(msg),
+      .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
+      .subscribe(
+        (msg) => this.parseMessage(msg),
         (err) => console.error(err),
         () => console.log('complete')
-    );
+      );
 
     this.refetch();
 
@@ -47,7 +48,7 @@ export class Communities extends Component<any, CommunitiesState> {
   }
 
   componentDidMount() {
-    document.title = `Communities - ${WebSocketService.Instance.site.name}`;
+    document.title = `${i18n.t('communities')} - ${WebSocketService.Instance.site.name}`;
   }
 
   // Necessary for back button for some reason

ui/src/components/community-form.tsx

@@ -171,8 +171,7 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
       this.state.loading = false;
       this.props.onCreate(res.community);
     } 
-
-    // TODO is this necessary?
+    // TODO is ths necessary
     else if (op == UserOperation.EditCommunity) {
       let res: CommunityResponse = msg;
       this.state.loading = false;

ui/src/components/inbox.tsx

@@ -90,7 +90,7 @@ export class Inbox extends Component<any, InboxState> {
         <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="custom-select custom-select-sm w-auto ml-2">
           <option disabled><T i18nKey="sort_type">#</T></option>
           <option value={SortType.New}><T i18nKey="new">#</T></option>
-          <option value={SortType.TopDay}><T i18nKey="top_day">top_day</T></option>
+          <option value={SortType.TopDay}><T i18nKey="top_day">#</T></option>
           <option value={SortType.TopWeek}><T i18nKey="week">#</T></option>
           <option value={SortType.TopMonth}><T i18nKey="month">#</T></option>
           <option value={SortType.TopYear}><T i18nKey="year">#</T></option>

ui/src/components/login.tsx

@@ -52,7 +52,7 @@ export class Login extends Component<any, State> {
   }
 
   componentDidMount() {
-    document.title = `Login - ${WebSocketService.Instance.site.name}`;
+    document.title = `${i18n.t('login')} - ${WebSocketService.Instance.site.name}`;
   }
 
   render() {

ui/src/components/main.tsx

@@ -7,6 +7,7 @@ import { WebSocketService, UserService } from '../services';
 import { PostListings } from './post-listings';
 import { SiteForm } from './site-form';
 import { msgOp, repoUrl, mdToHtml, fetchLimit, routeSortTypeToEnum, routeListingTypeToEnum } from '../utils';
+import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
 
 interface MainState {
@@ -286,7 +287,7 @@ export class Main extends Component<any, MainState> {
               onChange={linkEvent(this, this.handleTypeChange)}
               disabled={UserService.Instance.user == undefined}
             />
-            Subscribed
+            {i18n.t('subscribed')}
           </label>
           <label className={`pointer btn btn-sm btn-secondary ${this.state.type_ == ListingType.All && 'active'}`}>
             <input type="radio" 
@@ -294,19 +295,19 @@ export class Main extends Component<any, MainState> {
               checked={this.state.type_ == ListingType.All}
               onChange={linkEvent(this, this.handleTypeChange)}
             /> 
-            All
+            {i18n.t('all')}
           </label>
         </div>
         <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="ml-2 custom-select custom-select-sm w-auto">
-          <option disabled>Sort Type</option>
-          <option value={SortType.Hot}>Hot</option>
-          <option value={SortType.New}>New</option>
+          <option disabled><T i18nKey="sort_type">#</T></option>
+          <option value={SortType.Hot}><T i18nKey="hot">#</T></option>
+          <option value={SortType.New}><T i18nKey="new">#</T></option>
           <option disabled>──────────</option>
-          <option value={SortType.TopDay}>Top Day</option>
-          <option value={SortType.TopWeek}>Week</option>
-          <option value={SortType.TopMonth}>Month</option>
-          <option value={SortType.TopYear}>Year</option>
-          <option value={SortType.TopAll}>All</option>
+          <option value={SortType.TopDay}><T i18nKey="top_day">#</T></option>
+          <option value={SortType.TopWeek}><T i18nKey="week">#</T></option>
+          <option value={SortType.TopMonth}><T i18nKey="month">#</T></option>
+          <option value={SortType.TopYear}><T i18nKey="year">#</T></option>
+          <option value={SortType.TopAll}><T i18nKey="all">#</T></option>
         </select>
       </div>
     )
@@ -316,9 +317,9 @@ export class Main extends Component<any, MainState> {
     return (
       <div class="mt-2">
         {this.state.page > 1 && 
-          <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}>Prev</button>
+          <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}><T i18nKey="prev">#</T></button>
         }
-        <button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}>Next</button>
+        <button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}><T i18nKey="next">#</T></button>
       </div>
     );
   }

ui/src/components/moment-time.tsx

@@ -1,6 +1,6 @@
 import { Component } from 'inferno';
 import * as moment from 'moment';
-import 'moment/locale/de.js';
+// import 'moment/locale/de.js';
 import { getLanguage } from '../utils';
 import { i18n } from '../i18next';
 
@@ -16,7 +16,6 @@ export class MomentTime extends Component<MomentTimeProps, any> {
 
   constructor(props: any, context: any) {
     super(props, context);
-    // console.log(moment.locales());
     moment.locale(getLanguage());
   }
 

ui/src/components/navbar.tsx

@@ -155,6 +155,7 @@ export class Navbar extends Component<any, NavbarState> {
   parseMessage(msg: any) {
     let op: UserOperation = msgOp(msg);
     if (msg.error) {
+      // TODO
       if (msg.error == "Not logged in.") {
         UserService.Instance.logout();
         location.reload();

ui/src/components/post-listing.tsx

@@ -76,7 +76,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             <h5 className="mb-0 d-inline">
               {post.url ? 
               <a className="text-white" href={post.url} target="_blank" title={post.url}>{post.name}</a> : 
-              <Link className="text-white" to={`/post/${post.id}`} title="Comments">{post.name}</Link>
+              <Link className="text-white" to={`/post/${post.id}`} title={i18n.t('comments')}>{post.name}</Link>
               }
             </h5>
             {post.url && 
@@ -176,7 +176,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           }
           {this.state.showRemoveDialog && 
             <form class="form-inline" onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
-              <input type="text" class="form-control mr-2" placeholder="Reason" value={this.state.removeReason} onInput={linkEvent(this, this.handleModRemoveReasonChange)} />
+              <input type="text" class="form-control mr-2" placeholder={i18n.t('reason')} value={this.state.removeReason} onInput={linkEvent(this, this.handleModRemoveReasonChange)} />
               <button type="submit" class="btn btn-secondary"><T i18nKey="remove_post">#</T></button>
             </form>
           }

ui/src/components/search.tsx

@@ -54,7 +54,7 @@ export class Search extends Component<any, SearchState> {
   }
 
   componentDidMount() {
-    document.title = `Search - ${WebSocketService.Instance.site.name}`;
+    document.title = `${i18n.t('search')} - ${WebSocketService.Instance.site.name}`;
   }
 
   render() {
@@ -62,7 +62,7 @@ export class Search extends Component<any, SearchState> {
       <div class="container">
         <div class="row">
           <div class="col-12">
-            <h5>Search</h5>
+            <h5><T i18nKey="search">#</T></h5>
             {this.selects()}
             {this.searchForm()}
             {this.state.type_ == SearchType.Both &&
@@ -85,7 +85,7 @@ export class Search extends Component<any, SearchState> {
   searchForm() {
     return (
       <form class="form-inline" onSubmit={linkEvent(this, this.handleSearchSubmit)}>
-        <input type="text" class="form-control mr-2" value={this.state.q} placeholder="Search..." onInput={linkEvent(this, this.handleQChange)} required minLength={3} />
+        <input type="text" class="form-control mr-2" value={this.state.q} placeholder={`${i18n.t('search')}...`} onInput={linkEvent(this, this.handleQChange)} required minLength={3} />
         <button type="submit" class="btn btn-secondary mr-2">
           {this.state.loading ?
           <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> :

ui/src/components/sidebar.tsx

@@ -97,7 +97,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           {/* TODO hold off on expires for now */}
           {/* <div class="form-group row"> */}
           {/*   <label class="col-form-label">Expires</label> */}
-          {/*   <input type="date" class="form-control mr-2" placeholder="Expires" value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
+          {/*   <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
           {/* </div> */}
           <div class="form-group row">
             <button type="submit" class="btn btn-secondary"><T i18nKey="remove_community">#</T></button>

ui/src/components/sponsors.tsx

@@ -65,7 +65,7 @@ export class Sponsors extends Component<any, any> {
   bitcoin() {
     return (
       <div>
-      <h5>Crypto</h5>
+        <h5><T i18nKey="crypto">#</T></h5>
       <div class="table-responsive">
         <table class="table table-hover text-center">
           <tbody>

ui/src/components/user.tsx

@@ -219,7 +219,7 @@ export class User extends Component<any, UserState> {
     return (
       <div>
         <h5>{user.name}</h5>
-        <div>Joined <MomentTime data={user} /></div>
+        <div>{i18n.t('joined')}<MomentTime data={user} /></div>
         <table class="table table-bordered table-sm mt-2">
           <tr>
             <td><T i18nKey="number_of_points" interpolation={{count: user.post_score}}>#</T></td>