translation interpolation for site-form and sort-select

ui/src/components/password_change.tsx

@@ -65,7 +65,7 @@ export class PasswordChange extends Component<any, State> {
         <div class="row">
           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
             <h5>
-              <T i18nKey="password_change">#</T>
+              { i18n.t('password_change') }
             </h5>
             {this.passwordChangeForm()}
           </div>

ui/src/components/site-form.tsx

@@ -54,12 +54,13 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             : capitalizeFirstLetter(i18n.t('name'))
         } ${i18n.t('your_site')}`}</h5>
         <div class="form-group row">
-          <label class="col-12 col-form-label">
-            <T i18nKey="name">#</T>
+          <label class="col-12 col-form-label" for="create-site-name">
+            { i18n.t('name') }
           </label>
           <div class="col-12">
             <input
               type="text"
+              id="create-site-name"
               class="form-control"
               value={this.state.siteForm.name}
               onInput={linkEvent(this, this.handleSiteNameChange)}
@@ -70,12 +71,13 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-12 col-form-label">
-            <T i18nKey="sidebar">#</T>
+          <label class="col-12 col-form-label" for="create-site-sidebar">
+            { i18n.t('sidebar') }
           </label>
           <div class="col-12">
             <textarea
               value={this.state.siteForm.description}
+              id="create-site-sidebar"
               onInput={linkEvent(this, this.handleSiteDescriptionChange)}
               class="form-control"
               rows={3}
@@ -88,12 +90,13 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             <div class="form-check">
               <input
                 class="form-check-input"
+                id="create-site-downvotes"
                 type="checkbox"
                 checked={this.state.siteForm.enable_downvotes}
                 onChange={linkEvent(this, this.handleSiteEnableDownvotesChange)}
               />
-              <label class="form-check-label">
-                <T i18nKey="enable_downvotes">#</T>
+              <label class="form-check-label" for="create-site-downvotes">
+                { i18n.t('enable_downvotes') }
               </label>
             </div>
           </div>
@@ -103,12 +106,13 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             <div class="form-check">
               <input
                 class="form-check-input"
+                id="create-site-enable-nsfw"
                 type="checkbox"
                 checked={this.state.siteForm.enable_nsfw}
                 onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
               />
-              <label class="form-check-label">
-                <T i18nKey="enable_nsfw">#</T>
+              <label class="form-check-label" for="create-site-enable-nsfw">
+                { i18n.t('enable_nsfw') }
               </label>
             </div>
           </div>
@@ -118,6 +122,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             <div class="form-check">
               <input
                 class="form-check-input"
+                id="create-site-open-registration"
                 type="checkbox"
                 checked={this.state.siteForm.open_registration}
                 onChange={linkEvent(
@@ -125,8 +130,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                   this.handleSiteOpenRegistrationChange
                 )}
               />
-              <label class="form-check-label">
-                <T i18nKey="open_registration">#</T>
+              <label class="form-check-label" for="create-site-open-registration">
+                { i18n.t('open_registration') }
               </label>
             </div>
           </div>
@@ -150,7 +155,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                 class="btn btn-secondary"
                 onClick={linkEvent(this, this.handleCancel)}
               >
-                <T i18nKey="cancel">#</T>
+                { i18n.t('cancel') }
               </button>
             )}
           </div>

ui/src/components/sort-select.tsx

@@ -1,6 +1,6 @@
 import { Component, linkEvent } from 'inferno';
 import { SortType } from '../interfaces';
-
+import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
 
 interface SortSelectProps {
@@ -31,31 +31,31 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
         class="custom-select custom-select-sm w-auto"
       >
         <option disabled>
-          <T i18nKey="sort_type">#</T>
+          { i18n.t('sort_type') }
         </option>
         {!this.props.hideHot && (
           <option value={SortType.Hot}>
-            <T i18nKey="hot">#</T>
+            { i18n.t('hot') }
           </option>
         )}
         <option value={SortType.New}>
-          <T i18nKey="new">#</T>
+          { i18n.t('new') }
         </option>
         <option disabled>─────</option>
         <option value={SortType.TopDay}>
-          <T i18nKey="top_day">#</T>
+          { i18n.t('top_day') }
         </option>
         <option value={SortType.TopWeek}>
-          <T i18nKey="week">#</T>
+          { i18n.t('week') }
         </option>
         <option value={SortType.TopMonth}>
-          <T i18nKey="month">#</T>
+          { i18n.t('month') }
         </option>
         <option value={SortType.TopYear}>
-          <T i18nKey="year">#</T>
+          { i18n.t('year') }
         </option>
         <option value={SortType.TopAll}>
-          <T i18nKey="all">#</T>
+          { i18n.t('all') }
         </option>
       </select>
     );