[WIP] Resolve "Make every string translatable"

packages/daheim-app-ui/src/components/InvitedToLesson.js

@@ -3,6 +3,7 @@ import {connect} from 'react-redux'
 import FlatButton from 'material-ui/FlatButton'
 import {Howl} from 'howler'
 import Modal from '../Modal'
+import {FormattedMessage} from 'react-intl'
 
 import {join, leave, ready as setReady} from '../actions/live'
 import ProfilePage from './profile/PublicProfilePage'
@@ -13,7 +14,8 @@ class InvitedToLessonDialog extends Component {
     lesson: PropTypes.object.isRequired,
     join: PropTypes.func.isRequired,
     leave: PropTypes.func.isRequired,
-    setReady: PropTypes.func.isRequired
+    setReady: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
   }
 
   componentDidMount () {
@@ -58,13 +60,13 @@ class InvitedToLessonDialog extends Component {
       <FlatButton
         key='cancel'
         className='cancel'
-        label='Abbrechen'
+        label={this.props.intl.formatMessage({id: 'invitedToLesson.btnCancel'})}
         onTouchTap={this.handleRequestClose}
       />,
       <FlatButton
         key='start'
         className='start'
-        label={'LOS GEHT\'S'}
+        label={this.props.intl.formatMessage({id: 'invitedToLesson.btnStart'})}
         primary
         onTouchTap={this.handleAccept}
         style={{color: 'white', backgroundColor: '#E61C78', fontWeight: 'bold'}}
@@ -76,7 +78,7 @@ class InvitedToLessonDialog extends Component {
         <div className='invitedToLessonDialog' style={{borderBottom: 'solid 1px rgb(224, 224, 224)', paddingBottom: 8}}>
           {actions}
         </div>
-        <h2>Neues Gespräch</h2>
+        <h2><FormattedMessage id='invitedToLesson.newConversation' /></h2>
         <ProfilePage params={{userId: this.props.lesson.teacherId}} reviewEditable={false} />
       </Modal>
     )

packages/daheim-app-ui/src/components/ProficiencyRating.js

@@ -10,6 +10,7 @@ export default class ProficiencyRating extends Component {
     values: PropTypes.object,
     style: PropTypes.object,
     value: PropTypes.string
+    // TODO , intl: PropTypes.object.isRequired
   }
 
   static defaultProps = {
@@ -19,6 +20,13 @@ export default class ProficiencyRating extends Component {
       3: 'Fähig, ein fließendes Gespräch über einfache Themen zu führen',
       4: 'Fähig, ein Gespräch über komplexe Themen zu führen',
       5: 'Deutsch-Profi'
+      /* TODO ..ok, ok, runtime..
+      1: this.props.intl.formatMessage({id: 'proficiencyRating.level1'}),
+      2: this.props.intl.formatMessage({id: 'proficiencyRating.level2'}),
+      3: this.props.intl.formatMessage({id: 'proficiencyRating.level3'}),
+      4: this.props.intl.formatMessage({id: 'proficiencyRating.level4'}),
+      5: this.props.intl.formatMessage({id: 'proficiencyRating.level5'})
+      */
     }
   }
 

packages/daheim-app-ui/src/components/ReadyUsers.js

@@ -1,6 +1,7 @@
 import React, {PropTypes, Component} from 'react'
 import {connect} from 'react-redux'
 import PureRenderMixin from 'react-addons-pure-render-mixin'
+import {FormattedMessage} from 'react-intl'
 
 import StartLesson from './StartLesson'
 import {startLesson} from '../actions/live'
@@ -31,8 +32,10 @@ class ReadyUser extends Component {
         <img className={style.picture} src={picture} />
         <div className={style.content}>
           <div className={style.name}>{name}</div>
-          <div className={style.level}>Stufe: {germanLevel} / 5</div>
-          <div className={style.topic}><a href='#'>Los geht's</a></div>
+          <div className={style.level}>
+            <FormattedMessage id='readyUsers.level' values={{level: germanLevel}} />
+          </div>
+          <div className={style.topic}><a href='#'><FormattedMessage id='readyUsers.letsGo' /></a></div>
         </div>
       </div>
     )
@@ -88,9 +91,9 @@ class ReadyUsers extends Component {
 
     return (
       <div>
-        <h2>SchülerInnen Online</h2>
+        <h2><FormattedMessage id='readyUsers.studentsOnline' /></h2>
         {readyUsers.length === 0 ? (
-          <div>Es tut uns leid, leider sind gerade keine passenden Gesprächspartner online.</div>
+          <div><FormattedMessage id='readyUsers.studentsOffline' /></div>
         ) : (
           readyUsers.map(({id}) => {
             const user = users[id]

packages/daheim-app-ui/src/components/StartLesson.js

@@ -1,5 +1,6 @@
 import React, {Component, PropTypes} from 'react'
 import {connect} from 'react-redux'
+import {FormattedMessage} from 'react-intl'
 import FlatButton from 'material-ui/FlatButton'
 import CircularProgress from 'material-ui/CircularProgress'
 import Modal from '../Modal'
@@ -20,12 +21,12 @@ class LessonGuardRaw extends Component {
       return (
         <div style={{display: 'flex', alignItems: 'center', marginTop: 20, marginLeft: 16}}>
           <CircularProgress />
-          <div style={{margin: 10, fontWeight: 700}}>Warten auf Gesprächspartner</div>
+          <div style={{margin: 10, fontWeight: 700}}><FormattedMessage id='startLesson.waitForPartner' /></div>
         </div>
       )
     } else {
       return (
-        <div style={{background: '#FA8072', border: 'solid 1px darkred', padding: 16, color: 'black', margin: '10px 0', borderRadius: 2}}>Student did not accept lesson</div>
+        <div style={{background: '#FA8072', border: 'solid 1px darkred', padding: 16, color: 'black', margin: '10px 0', borderRadius: 2}}><FormattedMessage id='startLesson.studenDidNotAcceptLesson' /></div>
       )
     }
   }
@@ -42,7 +43,8 @@ class StartLesson extends Component {
     user: PropTypes.object.isRequired,
     onRequestClose: PropTypes.func.isRequired,
     startLesson: PropTypes.func.isRequired,
-    leaveIfNotStarted: PropTypes.func.isRequired
+    leaveIfNotStarted: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
   }
 
   state = {
@@ -86,20 +88,20 @@ class StartLesson extends Component {
   }
 
   render () {
-    const {user, onRequestClose} = this.props
+    const {user, intl, onRequestClose} = this.props
     const {startLessonPromise, error, lessonId} = this.state
 
     const actions = [
       <FlatButton
         key='cancel'
         className='cancel'
-        label='Abbrechen'
+        label={intl.formatMessage({id: 'startLesson.btnCancel'})}
         onTouchTap={onRequestClose}
       />,
       <FlatButton
         key='start'
         className='start'
-        label={'los geht\'s'}
+        label={intl.formatMessage({id: 'startLesson.btnGo'})}
         primary
         disabled={!!(startLessonPromise || lessonId)}
         onTouchTap={this.handleStartLesson}
@@ -121,7 +123,7 @@ class StartLesson extends Component {
         {startLessonPromise ? (
           <div style={{display: 'flex', alignItems: 'center'}}>
             <CircularProgress />
-            <div style={{margin: 10, fontWeight: 700}}>Läuft...</div>
+            <div style={{margin: 10, fontWeight: 700}}><FormattedMessage id='startLesson.running' /></div>
           </div>
         ) : undefined}
 

packages/daheim-app-ui/src/components/TalkAbout.js

@@ -1,40 +1,41 @@
 import React from 'react'
+import {FormattedMessage} from 'react-intl'
 
 import Weather from './Weather'
 
 export default class TalkAbout extends React.Component {
   render () {
     return (
       <div {...this.props}>
-        <h2>Über was kann man reden?</h2>
+        <h2><FormattedMessage id='talkAbout.whatToTalkAbout' /></h2>
         <div style={{display: 'flex', flexWrap: 'wrap'}}>
           <div style={{flex: '0 0 200px', margin: 8}}>
-            <h3>...das Alphabet</h3>
+            <h3><FormattedMessage id='talkAbout.alphabet' /></h3>
             <div style={{fontSize: 30, fontFamily: 'monospace'}}>A B C D E<br />F G H I J<br />K L M N O<br />P Q R S T<br />U V W X Y<br />Z Ä Ö Ü ß</div>
           </div>
           <div style={{flex: '1 1 500px', margin: 8}}>
-            <h3>...das Wetter</h3>
+            <h3><FormattedMessage id='talkAbout.weather' /></h3>
             <Weather />
           </div>
           <div style={{flex: '1 1 200px', margin: 8}}>
-            <h3>...Deutschland</h3>
+            <h3><FormattedMessage id='talkAbout.germany' /></h3>
             <div>
-              <li>die Bundesländer</li>
-              <li>Hauptstadt Berlin</li>
+              <li><FormattedMessage id='talkAbout.federalStates' /></li>
+              <li><FormattedMessage id='talkAbout.capitalCityBerlin' /></li>
             </div>
           </div>
           <div style={{flex: '1 1 200px', margin: 8}}>
-            <h3>...wichtige Dinge</h3>
+            <h3><FormattedMessage id='talkAbout.importantStuff' /></h3>
             <div>
-              <li><a href='http://www.fluechtlinge-willkommen.de/' target='_blank'>Flüchtlinge Willkommen</a></li>
+              <li><a href='http://www.fluechtlinge-willkommen.de/' target='_blank'><FormattedMessage id='talkAbout.refugeesWelcome' /></a></li>
             </div>
           </div>
           <div style={{flex: '1 1 200px', margin: 8}}>
-            <h3>...Essen und Trinken</h3>
+            <h3><FormattedMessage id='talkAbout.eatAndDrink' /></h3>
             <div>
-              <li>Brot</li>
-              <li>Wurst</li>
-              <li>Apfel</li>
+              <li><FormattedMessage id='talkAbout.bread' /></li>
+              <li><FormattedMessage id='talkAbout.sausage' /></li>
+              <li><FormattedMessage id='talkAbout.apple' /></li>
             </div>
           </div>
         </div>

packages/daheim-app-ui/src/components/lesson/ClosedLesson.js

@@ -1,6 +1,8 @@
 import React, {PropTypes, Component} from 'react'
 import {connect} from 'react-redux'
 import {push} from 'react-router-redux'
+import {FormattedMessage} from 'react-intl'
+
 import PublicProfilePage from '../profile/PublicProfilePage'
 
 class ClosedLesson extends Component {
@@ -13,9 +15,9 @@ class ClosedLesson extends Component {
     const {closeReason, partnerId} = this.props
     return (
       <div style={{margin: 16}}>
-        <h1>Das Gespräch wurde beendet</h1>
+        <h1><FormattedMessage id='closedLesson.conversationEnded' /></h1>
         {partnerId ? <PublicProfilePage params={{userId: partnerId}} /> : null}
-        <p style={{color: 'rgba(0, 0, 0, 0)'}}>Reason: {closeReason}</p>
+        <p style={{color: 'rgba(0, 0, 0, 0)'}}><FormattedMessage id='closedLesson.reason' />: {closeReason}</p>
       </div>
     )
   }

packages/daheim-app-ui/src/components/profile/EditProfilePage.js

@@ -47,6 +47,30 @@ class LanguagesRaw extends Component {
     'Farsi', 'Französisch', 'Griechisch', 'Hindi', 'Italienisch', 'Kroatisch', 'Kurdisch',
     'Paschtu', 'Polnisch', 'Portugiesisch', 'Rumänisch', 'Russisch', 'Spanisch', 'Serbisch',
     'Türkisch']
+  /* TODO
+  static suggestions = [
+    this.props.intl.formatMessage({id: 'editProfile.lang.ar'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.sq'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.hy'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.zh'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.prs'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.en'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.fa'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.fr'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.gr'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.hi'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.it'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.hr'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.ku'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.ps'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.pl'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.pt'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.ro'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.ru'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.es'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.sr'}),
+    this.props.intl.formatMessage({id: 'editProfile.lang.tr'})]
+  */
 
   shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate
 
@@ -105,16 +129,39 @@ class LanguagesRaw extends Component {
 const Languages = injectIntl(LanguagesRaw)
 
 class Topics extends React.Component {
+// TODO class TopicsRaw extends React.Component {
 
   static propTypes = {
     topics: PropTypes.object.isRequired,
     introduction: PropTypes.string.isRequired,
     onChange: PropTypes.func
+    // TODO , intl: PropTypes.object.isRequired
   }
 
   static suggestions = ['Schule / Ausbildung', 'Fotographie', 'Computerspiele', 'Sprachen', 'Kreatives', 'Technik',
     'Essen & Trinken', 'Kunst & Kultur', 'Sport', 'Familie', 'Bücher', 'Natur', 'Prominente',
     'Musik', 'Reisen', 'Politik', 'Filme & Serien', 'Typisch Deutsch']
+  /* TODO
+  static suggestions = [
+    this.props.intl.formatMessage({id: 'editProfile.topic.education'}),
+    this.props.intl.formatMessage({id: 'editProfile.topic.photography'}),
+    this.props.intl.formatMessage({id: 'editProfile.topic.gaming'}),
+    this.props.intl.formatMessage({id: 'editProfile.topic.languages'}),
+    this.props.intl.formatMessage({id: 'editProfile.topic.creative'}),
+    this.props.intl.formatMessage({id: 'editProfile.topic.tech'}),
+    this.props.intl.formatMessage({id: 'editProfile.topic.food'}),
+    this.props.intl.formatMessage({id: 'editProfile.topic.artAndCulture'}),
+    this.props.intl.formatMessage({id: 'editProfile.topic.sports'}),
+    this.props.intl.formatMessage({id: 'editProfile.topic.family'}),
+    this.props.intl.formatMessage({id: 'editProfile.topic.literature'}),
+    this.props.intl.formatMessage({id: 'editProfile.topic.nature'}),
+    this.props.intl.formatMessage({id: 'editProfile.topic.celebrities'}),
+    this.props.intl.formatMessage({id: 'editProfile.topic.music'}),
+    this.props.intl.formatMessage({id: 'editProfile.topic.travelling'}),
+    this.props.intl.formatMessage({id: 'editProfile.topic.politics'}),
+    this.props.intl.formatMessage({id: 'editProfile.topic.movies'}),
+    this.props.intl.formatMessage({id: 'editProfile.topic.germanisms'})]
+  */
 
   shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate
 
@@ -132,6 +179,7 @@ class Topics extends React.Component {
 
     const leftovers = {...topics}
     Topics.suggestions.forEach((suggestion) => delete leftovers[suggestion])
+    // TODO TopicsRaw.suggestions.forEach((suggestion) => delete leftovers[suggestion])
 
     return (
       <div style={{display: 'flex', flexWrap: 'wrap', marginTop: 20}}>
@@ -142,6 +190,7 @@ class Topics extends React.Component {
           <div style={{fontWeight: 700, fontSize: 14}}><FormattedMessage id='editProfile.likeToTalkAbout' /></div>
           <div style={{display: 'flex', flexWrap: 'wrap', marginTop: 8}}>
             {[...Topics.suggestions, ...Object.keys(leftovers)].map((topic) =>
+            // TODO {[...TopicsRaw.suggestions, ...Object.keys(leftovers)].map((topic) =>
               <div key={topic} style={{flex: '0 0 250px', margin: '4px 0'}}><ValuedCheckbox values={topics} selector={topic} onCheck={this.handleCheck} /></div>)}
           </div>
 
@@ -154,6 +203,7 @@ class Topics extends React.Component {
     )
   }
 }
+// TODO const Topics = injectIntl(TopicsRaw)
 
 class ValuedCheckbox extends React.Component {
 

packages/daheim-app-ui/src/components/profile/SendReview.js

@@ -1,13 +1,15 @@
 import React, {PropTypes, Component} from 'react'
 import ProficiencyRating from '../ProficiencyRating'
 import RaisedButton from 'material-ui/RaisedButton'
+import {FormattedMessage} from 'react-intl'
 
 export default class SendReview extends Component {
 
   static propTypes = {
     user: PropTypes.object.isRequired,
     onRequestClose: PropTypes.func,
-    sendReview: PropTypes.func.isRequired
+    sendReview: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
   }
 
   constructor (props) {
@@ -53,10 +55,11 @@ export default class SendReview extends Component {
 
     return (
       <form>
-        <div><textarea placeholder={`Bitte schreib ein Paar Worte über ${name}!`} style={{width: '100%', height: 100, borderRadius: 4, fontSize: 14, padding: 6, borderColor: '#AAA', marginTop: 2}} value={text} onChange={this.handleTextChange} /></div>
-        <div style={{marginBottom: 8}}>Deutschkenntnis:</div>
+        <div><textarea placeholder={this.props.intl.formatMessage({id: 'sendReview.pleaseDropAFewLines', values: name})}
+          style={{width: '100%', height: 100, borderRadius: 4, fontSize: 14, padding: 6, borderColor: '#AAA', marginTop: 2}} value={text} onChange={this.handleTextChange} /></div>
+        <div style={{marginBottom: 8}}><FormattedMessage id='sendReview.germanLanguageKnowlegde' />:</div>
         <div style={{marginBottom: 8}}><ProficiencyRating value={String(rating)} onChange={this.handleRatingChange} /></div>
-        <div><RaisedButton label='Speichern' primary onClick={this.handleSend} /></div>
+        <div><RaisedButton label={this.props.intl.formatMessage({id: 'sendReview.save'})} primary onClick={this.handleSend} /></div>
       </form>
     )
   }