From 536c3f491546b4546f43a46e7a1a699ca9ac2934 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Fri, 9 Aug 2019 17:14:43 -0700 Subject: Adding support for internationalization / i18n (#189) * Still not working * Starting to work on internationalization * Main done. * i18n translations first pass. * Localization testing mostly done. * Second front end pass. * Added a few more translations. * Adding back end translations. --- ui/src/components/comment-form.tsx | 10 ++- ui/src/components/comment-node.tsx | 51 +++++++------- ui/src/components/comment-nodes.tsx | 2 +- ui/src/components/communities.tsx | 36 +++++----- ui/src/components/community-form.tsx | 23 ++++--- ui/src/components/community.tsx | 25 +++---- ui/src/components/create-community.tsx | 6 +- ui/src/components/create-post.tsx | 6 +- ui/src/components/footer.tsx | 9 +-- ui/src/components/home.tsx | 0 ui/src/components/inbox.tsx | 36 +++++----- ui/src/components/login.tsx | 27 ++++---- ui/src/components/main.tsx | 120 ++++++++++++++++++++------------- ui/src/components/modlog.tsx | 2 +- ui/src/components/moment-time.tsx | 6 +- ui/src/components/navbar.tsx | 21 +++--- ui/src/components/post-form.tsx | 22 +++--- ui/src/components/post-listing.tsx | 36 +++++----- ui/src/components/post-listings.tsx | 7 +- ui/src/components/post.tsx | 12 ++-- ui/src/components/search.tsx | 42 ++++++------ ui/src/components/setup.tsx | 22 +++--- ui/src/components/sidebar.tsx | 38 ++++++----- ui/src/components/site-form.tsx | 13 ++-- ui/src/components/sponsors.tsx | 20 +++--- ui/src/components/user.tsx | 48 ++++++------- 26 files changed, 357 insertions(+), 283 deletions(-) delete mode 100644 ui/src/components/home.tsx (limited to 'ui/src/components') diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx index 5181e45e..ed62fcf5 100644 --- a/ui/src/components/comment-form.tsx +++ b/ui/src/components/comment-form.tsx @@ -1,7 +1,10 @@ import { Component, linkEvent } from 'inferno'; import { CommentNode as CommentNodeI, CommentForm as CommentFormI } from '../interfaces'; +import { capitalizeFirstLetter } from '../utils'; import { WebSocketService, UserService } from '../services'; import * as autosize from 'autosize'; +import { i18n } from '../i18next'; +import { T } from 'inferno-i18next'; interface CommentFormProps { postId?: number; @@ -25,12 +28,13 @@ export class CommentForm extends Component { post_id: this.props.node ? this.props.node.comment.post_id : this.props.postId, creator_id: UserService.Instance.user ? UserService.Instance.user.id : null, }, - buttonTitle: !this.props.node ? "Post" : this.props.edit ? "Edit" : "Reply", + buttonTitle: !this.props.node ? capitalizeFirstLetter(i18n.t('post')) : this.props.edit ? capitalizeFirstLetter(i18n.t('edit')) : capitalizeFirstLetter(i18n.t('reply')), } constructor(props: any, context: any) { super(props, context); + this.state = this.emptyState; if (this.props.node) { @@ -62,7 +66,7 @@ export class CommentForm extends Component {
- {this.props.node && } + {this.props.node && }
@@ -84,7 +88,7 @@ export class CommentForm extends Component { if (i.props.node) { i.props.onReplyCancel(); } - + autosize.update(document.querySelector('textarea')); } diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index a201ddd6..a1ac93b3 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -7,6 +7,8 @@ import * as moment from 'moment'; import { MomentTime } from './moment-time'; import { CommentForm } from './comment-form'; import { CommentNodes } from './comment-nodes'; +import { i18n } from '../i18next'; +import { T } from 'inferno-i18next'; enum BanType {Community, Site}; @@ -74,10 +76,10 @@ export class CommentNode extends Component { {node.comment.creator_name} {this.isMod && -
  • mod
    • +
  • #
    • } {this.isAdmin && -
  • admin
    • +
  • #
    • }
  • ( @@ -97,24 +99,24 @@ export class CommentNode extends Component { {this.state.showEdit && } {!this.state.showEdit && !this.state.collapsed &&
    -
    +
      {UserService.Instance.user && !this.props.viewOnly && <>
    • - reply + #
    • - {node.comment.saved ? 'unsave' : 'save'} + {node.comment.saved ? i18n.t('unsave') : i18n.t('save')}
      • {this.myComment && <>
    • - edit + #
    • - {!this.props.node.comment.deleted ? 'delete' : 'restore'} + {!this.props.node.comment.deleted ? i18n.t('delete') : i18n.t('restore')}
      • @@ -123,8 +125,8 @@ export class CommentNode extends Component { {this.canMod &&
    • {!this.props.node.comment.removed ? - remove : - restore + # : + # }
      • } @@ -134,14 +136,14 @@ export class CommentNode extends Component { {!this.isMod &&
    • {!this.props.node.comment.banned_from_community ? - ban : - unban + # : + # }
      • } {!this.props.node.comment.banned_from_community &&
    • - {`${this.isMod ? 'remove' : 'appoint'} as mod`} + {this.isMod ? i18n.t('remove_as_mod') : i18n.t('appoint_as_mod')}
      • } @@ -152,14 +154,14 @@ export class CommentNode extends Component { {!this.isAdmin &&
    • {!this.props.node.comment.banned ? - ban from site : - unban from site + # : + # }
      • } {!this.props.node.comment.banned &&
    • - {`${this.isAdmin ? 'remove' : 'appoint'} as admin`} + {this.isAdmin ? i18n.t('remove_as_admin') : i18n.t('appoint_as_admin')}
      • } @@ -167,11 +169,11 @@ export class CommentNode extends Component { }
    • - link + #
      • {this.props.markable &&
    • - {`mark as ${node.comment.read ? 'unread' : 'read'}`} + {node.comment.read ? i18n.t('mark_as_unread') : i18n.t('mark_as_read')}
      • }
    @@ -180,23 +182,23 @@ export class CommentNode extends Component {
    {this.state.showRemoveDialog &&
    - - + +
    } {this.state.showBanDialog &&
    - - + +
    {/* TODO hold off on expires until later */} {/*
    */} {/* */} - {/* */} + {/* */} {/*
    */}
    - +
    } @@ -387,9 +389,6 @@ export class CommentNode extends Component { 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, diff --git a/ui/src/components/comment-nodes.tsx b/ui/src/components/comment-nodes.tsx index da67bbc7..fca323e3 100644 --- a/ui/src/components/comment-nodes.tsx +++ b/ui/src/components/comment-nodes.tsx @@ -32,7 +32,7 @@ export class CommentNodes extends Component + /> )}
    ) diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx index c4efe1fb..49b982dc 100644 --- a/ui/src/components/communities.tsx +++ b/ui/src/components/communities.tsx @@ -5,6 +5,8 @@ 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; @@ -26,12 +28,12 @@ export class Communities extends Component { 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(); @@ -46,7 +48,7 @@ export class Communities extends Component { } componentDidMount() { - document.title = `Communities - ${WebSocketService.Instance.site.name}`; + document.title = `${i18n.t('communities')} - ${WebSocketService.Instance.site.name}`; } // Necessary for back button for some reason @@ -64,17 +66,17 @@ export class Communities extends Component { {this.state.loading ?
    :
    -
    List of communities
    +
    #
    - - - - - - + + + + + + @@ -89,8 +91,8 @@ export class Communities extends Component { @@ -109,9 +111,9 @@ export class Communities extends Component { return (
    {this.state.page > 1 && - + } - +
    ); } @@ -165,7 +167,7 @@ export class Communities extends Component { console.log(msg); let op: UserOperation = msgOp(msg); if (msg.error) { - alert(msg.error); + alert(i18n.t(msg.error)); return; } else if (op == UserOperation.ListCommunities) { let res: ListCommunitiesResponse = msg; diff --git a/ui/src/components/community-form.tsx b/ui/src/components/community-form.tsx index e295dcbe..b039fb4d 100644 --- a/ui/src/components/community-form.tsx +++ b/ui/src/components/community-form.tsx @@ -3,8 +3,10 @@ import { Subscription } from "rxjs"; import { retryWhen, delay, take } from 'rxjs/operators'; import { CommunityForm as CommunityFormI, UserOperation, Category, ListCategoriesResponse, CommunityResponse } from '../interfaces'; import { WebSocketService } from '../services'; -import { msgOp } from '../utils'; +import { msgOp, capitalizeFirstLetter } from '../utils'; import * as autosize from 'autosize'; +import { i18n } from '../i18next'; +import { T } from 'inferno-i18next'; import { Community } from '../interfaces'; @@ -74,25 +76,25 @@ export class CommunityForm extends Component
    - +
    - +
    - +
    - +
    NameTitleCategorySubscribersPostsComments######
    {community.number_of_comments} {community.subscribed ? - Unsubscribe : - Subscribe + # : + # }